Summary
Replace all emoji icons across the Awesome GitHub Astro site with inline Phosphor SVGs, and fix the mobile navigation menu's z-index stacking and scroll-lock behaviour.
Changes
Phosphor icon system
- New
Icon.astro component — resolves Phosphor SVG assets at build time via import.meta.resolve() + fs.readFileSync, inlines them with set:html, and regex-replaces existing width/height attributes to avoid duplicate attributes
console.warn on missing icon name so typos surface at build timeTRACK_ICONS constant extracted to lib/learn.ts (was duplicated across two learn pages)- Emoji replaced with
<Icon> on: getting-started.astro, c/[type]/index.astro, cookbook/[slug].astro, learning-hub/index.astro, learn/index.astro, learn/[track]/index.astro
resources.ts icon values updated from emoji to Phosphor icon names.ag-type-icon CSS updated from font-size: 32px to display: flex; color: var(--accent) (SVG does not respond to font-size)@phosphor-icons/core added to website/package.json
Mobile navigation fix
.ag-nav-menu assigned z-index: 99 in @media (max-width: 768px) (was z-index: auto, stacking behind page content)- Body scroll-lock:
document.body.style.overflow = "hidden" on open, cleared on close
matchMedia resize handler clears scroll-lock if viewport widens past 768 px while menu is opencloseMenu helper scoped inside if (hamburger && menu) guard for TypeScript correctness- Escape key closes menu and restores focus to hamburger button
Implemented in
PR #843
Summary
Replace all emoji icons across the Awesome GitHub Astro site with inline Phosphor SVGs, and fix the mobile navigation menu's z-index stacking and scroll-lock behaviour.
Changes
Phosphor icon system
Icon.astrocomponent — resolves Phosphor SVG assets at build time viaimport.meta.resolve()+fs.readFileSync, inlines them withset:html, and regex-replaces existingwidth/heightattributes to avoid duplicate attributesconsole.warnon missing icon name so typos surface at build timeTRACK_ICONSconstant extracted tolib/learn.ts(was duplicated across two learn pages)<Icon>on:getting-started.astro,c/[type]/index.astro,cookbook/[slug].astro,learning-hub/index.astro,learn/index.astro,learn/[track]/index.astroresources.tsicon values updated from emoji to Phosphor icon names.ag-type-iconCSS updated fromfont-size: 32pxtodisplay: flex; color: var(--accent)(SVG does not respond to font-size)@phosphor-icons/coreadded towebsite/package.jsonMobile navigation fix
.ag-nav-menuassignedz-index: 99in@media (max-width: 768px)(wasz-index: auto, stacking behind page content)document.body.style.overflow = "hidden"on open, cleared on closematchMediaresize handler clears scroll-lock if viewport widens past 768 px while menu is opencloseMenuhelper scoped insideif (hamburger && menu)guard for TypeScript correctnessImplemented in
PR #843