CMS

Site
├── page                  SitePage: { id, name, slug, publishedAt, status, model, fields, blocks }
│   └── blocks[]          SiteBlock: { id, name, model, fields, position, placementId }
└── singleton             header, footer, nav — same SitePage shape, fetched by shortname

// src/lib/site.ts — one request per render, shared by layout and page
import { cache } from 'react';
import { getSiteByDomain } from '@uidu/client';
import { uidu } from './uidu';

export const getSite = cache(() => getSiteByDomain(uidu, { domain: 'www.acme.org' }));

// src/app/[slug]/page.tsx
import type { ComponentType } from 'react';
import { notFound } from 'next/navigation';
import {
  getPageBySlug,
  getSingletonBlock,
  listSitePages,
  type SiteBlock,
} from '@uidu/client';
import { RichText, toText } from '@uidu/react';
import { getSite } from '@/lib/site';
import { uidu } from '@/lib/uidu';

function Hero({ block }: { block: SiteBlock }) {
  return (
    <section>
      <h1>{toText(block.fields.title)}</h1>
      <RichText doc={block.fields.body} />
    </section>
  );
}

// Keyed by the block kind's name in uidu (block.model.name).
const components: Record<string, ComponentType<{ block: SiteBlock }>> = { Hero };

export async function generateStaticParams() {
  const site = await getSite();
  if (!site) return [];
  const pages = await listSitePages(uidu, { siteId: site.id });
  return pages.filter((p) => p.slug).map((p) => ({ slug: p.slug! }));
}

export default async function SitePageRoute({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const site = await getSite();
  if (!site) notFound();

  const [page, header] = await Promise.all([
    getPageBySlug(uidu, { siteId: site.id, slug }),
    getSingletonBlock(uidu, { siteId: site.id, shortname: 'header' }),
  ]);
  if (!page) notFound();

  return (
    <>
      {header && <header>{toText(header.fields.title)}</header>}
      <main>
        {page.blocks.map((block) => {
          const Component = components[block.model.name ?? ''];
          return Component ? <Component key={block.id} block={block} /> : null;
        })}
      </main>
    </>
  );
}

// src/app/blog/page.tsx
import Link from 'next/link';
import { listSitePages } from '@uidu/client';
import { uidu } from '@/lib/uidu';
import { getSite } from '@/lib/site';

export default async function BlogPage() {
  const site = await getSite();
  if (!site) return null;

  const posts = await listSitePages(uidu, { siteId: site.id, pageType: 'Blog post' });
  const newest = [...posts].sort((a, b) =>
    (b.publishedAt ?? '').localeCompare(a.publishedAt ?? ''),
  );

  return (
    <ul>
      {newest.map((p) => (
        <li key={p.id}>
          <Link href={`/${p.slug}`}>{p.name}</Link>
        </li>
      ))}
    </ul>
  );
}

// src/app/sitemap.ts
import type { MetadataRoute } from 'next';
import { listSitePages } from '@uidu/client';
import { uidu } from '@/lib/uidu';
import { getSite } from '@/lib/site';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const site = await getSite();
  if (!site?.domain) return [];
  const pages = await listSitePages(uidu, { siteId: site.id });
  return pages
    .filter((p) => p.slug)
    .map((p) => ({
      url: `https://${site.domain}/${p.slug}`,
      lastModified: p.publishedAt ?? undefined,
    }));
}

// In the page route: drafts only while Next's draft mode is on.
import { draftMode } from 'next/headers';

const { isEnabled } = await draftMode();
const page = await getPageBySlug(uidu, { siteId: site.id, slug, includeDrafts: isEnabled });

// src/app/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getPage, listPages, paginate, ListPagesDocument } from '@uidu/client';
import { PageBlocks } from '@uidu/react';
import { uidu } from '@/lib/uidu';
import { ContactForm, Feature, Hero } from '@/components/blocks';

const projectId = process.env.UIDU_PROJECT_ID!;

export async function generateStaticParams() {
  // listPages(uidu, { projectId }) is one page of results; walk them all.
  const pages = await paginate(uidu, ListPagesDocument, {
    variables: { projectId, first: 100 },
    extract: (data) => data.currentWorkspace?.project?.pages,
  });
  return pages
    .filter((p) => p.slug && p.slug !== 'home')
    .map((p) => ({ slug: p.slug! }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = await getPage(uidu, { projectId, slug });
  return {
    title: page?.metadata?.metaTitle ?? page?.name ?? undefined,
    description: page?.metadata?.metaDescription ?? undefined,
  };
}

export default async function CmsPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = await getPage(uidu, { projectId, slug });
  if (!page) notFound(); // doesn't exist, or unpublished

  return (
    <PageBlocks
      pageBlocks={page.pageBlocks}
      components={{ Header: Hero, feature1: Feature, ModuloContatto: ContactForm }}
    />
  );
}

// Inside ContactForm ({ block }): the form a field links to.
const formField = block.fieldValues?.find(
  (fv) => fv.linkedRecord && 'inputs' in fv.linkedRecord,
);