fix(website): nav contrast, accessibility, and colour consistency

CHANGELOG.md

@@ -27,7 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- **Awesome GitHub Site: Complete Astro Rebuild** — Rebuilt the Awesome GitHub site from a React/Babel prototype into a production-ready Astro 5 static site. Includes: a fully-typed TypeScript data layer (`catalogue.ts`, `learn.ts`, `glossary.ts`) porting 110+ catalogue items across 8 categories; Svelte `SearchPalette` component with Cmd/Ctrl+K activation; 252 statically-generated pages (catalogue, learn tracks, glossary, cookbook, getting-started, why); detail pages with Install-in-VS-Code, copy-URL, copy-file, and View-on-GitHub action buttons; mobile hamburger navigation with animated X icon and keyboard Escape support; expanded footer with brand and navigation columns; and a `why.astro` editorial page.
+- **Awesome GitHub Site: Complete Astro Rebuild** — Rebuilt the Awesome GitHub site from a React/Babel prototype into a production-ready Astro 5 static site. Includes: a fully-typed TypeScript data layer (`catalogue.ts`, `learn.ts`, `glossary.ts`) porting 110+ catalogue items across 8 categories; Svelte `SearchPalette` component with Cmd/Ctrl+K activation; 252 statically-generated pages (catalogue, learn tracks, glossary, cookbook, getting-started, why); detail pages with Install-in-VS-Code, copy-URL, copy-file, and View-on-GitHub action buttons; mobile hamburger navigation with animated X icon and keyboard Escape support; expanded footer with brand and navigation columns; and a `why.astro` editorial page. ([#841](https://github.com/lightspeedwp/.github/pull/841), [#842](https://github.com/lightspeedwp/.github/issues/842))
 
 - **LightSpeedWP Agency Homepage: Complete Component System** — Built a production-ready homepage for the LightSpeedWP Agency website with 9 modular Astro components (Nav, HeroPlanner, TrustStrip, SolutionPaths, WhyLightSpeed, FAQ, FinalCTA, Footer, ContactOverlay). Features include sticky navigation with scroll detection, mobile drawer with theme toggle, AI project planner with form validation, responsive stats grid, 4 solution path cards with highlighting, single-open accordion FAQ with 7 questions, contact modal with success state, and comprehensive design system with light/dark mode support across 9 responsive breakpoints. All components include WCAG 2.2 AA accessibility attributes, semantic HTML5, and CSS variable theming for consistent branding.
 - **Awesome GitHub Navigation Redesign: Mega Menu & Accessibility Enhancements** — Redesigned header navigation with single "Browse" mega menu organizing 22 resources across 4 logical sections (Catalogues, More, Cook & Learn, Resources). Implemented comprehensive accessibility improvements including keyboard navigation (Tab+Enter/Space activation), proper ARIA attributes, semantic button elements replacing non-focusable anchors, centered menu positioning to prevent viewport clipping at 1025-1180px widths, and fixed drawer overflow for smooth scrolling. All changes comply with WCAG 2.2 AA+ contrast ratios in both light and dark modes.

website/src/components/AwesomeGithub/AwesomeGithubNav.astro

@@ -122,15 +122,18 @@ const isActive = (linkPath: string, exact: boolean): boolean => {
     justify-content: space-between;
     height: 72px;
     padding: 0 var(--gutter);
-    background: var(--bg);
+    background: rgba(255, 255, 255, 0.97);
     border-bottom: 1px solid var(--border);
-    backdrop-filter: blur(12px);
-    background: rgba(255, 255, 255, 0.6);
-    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow: 0 1px 3px rgba(9, 9, 9, 0.06);
+    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
   }
 
   [data-theme="dark"] .ag-nav {
-    background: rgba(15, 16, 20, 0.8);
+    background: rgba(15, 16, 20, 0.97);
+    border-bottom-color: rgba(255, 255, 255, 0.06);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
   }
 
   .ag-nav-brand {
@@ -186,14 +189,21 @@ const isActive = (linkPath: string, exact: boolean): boolean => {
     transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
   }
 
+  /* In light mode, boost contrast from slate-500 (#565656) to slate-700 (#404040) */
+  :global([data-theme="light"]) .ag-nav-link,
+  :root:not([data-theme]) .ag-nav-link {
+    color: var(--c-slate-700, #404040);
+  }
+
   .ag-nav-link:hover {
     color: var(--fg-1);
     border-bottom-color: var(--accent);
   }
 
   .ag-nav-link[aria-current="page"] {
-    color: var(--fg-1);
+    color: var(--accent);
     border-bottom-color: var(--accent);
+    font-weight: var(--weight-semibold);
   }
 
   .ag-nav-actions {

website/src/components/AwesomeGithub/SearchPalette.svelte

@@ -17,6 +17,7 @@
   let selected = 0;
   let inputEl: HTMLInputElement;
   let dialogEl: HTMLElement;
+  let previousFocus: HTMLElement | null = null;
 
   $: filtered = query.trim().length < 1
     ? items.slice(0, 8)
@@ -33,6 +34,7 @@
   $: if (filtered) selected = 0;
 
   function openPalette() {
+    previousFocus = document.activeElement as HTMLElement;
     open = true;
     query = "";
     selected = 0;
@@ -42,6 +44,8 @@
   function closePalette() {
     open = false;
     query = "";
+    setTimeout(() => previousFocus?.focus(), 50);
+    previousFocus = null;
   }
 
   function navigate(item: typeof items[0]) {
@@ -60,6 +64,20 @@
     if (e.key === "ArrowDown") { e.preventDefault(); selected = Math.min(selected + 1, filtered.length - 1); }
     if (e.key === "ArrowUp") { e.preventDefault(); selected = Math.max(selected - 1, 0); }
     if (e.key === "Enter" && filtered[selected]) navigate(filtered[selected]);
+    if (e.key === "Tab" && dialogEl) {
+      const focusable = dialogEl.querySelectorAll<HTMLElement>('input, button, [tabindex="0"]');
+      if (focusable.length > 0) {
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
   }
 
   function handleBackdropClick(e: MouseEvent) {
@@ -109,7 +127,7 @@
           class="sp-input"
           type="text"
           role="combobox"
-          aria-expanded="true"
+          aria-expanded={filtered.length > 0}
           aria-haspopup="listbox"
           placeholder="Search agents, instructions, prompts…"
           autocomplete="off"

website/src/layouts/AwesomeGithubLayout.astro

@@ -56,9 +56,10 @@ const themeInitScript = `
     <script is:inline set:html={themeInitScript}></script>
   </head>
   <body class="awesome-github">
+    <a href="#main-content" class="ag-skip-link">Skip to main content</a>
     <AwesomeGithubNav base={base} pathname={pathname} />
     <SearchPalette client:only="svelte" items={searchItems} base={base} />
-    <main>
+    <main id="main-content" tabindex="-1">
       <slot />
     </main>
     <AwesomeGithubFooter />
@@ -81,13 +82,12 @@ const themeInitScript = `
         });
       }
 
-      // Wire nav search button to open search palette
-      const searchBtn = document.querySelector("[data-search-open]");
-      if (searchBtn) {
-        searchBtn.addEventListener("click", () => {
+      // Wire nav search button(s) to open search palette via event delegation
+      document.addEventListener("click", (e) => {
+        if (e.target instanceof Element && e.target.closest("[data-search-open]")) {
           document.dispatchEvent(new CustomEvent("search-palette-open"));
-        });
-      }
+        }
+      });
     </script>
   </body>
 </html>
@@ -109,4 +109,26 @@ const themeInitScript = `
     flex-direction: column;
     min-height: 100vh;
   }
+
+  .ag-skip-link {
+    position: absolute;
+    top: -100%;
+    left: var(--gutter, 32px);
+    z-index: 9999;
+    padding: var(--space-3, 12px) var(--space-6, 24px);
+    background: var(--accent, #1E6AFF);
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: var(--font-body, system-ui, sans-serif);
+    text-decoration: none;
+    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
+    transition: top 0.1s;
+  }
+
+  .ag-skip-link:focus {
+    top: 0;
+    outline: 2px solid #fff;
+    outline-offset: -3px;
+  }
 </style>

website/src/lib/glossary.ts

@@ -140,7 +140,7 @@ export const REFERENCE_GROUPS: ReferenceGroup[] = [
     blurb: "Templates and forms that capture structured data from contributors.",
     items: [
       { p: ".github/ISSUE_TEMPLATE", d: "Issue template directory", tree: true },
-      { p: ".github/PULL_REQUEST_TEMPLATE.md", d: "PR template" },
+      { p: ".github/pull_request_template.md", d: "PR template" },
       { p: ".github/DISCUSSION_TEMPLATE", d: "Discussion templates", tree: true },
     ],
   },

website/src/lib/resources.ts

@@ -1,5 +1,5 @@
 // Resource utilities for the Awesome GitHub website
-import { getItemsByCategory, getItemBySlug } from "./catalogue";
+import { getItemsByCategory, getItemBySlug, type CatalogueItem } from "./catalogue";
 
 export const REPO_INFO = {
   owner: "lightspeedwp",
@@ -20,6 +20,7 @@ export type ResourceType =
   | "hooks"
   | "workflows"
   | "prompts"
+  | "plugins"
   | "tools";
 
 export interface ResourceFrontmatter {
@@ -63,7 +64,7 @@ export function getAvailableResourceTypes(): ResourceTypeInfo[] {
   }));
 }
 
-function catalogueItemToResource(catalogueItem: { id: string; cat: string; slug: string; name: string; description: string; type: string; tags: string[]; version: string; updated: string; applyTo?: string; path?: string; tree: boolean; body?: string | null; run?: string | null; validates?: string | null; dest?: string | null; duration?: string | null; action?: string | null }): Resource {
+function catalogueItemToResource(catalogueItem: CatalogueItem): Resource {
   return {
     slug: catalogueItem.slug,
     title: catalogueItem.name,
@@ -146,6 +147,7 @@ export function getAvailableActions(type: string): ResourceAction[] {
     hooks: ["copy", "download", "github"],
     workflows: ["copy", "github"],
     prompts: ["copy", "github"],
+    plugins: ["copy", "download", "github", "vscode"],
     tools: ["copy", "download", "github"],
   };
 

website/src/pages/agents/[slug].astro

@@ -117,7 +117,7 @@ if (!agent) {
           <a href="/talk/slides/14/">Slide 14: Skill Layer</a> — How agents use skills
         </li>
         <li>
-          <a href="/getting-started/implementation-roadmap/">Implementation Roadmap</a> — Adoption
+          <a href="/getting-started/">Implementation Roadmap</a> — Adoption
           sequence
         </li>
         <li>

website/src/pages/agents/index.astro

@@ -17,7 +17,7 @@ const agents = getAllAgents();
     </p>
     <div class="hero-actions">
       <a class="button primary" href="/talk/slides/13/">See agents in Slide 13</a>
-      <a class="button secondary" href="/getting-started/why-github-matters/">Why agents matter</a>
+      <a class="button secondary" href="/getting-started/">Why agents matter</a>
     </div>
   </section>
 
@@ -88,7 +88,7 @@ const agents = getAllAgents();
           <a href="/talk/slides/14/">Slide 14: Skill Layer</a> — How agents use skills
         </li>
         <li>
-          <a href="/getting-started/implementation-roadmap/">Implementation Roadmap</a> — 30/60/90
+          <a href="/getting-started/">Implementation Roadmap</a> — 30/60/90
           adoption plan
         </li>
         <li>

website/src/pages/c/[type]/[slug].astro

@@ -249,7 +249,11 @@ const canInstall = installable(item);
     const path = toggle.dataset.path || "";
     const cat = toggle.dataset.cat || "";
     const isTree = toggle.dataset.tree === "true";
-    let branch = localStorage.getItem("github_branch") || "main";
+    let branch = "main";
+    try {
+      const saved = localStorage.getItem("github_branch");
+      branch = saved === "main" || saved === "develop" ? saved : "main";
+    } catch { /* localStorage blocked in private browsing */ }
 
     function applyBranch(b: string) {
       const urls = computeUrls(path, cat, isTree, b);
@@ -267,7 +271,9 @@ const canInstall = installable(item);
 
     toggle.addEventListener("click", () => {
       branch = branch === "main" ? "develop" : "main";
-      localStorage.setItem("github_branch", branch);
+      try {
+        localStorage.setItem("github_branch", branch);
+      } catch { /* localStorage blocked in private browsing */ }
       applyBranch(branch);
     });
   })();
@@ -405,7 +411,7 @@ const canInstall = installable(item);
   }
 
   .ag-content-section {
-    padding: var(--space-40) var(--gutter);
+    padding: var(--section-y) var(--gutter);
     background: var(--bg);
   }
 
@@ -500,10 +506,11 @@ const canInstall = installable(item);
   .ag-tag {
     display: inline-block;
     padding: var(--space-2) var(--space-3);
-    background: rgba(123, 231, 255, 0.1);
-    color: var(--c-light-blue);
+    background: var(--accent-soft);
+    color: var(--accent);
     border-radius: var(--radius-md);
     font-size: var(--fs-body-sm);
+    font-weight: var(--weight-medium);
   }
 
   .ag-tools-list,
@@ -553,7 +560,7 @@ const canInstall = installable(item);
   }
 
   .ag-section-alt {
-    padding: var(--space-40) var(--gutter);
+    padding: var(--section-y) var(--gutter);
     background: var(--bg-alt);
   }
 

website/src/pages/c/[type]/index.astro

@@ -40,7 +40,7 @@ export async function getStaticPaths() {
   <section class="ag-breadcrumb-section">
     <div class="ag-container">
       <nav class="ag-breadcrumb" aria-label="Breadcrumb">
-        <a href={`${base}awesome-github`}>Home</a>
+        <a href={`${base}`}>Home</a>
         <span class="ag-breadcrumb-separator">/</span>
         <span>{currentType.label}</span>
       </nav>
@@ -108,7 +108,7 @@ export async function getStaticPaths() {
           .filter(t => t.type !== type)
           .map((t) => (
             <a href={`${base}c/${t.type}/`} class="ag-type-card">
-              <div class="ag-type-icon">{t.icon}</div>
+              <div class="ag-type-icon" aria-hidden="true">{t.icon}</div>
               <h3 class="ag-type-name">{t.label}</h3>
               <p class="ag-type-count">{t.count} resource{t.count !== 1 ? 's' : ''}</p>
             </a>
@@ -188,7 +188,7 @@ export async function getStaticPaths() {
   }
 
   .ag-resources-section {
-    padding: var(--space-40) var(--gutter);
+    padding: var(--section-y) var(--gutter);
     background: var(--bg);
   }
 
@@ -246,7 +246,7 @@ export async function getStaticPaths() {
 
   .ag-resource-version {
     font-size: var(--fs-body-sm);
-    color: var(--c-light-blue);
+    color: var(--accent);
     font-weight: var(--weight-semibold);
   }
 
@@ -282,9 +282,10 @@ export async function getStaticPaths() {
   .ag-resource-tag {
     font-size: var(--fs-body-sm);
     padding: var(--space-1) var(--space-2);
-    background: rgba(123, 231, 255, 0.1);
-    color: var(--c-light-blue);
+    background: var(--accent-soft);
+    color: var(--accent);
     border-radius: var(--radius-sm);
+    font-weight: var(--weight-medium);
   }
 
   .ag-empty-state {
@@ -294,7 +295,7 @@ export async function getStaticPaths() {
   }
 
   .ag-section-alt {
-    padding: var(--space-40) var(--gutter);
+    padding: var(--section-y) var(--gutter);
     background: var(--bg-alt);
   }
 

website/src/pages/cookbook/[slug].astro

@@ -249,7 +249,7 @@ const githubUrl = `https://github.com/lightspeedwp/.github/blob/develop/${recipe
   }
 
   @media (max-width: 768px) {
-    .recipe-hero { padding: var(--space-16) var(--gutter); margin-top: 72px; }
+    .recipe-hero { padding: var(--space-16) var(--gutter);  }
     .recipe-actions { flex-direction: column; align-items: flex-start; }
   }
 </style>

website/src/pages/cookbook/index.astro

@@ -143,12 +143,13 @@ const kindBadgeColours: Record<string, string> = {
     letter-spacing: 0.05em;
   }
 
-  .kind--playbook { background: rgba(30, 106, 255, 0.12); color: var(--c-brand-blue); }
-  .kind--example  { background: rgba(16, 163, 74, 0.12); color: #16a34a; }
-  .kind--checklist { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
+  .kind--playbook  { background: rgba(30, 106, 255, 0.12); color: var(--c-brand-blue); }
+  .kind--example   { background: rgba(16, 163, 74, 0.12); color: #166534; }
+  .kind--checklist { background: rgba(245, 158, 11, 0.12); color: #92400e; }
 
-  [data-theme="dark"] .kind--playbook { background: rgba(123, 231, 255, 0.12); color: var(--c-light-blue); }
-  [data-theme="dark"] .kind--example  { background: rgba(0, 208, 132, 0.12); color: #00d084; }
+  [data-theme="dark"] .kind--playbook  { background: rgba(123, 231, 255, 0.12); color: var(--c-light-blue); }
+  [data-theme="dark"] .kind--example   { background: rgba(0, 208, 132, 0.12); color: #00d084; }
+  [data-theme="dark"] .kind--checklist { background: rgba(245, 158, 11, 0.20); color: #fcd34d; }
 
   .cookbook-card-title {
     font-size: var(--fs-h4);
@@ -185,7 +186,7 @@ const kindBadgeColours: Record<string, string> = {
   .cookbook-source-link:hover { color: var(--fg-link-hover); }
 
   @media (max-width: 768px) {
-    .cookbook-hero { padding: var(--space-20) var(--gutter); margin-top: 72px; }
+    .cookbook-hero { padding: var(--space-20) var(--gutter);  }
     .cookbook-h1 { font-size: var(--fs-h2); }
     .cookbook-grid { grid-template-columns: 1fr; }
   }