fix: highlight active Docs/Blog links in top nav

.github/workflows/squad-ci.yml

@@ -23,6 +23,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install docs dependencies
+        run: npm ci
+        working-directory: docs
+
       - name: Install Playwright browsers
         run: npx playwright install chromium --with-deps
 

docs/src/components/Footer.astro

@@ -1,4 +1,6 @@
 ---
+import { Image } from 'astro:assets';
+import squadLogo from '../assets/images/squad-logo.png';
 const base = import.meta.env.BASE_URL;
 ---
 
@@ -7,7 +9,7 @@ const base = import.meta.env.BASE_URL;
     <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
       <div>
         <div class="flex items-center gap-2 mb-3">
-          <img src={`${base}images/squad-logo.png`} alt="Squad" class="h-6 w-6" />
+          <Image src={squadLogo} alt="Squad" class="h-6 w-6" />
           <span class="font-semibold text-surface-900 dark:text-white">Squad</span>
         </div>
         <p class="text-base text-surface-500 dark:text-surface-400">

docs/src/components/Header.astro

@@ -1,7 +1,18 @@
 ---
+import { Image } from 'astro:assets';
 import ThemeToggle from './ThemeToggle.astro';
 import Search from './Search.astro';
+import squadLogo from '../assets/images/squad-logo.png';
 const base = import.meta.env.BASE_URL;
+const pathname = Astro.url.pathname;
+const isDocsActive = pathname.startsWith(`${base}docs/`);
+const isBlogActive = pathname.startsWith(`${base}blog/`);
+
+const navBase = "px-3 py-1.5 rounded-md transition-colors";
+const navInactive = "text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800";
+const navActive = "text-squad-700 dark:text-squad-300 bg-squad-50 dark:bg-squad-900/30 font-medium";
+
+const mobileNavBase = "block px-3 py-2 rounded-md text-base transition-colors";
 ---
 
 <header class="sticky top-0 z-40 w-full border-b border-surface-200 dark:border-surface-800 bg-white/80 dark:bg-surface-950/80 backdrop-blur-lg">
@@ -30,15 +41,15 @@ const base = import.meta.env.BASE_URL;
 
     <!-- Logo -->
     <a href={base} class="flex items-center gap-2 font-semibold text-surface-900 dark:text-white mr-6">
-      <img src={`${base}images/squad-logo.png`} alt="Squad" class="h-7 w-7" />
+      <Image src={squadLogo} alt="Squad" class="h-7 w-7" />
       <span class="text-lg">Squad</span>
     </a>
 
     <!-- Top nav links (desktop) -->
     <nav class="hidden md:flex items-center gap-1 text-base">
-      <a href={`${base}docs/get-started/installation/`} class="px-3 py-1.5 rounded-md text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">Docs</a>
-      <a href={`${base}blog/`} class="px-3 py-1.5 rounded-md text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">Blog</a>
-      <a href="https://github.com/bradygaster/squad" class="px-3 py-1.5 rounded-md text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors" target="_blank" rel="noopener">GitHub</a>
+      <a href={`${base}docs/get-started/installation/`} class:list={[navBase, isDocsActive ? navActive : navInactive]}>Docs</a>
+      <a href={`${base}blog/`} class:list={[navBase, isBlogActive ? navActive : navInactive]}>Blog</a>
+      <a href="https://github.com/bradygaster/squad" class:list={[navBase, navInactive]} target="_blank" rel="noopener">GitHub</a>
     </nav>
 
     <!-- Right side -->
@@ -62,9 +73,9 @@ const base = import.meta.env.BASE_URL;
   <!-- Mobile nav dropdown -->
   <nav id="mobile-nav" class="hidden md:hidden border-t border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-950">
     <div class="px-4 py-3 space-y-1">
-      <a href={`${base}docs/get-started/installation/`} class="block px-3 py-2 rounded-md text-base text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">Docs</a>
-      <a href={`${base}blog/`} class="block px-3 py-2 rounded-md text-base text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">Blog</a>
-      <a href="https://github.com/bradygaster/squad" class="block px-3 py-2 rounded-md text-base text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors" target="_blank" rel="noopener">GitHub</a>
+      <a href={`${base}docs/get-started/installation/`} class:list={[mobileNavBase, isDocsActive ? navActive : navInactive]}>Docs</a>
+      <a href={`${base}blog/`} class:list={[mobileNavBase, isBlogActive ? navActive : navInactive]}>Blog</a>
+      <a href="https://github.com/bradygaster/squad" class:list={[mobileNavBase, navInactive]} target="_blank" rel="noopener">GitHub</a>
     </div>
   </nav>
 </header>

docs/src/layouts/BaseLayout.astro

@@ -4,8 +4,11 @@ interface Props {
   description?: string;
 }
 
+import squadLogo from '../assets/images/squad-logo.png';
 const { title, description = 'Squad — Your AI Development Team. Describe what you\'re building. Get a team of specialists that live in your repo.' } = Astro.props;
-const base = import.meta.env.BASE_URL;
+const fullTitle = `${title} — Squad Docs`;
+const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined;
+const ogImage = Astro.site ? new URL(squadLogo.src, Astro.site).href : squadLogo.src;
 ---
 
 <!doctype html>
@@ -15,8 +18,21 @@ const base = import.meta.env.BASE_URL;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
     <meta name="generator" content={Astro.generator} />
-    <link rel="icon" type="image/png" href={`${base}images/squad-logo.png`} />
-    <title>{title} — Squad Docs</title>
+    <link rel="icon" type="image/png" href={squadLogo.src} />
+    <title>{fullTitle}</title>
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={ogImage} />
+    {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={fullTitle} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImage} />
     <script is:inline>
       const theme = localStorage.getItem('theme');
       if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {