34 lines
2.7 KiB
Markdown
34 lines
2.7 KiB
Markdown
# 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.ts` defines the types used across the frontend applications (apps/admin, apps/spa, apps/website) and backend services.
|
|
- **Backend Validation**: `apps/backend/src/routes/pages.ts` validates incoming payloads using schemas imported from `@homaroma/types`.
|
|
- **CMS/MCP Server**: `apps/mcp-server/section-toolkit.ts` exposes MCP tools for managing/updating content, using schemas aligned with `@homaroma/types`.
|
|
- **Admin UI**: `apps/admin/src/components/page-builder/EditorialCarouselForm.tsx` renders a form for content managers to configure the carousel layout and content.
|
|
- **SPA Frontend**: `apps/spa/src/components/DynamicEditorialCarousel.tsx` renders the carousel on the SPA client.
|
|
- **Website Frontend**: `apps/website/src/components/dynamic/DynamicPageRenderer.tsx` contains the website's `EditorialCarouselSection` renderer.
|
|
|
|
## 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
|
|
- `EditorialCarouselSectionPayloadSchema` includes:
|
|
- `layout: z.enum(['standard', 'split_screen']).optional()`
|
|
- `imagePosition: z.enum(['left', 'right']).optional()`
|
|
- When `layout` is omitted or `'standard'`, components should fall back to existing slide behavior.
|
|
- When `layout` is `'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`
|