feat(ag-p11): tools page — hero, section nav pills, grouped tool sections#886
Conversation
|
Warning Review limit reached
More reviews will be available in 16 minutes and 44 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 ignored due to path filters (1)
📒 Files selected for processing (12)
✨ 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 |
|
✅ Template check passed after update. Thanks for fixing the PR description. |
🔍 Reviewer Summary for PR #886CI Status: ✅ Recommendations
|
There was a problem hiding this comment.
Code Review
This pull request migrates the website's icon system to Phosphor Icons (using the "ph:" prefix) and introduces a build-time SVG loader in phosphor.ts. It also adds a new tools page (tools.astro) and refactors shared CSS styles for item cards and type badges into global.css. Feedback focuses on improving the robustness of the package resolution in phosphor.ts using createRequire, optimizing the hero image loading in tools.astro for better LCP, and ensuring a safe fallback for the smooth scroll offset calculation when parsing CSS variables.
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.
| import { readFileSync } from "node:fs"; | ||
| import { resolve } from "node:path"; |
There was a problem hiding this comment.
Using path.resolve with a relative path to ./node_modules is fragile because it depends on the current working directory (process.cwd()), which can vary depending on where the build command is executed (e.g., in monorepos or CI/CD pipelines).
Using createRequire(import.meta.url) to resolve the package path via require.resolve is much more robust and handles package hoisting and monorepo structures perfectly.
| import { readFileSync } from "node:fs"; | |
| import { resolve } from "node:path"; | |
| import { readFileSync } from "node:fs"; | |
| import { createRequire } from "node:module"; | |
| const require = createRequire(import.meta.url); |
| if (cache.has(key)) return cache.get(key)!; | ||
|
|
||
| try { | ||
| const file = resolve(`./node_modules/@phosphor-icons/core/assets/${weight}/${name}.svg`); |
There was a problem hiding this comment.
Resolve the path to @phosphor-icons/core using the require.resolve helper created above to ensure it works reliably across different environments and monorepo setups.
| const file = resolve(`./node_modules/@phosphor-icons/core/assets/${weight}/${name}.svg`); | |
| const file = require.resolve(`@phosphor-icons/core/assets/${weight}/${name}.svg`); |
| <img | ||
| src={`${base}assets/wapuus/wapuu-astropuu.png`} | ||
| alt="" | ||
| aria-hidden="true" | ||
| class="tools-wapuu" | ||
| loading="lazy" | ||
| /> |
There was a problem hiding this comment.
Since this image is located in the hero section (above the fold), using loading="lazy" can negatively impact the Largest Contentful Paint (LCP) metric. It is recommended to remove loading="lazy" so the browser loads it eagerly.
<img
src={`${base}assets/wapuus/wapuu-astropuu.png`}
alt=""
aria-hidden="true"
class="tools-wapuu"
/>
| const navH = parseInt( | ||
| getComputedStyle(document.documentElement).getPropertyValue("--nav-h") || "64" | ||
| ); |
There was a problem hiding this comment.
If --nav-h is not defined or returns an unparseable value, parseInt will return NaN, which can break the smooth scroll calculation. Using parseInt(...) || 64 ensures a safe fallback to 64 in all cases.
const navH = parseInt(
getComputedStyle(document.documentElement).getPropertyValue("--nav-h")
) || 64;
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Pull request overview
Adds the Phase 11 “Tools” catalogue page and switches the site’s icon system to Phosphor, while consolidating shared catalogue card/badge styling into global CSS for reuse across pages.
Changes:
- Introduces a standalone
/c/tools/page with hero, section jump pills, and grouped tool sections. - Adds a build-time Phosphor SVG loader and updates
Icon.astroto routeph:*icon names through it. - Moves item card + type badge styling to
global.cssand updates sitewide icon references toph:*.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| website/src/styles/global.css | Makes catalogue/tool item card + type badge styles globally reusable. |
| website/src/pages/learn/index.astro | Updates learn track icon fallback to Phosphor. |
| website/src/pages/learn/[track]/index.astro | Updates learn track hero icon fallback to Phosphor. |
| website/src/pages/index.astro | Replaces homepage feature strip icons with Phosphor equivalents. |
| website/src/pages/c/tools.astro | Adds the new grouped Tools page with hero and section navigation. |
| website/src/pages/c/[cat].astro | Switches catalogue item marks and filter icon to Phosphor; removes duplicated scoped CSS now in global.css. |
| website/src/lib/phosphor.ts | Implements build-time SVG loading for @phosphor-icons/core assets with caching + fallback. |
| website/src/lib/learn.ts | Updates learn track icon IDs to Phosphor names. |
| website/src/lib/catalogue.ts | Updates category icon IDs to ph:* values. |
| website/src/components/AwesomeGithub/Icon.astro | Adds ph: routing and optional weight prop for Phosphor icons. |
| website/src/components/AwesomeGithub/AwesomeGithubNav.astro | Updates nav and drawer icon references to Phosphor equivalents. |
| website/package-lock.json | Lockfile normalisation aligned with dependency changes. |
| CHANGELOG.md | Documents Phase 11 Tools page + Phosphor icon migration. |
Files not reviewed (1)
- website/package-lock.json: Language not supported
| pill.addEventListener("click", (e) => { | ||
| e.preventDefault(); | ||
| const targetId = pill.getAttribute("href")?.slice(1); | ||
| if (!targetId) return; | ||
| const target = document.getElementById(targetId); | ||
| if (!target) return; | ||
| const navH = parseInt( | ||
| getComputedStyle(document.documentElement).getPropertyValue("--nav-h") | ||
| ) || 64; | ||
| const y = target.getBoundingClientRect().top + window.scrollY - navH - 20; | ||
| window.scrollTo({ top: y, behavior: "smooth" }); | ||
| }); |
… ph: prefix Introduces @phosphor-icons/core at build-time. Icon.astro now routes ph:name to Phosphor SVGs, falling back to the existing heroicons map. Closes #885
Updates catalogue.ts category icons, learn track icons, homepage feature icons, and nav chrome (sun/moon/search/github/menu/close/chevron) to use ph: prefix Phosphor icons. Item-type marks (robot, terminal-window, brackets-curly, shield-check, package, etc.) replace old heroicon strokes.
…hero Standalone /c/tools.astro with 4 sectioned groups (AI Defaults, Scripts, Schemas, Config & Setup) derived from item types. Section nav pills scroll to anchors with sticky-header offset. Item-card and type-badge CSS moved from [cat].astro into global.css for cross-page reuse.
- phosphor.ts: replace path.resolve with createRequire/require.resolve for robust package resolution across monorepos and CI environments - tools.astro: remove loading="lazy" from hero image (LCP improvement) - tools.astro: use parseInt(...) || 64 fallback for --nav-h CSS var - CHANGELOG.md: add Phase 11 entry under [Unreleased] > Added https://claude.ai/code/session_01GVDaZ8ayivyE1yD1VrKWwQ
- Guard against modifier-key clicks so Ctrl+click/middle-click open sections in a new tab as expected - Call history.pushState after smooth-scroll so the URL hash updates and back/forward navigation works correctly https://claude.ai/code/session_01GVDaZ8ayivyE1yD1VrKWwQ
afaaf71 to
adba0e1
Compare
Awesome GitHub Site Phase 11: Tools Page + Phosphor Icons Sitewide
Linked issues
Closes #885
Changelog
Added
/c/tools.astrowith astropuu Wapuu hero, section nav pills (AI Defaults, Scripts, Schemas, Config & Setup), and a build-time Phosphor icon loader (website/src/lib/phosphor.ts) usingcreateRequirefor robust package resolution. UpdatedIcon.astrowithph:prefix routing. Migrated item card and type badge styles intoglobal.css. Updated all category, nav, learn, and home icons to Phosphor equivalents sitewide.Changed
Icon.astro: addedph:prefix routing andweightprop for Phosphor iconscatalogue.ts: all eight category icons updated toph:*equivalentsglobal.css: item card, item mark, item tags, type badge styles moved from scoped[cat].astrostyles to shared global[cat].astro: removed duplicate scoped item card / type badge CSS; updated ITEM_MARKS and filter icon to PhosphorAwesomeGithubNav.astro: all icon references updated toph:*equivalentslearn.ts: track icons updated toph:*index.astro: feature strip icons updated toph:*Risk Assessment
Risk Level: Medium
Potential Impact: Icon system change touches every page. A missing SVG file at build time falls back to a neutral placeholder rect — no page would fail to render. CSS moved to global.css is additive; existing scoped styles in tools page are net-new.
Mitigation Steps:
@phosphor-icons/corepackage assetsphosphor.tscatches any missing icon gracefullycreateRequirepath resolution is robust across monorepo and CI environments (Gemini review applied)How to Test
Prerequisites
npm ciinwebsite/npm run build— should produce 333 pages with 0 errorsTest Steps
cd website && npm run build— confirm 0 errors, ~333 pages/c/tools/— confirm 4 section nav pills, cards grouped by AI Defaults / Scripts / Schemas / Config & Setup/c/agents/,/c/prompts/etc — confirm Phosphor icons render in cards and filter barcurrentColorcorrectly in both modesExpected Results
All pages build without error. Every
ph:*icon renders as an inline SVG with correct size. No broken icon slots anywhere on the site.Edge Cases to Verify
aria-hidden="true", semantic headings)Checklist (Global DoD / PR)
last_updatedandversion)References