feat(website): replace Starlight with custom Astro resource browser UI#2173
Open
JhonHander wants to merge 27 commits into
Open
feat(website): replace Starlight with custom Astro resource browser UI#2173JhonHander wants to merge 27 commits into
JhonHander 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
