Phase 3: Build Glossary Web Viewer (GitHub Pages)

[GarthDB]

Overview

Create a static, searchable web interface for browsing the Spectrum Design System Glossary, deployed to GitHub Pages.

Related: RFC Discussion #661 - Spectrum Design System Glossary

Deliverables

1. Package Structure

• Create docs/spectrum-glossary/ package
• Add package.json, moon.yml, build scripts
• Follow pattern from existing docs sites (docs/s2-tokens-viewer)

2. Core Features

• Search & Filter: Full-text search across all terms
• Category Navigation: Browse by registry type (sizes, states, variants, etc.)
• Term Detail View: Show all metadata
  • Definition (superordinate, description, characteristics)
  • Platform variations
  • Sources and references
  • Related terms with cross-links
• Export: JSON, CSV download options
• Deep Linking: Direct URLs to specific terms
• Mobile Responsive: WCAG 2.1 AA compliant

3. Build System

• scripts/build-glossary.js - Compile registry data into static HTML
• Generate static API files in api/v1/ directory
• Integrate with existing build pipeline

4. GitHub Pages Deployment

• Configure repository for Pages
• Create .github/workflows/deploy-glossary.yml
• Auto-deploy on changes to registry
• Target URL: https://adobe.github.io/spectrum-design-data/glossary/

5. Integration

• Link from existing Spectrum documentation
• Embed help links in Component Options Editor
• Reference in naming guide documentation

Dependencies

• ✅ Phase 1: Enhanced schema and content (Completed in feat/add-design-system-registry branch)
• ✅ Phase 2: Platform extensions (Completed in feat/add-design-system-registry branch)

Acceptance Criteria

• Glossary accessible at GitHub Pages URL
• All 179 registry terms searchable and browsable
• Mobile-responsive design
• WCAG 2.1 AA accessibility compliance
• Auto-deployment working via GitHub Actions
• Export functionality (JSON, CSV) working
• Load time < 2 seconds
• Search results < 500ms

Estimated Effort

2-3 weeks

Related

• RFC: [DRAFT RFC] Spectrum Design System Glossary #661
• Implementation Status: GLOSSARY_IMPLEMENTATION_STATUS.md