2.7 KiB
2.7 KiB
Project: Split-Screen Editorial Carousel
Architecture
This project extends the existing EDITORIAL_CAROUSEL page section schema and UI components in the HomAroma monorepo.
- Database/Types Schema:
packages/types/index.tsdefines the types used across the frontend applications (apps/admin, apps/spa, apps/website) and backend services. - Backend Validation:
apps/backend/src/routes/pages.tsvalidates incoming payloads using schemas imported from@homaroma/types. - CMS/MCP Server:
apps/mcp-server/section-toolkit.tsexposes MCP tools for managing/updating content, using schemas aligned with@homaroma/types. - Admin UI:
apps/admin/src/components/page-builder/EditorialCarouselForm.tsxrenders a form for content managers to configure the carousel layout and content. - SPA Frontend:
apps/spa/src/components/DynamicEditorialCarousel.tsxrenders the carousel on the SPA client. - Website Frontend:
apps/website/src/components/dynamic/DynamicPageRenderer.tsxcontains the website'sEditorialCarouselSectionrenderer.
Milestones
| # | Name | Scope | Dependencies | Status |
|---|---|---|---|---|
| M1 | Schema & Types | Update EditorialCarouselSectionPayloadSchema in packages/types/index.ts to include layout and imagePosition. Update apps/mcp-server/section-toolkit.ts to expose those fields in the update_editorial_carousel tool. |
None | DONE |
| M2 | Admin CMS UI | Update EditorialCarouselForm.tsx to support configuring layout and imagePosition for the carousel section. |
M1 | DONE |
| M3 | Frontend UI | Update the carousel components in apps/spa and apps/website to support split_screen and standard layouts, respecting desktop split proportions and mobile stacked views, using theme tokens. |
M1 | DONE |
| M4 | E2E & Type Verification | Run monorepo typechecking, build validation, and test section CRUD operations using MCP tools. | M2, M3 | DONE |
Interface Contracts
packages/types -> Consumers
EditorialCarouselSectionPayloadSchemaincludes:layout: z.enum(['standard', 'split_screen']).optional()imagePosition: z.enum(['left', 'right']).optional()
- When
layoutis omitted or'standard', components should fall back to existing slide behavior. - When
layoutis'split_screen', the components render the new split-screen layout.
Code Layout
- Schema:
packages/types/index.ts - MCP Server config:
apps/mcp-server/section-toolkit.ts - Admin UI builder:
apps/admin/src/components/page-builder/EditorialCarouselForm.tsx - SPA component:
apps/spa/src/components/DynamicEditorialCarousel.tsx - Website renderer:
apps/website/src/components/dynamic/DynamicPageRenderer.tsx