cms-renderer 0.0.0

package/.turbo/turbo-check-types.log

@@ -0,0 +1,2 @@
+
+$ tsc --noEmit

package/README.md

@@ -0,0 +1,362 @@
+# Website
+
+**CMS-powered website built with Next.js 15 and App Router**
+
+```
+CMS (authors content) --> tRPC API --> Website (renders blocks)
+```
+
+The website app fetches structured page data via tRPC and renders blocks using the ComponentMap pattern. Article content uses WASM-powered markdown rendering for performance.
+
+---
+
+## Quick Start
+
+**Prerequisites**
+
+| Tool | Version | Check Command |
+|------|---------|---------------|
+| Bun | 1.2.8+ | `bun --version` |
+| Node.js | 18+ | `node --version` |
+
+**Installation**
+
+```bash
+# From monorepo root
+bun install
+
+# Start the website dev server
+cd apps/website
+bun run dev
+```
+
+**Verification**
+
+Open [http://localhost:3001](http://localhost:3001). You should see:
+
+```
+Website
+CMS-powered website built with Next.js 15 and App Router.
+```
+
+Visit [http://localhost:3001/demo](http://localhost:3001/demo) to see the complete demo page with navigation, header, and article blocks.
+
+---
+
+## Architecture
+
+### How This App Fits in the Monorepo
+
+```
+auteur/
+├── apps/
+│   ├── cms/                    # Content authoring (Lexical editor)
+│   └── website/                # This app - renders CMS content
+└── packages/
+    ├── cms-schema/             # Shared Zod schemas
+    └── markdown-wasm/          # WASM markdown renderer
+```
+
+The website consumes schemas from `@repo/cms-schema` and uses `@repo/markdown-wasm` for article body rendering. It does not import from `apps/cms/` directly.
+
+### Key Directories
+
+```
+apps/website/
+├── app/                        # Next.js App Router pages
+│   ├── [slug]/                 # Dynamic page routes
+│   │   ├── page.tsx            # Server Component fetches via tRPC
+│   │   ├── loading.tsx         # Skeleton loading state
+│   │   └── error.tsx           # Error boundary
+│   ├── api/trpc/[trpc]/        # tRPC API handler
+│   ├── layout.tsx              # Root layout with CSS imports
+│   ├── globals.css             # CSS reset
+│   └── page.tsx                # Homepage
+├── components/
+│   ├── blocks/                 # Block components + registry
+│   │   ├── navigation-block.tsx
+│   │   ├── header-block.tsx
+│   │   ├── article-block.tsx
+│   │   ├── block-renderer.tsx  # Dispatcher component
+│   │   ├── types.ts            # BlockData discriminated union
+│   │   └── index.ts            # Exports + blockComponents registry
+│   ├── page-renderer.tsx       # Renders array of blocks
+│   └── trpc-provider.tsx       # Client-side tRPC/React Query
+├── server/
+│   ├── trpc.ts                 # tRPC initialization
+│   └── routers/
+│       ├── blocks/             # Block data procedures
+│       │   ├── get-navigation.ts
+│       │   ├── get-header.ts
+│       │   └── get-article.ts
+│       └── pages/              # Page composition procedures
+│           └── get-page.ts
+├── seed/                       # Mock data for development
+│   └── index.ts
+├── styles/
+│   └── blocks.css              # Vanilla CSS for blocks
+└── lib/
+    └── trpc.ts                 # Client-side tRPC hooks
+```
+
+### Data Flow
+
+```
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│  Dynamic Route  │────>│   tRPC Caller   │────>│  Mock Data      │
+│  [slug]/page    │     │  pages.getPage  │     │  seed/index.ts  │
+└─────────────────┘     └─────────────────┘     └─────────────────┘
+        │
+        v
+┌─────────────────┐     ┌─────────────────┐
+│  PageRenderer   │────>│  BlockRenderer  │
+│  (iterates)     │     │  (dispatches)   │
+└─────────────────┘     └─────────────────┘
+                               │
+        ┌──────────────────────┼──────────────────────┐
+        v                      v                      v
+┌───────────────┐     ┌───────────────┐     ┌───────────────┐
+│ NavigationBlock│    │  HeaderBlock  │     │ ArticleBlock  │
+│               │     │               │     │ (WASM markdown)│
+└───────────────┘     └───────────────┘     └───────────────┘
+```
+
+---
+
+## Development Guide
+
+### Available Scripts
+
+| Script | Command | Description |
+|--------|---------|-------------|
+| `dev` | `bun run dev` | Start dev server on port 3001 |
+| `build` | `bun run build` | Production build |
+| `start` | `bun run start` | Start production server |
+| `lint` | `bun run lint` | Run Biome linter |
+| `check-types` | `bun run check-types` | TypeScript type checking |
+
+### Hot Reload Behavior
+
+- **Page changes**: Instant hot reload
+- **tRPC procedures**: Requires server restart
+- **CSS changes**: Instant hot reload
+- **Block components**: Instant hot reload
+
+### Environment Variables
+
+No environment variables are required for development. The app uses mock data from `seed/index.ts`.
+
+For production with a real database, you would add:
+
+```env
+# .env.local (not required for development)
+DATABASE_URL=your-database-url
+```
+
+---
+
+## Key Concepts
+
+### ComponentMap Pattern
+
+The website uses a registry-based pattern to map block types to React components:
+
+```typescript
+// components/blocks/index.ts
+export const blockComponents: BlockComponentRegistry = {
+  navigation: NavigationBlock,
+  header: HeaderBlock,
+  article: ArticleBlock,
+} as const;
+```
+
+The `BlockRenderer` uses this registry to dispatch blocks:
+
+```tsx
+// Render any block by type
+<BlockRenderer block={{ type: 'header', content: {...} }} />
+
+// Render a page of blocks
+{page.blocks.map((block, i) => (
+  <BlockRenderer key={i} block={block} />
+))}
+```
+
+### Block Types
+
+| Block | Component | Content Fields |
+|-------|-----------|----------------|
+| `navigation` | `NavigationBlock` | logo, ariaLabel, links (3-level hierarchy) |
+| `header` | `HeaderBlock` | headline, subheadline, backgroundImage, ctaButton, alignment |
+| `article` | `ArticleBlock` | headline, author, publishedAt, body (markdown), tags |
+
+### tRPC Integration
+
+**Server Component** (recommended):
+
+```tsx
+// Direct procedure call in Server Components
+import { createCaller } from '@/server/routers';
+import { createContext } from '@/server/trpc';
+
+export default async function Page({ params }: PageProps) {
+  const { slug } = await params;
+  const caller = createCaller(createContext());
+  const page = await caller.pages.getPage({ slug });
+
+  return <PageRenderer title={page.title} blocks={page.blocks} />;
+}
+```
+
+**Client Component** (when needed):
+
+```tsx
+'use client';
+import { trpc } from '@/lib/trpc';
+
+function PageClient({ slug }: { slug: string }) {
+  const { data, isLoading } = trpc.pages.getPage.useQuery({ slug });
+
+  if (isLoading) return <div>Loading...</div>;
+  return <PageRenderer title={data.title} blocks={data.blocks} />;
+}
+```
+
+### WASM Markdown Rendering
+
+The `ArticleBlock` uses `@repo/markdown-wasm` for fast markdown-to-React conversion:
+
+```tsx
+import { MarkdownRenderer } from '@repo/markdown-wasm';
+
+// Inside ArticleBlock
+<MarkdownRenderer content={body} className="article-block__content" />
+```
+
+md4w parses markdown 2.5x faster than JavaScript alternatives and outputs a traversable AST that maps directly to React components.
+
+---
+
+## API Routes Reference
+
+### tRPC Endpoints
+
+| Endpoint | Method | Input | Returns |
+|----------|--------|-------|---------|
+| `blocks.getNavigation` | Query | None | Navigation data |
+| `blocks.getHeader` | Query | None | Header data |
+| `blocks.getArticle` | Query | None | Article data |
+| `pages.getPage` | Query | `{ slug: string }` | Page with blocks array |
+
+### Testing Endpoints
+
+```bash
+# Start the dev server
+bun run dev
+
+# Test endpoints (in another terminal)
+curl "http://localhost:3001/api/trpc/blocks.getNavigation"
+curl "http://localhost:3001/api/trpc/blocks.getHeader"
+curl "http://localhost:3001/api/trpc/pages.getPage?input=%7B%22json%22%3A%7B%22slug%22%3A%22demo%22%7D%7D"
+```
+
+---
+
+## Testing
+
+The website app does not currently have unit tests. Integration testing is done via the tRPC endpoints.
+
+```bash
+# Type check
+bun run check-types
+
+# Lint
+bun run lint
+```
+
+Test files would live at:
+- `components/blocks/*.test.tsx` for block components
+- `server/routers/**/*.test.ts` for tRPC procedures
+
+---
+
+## Troubleshooting
+
+### Port 3001 Already in Use
+
+```bash
+# Find and kill the process
+lsof -i :3001
+kill -9 <PID>
+
+# Or use a different port
+bun run dev -- --port 3002
+```
+
+### Cannot Find Module '@repo/cms-schema'
+
+```bash
+# Run bun install from monorepo root
+cd ../..
+bun install
+```
+
+### TypeScript Errors on First Run
+
+The `.next/types` directory is generated on first dev server run:
+
+```bash
+bun run dev    # Run once to generate types
+bun run check-types  # Now type checking works
+```
+
+### WASM Module Not Found
+
+If you see errors about md4w:
+
+```bash
+# Rebuild the markdown-wasm package
+cd ../../packages/markdown-wasm
+bun install
+bun run build
+```
+
+### tRPC 'NOT_FOUND' Error
+
+The mock data only includes pages with slugs: `demo`, `about`, `blog`. Requesting other slugs returns a 404.
+
+---
+
+## Related Documentation
+
+- **Tutorial**: [`_docs/cms-website-integration/`](../../_docs/cms-website-integration/00-overview.md) - Full 11-chapter tutorial
+- **CMS App**: [`apps/cms/README.md`](../cms/README.md) - Content authoring application
+- **Schema Package**: [`packages/cms-schema/`](../../packages/cms-schema/) - Shared Zod schemas
+- **Markdown Package**: [`packages/markdown-wasm/`](../../packages/markdown-wasm/) - WASM renderer
+
+---
+
+## Contributing
+
+### Code Style
+
+This project uses [Biome](https://biomejs.dev/) for linting and formatting:
+
+```bash
+bun run lint        # Check for issues
+bun run lint --fix  # Auto-fix issues
+```
+
+### Adding a New Block Type
+
+1. Define the schema in `apps/cms/app/schemas/`
+2. Add mock data to `seed/index.ts`
+3. Create the component in `components/blocks/`
+4. Add to `blockComponents` registry in `components/blocks/index.ts`
+5. Add the type to `BlockData` union in `components/blocks/types.ts`
+
+### Pull Requests
+
+- Run `bun run check-types` before submitting
+- Run `bun run lint` to ensure code style compliance
+- Test the demo page at `/demo` renders correctly