feat(website): replace Starlight with custom Astro resource browser UI#2173
feat(website): replace Starlight with custom Astro resource browser UI#2173JhonHander wants to merge 27 commits into
Conversation
- BaseLayout.astro: custom layout replacing StarlightPage wrapper with head, navigation, footer, and slot-based content area - Site config (site.ts, nav.ts): centralized site metadata, navigation links, and footer links - Layout components: Navigation.astro (desktop + mobile drawer), Footer.astro (links, social, copyright) - UI primitives: Button, Card, Badge, Icon, Container, Accordion, 8BitButton, RetroResourceCard - Add copilot-icon.png for navigation branding
Resource components: - ResourceCard.astro: pixel-art card with type icon, badges, and hover - ResourceFilters.astro: terminal-style filter bar with checkboxes - ResourceGrid.astro: responsive 3-column grid layout - ResourceModal.astro: detail modal with client:only interactivity - ResourceSearch.astro: search input with debounce and clear button Page sections: - HeroSection.astro: hero banner with gradient and CTA - Hero.astro: legacy hero (kept for backward compat) - CTASection.astro: call-to-action with retro styling - FaqSection.astro: accordion-based FAQ - SearchBar.astro: standalone search bar component - SectionCards.astro: resource type summary cards - Stats.astro: pixel stat counter cards
Library layer: - types.ts: shared TypeScript interfaces (ResourceItem, FilterState, ModalState, ResourceCardProps) - upstream-types.ts: typed interfaces for manifest, search index, agents, instructions, skills, and hooks JSON schemas - adapters/: manifest and search index adapters that normalize upstream JSON data into typed summaries - search/: filter logic, fuzzy search, and URL state sync utilities Client scripts: - filters.ts: filter state management with URL sync - search-client.ts: Pagefind search integration - url-state.ts: URL parameter encoding/decoding for filters - modal-client.ts: modal open/close/keyboard handling - Add openspec/ directory for specification tracking
- Disable Starlight's built-in pagefind (pagefind: false) to avoid building duplicate search indexes - Remove virtual:starlight/pagefind-config import from Search.astro - Rewrite pagefind-resources.ts to use explicit addHTMLFile instead of addDirectory, skipping /agent/* pages (already indexed as resource records) - Add collectHtmlFiles() and toPagefindUrl() helpers for fine-grained control over which pages enter the search index - Log indexed page count and skipped agent detail pages
- index.astro: replace StarlightPage with BaseLayout, render HeroSection, CTASection, FaqSection with adapted manifest/search data - agents.astro: replace StarlightPage with BaseLayout, use ResourceGrid, ResourceFilters, ResourceModal with client-side search and URL sync - instructions.astro: same pattern as agents.astro for instructions - agent.astro: new detail page for individual agent view - instruction.astro: new detail page for individual instruction view - Preserve upstream data adapters, fuzzy search, filter logic, URL state sync, and modal behavior from original pages
- Add PageFrame.astro: custom Starlight page frame with sidebar handling and Navigation integration - Add Empty.astro: disable Starlight chrome (ThemeSelect) replaced by site navigation - Register PageFrame and ThemeSelect overrides in astro.config.mjs - Scope starlight-overrides.css to :root:has(learning-hub canonical) instead of global :root, using design system CSS custom properties for all Starlight color tokens - Set content width (58rem) and sidebar width (18.75rem) for learning-hub readability
- Replace inline GitHub button markup with BitButton component (variant="secondary", size="sm") - Remove duplicated .bit-btn CSS rules from Navigation.astro (now owned by 8BitButton.astro) - Simplify header layout by removing .bit-btn-inner wrapper
- Add .console-select-control styles for Choices.js integration (inner, dropdown, multiple items, expanded list) - Add .resource-card__preview display:contents reset for clickable card areas - Add .resource-card__title and .resource-card__description margin resets - Add .resource-card__tags styling for inline tag pills with border, background, and muted text
All five render scripts (hooks, plugins, skills, tools, workflows): - Add getStableAccent() — deterministic hash-based color assignment (purple/blue/green/yellow) for consistent card accent colors - Replace legacy .resource-info/.resource-title/.resource-description with .resource-card__topline, .resource-card__body, .resource-card__title, .resource-card__description structure - Add type badge in topline (badge--blue/green/yellow/purple) - Replace .resource-tag classes with plain <span> elements styled via .resource-card__tags - Replace .resource-actions with .resource-card__footer
…yout Migrate hooks, plugins, skills, tools, and workflows pages: - Replace StarlightPage wrapper with BaseLayout - Use Container + Card (console-header-card) for page headers - Add computed stats in frontmatter (unique hooks, external count, asset counts, tag/trigger/category lists) - Replace PageHeader with inline console header pattern (eyebrow, title, description) - Keep EmbeddedPageData script tags for client-side rendering - Preserve BackToTop and ContributeCTA components - Maintain all existing filter/sort controls and resource-list containers for client-side interactivity
Detail pages (hook, plugin, skill, tool, workflow): - Each page wraps BaseLayout + ResourceDetailPage with kind-specific props and initResourceDetail() client script ResourceDetailPage.astro: - Shared detail layout with breadcrumbs, hero panel, terminal-style header, feature/spec/metadata sections, install command with copy - Client-side data fetching from JSON manifests Client scripts: - resource-catalog.ts: unified catalog client with search, filter (multi/single), URL state sync, accent color assignment, and keyboard navigation - resource-detail.ts: detail page initializer — fetches resource data by kind, populates DOM elements, handles copy-to-clipboard for install commands
- Adjust main content padding (1.875rem 2.25rem) with max-width 60rem - Remove redundant padding from .lg\:sl-flex container - Reduce content-panel top padding to eliminate double-spacing - Separate code block vs inline code styles: - pre: green left-border accent, elevated bg, 1rem padding - inline code: subtle border, green text, compact padding - Widen right sidebar (flex: auto) with adjusted padding - Fix responsive main padding at 72rem breakpoint
- Redesign BackToTop in 8-bit CLI style, remove from extensions page - Restructure Footer brand layout with tagline and slogan - Consolidate accordion toggle script into FaqSection - Update copy across CTA, FAQ, and Hero sections
# Conflicts: # website/src/pages/contributors.astro
IEvangelist
left a comment
IEvangelist
left a comment
There was a problem hiding this comment.
First off — I really like this design and think it's a huge improvement. The retro-futuristic "resource console" direction gives the site real personality, the listing/detail layouts are far more usable than the old Starlight docs, and the filter controls are a genuinely nice addition. This is a big step forward. I'd love to see it land, but there are a number of things I'd want addressed first.
Note
I'm also running a more thorough automated review of this PR, which I'll post at a later point. The items below are my manual pass.
🔴 Blocking
-
The production build fails.
astro builderrors with[MISSING_EXPORT] "openCardDetailsModal" is not exported by "src/scripts/modal.ts"— imported insrc/scripts/pages/extensions.ts:23and called at:241.modal.tsonly exportssetupModal,setupInstallDropdown,openFileModal,closeModal,getCurrentFilePath,getCurrentFileContent. It only looks fine becauseastro devdoesn't validate exports the way the rolldown production build does — so CI/deploy would fail and the/extensions/card modal is broken. (While in there, please clean up the repeated:global()lightningcss warnings on.resource-card__cta.) -
The "Install plugin" button doesn't work. Plugin detail sets
filePath: ""(resource-detail.ts:381), and the install-button click handler only attaches whendetail.filePathis truthy (:575), so no listener is ever wired up. The button is dead on every plugin page.
⚠️ Functional / correctness
-
Filter "clear" button uses a delete/trash affordance. The red color + trash icon reads as "delete this resource," when it only clears filters. Misleading and a little alarming — swap for a neutral "Clear filters" style (e.g. an ✕ or reset icon, non-destructive color).
-
Instructions page shows
..for every extension filter. Extension values already include the leading dot (.ts,.js, …), butinstructions.astro:277formats them as`.${e}`→..ts. Should render a single.. -
Agents page model filter is too broad.
agents.astro:145joins all of an item's models into one combined string, so the filter produces one entry per unique combination rather than per model. Users can't filter by a single model. Should split/normalize into individual model options.
♿ Accessibility
- Numerous axe/WCAG issues across the site (
aria-allowed-role,aria-required-children,nested-interactive, 1.4.3 contrast, etc.). #2180 already fixes these at the source and adds a checked-in axe regression guardrail (green across all 12 routes × 2 themes). Recommend rebasing on / folding in those fixes so v2 ships accessible instead of regressing a11y.
🎨 Design / UX polish
-
Contribute CTA lost prominence. Each listing page only has the contribute component at the very bottom now. In v1 this was much more visible — please keep a contribute affordance in the console header area of each subpage listing too, not just the footer.
-
The 8-bit style is overdone in places. I like it on some elements, but several pixel-art glyphs don't read as their intended icon:
- The search icon barely looks like a magnifying glass.
- The dropdown carets don't read as carets.
- The share icon on detail pages looks bad.
These come from
components/ui/Icon.astro(shape-rendering: crispEdges). Dial the 8-bit treatment back to where the meaning stays clear. -
Top-nav GitHub button should be a clean icon.
Navigation.astro:64uses an 8-bitBitButton"GITHUB →". It should be a simple, clean GitHub icon for parity with the clean "GitHub Copilot (Awesome)" branding on the left — not an 8-bit button. -
Plugin detail layout needs work. The install command is duplicated between the main "Usage" section (
ResourceDetailPage.astro:63) and the right sidebar "Command" (:86). The sidebar also renders acopybadge right next to the realCopyButton, so it looks like two copy buttons. Consolidate the redundant info and remove the duplicate copy affordance. -
Remove the footer slogan.
Footer.astro:10hasEVG en el mapa— please drop it. -
"More Tools Coming Soon" card needs a UX pass.
tools.astro:78— the placeholder card at the bottom looks unfinished/rough.
Summary: Big fan of the direction — it's a real upgrade. Before merge I'd want the two blockers fixed (build failure + dead Install button), the data/filter correctness bugs sorted, the a11y issues addressed (coordinate with #2180), and a pass on the design-polish items above.
IEvangelist
left a comment
IEvangelist
left a comment
There was a problem hiding this comment.
Following up on my earlier request-changes review with inline anchors and a couple of one-click suggestions where the fix is a clean one-liner.
One correction on the build blocker: the root cause is this PR's modal.ts refactor dropping the openCardDetailsModal export (still present on main), which the still-loaded legacy src/scripts/pages/extensions.ts imports — not extensions.ts itself. Details inline.
As noted before, I'm also running a more thorough automated review that I'll post separately.
| import PageHeader from '../components/PageHeader.astro'; | ||
| import BackToTop from '../components/BackToTop.astro'; | ||
| import Modal from '../components/Modal.astro'; | ||
| import { renderExtensionsHtml, sortExtensions } from '../scripts/pages/extensions-render'; |
There was a problem hiding this comment.
🔴 Build blocker — the production build fails. This PR's modal.ts refactor removed the openCardDetailsModal export (it still exists on main), but the legacy client script src/scripts/pages/extensions.ts — still loaded by this page via import '../scripts/pages/extensions' on line 59 — imports it. astro build then dies with:
[MISSING_EXPORT] "openCardDetailsModal" is not exported by "src/scripts/modal.ts"
It only looks fine under astro dev because Vite doesn't validate exports the way the rolldown production build does — so CI/deploy would fail and the /extensions/ card details modal is broken. Fix by re-exporting openCardDetailsModal from modal.ts, or by dropping the now-obsolete legacy import/script (the page moved to extensions-render.ts).
There was a problem hiding this comment.
You might want to consider using a tsconfig.json that maps alias paths to avoid relative path fatigue too...
| sourcePath: repository, | ||
| downloadHref: repository, | ||
| shareHref: `/plugin/${encodeURIComponent(item.id)}/`, | ||
| filePath: "", |
There was a problem hiding this comment.
The "Install plugin" button never works. Plugin detail sets filePath: "" here, and the install-button click handler only attaches when detail.filePath is truthy (≈ line 575), so no listener is ever wired up on plugin pages — the button is dead. Either populate a real filePath or relax the guard so the install action binds for plugins too.
| </select> | ||
| </label> | ||
|
|
||
| <button class="console-reset-control" type="button" aria-label="Clear filters" id="filter-clear"><Icon name="delete" size={15} /></button> |
There was a problem hiding this comment.
Misleading "clear filters" affordance. This reset control renders Icon name="delete" (a red trash icon), which reads as "delete this resource" rather than "clear filters." Please use a neutral reset/✕ glyph and a non-destructive color. Note the same console-reset-control markup is duplicated across the agents/hooks/skills/tools/workflows/plugins pages, so the fix should cover all of them.
| } | ||
|
|
||
| const extensions = [...new Set(items.flatMap(i => i.filterExtension))].sort(); | ||
| const extOptions = extensions.map(e => ({ value: e, label: `.${e}` })); |
There was a problem hiding this comment.
Extension filter shows .. for every option. The values already include the leading dot (.ts, .js, …), so label: `.${e}` renders ..ts. Drop the extra dot:
| const extOptions = extensions.map(e => ({ value: e, label: `.${e}` })); | |
| const extOptions = extensions.map(e => ({ value: e, label: e })); |
| }; | ||
|
|
||
| function getModel(item: AgentItem): string { | ||
| return item.model && Array.isArray(item.model) && item.model.length > 0 ? item.model.join(', ') : '(none)'; |
There was a problem hiding this comment.
Model filter is too broad. Joining all of an item's models into a single combined string here produces one filter entry per unique combination of models rather than per individual model, so users can't filter by a single model. Consider normalizing to individual model options (one entry per model, de-duped).
| <strong>{SITE.title}</strong> | ||
| <span class="tagline">open-source Copilot resources</span> | ||
| </div> | ||
| <span class="footer-slogan">EVG en el mapa</span> |
There was a problem hiding this comment.
Remove the footer slogan — EVG en el mapa looks like leftover placeholder text.
| <span class="footer-slogan">EVG en el mapa</span> |
| } | ||
| </nav> | ||
|
|
||
| <BitButton |
There was a problem hiding this comment.
Top-nav GitHub button should be a clean icon. This 8-bit BitButton "GITHUB ->" clashes with the clean "GitHub Copilot (Awesome)" branding on the left. A simple, clean GitHub icon link would give much better parity than an 8-bit button here.
| 'M12 3h3v3h3v3h3v6h-3v3h-3v3H9v-3H6v-3H3V9h3V6h3V3h3Zm0 4H9v3H7v4h2v3h6v-3h2v-4h-2V7h-3Z', | ||
| github: | ||
| 'M12 .5a12 12 0 0 0-3.8 23.39c.6.11.82-.26.82-.58v-2.04c-3.34.73-4.04-1.42-4.04-1.42-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.08 1.83 2.82 1.3 3.5.99.11-.78.43-1.3.78-1.6-2.66-.31-5.46-1.34-5.46-5.94 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.53.12-3.18 0 0 1.01-.32 3.3 1.23a11.44 11.44 0 0 1 6.01 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.65.25 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.62-2.81 5.63-5.49 5.93.44.38.83 1.11.83 2.24v3.32c0 .32.21.7.83.58A12 12 0 0 0 12 .5Z', | ||
| search: |
There was a problem hiding this comment.
8-bit icon set is overdone in a few spots. Love the pixel-art personality overall, but several glyphs don't read as their intended icon — the search icon barely reads as a magnifying glass, the dropdown carets don't read as carets, and the share icon looks rough. These are rendered with shape-rendering: crispEdges; consider dialing the 8-bit treatment back where legibility suffers.
| </section> | ||
| ) : null} | ||
|
|
||
| <section class="content-panel pixel-panel" aria-labelledby="usage-title"> |
There was a problem hiding this comment.
Plugin detail layout has redundant info. The install command shown here in the main "Usage" section is duplicated in the right sidebar "Command" (≈ line 86), and the sidebar also renders a copy badge right next to the real CopyButton (≈ line 89), so it looks like two copy buttons. Consolidate the duplicated command and drop the extra copy affordance.
| color: white; | ||
| border-color: var(--color-success); | ||
| } | ||
| <Card class="coming-soon-card"> |
There was a problem hiding this comment.
"More Tools Coming Soon" card needs a UX pass. This placeholder reads as unfinished. Consider softening it (muted styling/illustration) or removing it until there's real content to show.
|
I think plus and minus icons would be a better than the standard chevrons here, and would even play into some of the other design elements too: 
|
|
I think the subpages hero sections could benefit from a bit of colors. Maybe in the Also, on mobile the text extends beyond the container, we need to fix that layout. 
|
IEvangelist
left a comment
IEvangelist
left a comment
There was a problem hiding this comment.
Thanks for putting this together — I pulled the branch down and clicked through every page, and I want to lead with the headline: the redesign is a huge improvement. The retro-console direction has real personality, the information density is much better, and pages like Contributors and the detail views look great. I'm genuinely excited about where this is going. 🙌
To help get it over the line, I ran a full Playwright click-through of every listing and detail page and captured follow-up usability items. I've grouped them by rough priority — the large majority are small polish items, and none of them change my mind about the overall direction. I've left inline suggestions on the code-level ones.
(I'll attach the screenshots referenced below in a follow-up comment.)
🔴 Blocking
/extensions/returns HTTP 500 — the whole Canvas Extensions page is down.public/data/extensions.jsonhas aCoffilotentry withpath: null/ref: null, andextensions-render.tsnow callsitem.path.replace(...)without theitem.path && item.refguard thatmainhad, so one bad record takes down the page (and would fail the static build too). Inline suggestion on the exact line.
🟠 High
- Plugin “Install plugin” button does nothing. Plugin details set
filePath: "", and the hero-install handler only binds whenfilePathis truthy, so the click is a no-op on every plugin. (07-plugin-detail.png) — inline suggestion attached. - Agents “model” filter is hard to use. The options are whole model combinations joined into one string (e.g.
GPT-4.1, GPT-5.4, Claude Sonnet 4.6) plus a stray(none), so you can't filter by a single model. (02-agents-modelfilter.png) — inline suggestion attached. - Homepage logs a
SyntaxError: … JSON at position 4in the console on load (the search-index island). Search still works, but it throws an error on every visit. (01-home.png)
🟡 Medium
- Double-dotted extension labels — the Instructions extension filter and card tags render
..cs,..yml,..astro(a leading.is added to values that already include one). (06-instructions-extfilter.png) — inline suggestion attached. - Clear-filters uses a red trash / delete icon across listing pages — it reads as “delete resource,” not “reset filters.” A neutral ✕ or a “Clear” pill would be clearer. (
15b-clear-trash.png,02-agents-modelfilter.png) - Duplicated install command + copy control on detail pages (main body and right sidebar). On plugins the sidebar also shows a small COPY badge right next to the COPY COMMAND button, which looks like two copy buttons (agents render a shell label there instead). (
07-plugin-detail.png) - A few 8-bit icons hurt legibility — the search glyph barely reads as a magnifying glass, the dropdown carets are ambiguous, and the “VS Code” logos in the Install dialog are unrecognizable. (
04-agent-install.png) — inline note onIcon.astro. - Top-nav “GITHUB →” is a chunky 8-bit button that clashes with the crisp GitHub Copilot / Awesome wordmark on the left; a clean octocat would match (the path is already a real octocat — it's the button chrome). (
15a-nav-github-btn.png) - Footer slogan “EVG en el mapa” looks like a leftover — suggest removing. (
08-tools-comingsoon.png) — inline suggestion attached. - Hero search + example results are decorative — there's no input, so it looks interactive but isn't, and the “Explore resources” CTA links to
/(itself). (01-home.png)
🟢 Low / polish
- Tools “More Tools Coming Soon” is a large empty banner sitting right above the (much nicer) “Don't see what you're looking for?” contribute CTA — I'd merge the two. (
08-tools-comingsoon.png) - Literal
(none)chips on agent cards; agent detail's “status: agent” just repeats the type. - Pluralization: “1 assets”, “1 files”, “1 CONTRIBS”. (
12-skills-console.png,13-contributors.png) - Acronym casing: “Ai Ready” / “Ai Team Orchestration” → “AI”. (
12-skills-console.png) - Badge colors look arbitrary — the same
agent/assetlabel appears in different colors with no legend. (02-agents-modelfilter.png,12-skills-console.png) - Plugin author shows “(unknown).” (
07-plugin-detail.png)
💚 What's working well
- Install + Share on agent detail work great (VS Code deep links + X / WhatsApp / LinkedIn / copy). (
04-agent-install.png,05-agent-share.png) - URL-synced filters, the Contributors page, and the Learning Hub all feel solid.
- The bottom contribute banner on Tools (“Contribute yours” / “Request a resource”) is exactly right — I'd love to see that promoted into the header of every listing page, since the current header contribute link is easy to miss. (
08-tools-comingsoon.png)
Really nice work overall — thank you for the effort here. Happy to pair on any of these.
| type="button" | ||
| class="btn btn-primary btn-small copy-install-url-btn" | ||
| data-install-url="${escapeHtml( | ||
| `https://github.com/github/awesome-copilot/tree/${item.ref}/${item.path.replace( |
There was a problem hiding this comment.
🔴 This line takes down the entire /extensions/ page with a 500. extensions.json includes a Coffilot entry with path: null / ref: null, so item.path.replace(...) throws Cannot read properties of null (reading 'replace'). main guarded this with item.path && item.ref ? … : … — that guard was dropped in the refactor. Suggest restoring a null check (skip the record, or fall back to item.sourceUrl / getGitHubUrl) and sanitizing the data so no entry has a null path/ref.
| }); | ||
| } | ||
|
|
||
| if (heroInstallBtn && dialog && detail.filePath) { |
There was a problem hiding this comment.
🟠 The hero Install button only gets a click handler when detail.filePath is truthy — but plugin (and tool) configs set filePath: "" (line 381), so the button is inert on every plugin page. Suggest wiring a fallback for the empty-filePath case (e.g. copy the install command shown in the sidebar, or open the source URL) so the primary CTA always does something.
| }; | ||
|
|
||
| function getModel(item: AgentItem): string { | ||
| return item.model && Array.isArray(item.model) && item.model.length > 0 ? item.model.join(', ') : '(none)'; |
There was a problem hiding this comment.
🟠 item.model.join(', ') collapses an agent's models into a single string, which becomes one filterModel value. The model dropdown (built from new Set(items.map(a => a.filterModel)) further down) then lists whole combinations as options instead of individual models, and agents with no model surface a literal (none). Suggest keeping models as a string[] and building the filter options from the flattened, de-duped set of individual model names.
| } | ||
|
|
||
| const extensions = [...new Set(items.flatMap(i => i.filterExtension))].sort(); | ||
| const extOptions = extensions.map(e => ({ value: e, label: `.${e}` })); |
There was a problem hiding this comment.
🟡 label: .${e} prepends a dot, but the extension values already include one, so options render as `..cs`, `..astro`, etc. The card tags at line 164 do the same. Suggest normalizing, e.g. `label: e.startsWith('.') ? e : `.${e} in both places.
| <strong>{SITE.title}</strong> | ||
| <span class="tagline">open-source Copilot resources</span> | ||
| </div> | ||
| <span class="footer-slogan">EVG en el mapa</span> |
There was a problem hiding this comment.
🟡 This slogan looks like a leftover — suggest removing it.
| <span class="footer-slogan">EVG en el mapa</span> |
| github: | ||
| 'M12 .5a12 12 0 0 0-3.8 23.39c.6.11.82-.26.82-.58v-2.04c-3.34.73-4.04-1.42-4.04-1.42-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.08 1.83 2.82 1.3 3.5.99.11-.78.43-1.3.78-1.6-2.66-.31-5.46-1.34-5.46-5.94 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.53.12-3.18 0 0 1.01-.32 3.3 1.23a11.44 11.44 0 0 1 6.01 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.65.25 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.62-2.81 5.63-5.49 5.93.44.38.83 1.11.83 2.24v3.32c0 .32.21.7.83.58A12 12 0 0 0 12 .5Z', | ||
| search: | ||
| 'M7 4h7v2h2v7h-2v2h-2v2h2v2h2v2h-3v-2h-2v-2H9v-2H7v-2H5V6h2V4Zm1 3v5h5V7H8Z', |
There was a problem hiding this comment.
🟡 A few of these pixel glyphs are hard to read at UI sizes — the search magnifying glass especially, plus the dropdown carets and the VS Code brand mark in the Install dialog (which renders as an unrecognizable blob). Might be worth cleaner glyphs (or a slightly higher-fidelity path) for the functional icons while keeping the retro flavor for decorative ones. FWIW the github path here is already a proper octocat — it's the blue button chrome in the nav that makes it look 8-bit.
Pull Request Checklist
npm startand verified thatREADME.mdis up to date.stagedbranch for this pull request.Summary
Replaces the Starlight-based website with a custom Astro UI system for browsing resources (agents, instructions, skills, hooks, plugins, workflows, tools) and learning hub documentation.
Motivation: The current Starlight site provides a vanilla documentation experience. This refactor introduces a modern resource browsing interface with filtering, search, modals, and detail pages — while keeping the upstream data generation pipeline and learning content intact.
What Changed
Architecture (126 files, +19k / -7.4k lines)
New UI system:
website/src/layouts/— BaseLayout and docs/resource shells replacing Starlight layoutswebsite/src/components/ui/— UI primitives (Buttons, Badges, etc.)website/src/components/resource/— ResourceCard, ResourceFilters, ResourceGrid, ResourceModalwebsite/src/components/layout/— Navigation, FooterPages migrated to BaseLayout:
agents.astro,instructions.astro,skills.astro,hooks.astro,plugins.astro,workflows.astro,tools.astroindex.astro(home page)New features:
ResourceDetailPage.astro)search-client.ts)url-state.ts) for filter/share persistenceShareModal.astro,share-modal.ts)resource-catalog.ts,resource-detail.ts)Preserved upstream contracts:
eng/generate-website-data.mjs— data generation (minimal changes for agent name normalization)website/public/data/— unchanged outputwebsite/src/content/docs/learning-hub/— unchanged upstream docsDesign system:
website/src/styles/tokens.css— Design tokenswebsite/src/styles/global.css— Completely rewrittenwebsite/DESIGN.md— Component and design documentationNot changed
website/Screenshots
/home
/agent
/detail
/learning-hub
