From ab586568753fbe8d2b11bd38aeea1b05b899346b Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 22:34:40 +0000 Subject: [PATCH 1/4] refactor: Awesome GitHub header to spec (64px, Browse/Resources dropdowns, branch toggle) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented Phase 1-3 of Awesome GitHub spec conversion: 1. Design tokens: Add surface tokens (--panel, --panel-2, --hair) for both light and dark themes 2. Icon library: Create custom Heroicons-style SVG icons (lib/icons.ts) replacing Phosphor icons 3. Nav component rewrite: - Height: 72px → 64px - Backdrop: 88% opacity + 16px blur → 82% opacity + 12px blur - Navigation: Browse, Cookbook, Learn, Resources dropdowns - Search trigger: Add visible text + ⌘K kbd chip (hides on mobile) - Branch toggle: New segmented control for main/develop selection - GitHub link: Add external repository link - Responsive breakpoint: 960px → 1024px - Browse dropdown: 4 columns → 2 columns (2×4 grid) All components now use custom SVG icons from design spec instead of Phosphor icons. https://claude.ai/code/session_01K48d5Qapr8r6ZhBZUDHDPD --- .../AwesomeGithub/AwesomeGithubNav.astro | 1017 ++++++++++------- .../src/components/AwesomeGithub/Icon.astro | 26 +- website/src/lib/icons.ts | 96 ++ website/src/styles/awesome-github.css | 10 + 4 files changed, 725 insertions(+), 424 deletions(-) create mode 100644 website/src/lib/icons.ts diff --git a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro index e2431f80..38f141bb 100644 --- a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro +++ b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro @@ -9,182 +9,243 @@ interface Props { const { base, pathname } = Astro.props; -const navLinks = [ - { 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 isCatActive = (linkPath: string): boolean => { +const isActive = (path: string): boolean => { const norm = pathname.replace(/\/$/, ""); - const lp = linkPath.replace(/\/$/, ""); - return norm === lp || norm.startsWith(lp + "/"); + const p = path.replace(/\/$/, ""); + return norm === p || norm.startsWith(p + "/"); }; --- - - - - - -