feat: Awesome GitHub header & footer to spec (64px, Browse/Resources dropdowns, branch toggle)#849
Conversation
…owns, branch toggle) 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
Phase 6 implementation: - Rewrote footer with 4-column layout (Catalogues, More, Learn, Reference) - Added cyan radial halo effect from top center - Updated brand block with white logo and correct tagline - Categories grid in Catalogues column with icon display - Updated bottom bar with correct copyright and GPL text - Responsive layout adjustments for tablet and mobile Also: - Copied brand assets to public/awesome-github/ - Updated Nav component to use theme-aware brand icons (blue for light, cyan for dark) - Both header and drawer now swap icons based on data-theme attribute https://claude.ai/code/session_01K48d5Qapr8r6ZhBZUDHDPD
|
✅ Template check passed after update. Thanks for fixing the PR description. |
|
Need an answer fast? Review this PR in Change Stack to ask focused questions about the PR or a changed range. Warning Review limit reached
More reviews will be available in 53 minutes and 17 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR delivers a complete redesign of the Awesome GitHub header navigation and footer components, plus a new custom SVG icon system. The changes introduce a modern dropdown-driven nav with Browse/Resources menus, a mobile drawer with accessibility features, branch toggle persistence, and an updated footer with category grid rendering—all integrated with theme-aware CSS design tokens. ChangesAwesome GitHub Component Redesign: Header, Footer, and Icon System
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🔍 Reviewer Summary for PR #849CI Status: ❌ Recommendations
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8f9b6c2f08
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const bgEls = Array.from(document.querySelectorAll<HTMLElement>("body > :not(header)")); | ||
|
|
||
| const openDrawer = () => { | ||
| hamburger.setAttribute("aria-expanded", "true"); | ||
| hamburger.setAttribute("aria-label", "Close navigation menu"); | ||
| drawer.setAttribute("aria-hidden", "false"); | ||
| drawer.removeAttribute("inert"); | ||
| overlay.setAttribute("aria-hidden", "false"); | ||
| scrim.setAttribute("aria-hidden", "false"); | ||
| document.body.classList.add("ag-drawer-open"); | ||
| bgEls.forEach((el) => el.setAttribute("inert", "")); |
There was a problem hiding this comment.
On mobile, opening the drawer makes it visible and then immediately marks it inert because body > :not(header) includes the sibling <aside id="mobile-drawer"> and scrim rendered by this component. In browsers that support inert, the opened drawer's links/buttons are removed from focus and pointer interaction, so users can see the menu but cannot use it; exclude the drawer/scrim from the background elements before applying inert.
Useful? React with 👍 / 👎.
| const icons: Record<string, IconDef> = { | ||
| // Category icons (8) | ||
| robot: { | ||
| path: `<rect x="4" y="8" width="16" height="11" rx="2"/><path d="M12 8V5M9 5h6M9 13h.01M15 13h.01M9 16h6"/>`, | ||
| }, | ||
| book: { | ||
| path: `<path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM19 3v16"/>`, |
There was a problem hiding this comment.
Replacing the Phosphor loader with this fixed map drops several icon names that the existing site still passes through Icon, including category names from website/src/lib/catalogue.ts such as book-open, chat-circle, sparkle, git-branch, and puzzle-piece, plus page icons like cooking-pot and books. Those now hit the empty fallback SVG, so multiple catalogue/nav/page icons disappear; add aliases or rename the callers when introducing the custom map.
Useful? React with 👍 / 👎.
| const BRANCH_STORAGE_KEY = "ag-branch"; | ||
| const branchBtns = document.querySelectorAll<HTMLButtonElement>(".branch-btn"); | ||
|
|
||
| const initBranch = () => { | ||
| const saved = localStorage.getItem(BRANCH_STORAGE_KEY) || "main"; | ||
| branchBtns.forEach((btn) => { | ||
| const branch = btn.getAttribute("data-branch"); | ||
| btn.setAttribute("aria-pressed", branch === saved ? "true" : "false"); | ||
| }); | ||
| }; | ||
|
|
||
| initBranch(); | ||
|
|
||
| branchBtns.forEach((btn) => { | ||
| btn.addEventListener("click", () => { | ||
| const branch = btn.getAttribute("data-branch"); | ||
| localStorage.setItem(BRANCH_STORAGE_KEY, branch || "main"); |
There was a problem hiding this comment.
The new header/drawer branch toggle persists ag-branch, but the install/action links on resource detail pages initialise from and update localStorage.getItem("github_branch") in website/src/pages/c/[type]/[slug].astro. Selecting develop in the global nav therefore leaves the detail-page VS Code/raw/GitHub links on main, which makes the toggle appear to work while not changing the install source.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Code Review
This pull request introduces a custom SVG icon library to replace the Phosphor icons dependency, alongside a major redesign of the navigation header and footer components, including new dropdowns, branch toggles, and an updated mobile drawer. The review feedback identifies critical issues, including missing icon name aliases that will prevent category icons from rendering, unsynchronized branch toggle states between desktop and mobile views, setting toggles in the mobile drawer causing immediate closure, and hardcoded asset paths that will fail on subpath deployments.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| branchBtns.forEach((b) => { | ||
| b.setAttribute("aria-pressed", b === btn ? "true" : "false"); | ||
| }); |
There was a problem hiding this comment.
The branch toggle buttons exist in both the desktop header and the mobile drawer. When a branch button is clicked, the current code only sets aria-pressed="true" on the exact button element that was clicked, leaving the corresponding button in the other view (desktop/mobile) set to aria-pressed="false". They should be synchronized by their data-branch attribute value instead.
branchBtns.forEach((b) => {
b.setAttribute("aria-pressed", b.getAttribute("data-branch") === branch ? "true" : "false");
});
| drawer.querySelectorAll("a, button").forEach((link) => { | ||
| link.addEventListener("click", closeDrawer); | ||
| }); |
There was a problem hiding this comment.
The mobile drawer event listener closes the drawer when any button inside it is clicked. This includes the branch toggle buttons and the theme toggle button, causing the drawer to immediately close when a user tries to change settings. The selector should be restricted to links (a) and the search trigger ([data-search-open]).
drawer.querySelectorAll("a, [data-search-open]").forEach((link) => {
link.addEventListener("click", closeDrawer);
});
| <!-- Brand block (left) --> | ||
| <div class="foot-brand"> | ||
| <a href={`${base}`} class="foot-logo-link"> | ||
| <img src="/awesome-github/LS-Agency-Logo-White.svg" alt="LightSpeed" /> |
There was a problem hiding this comment.
The brand logo image source is hardcoded as /awesome-github/LS-Agency-Logo-White.svg. If the site is deployed on a subpath (non-root base URL), this image will fail to load (404). It should be prefixed with the base URL variable, similar to the surrounding links.
<img src={base + "awesome-github/LS-Agency-Logo-White.svg"} alt="LightSpeed" />
References
- Navigation links and asset paths should explicitly include the subdirectory path (e.g., '${base}subdirectory/') rather than assuming they are at the root when base path is configured.
| <img class="brand-icon-light" src="/awesome-github/LS-Agency-Site-Icon-Blue.svg" alt="" width="26" height="26" /> | ||
| <img class="brand-icon-dark" src="/awesome-github/LS-Agency-Site-Icon-Light-Blue.svg" alt="" width="26" height="26" /> |
There was a problem hiding this comment.
The brand icon image sources are hardcoded as /awesome-github/.... If the site is deployed on a subpath, these images will fail to load. They should be prefixed with the base URL variable.
<img class="brand-icon-light" src={base + "awesome-github/LS-Agency-Site-Icon-Blue.svg"} alt="" width="26" height="26" />
<img class="brand-icon-dark" src={base + "awesome-github/LS-Agency-Site-Icon-Light-Blue.svg"} alt="" width="26" height="26" />
References
- Navigation links and asset paths should explicitly include the subdirectory path (e.g., '${base}subdirectory/') rather than assuming they are at the root when base path is configured.
| <img class="brand-icon-light" src="/awesome-github/LS-Agency-Site-Icon-Blue.svg" alt="" width="26" height="26" /> | ||
| <img class="brand-icon-dark" src="/awesome-github/LS-Agency-Site-Icon-Light-Blue.svg" alt="" width="26" height="26" /> |
There was a problem hiding this comment.
The brand icon image sources in the mobile drawer are hardcoded as /awesome-github/.... They should be prefixed with the base URL variable to support subpath deployments.
<img class="brand-icon-light" src={base + "awesome-github/LS-Agency-Site-Icon-Blue.svg"} alt="" width="26" height="26" />
<img class="brand-icon-dark" src={base + "awesome-github/LS-Agency-Site-Icon-Light-Blue.svg"} alt="" width="26" height="26" />
References
- Navigation links and asset paths should explicitly include the subdirectory path (e.g., '${base}subdirectory/') rather than assuming they are at the root when base path is configured.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
High priority fixes:
1. Drawer closes on nav links only (not branch/theme toggle buttons)
- Changed selector from 'a, button' to 'a, [data-search-open]'
- Prevents drawer from closing when user toggles branch/theme in drawer
2. Synchronize branch toggle state across desktop and mobile views
- Changed from comparing button identity to comparing data-branch attribute
- Both desktop and mobile toggles now stay in sync when clicked
Medium priority fixes:
3. Fix hardcoded asset paths for subpath deployments
- Header brand icons now use ${base} prefix
- Drawer brand icons now use ${base} prefix
- Footer logo now uses ${base} prefix
https://claude.ai/code/session_01K48d5Qapr8r6ZhBZUDHDPD
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
website/src/lib/icons.ts (1)
40-69: 💤 Low valueRefactor: duplicate icon definitions create maintenance overhead.
You've defined several icon aliases with identical paths:
"magnifying-glass"and"search"(lines 40-45)"list"and"menu"(lines 52-57)"x"and"close"(lines 58-63)"chevron-down"and"caret-down"(lines 64-69)If these aliases are intentional for API flexibility, brilliant! But if not, consider consolidating them to reduce duplication. Alternatively, you could keep one definition and add explicit alias mappings like:
const iconAliases: Record<string, string> = { "magnifying-glass": "search", "list": "menu", "x": "close", "caret-down": "chevron-down", };Then resolve aliases in
getIconSvgbefore lookup.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/lib/icons.ts` around lines 40 - 69, Consolidate duplicate icon definitions by either removing redundant entries ("magnifying-glass"/"search", "list"/"menu", "x"/"close", "chevron-down"/"caret-down") and keeping a single canonical key or add an explicit alias map (e.g. iconAliases mapping "magnifying-glass"->"search", "list"->"menu", "x"->"close", "caret-down"->"chevron-down") and update getIconSvg to resolve aliases via iconAliases before looking up paths; ensure only one source of truth for each SVG path and that getIconSvg uses the canonical key.website/src/components/AwesomeGithub/AwesomeGithubFooter.astro (1)
71-71: ⚡ Quick winConsider making the copyright year dynamic.
You've hard-coded
© 2026 LightSpeedhere. Whilst that's perfectly fine for now, it'll need manual updates each year. Why not make it dynamic?✨ Proposed fix to compute the year
In the frontmatter (after line 9):
const moreCats = CATEGORIES.slice(4); +const currentYear = new Date().getFullYear();Then in the markup:
- <p>© 2026 LightSpeed · Crafted with care in WordPress.</p> + <p>© {currentYear} LightSpeed · Crafted with care in WordPress.</p>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/components/AwesomeGithub/AwesomeGithubFooter.astro` at line 71, Replace the hard-coded year in AwesomeGithubFooter.astro by computing it in the frontmatter and using that variable in the markup: add a frontmatter declaration (e.g., const currentYear = new Date().getFullYear()) near the top of the component and update the paragraph content to use currentYear instead of "2026" so the © year updates automatically.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/src/components/AwesomeGithub/AwesomeGithubNav.astro`:
- Around line 12-16: The isActive helper fails on subdirectory deployments
because it compares the incoming path against pathname without considering the
site's base prefix; update isActive to incorporate the base value by normalizing
base (e.g. const prefix = base || "") and comparing pathname against the
prefixed path (use prefix + p) or by stripping prefix from pathname before
comparison so that the function (isActive) uses the same base when computing
norm and p; ensure you reference pathname and base consistently so active state
detection works when deployed under a subdirectory.
- Around line 369-379: The current bgEls collection (from
document.querySelectorAll("body > :not(header)")) includes the drawer and scrim,
so in openDrawer() the bgEls.forEach re-applies inert to the drawer; update how
bgEls is built so it excludes the drawer and scrim (or filter bgEls before the
forEach) — specifically modify the query/assignment for bgEls or add a filter
that removes elements === drawer or === scrim, then keep the rest of
openDrawer()/closeDrawer() logic (hamburger, drawer, scrim attribute changes)
the same so only true background elements get inert applied.
In `@website/src/lib/icons.ts`:
- Around line 12-85: The footer icons appear empty because the aliases in
getIconSvg are out of sync with the category icon names used by
CATEGORIES[].icon (cat.icon); update the aliases map inside getIconSvg to
include mappings like book-open→book, chat-circle→chat, sparkle→sparkles,
git-branch→workflow, puzzle-piece→puzzle so cat.icon resolves to existing keys,
add a build-time or unit test that asserts every CATEGORIES[].icon has an alias
or direct key in icons, and avoid ESLint console warnings by either ensuring
console is allowed for getIconSvg or guarding the console.warn call (or replace
with the project logger) where getIconSvg currently logs missing mappings.
- Line 90: The ESLint no-undef firing for console.warn in
website/src/lib/icons.ts is caused by the TypeScript override in
eslint.config.cjs not declaring the console global; open eslint.config.cjs,
locate the override whose files array includes "**/*.ts" and "**/*.tsx" (the
block with languageOptions.globals) and add an entry console: "readonly" to
languageOptions.globals so console.warn is considered a defined readonly global;
alternatively add a dedicated TypeScript override that sets
languageOptions.globals with console: "readonly".
---
Nitpick comments:
In `@website/src/components/AwesomeGithub/AwesomeGithubFooter.astro`:
- Line 71: Replace the hard-coded year in AwesomeGithubFooter.astro by computing
it in the frontmatter and using that variable in the markup: add a frontmatter
declaration (e.g., const currentYear = new Date().getFullYear()) near the top of
the component and update the paragraph content to use currentYear instead of
"2026" so the © year updates automatically.
In `@website/src/lib/icons.ts`:
- Around line 40-69: Consolidate duplicate icon definitions by either removing
redundant entries ("magnifying-glass"/"search", "list"/"menu", "x"/"close",
"chevron-down"/"caret-down") and keeping a single canonical key or add an
explicit alias map (e.g. iconAliases mapping "magnifying-glass"->"search",
"list"->"menu", "x"->"close", "caret-down"->"chevron-down") and update
getIconSvg to resolve aliases via iconAliases before looking up paths; ensure
only one source of truth for each SVG path and that getIconSvg uses the
canonical key.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: f9cd5a89-6b9e-413c-82bd-a374121360df
⛔ Files ignored due to path filters (3)
website/public/awesome-github/LS-Agency-Logo-White.svgis excluded by!**/*.svgwebsite/public/awesome-github/LS-Agency-Site-Icon-Blue.svgis excluded by!**/*.svgwebsite/public/awesome-github/LS-Agency-Site-Icon-Light-Blue.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
website/src/components/AwesomeGithub/AwesomeGithubFooter.astrowebsite/src/components/AwesomeGithub/AwesomeGithubNav.astrowebsite/src/components/AwesomeGithub/Icon.astrowebsite/src/lib/icons.tswebsite/src/styles/awesome-github.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Unified Labeling, Status, and Type Assignment
- GitHub Check: copilot-pull-request-reviewer
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{php,js,jsx,ts,tsx,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Follow WordPress Coding Standards (CSS, HTML, JavaScript, PHP) and inline-documentation standards at all times
Files:
website/src/styles/awesome-github.csswebsite/src/lib/icons.ts
**/*.{php,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Ensure WCAG 2.2 AA minimum accessibility compliance with semantic HTML, keyboard support, and sufficient contrast
Files:
website/src/styles/awesome-github.css
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,ts,jsx,tsx}: Follow ESLint/Prettier standards for JavaScript and TypeScript files
Avoid unnecessary JavaScript, defer/lazy-load where possible, and prefer native blocks
Files:
website/src/lib/icons.ts
**/*.{js,ts}
⚙️ CodeRabbit configuration file
**/*.{js,ts}: Review JavaScript/TypeScript:
- Ensure code is linted and follows project style guides.
- Check for dead code, unused variables, and clear function naming.
- Validate accessibility and performance optimisations.
- Ensure tests are isolated and do not depend on external state.
- Check for descriptive test names and clear test structure.
Files:
website/src/lib/icons.ts
🪛 ESLint
website/src/lib/icons.ts
[error] 90-90: 'console' is not defined.
(no-undef)
🔇 Additional comments (11)
website/src/styles/awesome-github.css (1)
106-110: LGTM!Also applies to: 233-237
website/src/components/AwesomeGithub/AwesomeGithubNav.astro (6)
20-129: LGTM!
131-244: LGTM!
246-337: LGTM!
339-361: LGTM!
413-422: LGTM!
425-934: LGTM!website/src/components/AwesomeGithub/AwesomeGithubFooter.astro (2)
33-38: This will render empty icons due to the catalogue/icons.ts mismatch.This code looks spot on, but it will fail at runtime because
cat.iconvalues fromCATEGORIESdon't match the icon names defined inicons.ts. See my earlier comment onicons.tsfor details.Once you've aligned the icon names, these category icons will render beautifully!
77-270: LGTM!website/src/components/AwesomeGithub/Icon.astro (2)
1-15: LGTM!
17-29: LGTM!
| 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 + "/"); | ||
| }; |
There was a problem hiding this comment.
isActive helper doesn't account for base prefix — active states will break on subdirectory deploys.
The function checks paths like /cookbook against pathname, but pathname would be /awesome-github/cookbook/ when deployed at a subdirectory. The comparison will never match, leaving nav items without their active styling.
🐛 Proposed fix: prepend base to path comparison
const isActive = (path: string): boolean => {
const norm = pathname.replace(/\/$/, "");
- const p = path.replace(/\/$/, "");
+ const p = (base + path.replace(/^\//, "")).replace(/\/$/, "");
return norm === p || norm.startsWith(p + "/");
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 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 + "/"); | |
| }; | |
| const isActive = (path: string): boolean => { | |
| const norm = pathname.replace(/\/$/, ""); | |
| const p = (base + path.replace(/^\//, "")).replace(/\/$/, ""); | |
| return norm === p || norm.startsWith(p + "/"); | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@website/src/components/AwesomeGithub/AwesomeGithubNav.astro` around lines 12
- 16, The isActive helper fails on subdirectory deployments because it compares
the incoming path against pathname without considering the site's base prefix;
update isActive to incorporate the base value by normalizing base (e.g. const
prefix = base || "") and comparing pathname against the prefixed path (use
prefix + p) or by stripping prefix from pathname before comparison so that the
function (isActive) uses the same base when computing norm and p; ensure you
reference pathname and base consistently so active state detection works when
deployed under a subdirectory.
There was a problem hiding this comment.
Pull request overview
This PR updates the “Awesome GitHub” site chrome to match the Astro design spec: new surface tokens, a custom SVG icon system, a rewritten 64px sticky header (Browse/Resources dropdowns, search trigger, branch + theme toggles, mobile drawer), and a redesigned always-dark footer with updated brand assets.
Changes:
- Added surface design tokens (
--panel,--panel-2,--hair) with light/dark variants. - Introduced a custom inline-SVG icon library and switched the Icon component to use it.
- Rebuilt header/navigation and footer layout/styling to align with the specified structure and breakpoints.
Reviewed changes
Copilot reviewed 5 out of 8 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
website/src/styles/awesome-github.css |
Adds new surface CSS variables for themed UI surfaces. |
website/src/lib/icons.ts |
Adds a custom SVG icon registry + getIconSvg() helper. |
website/src/components/AwesomeGithub/Icon.astro |
Switches icon rendering to inline SVG output. |
website/src/components/AwesomeGithub/AwesomeGithubNav.astro |
Major header/nav rewrite (dropdowns, search trigger, branch toggle, mobile drawer, updated styling). |
website/src/components/AwesomeGithub/AwesomeGithubFooter.astro |
Footer rewrite to 4-column layout + halo + updated copy and links. |
website/public/awesome-github/LS-Agency-Site-Icon-Light-Blue.svg |
New theme-aware brand icon (dark variant). |
website/public/awesome-github/LS-Agency-Site-Icon-Blue.svg |
New theme-aware brand icon (light variant). |
website/public/awesome-github/LS-Agency-Logo-White.svg |
New white logo asset for always-dark footer. |
| import { getIconSvg } from "../../lib/icons"; | ||
|
|
||
| interface Props { | ||
| name: string; |
| layers: { | ||
| path: `<path d="M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 16.5l9 5 9-5"/>`, | ||
| }, | ||
| }; |
| // Elements outside the nav that should be hidden from assistive tech when drawer is open | ||
| const bgEls = Array.from(document.querySelectorAll<HTMLElement>("body > :not(nav)")); | ||
| if (hamburger && drawer && scrim) { | ||
| const bgEls = Array.from(document.querySelectorAll<HTMLElement>("body > :not(header)")); |
| drawer.querySelectorAll("a, button").forEach((link) => { | ||
| link.addEventListener("click", closeDrawer); | ||
| }); |
| // ── Branch toggle ────────────────────────────────────────────────────── | ||
| const BRANCH_STORAGE_KEY = "ag-branch"; | ||
| const branchBtns = document.querySelectorAll<HTMLButtonElement>(".branch-btn"); | ||
|
|
||
| const initBranch = () => { | ||
| const saved = localStorage.getItem(BRANCH_STORAGE_KEY) || "main"; | ||
| branchBtns.forEach((btn) => { | ||
| const branch = btn.getAttribute("data-branch"); | ||
| btn.setAttribute("aria-pressed", branch === saved ? "true" : "false"); | ||
| }); | ||
| }; | ||
|
|
||
| initBranch(); | ||
|
|
||
| branchBtns.forEach((btn) => { | ||
| btn.addEventListener("click", () => { | ||
| const branch = btn.getAttribute("data-branch"); | ||
| localStorage.setItem(BRANCH_STORAGE_KEY, branch || "main"); | ||
| branchBtns.forEach((b) => { | ||
| b.setAttribute("aria-pressed", b === btn ? "true" : "false"); | ||
| }); | ||
| }); | ||
| }); |
| <button class="nav-btn" aria-expanded="false" aria-controls="resources-panel"> | ||
| Resources | ||
| <span class="chev"><Icon name="chevron-down" size={15} /></span> | ||
| </button> | ||
| <div class="dropdown dd-res" id="resources-panel" role="menu"> | ||
| <a href={`${base}onboarding/`} class="dd-simple" role="menuitem"> | ||
| <Icon name="bolt" size={16} class="ddi" /> |
| // Split categories: first 4 for Browse, remaining for More | ||
| const browseCats = CATEGORIES.slice(0, 4); | ||
| const moreCats = CATEGORIES.slice(4); |
| .foot { | ||
| background: var(--c-black); | ||
| color: var(--c-white); | ||
| padding: var(--space-16) var(--gutter) 0; | ||
| color: #fff; | ||
| padding: 56px 0 36px; | ||
| margin-top: 40px; |
| justify-content: space-between; | ||
| gap: 32px; | ||
| flex-wrap: wrap; | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| .foot-brand p { | ||
| color: rgba(255, 255, 255, 0.6); | ||
| font-size: 14px; | ||
| max-width: 280px; |
Linked issues
Closes #848
Changelog
Added
src/lib/icons.ts) with 16+ icons--panel,--panel-2,--hair(light & dark theme variants)Changed
Fixed
Risk Assessment
Risk Level: Low
Potential Impact:
Mitigation Steps:
How to Test
Prerequisites
npm ci- Install dependenciesTest Steps
Header Styling:
Navigation & Dropdowns:
Search Trigger:
Branch Toggle:
Theme Toggle:
Mobile Drawer:
Footer:
Expected Results
All verification items above should pass with no console errors or warnings.
Edge Cases to Verify
Checklist (Global DoD / PR)
Summary
Converts the Awesome GitHub header and footer components to pixel-match the React prototype specification exactly.
Implementation Details
Phase 1: Design Tokens
--panel,--panel-2,--hair#fff,var(--c-slate-50),var(--border)#16171D,#1B1C23,rgba(255,255,255,.09)Phase 2: Icon Library
src/lib/icons.tswith custom Heroicons-style SVG iconsPhase 3: Header/Nav Component
Phase 6: Footer Component
Files Changed
website/src/styles/awesome-github.css— Surface tokenswebsite/src/lib/icons.ts— NEW: Custom icon librarywebsite/src/components/AwesomeGithub/Icon.astro— Updated to use custom SVGswebsite/src/components/AwesomeGithub/AwesomeGithubNav.astro— Header rewritewebsite/src/components/AwesomeGithub/AwesomeGithubFooter.astro— Footer rewritewebsite/public/awesome-github/— NEW: Brand SVG assetsRelated issue: #848
Branch:
feat/awesome-github-astro-conversionStatus: Draft (ready for review)