feat(website): UI redesign — dark mode, mega menu, mobile drawer, responsive layout#845
Conversation
📝 WalkthroughWalkthroughThis PR delivers the Awesome GitHub Site UI redesign: icon system migration to inline Icon.astro components, desktop Browse mega-dropdown with focusout closing, mobile drawer with inert state and scroll-lock, theme-changed event dispatch for accessibility sync, and flexbox layout foundation. Documentation and metadata are bumped across the repo. ChangesDocumentation & Metadata Updates
Awesome GitHub Navigation UI Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 docstrings
🧪 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 |
|
✅ Template check passed after update. Thanks for fixing the PR description. |
There was a problem hiding this comment.
Code Review
This pull request refactors the navigation bar component to introduce a desktop mega-dropdown and a mobile drawer menu, along with updated styling, event delegation for theme toggling, and minor style adjustments. The review feedback highlights several accessibility and usability improvements, including replacing ARIA menu roles with the Disclosure pattern for standard navigation, removing an overriding aria-label on the theme toggle button to expose dynamic text to screen readers, closing the dropdown when focus leaves, and managing body overflow responsively via CSS classes rather than direct inline styles.
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.
| <button | ||
| class="ag-nav-link ag-browse-trigger" | ||
| aria-expanded="false" | ||
| aria-haspopup="menu" | ||
| aria-controls="ag-browse-panel" | ||
| > | ||
| Browse | ||
| <i class="ph ph-caret-down ag-caret-icon" aria-hidden="true"></i> | ||
| </button> | ||
| <div | ||
| class="ag-browse-panel" | ||
| id="ag-browse-panel" | ||
| role="menu" | ||
| aria-label="Browse categories" | ||
| > | ||
| <div class="ag-browse-grid"> | ||
| {CATEGORIES.map((cat) => ( | ||
| <a | ||
| href={`${base}c/${cat.id}/`} | ||
| class="ag-browse-card" | ||
| role="menuitem" | ||
| > | ||
| <i class={`ph ph-${cat.icon} ag-browse-cat-icon`} aria-hidden="true"></i> | ||
| <span class="ag-browse-cat-name">{cat.label}</span> | ||
| <span class="ag-browse-cat-blurb">{cat.blurb}</span> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Using role="menu", role="menuitem", and aria-haspopup="menu" signals to screen readers that this is an application menu (like a desktop app menu bar), which requires full keyboard arrow-key navigation support (which is not implemented here).
For standard website navigation dropdowns containing links, the Disclosure pattern is preferred and much more accessible. It simply uses aria-expanded on the trigger and standard links without menu roles, avoiding the need for complex keyboard arrow-key handling.
<button
class="ag-nav-link ag-browse-trigger"
aria-expanded="false"
aria-controls="ag-browse-panel"
>
Browse
<i class="ph ph-caret-down ag-caret-icon" aria-hidden="true"></i>
</button>
<div
class="ag-browse-panel"
id="ag-browse-panel"
aria-label="Browse categories"
>
<div class="ag-browse-grid">
{CATEGORIES.map((cat) => (
<a
href={`${base}c/${cat.id}/`}
class="ag-browse-card"
>
<i class={`ph ph-${cat.icon} ag-browse-cat-icon`} aria-hidden="true"></i>
<span class="ag-browse-cat-name">{cat.label}</span>
<span class="ag-browse-cat-blurb">{cat.blurb}</span>
</a>
))}
</div>
</div>
| <button | ||
| class="ag-drawer-theme-btn" | ||
| type="button" | ||
| data-awesome-github-theme-toggle | ||
| aria-label="Toggle colour theme" | ||
| > |
There was a problem hiding this comment.
The aria-label attribute completely overrides any internal text content of an element for screen readers. Because aria-label="Toggle colour theme" is set on this button, screen reader users will only hear "Toggle colour theme" and will miss the dynamic, helpful text inside (Switch to dark mode / Switch to light mode).
Removing the aria-label from this specific button allows screen readers to read the visible, dynamic text labels instead, matching the visual experience.
<button
class="ag-drawer-theme-btn"
type="button"
data-awesome-github-theme-toggle
>
| // Close on outside click | ||
| document.addEventListener("click", (e) => { | ||
| if (e.target instanceof Element && !browseWrapper.contains(e.target)) { | ||
| closeBrowse(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
When a keyboard user tabs past the last link in the Browse dropdown, the dropdown remains open on the screen because there is no mechanism to close it when focus leaves.
Adding a focusout event listener to the browseWrapper ensures that the dropdown automatically closes when focus moves to another part of the page (like the other navigation links).
// Close on outside click
document.addEventListener("click", (e) => {
if (e.target instanceof Element && !browseWrapper.contains(e.target)) {
closeBrowse();
}
});
// Close when focus leaves the dropdown
browseWrapper.addEventListener("focusout", (e) => {
if (e.relatedTarget instanceof Element && !browseWrapper.contains(e.relatedTarget)) {
closeBrowse();
}
});
| const openDrawer = () => { | ||
| hamburger.setAttribute("aria-expanded", "true"); | ||
| drawer.setAttribute("aria-hidden", "false"); | ||
| overlay.setAttribute("aria-hidden", "false"); | ||
| document.body.style.overflow = "hidden"; | ||
| }; | ||
| const closeDrawer = () => { | ||
| hamburger.setAttribute("aria-expanded", "false"); | ||
| drawer.setAttribute("aria-hidden", "true"); | ||
| overlay.setAttribute("aria-hidden", "true"); | ||
| document.body.style.overflow = ""; | ||
| }; |
There was a problem hiding this comment.
When the mobile drawer is open, setting document.body.style.overflow = "hidden" directly via JS will lock scrolling on desktop if the user resizes their browser window or rotates their device to a wider viewport (where the drawer is hidden via CSS).
To fix this responsively without adding resize event listeners, toggle a class (e.g., ag-drawer-open) on document.body instead, and apply the overflow: hidden rule in CSS only within the mobile media query.
const openDrawer = () => {
hamburger.setAttribute("aria-expanded", "true");
drawer.setAttribute("aria-hidden", "false");
overlay.setAttribute("aria-hidden", "false");
document.body.classList.add("ag-drawer-open");
};
const closeDrawer = () => {
hamburger.setAttribute("aria-expanded", "false");
drawer.setAttribute("aria-hidden", "true");
overlay.setAttribute("aria-hidden", "true");
document.body.classList.remove("ag-drawer-open");
};
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a4966f4d52
ℹ️ 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".
| transform: translateX(100%); | ||
| transition: transform var(--dur-slow) var(--ease-out); |
There was a problem hiding this comment.
On mobile, the drawer is initially aria-hidden="true" but this CSS only moves it off-screen with transform, leaving its category links, nav links, and theme button focusable. Keyboard users tabbing through a closed page can land on invisible controls before reaching the main content; toggle inert/hidden or visibility/tab indexes when the drawer is closed so the off-canvas controls are not reachable.
Useful? React with 👍 / 👎.
| .ag-mobile-drawer { | ||
| position: fixed; | ||
| top: 0; | ||
| right: 0; | ||
| width: 100%; | ||
| height: 100dvh; | ||
| z-index: 200; |
There was a problem hiding this comment.
When the drawer opens at mobile widths, it is fixed from top: 0 with z-index: 200, the same z-index as the sticky header; because the drawer appears later in the DOM and spans the full viewport, it paints over the hamburger/X button and the overlay is also fully covered. That leaves users with no visible close control unless they press Escape or follow a link, so the header should sit above the drawer or the drawer should include its own close button.
Useful? React with 👍 / 👎.
🔍 Reviewer Summary for PR #845CI Status: ✅ Recommendations
|
There was a problem hiding this comment.
Pull request overview
This PR updates the “Awesome GitHub” Astro site UI to modernise navigation and iconography, improve dark mode behaviour, and tune spacing/type scales at smaller breakpoints.
Changes:
- Reworks the header navigation with a desktop “Browse” dropdown and a mobile right-hand drawer navigation.
- Switches icon usage to Phosphor Icons (CDN CSS) and updates catalogue category icon identifiers accordingly.
- Adds responsive CSS variable overrides and sets
color-schemeper theme to reduce OS-level dark UI inconsistencies.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
website/src/styles/awesome-github.css |
Adds responsive variable overrides and theme-specific color-scheme rules. |
website/src/lib/catalogue.ts |
Updates category icon identifiers to match the new Phosphor icon naming. |
website/src/layouts/AwesomeGithubLayout.astro |
Adds Phosphor CSS, adjusts theme init/toggle logic, and tweaks page layout styling. |
website/src/components/AwesomeGithub/AwesomeGithubNav.astro |
Implements the new desktop dropdown + mobile drawer navigation and associated styling/behaviour. |
Comments suppressed due to low confidence (1)
website/src/components/AwesomeGithub/AwesomeGithubNav.astro:138
- The mobile drawer is only moved off-screen when closed (
transform: translateX(100%)) and relies onaria-hidden="true". That leaves focusable links inside the drawer in the tab order even while the drawer is “closed”, which is a keyboard/a11y blocker.
data-search-open
>
<span aria-hidden="true">⌘K</span>
</button>
<button
class="ag-nav-theme-toggle"
| main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| min-height: calc(100vh - 72px); | ||
| } |
| // Theme toggle — event delegation handles all [data-awesome-github-theme-toggle] buttons | ||
| const STORAGE_KEY = "awesome-github-theme"; | ||
| const root = document.documentElement; | ||
| const button = document.querySelector("[data-awesome-github-theme-toggle]"); | ||
|
|
||
| if (button) { | ||
| button.addEventListener("click", () => { | ||
| document.addEventListener("click", (e) => { | ||
| if (e.target instanceof Element && e.target.closest("[data-awesome-github-theme-toggle]")) { | ||
| const next = root.dataset.theme === "light" ? "dark" : "light"; | ||
| try { | ||
| localStorage.setItem(storageKey, next); | ||
| } catch (_) { | ||
| /* ignore storage errors */ | ||
| } | ||
| root.dataset.theme = next; | ||
| try { localStorage.setItem(STORAGE_KEY, next); } catch (_) {} | ||
| root.setAttribute("data-theme", next); | ||
| root.style.colorScheme = next; | ||
| button.setAttribute("aria-pressed", String(next === "light")); | ||
| }); | ||
| } | ||
| } | ||
| }); |
| (() => { | ||
| const storageKey = "awesome-github-theme"; | ||
| const root = document.documentElement; | ||
| const media = window.matchMedia("(prefers-color-scheme: light)"); |
e1efef3 to
0caa59e
Compare
0caa59e to
bbc9d7c
Compare
…ponsive 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
- Disclosure pattern: remove role=menu/menuitem/aria-haspopup=menu from
Browse dropdown; use only aria-expanded + aria-controls
- Add focusout handler on browse wrapper to close when focus leaves
- Replace document.body.style.overflow with body.ag-drawer-open CSS class
(scoped to ≤960px media query via :global) for scroll-lock
- Add inert attribute on mobile drawer when closed; remove on open
- Raise .ag-nav z-index to 300 so hamburger stays above drawer (200)
- Add aria-pressed to both theme toggle buttons; sync via theme-changed
custom event dispatched from layout on each toggle click
- Remove CDN Phosphor Icons link (Icon.astro handles inline SVGs)
- Fix body layout: display:flex+flex-direction:column+min-height:100dvh
so main { flex:1 } fills remaining height without calc(100vh - 72px)
- Update hamburger aria-label dynamically (Open/Close navigation menu)
- Add CHANGELOG entry for UI redesign work
https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH
…evelop merge - Remove duplicate ordered list items in CANONICAL_CONFIGS_GUIDE.md that were appended after a bullet list (introduced by develop commit 5f3cb62), fixing MD029/MD032 lint failures - Add blank lines around headings in custom-instructions.md to fix MD022/MD032 - Bump last_updated and version in all three affected docs files to satisfy frontmatter freshness validation https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH
bbc9d7c to
78d17a8
Compare
The BRANCH_PATTERN was restricted to [a-z0-9._-]+ which rejects system-generated branch suffixes containing uppercase letters (e.g. feat/ui-redesign-modes-icons-menus-Jw2jw). Broaden the character class to [a-zA-Z0-9._-]+ so the prefix requirement is still enforced while auto-generated uniqueness suffixes are accepted. Update the example regex in docs/BRANCHING_STRATEGY.md to stay in sync. https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
docs/CANONICAL_CONFIGS_GUIDE.md (1)
97-134:⚠️ Potential issue | 🟠 Major | ⚡ Quick winDuplicate sections slipped in — consolidate to one canonical set.
Current Risks Observed,Recommended Validation Hooks, andRelated Documentationare duplicated. Please keep only one version of each section to avoid drift and conflicting guidance.As per coding guidelines, documentation should remain accurate, clearly structured, and up to date with clean cross-references.
🤖 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 `@docs/CANONICAL_CONFIGS_GUIDE.md` around lines 97 - 134, The file contains duplicated sections titled "Current Risks Observed", "Recommended Validation Hooks", and "Related Documentation"; remove the duplicate block (the Wave 5 Phase 1 repeat) and consolidate into a single canonical set containing the headings "Current Risks Observed", "Recommended Validation Hooks", and "Related Documentation", keeping the most complete/updated bullet items (including the CI parity check and the `.github/reports/...` audit link) and ensuring the `scripts/validation/validate-issue-fields.cjs`, `scripts/validation/validate-labeling-configs.cjs`, and the related docs (`docs/ISSUE_FIELDS.md`, `docs/ISSUE_TYPES.md`, `docs/LABEL_STRATEGY.md`, `docs/LABELING.md`) are listed once.docs/BRANCHING_STRATEGY.md (1)
1-12:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFrontmatter contract incomplete after version/date update.
Quick catch: this doc frontmatter still omits required fields (
tags,language) expected by the markdown policy.As per coding guidelines, all
.mdfiles must include required frontmatter fields includingtagsandlanguage.🤖 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 `@docs/BRANCHING_STRATEGY.md` around lines 1 - 12, The frontmatter in BRANCHING_STRATEGY.md is missing required keys; update the YAML frontmatter (the top block containing file_type, title, etc.) to include the missing required fields "tags" and "language" (e.g., add a tags array with relevant keywords and a language string like "en" or locale code) so the document conforms to the markdown policy; keep the existing keys (file_type, title, description, last_updated, owners, version, status, stability, domain) and add the new keys alongside them in the same frontmatter block..github/custom-instructions.md (2)
1-10:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFrontmatter is still missing required doc fields.
Nice metadata bump, but this file’s YAML frontmatter is missing required keys (
tags,status,stability,domain,language) from the repo markdown contract.As per coding guidelines, all
.mdfiles must include required frontmatter fields and specify language in frontmatter.🤖 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 @.github/custom-instructions.md around lines 1 - 10, The YAML frontmatter block is missing required keys (tags, status, stability, domain, language) and must declare a language; update the frontmatter at the top of the document by adding these keys (tags: [...], status: <e.g. draft|stable>, stability: <e.g. experimental|stable>, domain: <e.g. infra|docs>, language: <e.g. en>) and populate appropriate values for each to satisfy the repo markdown contract so the frontmatter block contains title, description, mode, version, last_updated, owners plus the required tags, status, stability, domain, and language fields.
12-31:⚠️ Potential issue | 🟠 Major | ⚡ Quick winTwo H1 headings in one file — trim to one.
This file currently has two top-level headings (
# Repo-local Copilot Instructionsand# LightSpeed .github Custom Instructions). Keep a single H1 and demote the second to H2.As per coding guidelines, each Markdown file must contain exactly one H1.
🤖 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 @.github/custom-instructions.md around lines 12 - 31, The file contains two top-level H1 headings ("# Repo-local Copilot Instructions" and "# LightSpeed .github Custom Instructions"); keep a single H1 and demote the second heading by changing "# LightSpeed .github Custom Instructions" to an H2 ("## LightSpeed .github Custom Instructions") so the file contains exactly one H1 as required and the rest remain lower-level headings; verify the change in the same file where the heading text appears.
🤖 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 `@CHANGELOG.md`:
- Line 30: The Unreleased changelog entry for "Awesome GitHub Site: UI Redesign
— Dark Mode, Navigation & Responsive Layout" is missing the required
traceability links; update that entry under the [Unreleased] section to append
both an issue link and a PR link using the same markdown style as the nearby
entries (see the pattern used on adjacent lines), ensuring the entry includes
e.g. "(`#PR_NUMBER`)" and "(`#ISSUE_NUMBER`)" or full markdown links consistent with
other changelog lines.
In `@website/src/components/AwesomeGithub/AwesomeGithubNav.astro`:
- Around line 235-250: openDrawer/closeDrawer currently only toggle the drawer,
overlay and body class, leaving background interactive and tabbable; update
these functions to also inert/aria-hide the page content when opening and
restore when closing by targeting the background containers (e.g., the
SearchPalette, main content element and AwesomeGithubFooter or a single wrapper
like a `#page-content` container) and toggling inert and/or aria-hidden attributes
alongside the drawer; ensure you reference the same element selection logic in
both openDrawer and closeDrawer so focus cannot move behind the overlay and is
fully restored when closed.
- Around line 95-102: The desktop theme toggle button (selector:
data-awesome-github-theme-toggle / class ag-theme-toggle-btn) is icon-only and
needs an accessible name; add an aria-label and a title attribute to the button
and ensure they are kept in sync with the toggle state (aria-pressed) by
updating their text when the theme changes (same update logic you use for
aria-pressed), and apply the same change to the other toggle instance referenced
(the one around lines 274-279) so both icon-only buttons expose a clear, dynamic
accessible name.
---
Outside diff comments:
In @.github/custom-instructions.md:
- Around line 1-10: The YAML frontmatter block is missing required keys (tags,
status, stability, domain, language) and must declare a language; update the
frontmatter at the top of the document by adding these keys (tags: [...],
status: <e.g. draft|stable>, stability: <e.g. experimental|stable>, domain:
<e.g. infra|docs>, language: <e.g. en>) and populate appropriate values for each
to satisfy the repo markdown contract so the frontmatter block contains title,
description, mode, version, last_updated, owners plus the required tags, status,
stability, domain, and language fields.
- Around line 12-31: The file contains two top-level H1 headings ("# Repo-local
Copilot Instructions" and "# LightSpeed .github Custom Instructions"); keep a
single H1 and demote the second heading by changing "# LightSpeed .github Custom
Instructions" to an H2 ("## LightSpeed .github Custom Instructions") so the file
contains exactly one H1 as required and the rest remain lower-level headings;
verify the change in the same file where the heading text appears.
In `@docs/BRANCHING_STRATEGY.md`:
- Around line 1-12: The frontmatter in BRANCHING_STRATEGY.md is missing required
keys; update the YAML frontmatter (the top block containing file_type, title,
etc.) to include the missing required fields "tags" and "language" (e.g., add a
tags array with relevant keywords and a language string like "en" or locale
code) so the document conforms to the markdown policy; keep the existing keys
(file_type, title, description, last_updated, owners, version, status,
stability, domain) and add the new keys alongside them in the same frontmatter
block.
In `@docs/CANONICAL_CONFIGS_GUIDE.md`:
- Around line 97-134: The file contains duplicated sections titled "Current
Risks Observed", "Recommended Validation Hooks", and "Related Documentation";
remove the duplicate block (the Wave 5 Phase 1 repeat) and consolidate into a
single canonical set containing the headings "Current Risks Observed",
"Recommended Validation Hooks", and "Related Documentation", keeping the most
complete/updated bullet items (including the CI parity check and the
`.github/reports/...` audit link) and ensuring the
`scripts/validation/validate-issue-fields.cjs`,
`scripts/validation/validate-labeling-configs.cjs`, and the related docs
(`docs/ISSUE_FIELDS.md`, `docs/ISSUE_TYPES.md`, `docs/LABEL_STRATEGY.md`,
`docs/LABELING.md`) are listed once.
🪄 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: 5058d7f2-c4c0-483f-9a45-1c742a501f3f
📒 Files selected for processing (6)
.github/custom-instructions.mdCHANGELOG.mddocs/BRANCHING_STRATEGY.mddocs/CANONICAL_CONFIGS_GUIDE.mdwebsite/src/components/AwesomeGithub/AwesomeGithubNav.astrowebsite/src/layouts/AwesomeGithubLayout.astro
📜 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). (1)
- GitHub Check: coderabbit-gate
🧰 Additional context used
📓 Path-based instructions (4)
**/*.md
📄 CodeRabbit inference engine (.github/instructions/markdown.instructions.md)
**/*.md: Use one H1 (#) per file; keep heading levels sequential (never skip from H2 to H4)
Use fenced code blocks with explicit language tags (bash,yaml,markdown, etc.)
Keep links relative for in-repo files; verify they resolve before merging
Use1.for ordered lists and-for unordered lists
Keep all wording in UK English (optimise, organisation, colour, behaviour, analyse)
Do not add areferences:frontmatter field — use inline links or a footer section instead
Blank lines before and after headings, code blocks, and block-level elements
Maximum line length: 120 characters (soft limit; prefer wrapping at natural sentence boundaries)
All.mdfiles in this repository should include YAML frontmatter with required fields: file_type, title, description, version, last_updated, owners, tags, status, stability, domain
Every image (![]()) must have descriptive alt text explaining the image's purpose, not its appearance. Empty alt (![ ]()) is valid only for purely decorative images
Link text must describe the destination — never use 'click here', 'read more', or bare URLs as visible text
Every table must have a header row (| Header |). Avoid merged cells
Use headings to communicate document structure, not for visual styling
Do not rely on colour alone to convey information in diagrams or callout blocks
Mermaid diagrams must includeaccTitleandaccDescrattributes for accessibility
Specify language in frontmatter; use plain language, avoid jargon where possible
Files:
docs/BRANCHING_STRATEGY.mdCHANGELOG.mddocs/CANONICAL_CONFIGS_GUIDE.md
**/docs/**/*.md
⚙️ CodeRabbit configuration file
**/docs/**/*.md: Review documentation files:
- Ensure markdown is linted and formatted per project style guides.
- Flag illogical folder structures, file naming, or misplaced content.
- Confirm documentation is up to date, accurate, and cross-referenced.
- Ensure accessibility (heading hierarchy, alt text for images, UK English).
Files:
docs/BRANCHING_STRATEGY.mddocs/CANONICAL_CONFIGS_GUIDE.md
.github/custom-instructions.md
⚙️ CodeRabbit configuration file
.github/custom-instructions.md: Review custom-instructions.md:
- Ensure the file is easy to navigate and up to date with org standards.
- Validate YAML frontmatter for completeness and accuracy.
- Confirm cross-references to prompts.md, agent.md, AGENTS.md, and instruction files.
- Check for up-to-date cross-references and clear documentation of Copilot usage.
Files:
.github/custom-instructions.md
CHANGELOG.md
⚙️ CodeRabbit configuration file
CHANGELOG.md: Review CHANGELOG.md:
- Confirm entries follow Keep a Changelog 1.1.0 format.
- Each entry under [Unreleased] must include a PR link and issue link.
- Verify entries use the correct section headings (Added, Changed, Fixed, Deprecated, Removed, Security, Documentation, Performance).
- Check UK English spelling throughout.
Files:
CHANGELOG.md
🧠 Learnings (6)
📚 Learning: 2026-06-03T17:57:58.761Z
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-06-03T17:57:58.761Z
Learning: Branch names must follow the format `{type}/{scope}-{short-title}` (lowercase, kebab-case) where `{type}` is one of: feat/, fix/, hotfix/, release/, refactor/, chore/, docs/, test/, perf/, ci/, build/, deps/, security/, revert/, research/, design/, a11y/, ux/, i18n/, ops/
Applied to files:
docs/BRANCHING_STRATEGY.md.github/custom-instructions.md
📚 Learning: 2026-06-03T17:57:58.761Z
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-06-03T17:57:58.761Z
Learning: Before every push, verify the current branch is NOT `main` or `develop` (unless in a release cycle) and follows the `{type}/{scope}-{short-title}` naming pattern
Applied to files:
docs/BRANCHING_STRATEGY.md.github/custom-instructions.md
📚 Learning: 2026-06-03T17:57:58.761Z
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-06-03T17:57:58.761Z
Learning: Place repo-local Copilot and agent instructions in `.github/instructions/` or `.github/custom-instructions.md`
Applied to files:
.github/custom-instructions.md
📚 Learning: 2026-06-03T15:59:30.973Z
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-06-03T15:59:30.973Z
Learning: Use `.github/instructions/` for repo-local maintenance guidance and `instructions/` for portable standards, following the canonical instruction reference policy
Applied to files:
.github/custom-instructions.md
📚 Learning: 2026-06-03T17:57:58.761Z
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-06-03T17:57:58.761Z
Learning: Do NOT use `claude/` as a branch prefix. This is explicitly forbidden under all circumstances.
Applied to files:
.github/custom-instructions.md
📚 Learning: 2026-06-03T17:57:58.761Z
Learnt from: CR
Repo: lightspeedwp/.github PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-06-03T17:57:58.761Z
Learning: All PRs must target `develop` by default, NOT `main`. Only `release/*` and `hotfix/*` branches are allowed to merge to `main`.
Applied to files:
.github/custom-instructions.md
🔇 Additional comments (3)
website/src/components/AwesomeGithub/AwesomeGithubNav.astro (2)
3-3: LGTM!Also applies to: 51-63, 93-94, 113-145, 167-170, 182-209, 268-270, 290-295, 393-456, 472-475, 542-547, 623-653, 691-693
300-303: ⚡ Quick winDon’t add
:global(...)for[data-theme="..."]here—Astro scopes only the component element part.
[data-theme="dark"] .ag-nav { ... }(and the same pattern at 378-380, 532-540, 672-675) should compile with Astro’s scope attached to the component element (e.g..ag-nav[...]), not to the[data-theme]ancestor on<html>, so the theme rules won’t get “stuck”. This[data-theme="..."] .classapproach is also already used across other components without:global(...).> Likely an incorrect or invalid review comment.website/src/layouts/AwesomeGithubLayout.astro (1)
59-59: LGTM!Also applies to: 77-92
- CHANGELOG: add #847 and #845 traceability links to UI redesign entry - CANONICAL_CONFIGS_GUIDE: consolidate duplicate sections into single canonical set, merging best content (linked docs, audit link, CI parity bullet) - BRANCHING_STRATEGY: add tags and language frontmatter fields - custom-instructions: add tags/status/stability/domain/language frontmatter; demote duplicate H1 to H2 - AwesomeGithubNav: add aria-label + title to icon-only desktop theme toggle; sync aria-label/title in syncThemePressed (skip drawer button with visible text); inert background elements while mobile drawer is open https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH
Summary
Complete navigation and UI overhaul for the Awesome GitHub Astro site.
inertguardIcon.astro(zero runtime JS, CDN link removed)role="menu"/role="menuitem"/aria-haspopup="menu"aria-pressedon theme toggle buttons,inerton closed drawer, background elements inert when drawer is openaria-label/titleon icon-only theme toggle button, synced dynamically with state[a-zA-Z0-9._-]+)Linked issues
Closes #847
Changelog
Added
inert; dark-mode nav header fixed; all icons replaced with inline Phosphor SVGs viaIcon.astro; fluid responsive spacing/font tokens; Disclosure pattern ARIA (norole="menu");aria-pressedon theme toggles; icon-only buttonaria-label/title; backgroundinertwhen drawer open. (#847, #845)Risk Assessment
Risk Level: Low
Potential Impact:
Mitigation Steps:
website/src/and 3 documentation filesBuild websitecheck passing)How to Test
Prerequisites
npm ciinwebsite/Test Steps
aria-pressedflips, icon updates, label changes to "Switch to light/dark mode"Escapeto closeinert; click backdrop or ✕ to closelocalStorageExpected Results
localStorageEdge Cases to Verify
Escapekey pressChecklist (Global DoD / PR)
last_updatedandversion)References
https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH