From a4966f4d5254ffdfe0abc471c337eab06c30931a Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 13:36:49 +0000 Subject: [PATCH] feat: nav dropdown, mobile drawer, phosphor icons, dark mode fix, responsive scale - Replace all icons with Phosphor Icons (CDN CSS, ph-* class approach) - Fix dark mode nav: header now uses dark semi-transparent bg in dark theme - Add desktop Browse hover dropdown with 8 categories in a 4-column grid - Add mobile full-height slide-out drawer from right with all nav items - Add responsive scale overrides for spacing/font sizes at mobile breakpoints - Add color-scheme per theme to prevent OS-level dark UI glitches - Update CATEGORIES icon names to valid Phosphor icon identifiers https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH --- .../AwesomeGithub/AwesomeGithubNav.astro | 771 +++++++++++++----- website/src/layouts/AwesomeGithubLayout.astro | 59 +- website/src/lib/catalogue.ts | 10 +- website/src/styles/awesome-github.css | 25 + 4 files changed, 594 insertions(+), 271 deletions(-) diff --git a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro index 2fee7107..25a64c3e 100644 --- a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro +++ b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro @@ -1,4 +1,6 @@ --- +import { CATEGORIES } from "../../lib/catalogue"; + interface Props { base: string; pathname: string; @@ -7,103 +9,254 @@ interface Props { const { base, pathname } = Astro.props; const navLinks = [ - { href: `${base}`, path: "/", label: "Home", exact: true }, - { href: `${base}c/agents/`, path: "/c/", label: "Catalogue", exact: false }, - { href: `${base}learn/`, path: "/learn", label: "Learn", exact: false }, - { href: `${base}cookbook/`, path: "/cookbook", label: "Cookbook", exact: false }, - { href: `${base}glossary/`, path: "/glossary", label: "Glossary", exact: false }, + { href: `${base}getting-started/`, path: "/getting-started", label: "Getting started" }, + { href: `${base}learn/`, path: "/learn", label: "Learn" }, + { href: `${base}cookbook/`, path: "/cookbook", label: "Cookbook" }, + { href: `${base}glossary/`, path: "/glossary", label: "Glossary" }, + { href: `${base}why/`, path: "/why", label: "Why" }, ]; -const isActive = (linkPath: string, exact: boolean): boolean => { - const normPath = pathname.replace(/\/$/, ""); - const normLink = linkPath.replace(/\/$/, ""); - return exact ? normPath === normLink : normPath === normLink || normPath.startsWith(normLink + "/"); +const isCatActive = (linkPath: string): boolean => { + const norm = pathname.replace(/\/$/, ""); + const lp = linkPath.replace(/\/$/, ""); + return norm === lp || norm.startsWith(lp + "/"); }; --- -
- - - - Awesome - GitHub - - - - - -
- - - + + + +
+
+ + + + + + diff --git a/website/src/layouts/AwesomeGithubLayout.astro b/website/src/layouts/AwesomeGithubLayout.astro index 9a1e9e1c..2e67684b 100644 --- a/website/src/layouts/AwesomeGithubLayout.astro +++ b/website/src/layouts/AwesomeGithubLayout.astro @@ -9,7 +9,6 @@ import { ITEMS } from "../lib/catalogue"; const base = import.meta.env.BASE_URL; const pathname = Astro.url.pathname.replace(base, "/"); -// Pass minimal search data (no large body content) const searchItems = ITEMS.map((i) => ({ id: i.id, slug: i.slug, @@ -24,25 +23,7 @@ const { description = "Governance, not opinions.", } = Astro.props; -const themeInitScript = ` - (() => { - const storageKey = "awesome-github-theme"; - const root = document.documentElement; - const media = window.matchMedia("(prefers-color-scheme: light)"); - let saved = null; - - try { - saved = localStorage.getItem(storageKey); - } catch (_) { - saved = null; - } - - const theme = saved === "light" || saved === "dark" ? saved : media.matches ? "light" : "dark"; - root.dataset.theme = theme; - root.style.colorScheme = theme; - })(); -`; - +const themeInitScript = `(function(){try{var s='awesome-github-theme',t=localStorage.getItem(s),m=window.matchMedia&&matchMedia('(prefers-color-scheme:light)').matches;if(t!=='light'&&t!=='dark')t=m?'light':'dark';document.documentElement.setAttribute('data-theme',t);document.documentElement.style.colorScheme=t;}catch(e){}})();`; --- @@ -53,7 +34,10 @@ const themeInitScript = ` {title} + + + Skip to main content @@ -64,25 +48,20 @@ const themeInitScript = `