cms-renderer 0.0.0

package/lib/renderer.tsx

@@ -0,0 +1,189 @@
+/**
+ * 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/result.ts

@@ -0,0 +1,450 @@
+/**
+ * Result Type Utilities
+ *
+ * Go-style error handling with discriminated union types.
+ * Provides type-safe success/error handling without exceptions.
+ *
+ * @example
+ * ```ts
+ * const [err, data] = await handle(async () => {
+ *   const response = await fetch(url);
+ *   if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ *   return response.json();
+ * });
+ *
+ * if (err) {
+ *   console.error('Failed:', err.message);
+ *   return { error: err.message };
+ * }
+ * return { data };
+ * ```
+ */
+
+// -----------------------------------------------------------------------------
+// Result Type
+// -----------------------------------------------------------------------------
+
+/**
+ * A discriminated union representing either success or failure.
+ *
+ * @template T - The success value type
+ * @template E - The error type (defaults to Error)
+ *
+ * @example
+ * ```ts
+ * function divide(a: number, b: number): Result<number, string> {
+ *   if (b === 0) return err('Division by zero');
+ *   return ok(a / b);
+ * }
+ *
+ * const result = divide(10, 2);
+ * if (isOk(result)) {
+ *   console.log('Result:', result.value); // 5
+ * } else {
+ *   console.error('Error:', result.error);
+ * }
+ * ```
+ */
+export type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };
+
+// -----------------------------------------------------------------------------
+// Constructors
+// -----------------------------------------------------------------------------
+
+/**
+ * Creates a success Result.
+ *
+ * @param value - The success value
+ * @returns A success Result containing the value
+ *
+ * @example
+ * ```ts
+ * const result = ok(42);
+ * // { ok: true, value: 42 }
+ * ```
+ */
+export function ok<T>(value: T): Result<T, never> {
+  return { ok: true, value };
+}
+
+/**
+ * Creates a failure Result.
+ *
+ * @param error - The error value
+ * @returns A failure Result containing the error
+ *
+ * @example
+ * ```ts
+ * const result = err(new Error('Something went wrong'));
+ * // { ok: false, error: Error('Something went wrong') }
+ * ```
+ */
+export function err<E>(error: E): Result<never, E> {
+  return { ok: false, error };
+}
+
+// -----------------------------------------------------------------------------
+// Type Guards
+// -----------------------------------------------------------------------------
+
+/**
+ * Type guard to check if a Result is successful.
+ *
+ * @param result - The Result to check
+ * @returns true if the Result is a success
+ *
+ * @example
+ * ```ts
+ * const result = fetchData();
+ * if (isOk(result)) {
+ *   // TypeScript knows result.value exists here
+ *   console.log(result.value);
+ * }
+ * ```
+ */
+export function isOk<T, E>(result: Result<T, E>): result is { ok: true; value: T } {
+  return result.ok === true;
+}
+
+/**
+ * Type guard to check if a Result is a failure.
+ *
+ * @param result - The Result to check
+ * @returns true if the Result is a failure
+ *
+ * @example
+ * ```ts
+ * const result = fetchData();
+ * if (isErr(result)) {
+ *   // TypeScript knows result.error exists here
+ *   console.error(result.error);
+ * }
+ * ```
+ */
+export function isErr<T, E>(result: Result<T, E>): result is { ok: false; error: E } {
+  return result.ok === false;
+}
+
+// -----------------------------------------------------------------------------
+// Extractors
+// -----------------------------------------------------------------------------
+
+/**
+ * Extracts the value from a Result, throwing if it's an error.
+ *
+ * @param result - The Result to unwrap
+ * @returns The success value
+ * @throws The error if Result is a failure
+ *
+ * @example
+ * ```ts
+ * const result = ok(42);
+ * const value = unwrap(result); // 42
+ *
+ * const errorResult = err(new Error('fail'));
+ * const value2 = unwrap(errorResult); // throws Error('fail')
+ * ```
+ */
+export function unwrap<T, E>(result: Result<T, E>): T {
+  if (isOk(result)) {
+    return result.value;
+  }
+  throw result.error;
+}
+
+/**
+ * Extracts the value from a Result, returning a default on error.
+ *
+ * @param result - The Result to unwrap
+ * @param defaultValue - The value to return if Result is an error
+ * @returns The success value or the default value
+ *
+ * @example
+ * ```ts
+ * const result = err(new Error('fail'));
+ * const value = unwrapOr(result, 0); // 0
+ *
+ * const okResult = ok(42);
+ * const value2 = unwrapOr(okResult, 0); // 42
+ * ```
+ */
+export function unwrapOr<T, E>(result: Result<T, E>, defaultValue: T): T {
+  if (isOk(result)) {
+    return result.value;
+  }
+  return defaultValue;
+}
+
+/**
+ * Extracts the value from a Result, computing a default on error.
+ *
+ * @param result - The Result to unwrap
+ * @param fn - Function to compute the default value from the error
+ * @returns The success value or the computed default
+ *
+ * @example
+ * ```ts
+ * const result = err(new Error('not found'));
+ * const value = unwrapOrElse(result, (e) => {
+ *   console.error('Error:', e.message);
+ *   return [];
+ * });
+ * ```
+ */
+export function unwrapOrElse<T, E>(result: Result<T, E>, fn: (error: E) => T): T {
+  if (isOk(result)) {
+    return result.value;
+  }
+  return fn(result.error);
+}
+
+// -----------------------------------------------------------------------------
+// Transformers
+// -----------------------------------------------------------------------------
+
+/**
+ * Maps a successful Result's value.
+ *
+ * @param result - The Result to map
+ * @param fn - Function to transform the value
+ * @returns A new Result with the transformed value, or the original error
+ *
+ * @example
+ * ```ts
+ * const result = ok(5);
+ * const doubled = map(result, (n) => n * 2); // ok(10)
+ *
+ * const errorResult = err('fail');
+ * const still = map(errorResult, (n) => n * 2); // err('fail')
+ * ```
+ */
+export function map<T, U, E>(result: Result<T, E>, fn: (value: T) => U): Result<U, E> {
+  if (isOk(result)) {
+    return ok(fn(result.value));
+  }
+  return result;
+}
+
+/**
+ * Maps a failed Result's error.
+ *
+ * @param result - The Result to map
+ * @param fn - Function to transform the error
+ * @returns A new Result with the transformed error, or the original value
+ *
+ * @example
+ * ```ts
+ * const result = err('not found');
+ * const mapped = mapErr(result, (e) => new Error(e)); // err(Error('not found'))
+ * ```
+ */
+export function mapErr<T, E, F>(result: Result<T, E>, fn: (error: E) => F): Result<T, F> {
+  if (isErr(result)) {
+    return err(fn(result.error));
+  }
+  return result;
+}
+
+/**
+ * Chains Result-returning operations.
+ *
+ * @param result - The Result to chain from
+ * @param fn - Function that returns a new Result
+ * @returns The chained Result
+ *
+ * @example
+ * ```ts
+ * function parse(input: string): Result<number, string> {
+ *   const n = parseInt(input, 10);
+ *   return isNaN(n) ? err('not a number') : ok(n);
+ * }
+ *
+ * function double(n: number): Result<number, string> {
+ *   return ok(n * 2);
+ * }
+ *
+ * const result = flatMap(parse('5'), double); // ok(10)
+ * const fail = flatMap(parse('abc'), double); // err('not a number')
+ * ```
+ */
+export function flatMap<T, U, E>(
+  result: Result<T, E>,
+  fn: (value: T) => Result<U, E>
+): Result<U, E> {
+  if (isOk(result)) {
+    return fn(result.value);
+  }
+  return result;
+}
+
+// -----------------------------------------------------------------------------
+// Async Helpers
+// -----------------------------------------------------------------------------
+
+/**
+ * Wraps a Promise in a Result type.
+ *
+ * @param promise - The Promise to wrap
+ * @returns A Promise that resolves to a Result
+ *
+ * @example
+ * ```ts
+ * const result = await fromPromise(fetch('/api/data'));
+ * if (isErr(result)) {
+ *   console.error('Fetch failed:', result.error);
+ *   return;
+ * }
+ * const response = result.value;
+ * ```
+ */
+export async function fromPromise<T>(promise: Promise<T>): Promise<Result<T, Error>> {
+  try {
+    const value = await promise;
+    return ok(value);
+  } catch (error) {
+    return err(error instanceof Error ? error : new Error(String(error)));
+  }
+}
+
+/**
+ * Wraps a throwing function in a Result type.
+ *
+ * @param fn - The function to wrap
+ * @returns A Result containing the return value or the thrown error
+ *
+ * @example
+ * ```ts
+ * const result = tryCatch(() => JSON.parse(input));
+ * if (isErr(result)) {
+ *   console.error('Invalid JSON:', result.error);
+ *   return null;
+ * }
+ * return result.value;
+ * ```
+ */
+export function tryCatch<T>(fn: () => T): Result<T, Error> {
+  try {
+    return ok(fn());
+  } catch (error) {
+    return err(error instanceof Error ? error : new Error(String(error)));
+  }
+}
+
+/**
+ * Wraps an async function in a Result type.
+ *
+ * @param fn - The async function to wrap
+ * @returns A Promise that resolves to a Result
+ *
+ * @example
+ * ```ts
+ * const result = await tryCatchAsync(async () => {
+ *   const response = await fetch('/api/data');
+ *   if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ *   return response.json();
+ * });
+ * ```
+ */
+export async function tryCatchAsync<T>(fn: () => Promise<T>): Promise<Result<T, Error>> {
+  try {
+    const value = await fn();
+    return ok(value);
+  } catch (error) {
+    return err(error instanceof Error ? error : new Error(String(error)));
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Tuple Helpers (Go-style)
+// -----------------------------------------------------------------------------
+
+/**
+ * Go-style tuple for error handling: [error, value]
+ *
+ * @example
+ * ```ts
+ * const [err, data] = await handle(fetchData);
+ * if (err) {
+ *   console.error(err);
+ *   return;
+ * }
+ * console.log(data);
+ * ```
+ */
+export type GoTuple<T, E = Error> = [E, undefined] | [undefined, T];
+
+/**
+ * Converts a Result to a Go-style tuple.
+ *
+ * @param result - The Result to convert
+ * @returns A tuple of [error, value]
+ *
+ * @example
+ * ```ts
+ * const result = await fetchData();
+ * const [err, data] = toTuple(result);
+ * ```
+ */
+export function toTuple<T, E>(result: Result<T, E>): GoTuple<T, E> {
+  if (isOk(result)) {
+    return [undefined, result.value];
+  }
+  return [result.error, undefined];
+}
+
+/**
+ * Wraps an async function and returns a Go-style tuple.
+ *
+ * @param fn - The async function to wrap
+ * @returns A Promise that resolves to [error, value] tuple
+ *
+ * @example
+ * ```ts
+ * const [err, data] = await handle(async () => {
+ *   const res = await fetch('/api/users');
+ *   if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ *   return res.json();
+ * });
+ *
+ * if (err) {
+ *   console.error('Failed to fetch users:', err.message);
+ *   return [];
+ * }
+ * return data;
+ * ```
+ */
+export async function handle<T>(fn: () => Promise<T>): Promise<GoTuple<T, Error>> {
+  try {
+    const value = await fn();
+    return [undefined, value];
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    return [err, undefined];
+  }
+}
+
+/**
+ * Wraps a synchronous function and returns a Go-style tuple.
+ *
+ * @param fn - The function to wrap
+ * @returns A tuple of [error, value]
+ *
+ * @example
+ * ```ts
+ * const [err, parsed] = handleSync(() => JSON.parse(input));
+ * if (err) {
+ *   console.error('Invalid JSON:', err.message);
+ *   return null;
+ * }
+ * return parsed;
+ * ```
+ */
+export function handleSync<T>(fn: () => T): GoTuple<T, Error> {
+  try {
+    const value = fn();
+    return [undefined, value];
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    return [err, undefined];
+  }
+}

package/lib/schema.ts

@@ -0,0 +1,74 @@
+// 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();