Astro

export CONTENT_MANAGEMENT_TOKEN=cms_m_…
npx @obelism/content init

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 node from '@astrojs/node'
import { defineConfig } from 'astro/config'

export default defineConfig({
	output: 'server',
	adapter: node({ mode: 'standalone' }),
})

import { ContentClient } from '@obelism/content'

export const delivery = new ContentClient({
	token: import.meta.env.CONTENT_DELIVERY_TOKEN,
})

// Drafts in the canvas, with the token it adds to the URL. Anyone can
// add `cms_preview=1` to a URL, so that alone shows nothing. The space
// and environment make a token for another space read nothing here.
export const getContent = (url: URL) => {
	const token = url.searchParams.get('cms_token')
	return token
		? new ContentClient({
				token,
				space: import.meta.env.CONTENT_SPACE_ID,
				environment: import.meta.env.CONTENT_ENVIRONMENT,
			})
		: delivery
}

---
import {
	ContentApiError,
	editable,
	richTextToHtml,
	type Block,
	type Entry,
	type RichTextNode,
} from '@obelism/content'

import { delivery, getContent } from '../lib/content'

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

const path = Astro.params.slug || 'home'
const entry = await getContent(Astro.url)
	.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) {
			return delivery.getPage<PageEntry>(path, { depth: 2 })
		}
		throw error
	})
if (!entry) return new Response(null, { status: 404 })

// Let the canvas show the site in its frames.
Astro.response.headers.set(
	'Content-Security-Policy',
	"frame-ancestors 'self' https://content.obelism.studio",
)
const { fields } = entry
---

<html lang="en">
	<head>
		<title>{fields.title}</title>
	</head>
	<body>
		<main {...editable(entry)}>
			<h1>{fields.title}</h1>
			{fields.body?.map((block) =>
				block._type === 'hero' ? (
					<section {...editable(block)}>
						<h2>{block.heading}</h2>
					</section>
				) : (
					<section {...editable(block)} set:html={richTextToHtml(block.text)} />
				),
			)}
		</main>
		<script is:inline src="https://content.obelism.studio/bridge.js"></script>
	</body>
</html>