Skip to content

implement widget-slot architecture with parallel routes#391

Merged
JeremyDev87 merged 5 commits intomasterfrom
feat/312-widget-slot-architecture
Feb 15, 2026
Merged

implement widget-slot architecture with parallel routes#391
JeremyDev87 merged 5 commits intomasterfrom
feat/312-widget-slot-architecture

Conversation

@JeremyDev87
Copy link
Owner

Summary

Implements the Widget-Slot Architecture (WSA) for the landing page using Next.js Parallel Routes, enabling independent loading states and error boundaries per widget slot.

  • Add locale utility with DEFAULT_LOCALE, SUPPORTED_LOCALES, and validation helper
  • Add shared components: SlotError (error boundary UI), Skeleton (loading primitive), SetDocumentLang (client-side locale)
  • Add widget placeholders: AgentsShowcase, CodeExample, QuickStart with accessible markup (aria-labelledby, lang, data-testid)
  • Add [locale] route group with 3 parallel route slots (@agents, @code_example, @quick_start), each with page, loading, error, and default files
  • Update root page to redirect to default locale
  • Add SlotProps type and refine WidgetProps.locale to SupportedLocale
  • Add prefers-reduced-motion accessibility styles
  • Update accessibility tests for the new architecture (widget sections, loading states, error states)

Commits

  1. docs(landing-page): add widget-slot architecture implementation plan
  2. feat(landing-page): add locale utility with supported locale validation
  3. feat(landing-page): add shared components for widget slot architecture
  4. feat(landing-page): add widget placeholder components with tests
  5. feat(landing-page): implement parallel routes with locale slot layout

Test plan

  • Verify locale.ts utility correctly validates supported locales (en, ko)
  • Verify SlotError component renders with role="alert" and retry button
  • Verify widget placeholders render with correct aria-labelledby, lang, and data-testid attributes
  • Verify loading skeleton components have aria-busy="true"
  • Verify parallel route slots render independently (each slot loads/errors without affecting others)
  • Verify root / redirects to /en (default locale)
  • Run yarn workspace landing-page test — all accessibility tests pass
  • Verify axe-core reports zero violations for English and Korean locales

Closes #312

Document the WSA design using Next.js Parallel Routes for independent
loading states and error boundaries per widget slot.
Add locale constants (DEFAULT_LOCALE, SUPPORTED_LOCALES) and validation
helper. Configure vitest path alias for @/ imports.
Add SlotError (error boundary UI with role="alert"), Skeleton loading
primitive, and SetDocumentLang client component for locale-aware HTML.
Add AgentsShowcase, CodeExample, and QuickStart widget placeholders
with accessible markup (aria-labelledby, lang, testid). Include unit
tests for rendering and loading state components.
Add [locale] route group with parallel route slots (@agentS,
@code_example, @quick_start) each having independent page, loading,
error, and default files. Update root page to redirect to default
locale. Add SlotProps type, refine WidgetProps locale to
SupportedLocale, add reduced-motion a11y styles, and update
accessibility tests for the new widget-slot architecture.

Closes #312
@JeremyDev87 JeremyDev87 self-assigned this Feb 15, 2026
@JeremyDev87 JeremyDev87 changed the title feat(landing-page): implement widget-slot architecture with parallel routes implement widget-slot architecture with parallel routes Feb 15, 2026
@JeremyDev87 JeremyDev87 merged commit 655cbcf into master Feb 15, 2026
23 checks passed
@JeremyDev87 JeremyDev87 deleted the feat/312-widget-slot-architecture branch February 15, 2026 13:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Widget-Slot Architecture (WSA)

1 participant