Next.js

export CONTENT_MANAGEMENT_TOKEN=cms_m_…
npx @obelism/content init

npm i @obelism/content-react

CONTENT_DELIVERY_TOKEN=cms_d_…
# The space and environment it reads (Space settings), so the canvas's
# token for another space reads nothing here.
CONTENT_SPACE_ID=space_…
CONTENT_ENVIRONMENT=production

import 'server-only'

import { ContentClient, readPreviewParams } from '@obelism/content'
import { readSiteToken } from '@obelism/content/site'
import { cookies, draftMode } from 'next/headers'

export const delivery = new ContentClient({
	token: process.env.CONTENT_DELIVERY_TOKEN!,
	init: { next: { revalidate: 60, tags: ['content'] } },
})

// Naming the space and environment makes a token someone made for another
// space read nothing here.
const drafts = (token: string) =>
	new ContentClient({
		token,
		space: process.env.CONTENT_SPACE_ID!,
		environment: process.env.CONTENT_ENVIRONMENT!,
		init: { cache: 'no-store' },
	})

// `cms_preview` alone proves nothing: anyone can add it to a URL.
export const getContent = async (
	searchParams: Record<string, string | string[] | undefined>,
) => {
	const preview = readPreviewParams(searchParams)
	if (preview?.token) return drafts(preview.token)
	if ((await draftMode()).isEnabled) {
		const token = readSiteToken(await cookies())
		if (token) return drafts(token)
	}
	return delivery
}

import { ContentApiError } from '@obelism/content'
import { notFound } from 'next/navigation'

import { Page, type PageEntry } from '@/components/Page'
import { delivery, getContent } from '@/lib/content'

type Props = {
	params: Promise<{ slug?: string[] }>
	searchParams: Promise<Record<string, string | string[] | undefined>>
}

export default async function CatchAll({ params, searchParams }: Props) {
	const { slug } = await params
	const path = slug?.join('/') || 'home'
	const content = await getContent(await searchParams)

	const entry = await content
		.getPage<PageEntry>(path, { depth: 2 })
		.catch((error: unknown) => {
			// A made-up, expired or other space's `cms_token`: show what's published.
			if (error instanceof ContentApiError && error.status === 401) {
				// Says why, when the canvas shows published content (guides/canvas).
				console.warn('Content refused the draft token:', error.body)
				return delivery.getPage<PageEntry>(path, { depth: 2 })
			}
			throw error
		})
	if (!entry) notFound()

	return <Page entry={entry} />
}

'use client'

import {
	type Block,
	editable,
	type Entry,
	RichText,
	type RichTextNode,
	useLiveEntry,
} from '@obelism/content-react'

type HeroBlock = Block<{ heading: string | null }, 'hero'>
type TextBlock = Block<{ text: RichTextNode | null }, 'text'>

export type PageEntry = Entry<
	{ title: string | null; body: (HeroBlock | TextBlock)[] | null },
	'page'
>

export const Page = ({ entry }: { entry: PageEntry }) => {
	const { fields } = useLiveEntry(entry)

	return (
		<main {...editable(entry)}>
			<h1>{fields.title}</h1>
			{fields.body?.map((block) =>
				block._type === 'hero' ? (
					<section key={block._uid} {...editable(block)}>
						<h2>{block.heading}</h2>
					</section>
				) : (
					<section key={block._uid} {...editable(block)}>
						<RichText document={block.text} />
					</section>
				),
			)}
		</main>
	)
}

import { ContentBridge } from '@obelism/content-react'

export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en">
			<body>
				<ContentBridge />
				{children}
			</body>
		</html>
	)
}

const nextConfig = {
	async headers() {
		return [
			{
				source: '/:path*',
				headers: [
					{
						key: 'Content-Security-Policy',
						value: "frame-ancestors 'self' https://content.obelism.studio",
					},
				],
			},
		]
	},
}

export default nextConfig