@the-smithy/create-hearth-site 0.24.1 → 0.26.0

package/template/src/hearth/layout/SiteFooter.tsx

@@ -1,7 +1,8 @@
 import type { Site } from "@the-smithy/hearth";
 import { theme } from "@/theme";
+import { overrides } from "../overrides";
 import { cx } from "../theme";
-import { ground, SmartLink, toTone } from "../ui";
+import { fill, ground, SmartLink, toTone } from "../ui";
 
 const platformName: Record<string, string> = {
   facebook: "Facebook",
@@ -12,15 +13,22 @@ const platformName: Record<string, string> = {
   tiktok: "TikTok",
 };
 
-/** Contact details, footer links and social links from Hearth (Settings → Content). */
+/** Contact details, footer links, social links and small print from Hearth (Settings → Content, and Navigation). */
 export function SiteFooter({ site }: { site: Site }) {
-  const { footerLinks, contact, social, tagline } = site.settings;
+  const { footerLinks, contact, social, tagline, copyright, footerNote } = site.settings;
   const t = theme.footer;
   const tone = toTone(t.tone);
+  const Logo = overrides.Logo;
+  const year = String(new Date().getFullYear());
   return (
     <footer {...ground(tone)} className={cx(theme.tones[tone], t.root)}>
       <div className={t.inner}>
         <div className={t.about}>
+          {Logo && t.logo ? (
+            <div className={t.logo}>
+              <Logo site={site} place="footer" />
+            </div>
+          ) : null}
           <p className={t.name}>{site.name}</p>
           {tagline ? <p className={t.tagline}>{tagline}</p> : null}
           {contact.address ? <address className={t.address}>{contact.address}</address> : null}
@@ -58,9 +66,8 @@ export function SiteFooter({ site }: { site: Site }) {
           </ul>
         ) : null}
       </div>
-      <p className={t.copyright}>
-        © {new Date().getFullYear()} {site.name}
-      </p>
+      <p className={t.copyright}>{copyright ? fill(copyright, { year }) : `© ${year} ${site.name}`}</p>
+      {footerNote ? <p className={t.note}>{footerNote}</p> : null}
     </footer>
   );
 }

package/template/src/hearth/layout/SiteFrame.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { HearthAnalytics } from "@the-smithy/hearth/analytics";
+import { HearthPreview } from "@the-smithy/hearth/preview";
+import { theme } from "@/theme";
+import { Blocks } from "../blocks";
+import { hearthNext } from "../client";
+import { overrides } from "../overrides";
+import { Popup } from "./Popup";
+import { SiteFooter } from "./SiteFooter";
+import { SiteHeader } from "./SiteHeader";
+
+/**
+ * Everything around a page's content: preview, header, footer, pop-ups and analytics. RootLayout puts it in <body>;
+ * a site that lives inside an app, with its own root layout, uses this as the layout of its public pages, and can give
+ * `headerActions` to show beside the menu.
+ */
+export default async function SiteFrame({ children, headerActions }: { children: ReactNode; headerActions?: ReactNode }) {
+  const [site, preview, globals] = await Promise.all([hearthNext.getSite(), hearthNext.isPreview(), hearthNext.getGlobalBlocks()]);
+  const t = theme.page;
+  const Footer = overrides.Footer ?? SiteFooter;
+  // Global blocks (Global blocks in Hearth) shown outside pages: under menu items, and as pop-ups.
+  const dropdowns = Object.fromEntries(
+    globals.filter((g) => site.settings.navigation.some((n) => n.dropdown === g.key)).map((g) => [g.key, <Blocks key={g.key} blocks={[g.block]} />]),
+  );
+  return (
+    <>
+      <a href="#main" className={t.skipLink}>
+        {theme.text.skipLink}
+      </a>
+      {/* Live draft preview from Hearth: shows while an editor previews, refreshes as they edit. */}
+      {preview ? <HearthPreview /> : null}
+      <SiteHeader site={site} dropdowns={dropdowns} actions={headerActions} />
+      <main id="main" className={t.main}>
+        {children}
+      </main>
+      <Footer site={site} />
+      {globals.map((g) =>
+        g.popup ? (
+          <Popup key={g.key} popupKey={g.key} name={g.name} title={g.popup.title} button={g.popup.button}>
+            <Blocks blocks={[g.block]} />
+          </Popup>
+        ) : null,
+      )}
+      {/* Hearth's built-in visitor analytics (cookieless, no banner needed): off in draft preview and when the site turns it off. */}
+      {site.analytics && !preview ? <HearthAnalytics config={site.analytics} /> : null}
+    </>
+  );
+}

package/template/src/hearth/layout/SiteHeader.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import type { ReactNode } from "react";
 import type { Site } from "@the-smithy/hearth";
 import { theme } from "@/theme";
-import { Logo } from "@/theme/overrides";
+import { overrides } from "../overrides";
 import { cx } from "../theme";
 import { ground, Img, toTone } from "../ui";
 import { MobileNav } from "./MobileNav";
@@ -11,19 +11,21 @@ import { NavLink } from "./NavLink";
 
 /**
  * Logo, menu, menu button and announcement banner, all edited in Hearth (Settings → General, and Navigation).
- * `dropdowns` holds the global blocks menu items open in a dropdown, drawn, by key.
+ * `dropdowns` holds the global blocks menu items open in a dropdown, drawn, by key. `actions` is what a site inside an
+ * app shows beside the menu at every width (Sign in, say), given by its layout through SiteFrame.
  */
-export function SiteHeader({ site, dropdowns = {} }: { site: Site; dropdowns?: Record<string, ReactNode> }) {
+export function SiteHeader({ site, dropdowns = {}, actions }: { site: Site; dropdowns?: Record<string, ReactNode>; actions?: ReactNode }) {
   const { announcement, seo, tagline, navigation, navigationCta } = site.settings;
   const t = theme.header;
   const tone = toTone(t.tone);
+  const Logo = overrides.Logo;
   return (
     <header {...ground(tone)} className={cx(theme.tones[tone], t.root)}>
       {announcement ? <p className={t.announcement}>{announcement}</p> : null}
       <div className={t.inner}>
         <Link href="/" className={t.brand}>
           {Logo ? (
-            <Logo site={site} />
+            <Logo site={site} place="header" />
           ) : (
             <>
               {seo.logo ? <Img image={{ src: seo.logo.src, alt: "" }} className={t.logo} /> : null}
@@ -60,8 +62,11 @@ export function SiteHeader({ site, dropdowns = {} }: { site: Site; dropdowns?: R
                 </NavLink>
               ) : null}
             </nav>
+            {actions ? <div className={t.actions}>{actions}</div> : null}
             <MobileNav siteName={site.name} links={navigation} cta={navigationCta} dropdowns={dropdowns} />
           </>
+        ) : actions ? (
+          <div className={t.actions}>{actions}</div>
         ) : null}
       </div>
     </header>

package/template/src/hearth/manifest.json

@@ -22,13 +22,15 @@
     "src/app/api/revalidate/route.ts",
     "scripts/hearth.mjs",
     "CLAUDE.md",
-    "AGENTS.md"
+    "AGENTS.md",
+    "HOSTING.md"
   ],
   "seeded": [
     "src/theme/",
     "src/app/icon.tsx",
     "src/app/apple-icon.tsx",
     "SITE.md",
+    "GEMINI.md",
     "README.md",
     "next.config.ts",
     "netlify.toml",

package/template/src/hearth/overrides.ts

@@ -0,0 +1,48 @@
+import type { Fundraiser, FundraiserDetail, HearthEvent, HearthEventDetail, Site } from "@the-smithy/hearth";
+import type { BlockComponents } from "@the-smithy/hearth/react";
+import type { ComponentType } from "react";
+import * as site from "@/theme/overrides";
+
+/** The level of a card's title: the next one down from what's above the cards, so h3 under a block's heading and h2 without one. */
+export type CardHeading = "h2" | "h3";
+
+/** What a donation form is given, Hearth's or the site's. */
+export type DonateFormProps = {
+  presetsCents: number[];
+  minCents: number;
+  maxCents: number;
+  /** Donations go to this fundraiser; no choice is offered. */
+  fundraiser?: string;
+  /** The active fundraisers to choose between, when `fundraiser` isn't set. */
+  fundraisers?: { slug: string; title: string }[];
+  submitLabel?: string;
+};
+
+/**
+ * Everything src/theme/overrides.tsx can export. All of it is optional, so a site's file, which updates never replace,
+ * exports only what it uses. The types are here for that file to use: `export const Footer: Overrides["Footer"] = …`.
+ */
+export type Overrides = {
+  /** Replaces a whole block's component. */
+  blocks?: Partial<BlockComponents>;
+  /** The logo in the header, and in the footer if the `footer.logo` slot is set. */
+  Logo?: ComponentType<{ site: Site; place: "header" | "footer" }> | null;
+  /** Replaces the footer. */
+  Footer?: ComponentType<{ site: Site }> | null;
+  /** Replaces an event's page, at /events/… and in collections. Its structured data is drawn around it. */
+  EventPage?: ComponentType<{ event: HearthEventDetail }> | null;
+  /** Replaces a fundraiser's page. Its structured data is drawn around it. */
+  FundraiserPage?: ComponentType<{ fundraiser: FundraiserDetail }> | null;
+  /** Replaces an event's card, as an <li>. May be async. */
+  EventCard?: ComponentType<{ event: HearthEvent; heading: CardHeading }> | null;
+  /** Replaces a fundraiser's card, as an <li>. May be async. */
+  FundraiserCard?: ComponentType<{ fundraiser: Fundraiser; heading: CardHeading }> | null;
+  /** Replaces the donation form. */
+  DonateForm?: ComponentType<DonateFormProps> | null;
+};
+
+/**
+ * The site's overrides, whichever it has. Read them when drawing, not as a file loads: an override can import Hearth's
+ * own components, so src/theme/overrides.tsx may still be loading at that point. Server components only.
+ */
+export const overrides = site as unknown as Overrides;

package/template/src/hearth/pages/donate.tsx

@@ -2,35 +2,44 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { theme } from "@/theme";
 import { hearthNext } from "../client";
-import { DonateForm } from "../forms/DonateForm";
+import { PageContent } from "../components/PageContent";
+import { DonationForm } from "../forms/DonationForm";
 import { hasFeature } from "../site";
-import { Section } from "../ui";
+import { fill, Section } from "../ui";
 
 export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
+  const [site, own] = await Promise.all([hearthNext.getSite(), hearthNext.generatePageMetadata("donate")]);
+  if (Object.keys(own).length) return own;
   return {
-    title: "Donate",
-    description: `Support ${site.name} with a donation.`,
+    title: theme.text.donateTitle,
+    description: fill(theme.text.donateDescription, { site: site.name }),
     alternates: { canonical: "/donate" },
-    openGraph: { title: "Donate", url: "/donate" },
+    openGraph: { title: theme.text.donateTitle, url: "/donate" },
   };
 }
 
 /**
- * A general donation page (sites with Giving). Ask staff to reserve "donate" on the site's Plan card in Hearth so
- * no page takes this address. For a page built in Hearth instead, use the Donation form block there.
+ * A general donation page (sites with Giving). A page in Hearth at `donate`, with a Donation form block, replaces this
+ * one's words, so don't reserve "donate" on the site's Plan card in Hearth: that would refuse the page.
  */
 export default async function DonatePage() {
   const site = await hearthNext.getSite();
   if (!hasFeature(site, "giving")) notFound();
+  const page = await hearthNext.getPage("donate");
   const giving = site.settings.giving;
   return (
-    <Section block="donatePage">
-      <div className={theme.donate.wrap}>
-        <h1 className={theme.page.title}>Donate</h1>
-        <p className={theme.page.lead}>Your gift supports {giving.legalName || site.name}.</p>
-        <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} />
-      </div>
-    </Section>
+    <div data-page="donate">
+      {page ? (
+        <PageContent page={page} />
+      ) : (
+        <Section block="donatePage">
+          <div className={theme.donate.wrap}>
+            <h1 className={theme.page.title}>{theme.text.donateTitle}</h1>
+            <p className={theme.page.lead}>{fill(theme.text.donateLead, { site: giving.legalName || site.name })}</p>
+            <DonationForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} />
+          </div>
+        </Section>
+      )}
+    </div>
   );
 }

package/template/src/hearth/pages/event.tsx

@@ -3,6 +3,7 @@ import { permanentRedirect } from "next/navigation";
 import { hearthNext } from "../client";
 import { EventView } from "../components/EventView";
 import { hasFeature } from "../site";
+import { generateMetadata as notFoundMetadata } from "./not-found";
 
 type Props = { params: Promise<{ slug: string }> };
 
@@ -13,11 +14,11 @@ async function load(slug: string) {
 
 export async function generateMetadata({ params }: Props) {
   const event = await load((await params).slug);
-  return event ? metadataFromMeta(event.meta) : {};
+  return event ? metadataFromMeta(event.meta) : notFoundMetadata();
 }
 
 /** Events without a type live here. Events in a collection (e.g. Talks) live at their collection's address. */
-export default async function EventPage({ params }: Props) {
+export default async function EventRoute({ params }: Props) {
   const slug = (await params).slug;
   const event = await load(slug);
   if (!event) return hearthNext.redirectOrNotFound(`/events/${slug}`);

package/template/src/hearth/pages/events.tsx

@@ -3,28 +3,40 @@ import { notFound } from "next/navigation";
 import { theme } from "@/theme";
 import { EventList } from "../blocks/events";
 import { hearthNext } from "../client";
+import { PageContent } from "../components/PageContent";
 import { hasFeature } from "../site";
-import { Section } from "../ui";
+import { fill, Section } from "../ui";
 
 export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
+  const [site, own] = await Promise.all([hearthNext.getSite(), hearthNext.generatePageMetadata("events")]);
+  if (Object.keys(own).length) return own;
   return {
-    title: "Events",
-    description: `Upcoming events from ${site.name}.`,
+    title: theme.text.eventsTitle,
+    description: fill(theme.text.eventsDescription, { site: site.name }),
     alternates: { canonical: "/events" },
-    openGraph: { title: "Events", url: "/events" },
+    openGraph: { title: theme.text.eventsTitle, url: "/events" },
   };
 }
 
-/** Upcoming events (only on sites with the Events feature in Hearth). */
+/** Upcoming events (only on sites with the Events feature in Hearth), or a page in Hearth at `events` instead. */
 export default async function EventsPage() {
   const site = await hearthNext.getSite();
   if (!hasFeature(site, "events")) notFound();
+  const page = await hearthNext.getPage("events");
+  if (page) {
+    return (
+      <div data-page="events">
+        <PageContent page={page} />
+      </div>
+    );
+  }
   const events = await hearthNext.getEvents({ when: "upcoming" });
   return (
-    <Section block="events">
-      <h1 className={theme.page.title}>Events</h1>
-      <EventList events={events} />
-    </Section>
+    <div data-page="events">
+      <Section block="events">
+        <h1 className={theme.page.title}>{theme.text.eventsTitle}</h1>
+        <EventList events={events} heading="h2" />
+      </Section>
+    </div>
   );
 }

package/template/src/hearth/pages/fundraiser.tsx

@@ -1,77 +1,24 @@
 import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { JsonLd } from "@the-smithy/hearth/react";
-import { theme } from "@/theme";
-import { Blocks } from "../blocks";
-import { Progress } from "../blocks/giving";
 import { hearthNext } from "../client";
-import { Share } from "../components/Share";
-import { DonateForm } from "../forms/DonateForm";
-import { money } from "../format";
-import { hasFeature, siteUrl } from "../site";
-import { fill, Img, Section } from "../ui";
+import { FundraiserView } from "../components/FundraiserView";
+import { hasFeature } from "../site";
+import { generateMetadata as notFoundMetadata } from "./not-found";
 
 type Props = { params: Promise<{ slug: string }> };
 
 async function load(slug: string) {
   const site = await hearthNext.getSite();
-  return hasFeature(site, "giving") ? { site, fundraiser: await hearthNext.getFundraiser(slug) } : null;
+  return hasFeature(site, "giving") ? hearthNext.getFundraiser(slug) : null;
 }
 
 export async function generateMetadata({ params }: Props) {
-  const loaded = await load((await params).slug);
-  return loaded?.fundraiser ? metadataFromMeta(loaded.fundraiser.meta) : {};
+  const fundraiser = await load((await params).slug);
+  return fundraiser ? metadataFromMeta(fundraiser.meta) : notFoundMetadata();
 }
 
-/** A fundraiser's page: progress, Donate and Share, then its story blocks and the donation form. */
-export default async function FundraiserPage({ params }: Props) {
+export default async function FundraiserRoute({ params }: Props) {
   const slug = (await params).slug;
-  const loaded = await load(slug);
-  if (!loaded?.fundraiser) return hearthNext.redirectOrNotFound(`/fundraisers/${slug}`);
-  const { site, fundraiser: f } = loaded;
-  const giving = site.settings.giving;
-  const t = theme.fundraiser;
-  const base = siteUrl(site);
-  const url = base ? `${base}${f.path}` : null;
-  const active = f.status === "active";
-
-  return (
-    <>
-      <JsonLd data={f.meta.jsonLd} />
-      <section className={t.header}>
-        <div className={t.headerInner}>
-          <div className={t.details}>
-            <p className={t.label}>{active ? "Fundraiser" : "Completed fundraiser"}</p>
-            <h1 className={t.title}>{f.title}</h1>
-            {f.summary ? <p className={t.summary}>{f.summary}</p> : null}
-            <Progress fundraiser={f} large />
-            {active ? (
-              <div className={t.actions}>
-                <a href="#donate" className={theme.button.primary}>
-                  {theme.text.donate}
-                </a>
-                {url ? (
-                  <Share
-                    title={f.title}
-                    url={url}
-                    message={`I'm supporting ${f.title}${f.goalCents ? `: ${money(f.raisedCents)} raised of ${money(f.goalCents)} so far` : ""}. Give here: ${url}`}
-                    heading="Share this fundraiser"
-                  />
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-          {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
-        </div>
-      </section>
-      <Blocks blocks={f.blocks} />
-      {active ? (
-        <Section block="fundraiserDonate">
-          <div className={t.give}>
-            <h2 className={t.giveTitle}>{fill(theme.text.giveTo, { fundraiser: f.title })}</h2>
-            <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
-          </div>
-        </Section>
-      ) : null}
-    </>
-  );
+  const fundraiser = await load(slug);
+  if (!fundraiser) return hearthNext.redirectOrNotFound(`/fundraisers/${slug}`);
+  return <FundraiserView fundraiser={fundraiser} />;
 }

package/template/src/hearth/pages/fundraisers.tsx

@@ -3,36 +3,46 @@ import { notFound } from "next/navigation";
 import { theme } from "@/theme";
 import { FundraiserList } from "../blocks/giving";
 import { hearthNext } from "../client";
+import { PageContent } from "../components/PageContent";
 import { hasFeature } from "../site";
-import { Section } from "../ui";
+import { fill, Section } from "../ui";
 
 export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
+  const [site, own] = await Promise.all([hearthNext.getSite(), hearthNext.generatePageMetadata("fundraisers")]);
+  if (Object.keys(own).length) return own;
   return {
-    title: "Fundraisers",
-    description: `Fundraisers and campaigns from ${site.name}: see how each is doing and give.`,
+    title: theme.text.fundraisersTitle,
+    description: fill(theme.text.fundraisersDescription, { site: site.name }),
     alternates: { canonical: "/fundraisers" },
-    openGraph: { title: "Fundraisers", url: "/fundraisers" },
+    openGraph: { title: theme.text.fundraisersTitle, url: "/fundraisers" },
   };
 }
 
-/** Active fundraisers, then completed ones (only on sites with the Giving feature in Hearth). */
+/** Active fundraisers, then completed ones (only on sites with the Giving feature in Hearth), or a page in Hearth at `fundraisers` instead. */
 export default async function FundraisersPage() {
   const site = await hearthNext.getSite();
   if (!hasFeature(site, "giving")) notFound();
+  const page = await hearthNext.getPage("fundraisers");
+  if (page) {
+    return (
+      <div data-page="fundraisers">
+        <PageContent page={page} />
+      </div>
+    );
+  }
   const [active, completed] = await Promise.all([hearthNext.getFundraisers({ status: "active" }), hearthNext.getFundraisers({ status: "completed" })]);
   return (
-    <>
+    <div data-page="fundraisers">
       <Section block="fundraisers">
-        <h1 className={theme.page.title}>Fundraisers</h1>
-        <FundraiserList fundraisers={active} />
+        <h1 className={theme.page.title}>{theme.text.fundraisersTitle}</h1>
+        <FundraiserList fundraisers={active} heading="h2" />
       </Section>
       {completed.length ? (
         <Section block="fundraisers" tone="muted">
-          <h2 className={theme.fundraiser.completedTitle}>Completed</h2>
+          <h2 className={theme.fundraiser.completedTitle}>{theme.text.completedFundraisers}</h2>
           <FundraiserList fundraisers={completed} />
         </Section>
       ) : null}
-    </>
+    </div>
   );
 }

package/template/src/hearth/pages/not-found.tsx

@@ -1,15 +1,35 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { theme } from "@/theme";
+import { hearthNext } from "../client";
+import { PageBlocks } from "../components/PageContent";
 import { Section } from "../ui";
 
-export default function NotFound() {
+/**
+ * With a page in Hearth at `not-found`, its title and description (Next.js already keeps a 404 out of search results).
+ * Pages use it too when they find nothing at their address: this file's own generateMetadata only runs when no route matches.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+  const own = await hearthNext.getPage("not-found");
+  return own ? { title: { absolute: own.meta.fullTitle }, description: own.meta.description ?? undefined, robots: { index: false, follow: false } } : {};
+}
+
+/** The 404, always with that status: its words, or the blocks of a page in Hearth at `not-found`. Redirects run before it (pages/page.tsx). */
+export default async function NotFound() {
+  const page = await hearthNext.getPage("not-found");
   return (
-    <Section block="notFound" innerClassName={theme.page.notFound}>
-      <h1 className={theme.page.title}>Page not found</h1>
-      <p className={theme.page.lead}>The page you&apos;re looking for has moved or no longer exists.</p>
-      <Link href="/" className={theme.button.primary}>
-        Go to the homepage
-      </Link>
-    </Section>
+    <div data-page="not-found">
+      {page ? (
+        <PageBlocks page={page} />
+      ) : (
+        <Section block="notFound" innerClassName={theme.page.notFound}>
+          <h1 className={theme.page.title}>{theme.text.notFoundTitle}</h1>
+          <p className={theme.page.lead}>{theme.text.notFoundLead}</p>
+          <Link href="/" className={theme.button.primary}>
+            {theme.text.notFoundHome}
+          </Link>
+        </Section>
+      )}
+    </div>
   );
 }

package/template/src/hearth/pages/page.tsx

@@ -1,11 +1,11 @@
 import { normalizeSlug } from "@the-smithy/hearth";
 import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { JsonLd } from "@the-smithy/hearth/react";
 import type { Metadata } from "next";
-import { Blocks } from "../blocks";
 import { hearthNext } from "../client";
 import { EventView } from "../components/EventView";
+import { PageContent } from "../components/PageContent";
 import { hasFeature } from "../site";
+import { generateMetadata as notFoundMetadata } from "./not-found";
 
 type Props = { params: Promise<{ slug?: string[] }> };
 
@@ -24,20 +24,14 @@ async function collectionEvent(slug: string[] | undefined) {
   return event?.collection?.id === collection.id ? event : null;
 }
 
+/** The page in Hearth at this address `not-found` is what the 404 shows (pages/not-found.tsx), never a page of its own. */
+const isServed = (slug: string[] | undefined) => normalizeSlug(slug) !== "not-found";
+
 /** Every page in Hearth at its path ("/" is "home", "/about" is "about", "/blog/post" is a blog entry), plus events in collections. */
 export default async function Page({ params }: Props) {
   const slug = (await params).slug;
-  const page = await hearthNext.getPage(slug);
-  if (page) {
-    return (
-      <>
-        <JsonLd data={page.meta.jsonLd} />
-        {/* Pages usually open with a Hero (the visible title); this keeps a heading for the rest. */}
-        {page.blocks[0]?.type === "hero" ? null : <h1 className="sr-only">{page.title}</h1>}
-        <Blocks blocks={page.blocks} />
-      </>
-    );
-  }
+  const page = isServed(slug) ? await hearthNext.getPage(slug) : null;
+  if (page) return <PageContent page={page} />;
 
   const event = await collectionEvent(slug);
   if (event) return <EventView event={event} />;
@@ -47,8 +41,8 @@ export default async function Page({ params }: Props) {
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const slug = (await params).slug;
-  const metadata = await hearthNext.generatePageMetadata(slug);
+  const metadata = isServed(slug) ? await hearthNext.generatePageMetadata(slug) : {};
   if (Object.keys(metadata).length) return metadata;
   const event = await collectionEvent(slug);
-  return event ? metadataFromMeta(event.meta) : {};
+  return event ? metadataFromMeta(event.meta) : notFoundMetadata();
 }

package/template/src/hearth/pages/registered.tsx

@@ -1,19 +1,32 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { theme } from "@/theme";
+import { hearthNext } from "../client";
+import { PageContent } from "../components/PageContent";
 import { Section } from "../ui";
 
-export const metadata: Metadata = { title: "You're registered", robots: { index: false, follow: false } };
+/** Never in search results, whatever the page in Hearth says. */
+export async function generateMetadata(): Promise<Metadata> {
+  const own = await hearthNext.generatePageMetadata("registered");
+  return { ...(Object.keys(own).length ? own : { title: theme.text.registeredTitle }), robots: { index: false, follow: false } };
+}
 
-/** Where the payment page sends people after paying for a ticket. The confirmation is emailed once payment completes. */
-export default function RegisteredPage() {
+/** Where the payment page sends people after paying for a ticket. The confirmation is emailed once payment completes. A page in Hearth at `registered` replaces these words. */
+export default async function Page() {
+  const page = await hearthNext.getPage("registered");
   return (
-    <Section block="registered">
-      <h1 className={theme.page.title}>You&apos;re registered</h1>
-      <p className={theme.page.lead}>Thanks for signing up. A confirmation is on its way to your email.</p>
-      <Link href="/events" className={theme.page.back}>
-        See all events
-      </Link>
-    </Section>
+    <div data-page="registered">
+      {page ? (
+        <PageContent page={page} />
+      ) : (
+        <Section block="registered">
+          <h1 className={theme.page.title}>{theme.text.registeredTitle}</h1>
+          <p className={theme.page.lead}>{theme.text.registeredLead}</p>
+          <Link href="/events" className={theme.page.back}>
+            {theme.text.registeredBack}
+          </Link>
+        </Section>
+      )}
+    </div>
   );
 }