From 16a5c699102b5fce5e981e1b55b1a785f77b1df8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 31 Oct 2026 11:05:08 +0800
Subject: [PATCH] feat: add npm link next to GitHub in the site header

Adds an npm button beside the GitHub button and an npm entry in the mobile menu, both from SITE.npm. The header now collapses at 58rem instead of 52rem so the extra button does not overflow just above the old breakpoint.
---
 .../src/components/landing/SiteHeader.astro   | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/landing/SiteHeader.astro b/apps/web/src/components/landing/SiteHeader.astro
index a3b47ab..7be07a4 100644
--- a/apps/web/src/components/landing/SiteHeader.astro
+++ b/apps/web/src/components/landing/SiteHeader.astro
@@ -1,4 +1,6 @@
 ---
+import { SITE } from "../../lib/site";
+
 const links = [
   { href: "/#agents", label: "Agents" },
   { href: "/#mcp", label: "MCP" },
@@ -17,15 +19,24 @@ const links = [
 
     <nav class="site-header__nav" id="site-nav" aria-label="Primary">
       {links.map((link) => <a href={link.href}>{link.label}</a>)}
-      <a class="site-header__nav-cta" href="https://github.com/itsflaid/devmap">GitHub</a>
+      <a class="site-header__nav-cta" href={SITE.github}>GitHub</a>
+      <a class="site-header__nav-cta" href={SITE.npm}>npm</a>
     </nav>
 
-    <a class="site-header__gh btn btn--ghost" href="https://github.com/itsflaid/devmap">
-      <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
-        <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.48-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.71 1.22 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.08-1.87 3.76-3.65 3.96.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
-      </svg>
-      GitHub
-    </a>
+    <div class="site-header__gh">
+      <a class="btn btn--ghost" href={SITE.github}>
+        <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
+          <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.48-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.71 1.22 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.08-1.87 3.76-3.65 3.96.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+        </svg>
+        GitHub
+      </a>
+      <a class="btn btn--ghost" href={SITE.npm}>
+        <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
+          <path fill-rule="evenodd" d="M1 1h14v14H1V1Zm2.5 11.5H8v-7h2.5v7h2v-9h-9v9Z" />
+        </svg>
+        npm
+      </a>
+    </div>
 
     <button
       type="button"
@@ -74,7 +85,7 @@ const links = [
     });
 
     // Leaving the narrow layout while the menu is open would strand state.
-    window.matchMedia("(min-width: 52.01rem)").addEventListener("change", (event) => {
+    window.matchMedia("(min-width: 58.01rem)").addEventListener("change", (event) => {
       if (event.matches) setMenu(false);
     });
   }
@@ -149,6 +160,11 @@ const links = [
   }
 
   .site-header__gh {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .site-header__gh .btn {
     min-height: 2.5rem;
     padding: 0 1.1rem;
   }
@@ -158,7 +174,7 @@ const links = [
   }
 
   /* Narrow screens: the pill becomes a panel under the bar. */
-  @media (max-width: 52rem) {
+  @media (max-width: 58rem) {
     .site-header__gh {
       display: none;
     }