{content.entry.title}
\n{JSON.stringify(content.entry.content)}
\n Blog
\n\n {posts.map((post) => (\n \n \n \n ))}\n
\n {post.title}
\n \n{post.metaDescription}
\n \nMy Custom Page
\nThis content is wrapped with site header and footer.
\nMy Custom Page
\n\n
\n );\n}\n```\n\n### Block with Data Loading\n\nBlocks can automatically load their data (e.g., blog posts, products) if they have data loaders configured:\n\n```tsx\nCustom Header
\n\n {/* Render a CMS block inline */}\nMore custom content...
\n\n {photoUrl && (\n
\n );\n}\n```\n\n### How It Works\n\nImages stored in Supabase are served via the transform endpoint when dimensions are specified:\n\n```\n# Without transforms (original resolution - 3000px+)\nhttps://xxx.supabase.co/storage/v1/object/public/media/sites/abc/originals/photo.jpg\n\n# With transforms (optimized - 600px)\nhttps://xxx.supabase.co/storage/v1/render/image/public/media/sites/abc/originals/photo.jpg?width=600&quality=80\n```\n\nThis reduces image payload significantly (often 10x smaller) while maintaining visual quality.\n\n### Notes\n\n- SVG files are returned as direct URLs (transforms don't apply to vectors)\n- External URLs (`src` field) are returned as-is (can't be transformed)\n- The runtime `Media` type may include `storagePath`, `storageBucket`, `src`, `alt`, `identifier`, and transform metadata, but **portable content JSON should persist identifier-only** (no `assetId`/storage paths/`src`).\n\n## Metadata Generation\n\nGenerate SEO-optimized metadata for Next.js pages from Riverbank CMS data.\n\n### Basic Usage\n\n```tsx\nimport { generatePageMetadata } from '@riverbankcms/sdk/metadata';\nimport { loadPage } from '@riverbankcms/sdk';\n\nexport async function generateMetadata({ params }) {\n const pageData = await loadPage({ client, siteId, path: params.slug });\n const siteData = await client.getSite({ id: siteId });\n\n return generatePageMetadata({\n page: pageData.page,\n site: siteData.site,\n path: params.slug || '/',\n siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,\n });\n}\n```\n\n### With Custom Overrides\n\n```tsx\nconst metadata = generatePageMetadata({\n page: pageData.page,\n site: siteData.site,\n path: '/',\n siteUrl: 'https://example.com',\n overrides: {\n title: 'Custom SEO Title',\n description: 'Custom SEO description with keywords',\n ogImage: 'https://example.com/og-image.jpg',\n canonicalUrl: 'https://example.com/canonical-path',\n },\n googleSiteVerification: 'verification-token',\n});\n```\n\n### Preview Environment Metadata\n\n```tsx\nimport { generatePreviewMetadata } from '@riverbankcms/sdk/metadata';\n\n// Adds noindex/nofollow for staging environments\nconst metadata = generatePreviewMetadata({\n page: pageData.page,\n site: siteData.site,\n path: '/',\n siteUrl: 'https://preview.example.com',\n});\n```\n\n## Route Resolution\n\nResolve URL paths to pages, redirects, or 404s for dynamic routing.\n\n### Single Route Resolution\n\n```tsx\nimport { resolveRoute } from '@riverbankcms/sdk/routing';\nimport { notFound, redirect } from 'next/navigation';\n\nexport default async function DynamicPage({ params }) {\n const path = `/${params.slug?.join('/') || ''}`;\n\n const resolution = await resolveRoute({\n client,\n siteId: 'your-site-id',\n path,\n });\n\n if (resolution.type === 'redirect') {\n redirect(resolution.destination);\n }\n\n if (resolution.type === 'not-found') {\n notFound();\n }\n\n return \n
\n {content.name}
\n {content.role &&{content.role}
}\n {content.bio &&\n
\n );\n },\n hero: ({ content }) => {\n const { videoBackground, overlayOpacity = 50 } = content;\n\n return (\n \n {videoBackground && (\n
\n );\n },\n }}\n />\n );\n}\n```\n\n### Types\n\n```typescript\nimport type {\n BlockFieldExtension,\n BlockFieldExtensionsMap,\n FieldDefinition,\n} from '@riverbankcms/sdk/config';\n\n// Configuration for extending a single block\ntype BlockFieldExtension = {\n fields: FieldDefinition[]; // Same field format as block manifests\n};\n\n// Map of block IDs to their extensions\ntype BlockFieldExtensionsMap = Record\n
\n {content.headline}
\n\n {content.photo && (\n
\n );\n}\n```\n\n3. **Register the component** with `blockOverrides`:\n\n```tsx\n// app/[...slug]/page.tsx\nimport { loadPage, Page } from '@riverbankcms/sdk';\nimport { TeamMember } from '@/components/blocks/TeamMember';\n\nexport default async function CMSPage({ params }) {\n const pageData = await loadPage({\n client,\n siteId: process.env.SITE_ID!,\n path: `/${params.slug?.join('/') || ''}`,\n });\n\n return (\n \n
\n {content.name}
\n {content.role &&{content.role}
}\n {content.bio && (\n \n )}\n