Content from Sanity

pnpm add @sanity/client
pnpm add @sanity/webhook   # only for the webhook endpoint

// src/server/sanity.server.ts
import { createClient, type SanityClient } from "@sanity/client";
import { env, signedCookie } from "lumiose";

/** Set by /api/preview; the preview route renders drafts only while it is valid. */
export const previewCookie = signedCookie("sanity-preview", { maxAge: 60 * 60 });

export interface Story {
  title: string;
  slug: string;
  summary: string;
  publishedAt: string | null;
}

let published: SanityClient | undefined;

function required(name: string): string {
  const value = env(name);
  if (value === undefined) throw new Error(`${name} is not set.`);
  return value;
}

/** Published content, through the CDN. With `preview`, drafts, with the read token. */
function sanity(preview = false): SanityClient {
  published ??= createClient({
    projectId: required("SANITY_PROJECT_ID"),
    dataset: required("SANITY_DATASET"),
    apiVersion: "2026-10-01",
    useCdn: true,
    perspective: "published",
  });
  return preview
    ? published.withConfig({
        token: required("SANITY_READ_TOKEN"),
        useCdn: false,
        perspective: "drafts",
      })
    : published;
}

const STORY = `{ title, "slug": slug.current, summary, publishedAt }`;

export function listStories(): Promise<Story[]> {
  return sanity().fetch(
    `*[_type == "story" && defined(slug.current)] | order(publishedAt desc) ${STORY}`,
  );
}

export function getStory(slug: string, preview = false): Promise<Story | null> {
  return sanity(preview).fetch(`*[_type == "story" && slug.current == $slug][0] ${STORY}`, {
    slug,
  });
}

// src/components/Story.stsx
import type { Story as StoryData } from "../server/sanity.server.ts";

export function Story({ story }: { story: StoryData }) {
  return (
    <article class="story">
      <h1>{story.title}</h1>
      {story.publishedAt && <time datetime={story.publishedAt}>{story.publishedAt.slice(0, 10)}</time>}
      <p>{story.summary}</p>
    </article>
  );
}

<style>
  .story time { color: gray; }
</style>

// src/routes/stories/page.stsx: built once per deploy
import { Title, href, query } from "lumiose";
import { listStories } from "../../server/sanity.server.ts";

export default async function Stories() {
  const stories = await query(["stories"], listStories);
  return (
    <main>
      <Title>Stories</Title>
      <ul>
        {stories.map((story) => (
          <li key={story.slug}>
            <a href={href("/stories/[slug]", { slug: story.slug })}>{story.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

// src/routes/stories/[slug]/page.stsx: one file per published story
import { Meta, Title, notFound, query, type PageProps } from "lumiose";
import { Story } from "../../../components/Story.stsx";
import { getStory, listStories } from "../../../server/sanity.server.ts";

export async function staticPaths() {
  return (await listStories()).map((story) => ({ params: { slug: story.slug } }));
}

export default async function StoryPage({ params }: PageProps<"/stories/[slug]">) {
  const story = (await query(["story", params.slug], () => getStory(params.slug))) ?? notFound();
  return (
    <main>
      <Title>{story.title}</Title>
      <Meta name="description" content={story.summary} />
      <Story story={story} />
    </main>
  );
}

// src/routes/api/preview/route.ts: GET /api/preview?secret=…&slug=…
import { env, href, type Endpoint } from "lumiose";
import { previewCookie } from "../../../server/sanity.server.ts";

export const mode = "server";

export const GET: Endpoint<"/api/preview"> = async ({ url, cookies }) => {
  const secret = env("SANITY_PREVIEW_SECRET");
  const slug = url.searchParams.get("slug");
  if (secret === undefined || url.searchParams.get("secret") !== secret || slug === null) {
    return new Response("Invalid preview link", { status: 401 });
  }
  await previewCookie.set(cookies, "1");
  return Response.redirect(new URL(href("/preview/stories/[slug]", { slug }), url), 307);
};

// src/routes/preview/stories/[slug]/page.stsx: the draft, rendered per request
import { Meta, Title, cookies, notFound, query, response, type PageProps } from "lumiose";
import { Story } from "../../../../components/Story.stsx";
import { getStory, previewCookie } from "../../../../server/sanity.server.ts";

export const mode = "server";

export default async function StoryPreview({ params }: PageProps<"/preview/stories/[slug]">) {
  if ((await previewCookie.get(cookies())) !== "1") notFound();
  response().setHeader("cache-control", "private, no-store");
  const story =
    (await query(["story", params.slug, "drafts"], () => getStory(params.slug, true))) ?? notFound();
  return (
    <main>
      <Title>{`Preview: ${story.title}`}</Title>
      <Meta name="robots" content="noindex" />
      <p role="status">Preview of the latest draft.</p>
      <Story story={story} />
    </main>
  );
}

// src/routes/api/sanity/webhook/route.ts
import { SIGNATURE_HEADER_NAME, isValidSignature } from "@sanity/webhook";
import { env, type Endpoint } from "lumiose";

export const mode = "server";

export const POST: Endpoint<"/api/sanity/webhook"> = async ({ request, platform }) => {
  const secret = env("SANITY_WEBHOOK_SECRET");
  const hook = env("BUILD_HOOK_URL");
  const signature = request.headers.get(SIGNATURE_HEADER_NAME);
  const body = await request.text(); // the exact bytes Sanity signed
  if (secret === undefined || hook === undefined || signature === null) {
    return new Response(null, { status: 400 });
  }
  if (!(await isValidSignature(body, signature, secret))) {
    return new Response("Invalid signature", { status: 401 });
  }
  const { _type } = JSON.parse(body) as { _type?: string };
  if (_type === "story") platform.waitUntil(fetch(hook, { method: "POST" }));
  return new Response(null, { status: 202 });
};