cms-renderer 0.0.0 → 0.1.0

package/lib/renderer.tsx

@@ -1,189 +0,0 @@
-/**
- * Catch-all Route Handler for Parametric Routes
- *
- * Handles routes with multiple segments like /us/en/products.
- * Uses the CMS API to fetch and render blocks.
- */
-
-import {
-  isArticlePublished,
-  isValidBlockSchemaName,
-  normalizeArticleContent,
-} from '@repo/cms-schema/blocks';
-import type { Metadata } from 'next';
-import { unstable_noStore } from 'next/cache';
-import { notFound } from 'next/navigation';
-import { BlockRenderer } from './block-renderer';
-import { getCmsClient } from './cms-api';
-import type { BlockComponentRegistry, BlockData } from './types';
-
-type PageProps = {
-  params: Promise<{ slug: string[] }>;
-  registry?: Partial<BlockComponentRegistry>;
-  /** API key for CMS API authentication */
-  apiKey?: string;
-};
-
-/**
- * Force dynamic rendering to ensure routes are always fresh.
- * This prevents Next.js from caching pages when routes are published.
- */
-export const dynamic = 'force-dynamic';
-
-/**
- * Catch-all route handler for parametric routes.
- *
- * Handles paths like:
- * - /us/en/products -> slug = ['us', 'en', 'products']
- * - /about -> slug = ['about']
- *
- * Reconstructs the full path and fetches route via tRPC.
- */
-export default async function ParametricRoutePage({ params, registry, apiKey }: PageProps) {
-  // Prevent any caching - ensure we always fetch fresh route data
-  unstable_noStore();
-
-  const { slug } = await params;
-
-  // Reconstruct full path from slug segments and normalize it
-  const rawPath = `/${slug.join('/')}`;
-  const path = normalizePath(rawPath);
-
-  // Get CMS API client with optional API key
-  const client = getCmsClient({ apiKey });
-
-  try {
-    // Fetch route by path via CMS API
-    const { route } = await client.route.getByPath.query({ path });
-
-    // Only show Live routes on public website
-    if (route.state !== 'Live') {
-      console.error(`Route found but not Live. Path: ${path}, State: ${route.state}`);
-      notFound();
-    }
-
-    // Fetch all blocks by ID via CMS API (skip any that fail)
-    const blockPromises = route.block_ids.map(async (blockId) => {
-      try {
-        const result = await client.block.getById.query({ id: blockId });
-        return result.block;
-      } catch (error) {
-        // Log error but don't fail the entire page
-        console.error(`Failed to fetch block ${blockId}:`, error);
-        return null;
-      }
-    });
-    const blockResults = await Promise.all(blockPromises);
-
-    // Transform blocks to BlockData format for BlockRenderer
-    // Filter out any blocks that failed to load
-    const blocks: BlockData[] = [];
-
-    for (const block of blockResults) {
-      if (!block || block.published_content === null) continue;
-
-      const content = block.published_content as Record<string, unknown> | null;
-      if (!content) continue;
-
-      // Handle 'article' blocks separately before checking schema type
-      if (block.schema_name === 'article') {
-        const article = normalizeArticleContent(content);
-        const isPublished = article ? isArticlePublished(article) : null;
-        if (article && isPublished) {
-          blocks.push({ id: block.id, type: 'article', content: article });
-        }
-        continue;
-      }
-
-      // Skip blocks with invalid schema names (after handling 'article')
-      if (!isValidBlockSchemaName(block.schema_name)) {
-        continue;
-      }
-
-      // For all block types, map schema_name to type and include content
-      // Image references are automatically resolved by block.getById
-      blocks.push({
-        id: block.id,
-        type: block.schema_name,
-        content,
-      } as BlockData);
-    }
-
-    return (
-      <main>
-        {blocks.map((block) => (
-          <BlockRenderer registry={registry ?? {}} key={block.id} block={block} />
-        ))}
-      </main>
-    );
-  } catch (error) {
-    // Log error for debugging
-    console.error(`Route fetch error for path: ${path}`, error);
-
-    // If route not found or param validation fails, show 404
-    // TRPCClientError has data.code for the error code
-    const errorCode =
-      error instanceof Error && 'data' in error
-        ? (error as { data?: { code?: string } }).data?.code
-        : error instanceof Error && 'code' in error
-          ? (error as { code: string }).code
-          : undefined;
-
-    if (errorCode === 'NOT_FOUND' || errorCode === 'P0002') {
-      notFound();
-    }
-
-    // Re-throw other errors
-    throw error;
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Metadata
-// -----------------------------------------------------------------------------
-
-/**
- * Generate metadata for the page.
- * Uses Next.js 15+ async params pattern.
- */
-export async function generateMetadata({ params, apiKey }: PageProps): Promise<Metadata> {
-  const { slug } = await params;
-  const rawPath = `/${slug.join('/')}`;
-  const path = normalizePath(rawPath);
-  const client = getCmsClient({ apiKey });
-
-  try {
-    const { route } = await client.route.getByPath.query({ path });
-    return {
-      title: `${route.path} | Website`,
-      description: `Content page: ${route.path}`,
-    };
-  } catch {
-    return {
-      title: 'Page Not Found | Website',
-      description: 'The requested page could not be found.',
-    };
-  }
-}
-
-export function normalizePath(path: string): string {
-  if (!path || path === '/') {
-    return '/';
-  }
-
-  // Remove trailing slashes, ensure leading slash
-  let normalized = path.trim();
-
-  // Remove trailing slashes (but keep root "/")
-  normalized = normalized.replace(/\/+$/, '');
-
-  // Ensure leading slash
-  if (!normalized.startsWith('/')) {
-    normalized = `/${normalized}`;
-  }
-
-  // Collapse multiple consecutive slashes to single slash
-  normalized = normalized.replace(/\/+/g, '/');
-
-  return normalized;
-}

package/lib/schema.ts

@@ -1,74 +0,0 @@
-// Fetch schema from the CMS for a headless setup
-// This should look like this
-//
-// import { schema, configureSchema } from "@profound/cms";
-//
-// // Option 1: Use default config (reads from CMS_API_URL env var)
-// const footerData = schema.name("footer").fetchAll();
-//
-// // Option 2: Configure with custom API base and fetch options
-// const customSchema = configureSchema({
-//   apiBase: "https://my-cms.example.com/api",
-//   fetchOptions: { headers: { Authorization: "Bearer token" } },
-// });
-// const footerData = customSchema.name("footer").fetchAll();
-//
-// console.log(footerData); # [{ logo: "<cloudflare_signed_img_url>", "Footer_text": "Profound" }]
-
-const DEFAULT_API_BASE = process.env.NEXT_PUBLIC_CMS_API_URL ?? 'http://localhost:4000/api';
-
-interface SchemaConfig {
-  apiBase?: string;
-  fetchOptions?: RequestInit;
-}
-
-interface SchemaQuery {
-  fetchAll: <T = Record<string, unknown>>() => Promise<T[]>;
-  fetchSingle: <T = Record<string, unknown>>() => Promise<T | null>;
-}
-
-interface SchemaClient {
-  name: (schemaName: string) => SchemaQuery;
-}
-
-function createSchemaQuery(
-  apiBase: string,
-  schemaName: string,
-  fetchOptions: RequestInit = {}
-): SchemaQuery {
-  const baseUrl = `${apiBase}/schemas/${schemaName}`;
-
-  return {
-    async fetchAll<T = Record<string, unknown>>(): Promise<T[]> {
-      const response = await fetch(baseUrl, fetchOptions);
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch schema "${schemaName}": ${response.statusText}`);
-      }
-
-      return response.json();
-    },
-
-    async fetchSingle<T = Record<string, unknown>>(): Promise<T | null> {
-      const response = await fetch(`${baseUrl}?limit=1`, fetchOptions);
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch schema "${schemaName}": ${response.statusText}`);
-      }
-
-      const data = await response.json();
-      return Array.isArray(data) ? (data[0] ?? null) : data;
-    },
-  };
-}
-
-export function configureSchema(config: SchemaConfig = {}): SchemaClient {
-  const apiBase = config.apiBase || DEFAULT_API_BASE;
-  const fetchOptions = config.fetchOptions || {};
-
-  return {
-    name: (schemaName: string): SchemaQuery => createSchemaQuery(apiBase, schemaName, fetchOptions),
-  };
-}
-
-export const schema: SchemaClient = configureSchema();

package/lib/types.ts

@@ -1,201 +0,0 @@
-/**
- * Block Rendering Types
- *
- * Type definitions for the ComponentMap pattern.
- * Block types map to React components via the blockComponents registry.
- */
-
-import type { ComponentType } from 'react';
-
-// -----------------------------------------------------------------------------
-// Block Type Discriminant
-// -----------------------------------------------------------------------------
-
-/**
- * Valid block type strings.
- * Must match the schema_name field in block data from the tRPC API.
- */
-export type BlockType =
-  | 'navigation'
-  | 'header'
-  | 'article'
-  | 'hero-block'
-  | 'features-block'
-  | 'cta-block'
-  | 'logo-trust-block';
-
-// -----------------------------------------------------------------------------
-// Content Types (inferred from seed data)
-// -----------------------------------------------------------------------------
-
-/**
- * Navigation link button structure.
- */
-export interface NavigationButton {
-  label: string;
-  href: string;
-  ariaLabel: string;
-}
-
-/**
- * Navigation link with type and button.
- */
-export interface NavigationLink {
-  button: NavigationButton;
-  type: 'Default' | 'Flyout';
-}
-
-/**
- * Level 3 navigation item (leaf node).
- */
-export interface Level3Link {
-  link: NavigationLink;
-}
-
-/**
- * Level 2 navigation item with optional Level 3 children.
- */
-export interface Level2Link {
-  link: NavigationLink;
-  children?: Level3Link[];
-}
-
-/**
- * Level 1 navigation item with optional Level 2 children.
- */
-export interface Level1Link {
-  link: NavigationLink;
-  children?: Level2Link[];
-}
-
-/**
- * Navigation block content.
- */
-export interface NavigationContent {
-  logo?: {
-    url: string;
-    alt: string;
-  };
-  ariaLabel: string;
-  links: Level1Link[];
-}
-
-/**
- * Header block content.
- */
-export interface HeaderContent {
-  headline: string;
-  subheadline?: string;
-  backgroundImage?: {
-    url: string;
-    alt: string;
-  };
-  ctaButton?: {
-    label: string;
-    href: string;
-  };
-  alignment: 'left' | 'center' | 'right';
-}
-
-/**
- * Article block content.
- */
-export interface ArticleContent {
-  headline: string;
-  author?: string;
-  publishedAt?: string;
-  body: string;
-  tags?: readonly string[] | string[];
-  status?: string;
-}
-
-/**
- * Hero block content (from CMS schema).
- */
-export type HeroBlockContent = import('@repo/cms-schema/blocks').HeroBlockContent;
-
-/**
- * Features block content (from CMS schema).
- */
-export type FeaturesBlockContent = import('@repo/cms-schema/blocks').FeaturesBlockContent;
-
-/**
- * CTA block content (from CMS schema).
- */
-export type CTABlockContent = import('@repo/cms-schema/blocks').CTABlockContent;
-
-/**
- * Logo Trust block content (from CMS schema).
- */
-export type LogoTrustBlockContent = import('@repo/cms-schema/blocks').LogoTrustBlockContent;
-
-// -----------------------------------------------------------------------------
-// Block Data Union
-// -----------------------------------------------------------------------------
-
-/**
- * Discriminated union of all block types.
- * Use the `type` field to narrow to specific content types.
- *
- * Each block also carries its stable CMS `id`, which should be used as the
- * React `key` when rendering lists of blocks.
- *
- * @example
- * ```tsx
- * function renderBlock(block: BlockData) {
- *   if (block.type === 'header') {
- *     // TypeScript knows block.content is HeaderContent
- *     return <h1>{block.content.headline}</h1>;
- *   }
- * }
- * ```
- */
-export type BlockData =
-  | { id: string; type: 'navigation'; content: NavigationContent }
-  | { id: string; type: 'header'; content: HeaderContent }
-  | { id: string; type: 'article'; content: ArticleContent }
-  | { id: string; type: 'hero-block'; content: HeroBlockContent }
-  | { id: string; type: 'features-block'; content: FeaturesBlockContent }
-  | { id: string; type: 'cta-block'; content: CTABlockContent }
-  | { id: string; type: 'logo-trust-block'; content: LogoTrustBlockContent };
-
-// -----------------------------------------------------------------------------
-// Component Types
-// -----------------------------------------------------------------------------
-
-/**
- * Props for a block component.
- * Each block component receives its typed content.
- */
-export interface BlockComponentProps<T> {
-  content: T;
-}
-
-/**
- * A React component that renders a specific block type.
- */
-export type BlockComponent<T> = ComponentType<BlockComponentProps<T>>;
-
-/**
- * Registry of block type to component mappings.
- * This is the core of the ComponentMap pattern.
- */
-export type BlockComponentRegistry = {
-  [K in BlockType]: BlockComponent<
-    K extends 'navigation'
-      ? NavigationContent
-      : K extends 'header'
-        ? HeaderContent
-        : K extends 'article'
-          ? ArticleContent
-          : K extends 'hero-block'
-            ? HeroBlockContent
-            : K extends 'features-block'
-              ? FeaturesBlockContent
-              : K extends 'cta-block'
-                ? CTABlockContent
-                : K extends 'logo-trust-block'
-                  ? LogoTrustBlockContent
-                  : never
-  >;
-};

package/next.config.ts

@@ -1,39 +0,0 @@
-import { resolve } from 'node:path';
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  turbopack: {
-    root: resolve(import.meta.dirname, '../..'),
-  },
-  transpilePackages: ['@repo/cms-schema', '@repo/markdown-wasm'],
-  serverExternalPackages: ['md4w'],
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: '**',
-      },
-      {
-        protocol: 'http',
-        hostname: 'localhost',
-      },
-    ],
-  },
-  // Prevent browser caching of dynamic pages
-  async headers() {
-    return [
-      {
-        // Apply to all pages
-        source: '/:path*',
-        headers: [
-          {
-            key: 'Cache-Control',
-            value: 'no-store, must-revalidate',
-          },
-        ],
-      },
-    ];
-  },
-};
-
-export default nextConfig;

package/postcss.config.mjs

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "@repo/typescript-config/nextjs.json",
-  "compilerOptions": {
-    "strict": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "tests", "**/__tests__/**", "**/*.test.ts", "**/*.test.tsx", "e2e"]
-}