Step 8: Preview drafts (optional)

import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { setResponseHeader } from '@tanstack/react-start/server'
import { getPreviewEntry, previewHeaders } from '@areca-cms/site-sdk'
import type { RichTextValue } from '@areca-cms/site-sdk'
import { z } from 'zod'
import { ArticleBody } from '../../../components/article-body'

/** Asks the CMS for the draft. Runs on the server, so the token stays there. */
const loadPreview = createServerFn({ method: 'GET', strict: { output: false } })
  .validator(z.object({ token: z.string().min(1) }))
  .handler(async ({ data }) => {
    // Tell browsers and search engines not to keep or index this page.
    const headers = previewHeaders()
    setResponseHeader('X-Robots-Tag', headers['X-Robots-Tag'])
    setResponseHeader('Cache-Control', headers['Cache-Control'])
    try {
      const preview = await getPreviewEntry({ token: data.token })
      return { ok: true as const, preview }
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Failed to fetch preview'
      return { ok: false as const, error: message }
    }
  })

export const Route = createFileRoute('/__preview/$collection/$slug')({
  validateSearch: (search) => z.object({ token: z.string().min(1) }).parse(search),
  loaderDeps: ({ search }) => ({ token: search.token }),
  loader: ({ deps }) => loadPreview({ data: { token: deps.token } }),
  head: () => ({
    meta: [{ name: 'robots', content: 'noindex, nofollow' }],
  }),
  component: PreviewPage,
})

function PreviewPage() {
  const result = Route.useLoaderData()
  if (!result.ok) {
    return <p role="status">Preview unavailable: {result.error}</p>
  }
  const { entry } = result.preview
  return (
    <main className="mx-auto max-w-2xl px-6 py-16">
      <p role="status" className="mb-8 rounded bg-amber-100 px-4 py-2 text-sm">
        Draft preview. This page is not published.
      </p>
      <h1 className="text-4xl font-semibold">{String(entry.data.title ?? entry.slug)}</h1>
      <ArticleBody body={entry.data.body as RichTextValue} />
    </main>
  )
}

pnpm add zod