@the-smithy/create-hearth-site 0.24.0 → 0.25.0

package/template/src/hearth/forms/VolunteerForm.tsx

@@ -5,7 +5,8 @@ import type { EventVolunteering } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { volunteer, type VolunteerState } from "../actions";
 import { formatShift } from "../format";
-import { Alert, FieldError, Honeypot, OptionCard, Question, Submit, Success, TextField } from "./fields";
+import { fill } from "../ui";
+import { Alert, FieldError, Honeypot, OptionCard, Question, Submit, Success, TextField, useFocusFirstInvalid } from "./fields";
 
 const t = theme.form;
 
@@ -19,27 +20,28 @@ export function VolunteerForm({ slug, timezone, volunteering }: { slug: string;
   const values = (state && !state.ok ? state.values : undefined) ?? {};
   const chosen = (state && !state.ok ? state.shifts : undefined) ?? [];
   const many = volunteering.pickShifts === "many";
+  const ref = useFocusFirstInvalid(state);
 
   if (state?.ok) return <Success>{state.message}</Success>;
 
   return (
-    <form action={action} className={t.root} noValidate>
+    <form ref={ref} action={action} className={t.root} noValidate>
       {state && !state.ok ? <Alert>{state.message}</Alert> : null}
       <Honeypot />
       <div className={t.row}>
-        <TextField label="Name" name="name" required autoComplete="name" defaultValue={values.name} error={errors.name} />
-        <TextField label="Email" name="email" type="email" required autoComplete="email" defaultValue={values.email} error={errors.email} />
+        <TextField label={theme.text.yourName} name="name" required autoComplete="name" defaultValue={values.name} error={errors.name} />
+        <TextField label={theme.text.yourEmail} name="email" type="email" required autoComplete="email" defaultValue={values.email} error={errors.email} />
       </div>
       {volunteering.pickShifts !== "none" ? (
         <fieldset>
-          <legend className={t.legend}>{many ? "Shifts you can do" : "Choose a shift"}</legend>
+          <legend className={t.legend}>{many ? theme.text.shiftsMany : theme.text.shiftsOne}</legend>
           <div className={t.options}>
             {volunteering.shifts.map((s) => (
               <OptionCard
                 key={s.id}
-                input={<input type={many ? "checkbox" : "radio"} name="shift" value={s.id} disabled={s.full} defaultChecked={chosen.includes(s.id)} className={t.optionInput} />}
+                input={<input type={many ? "checkbox" : "radio"} name="shift" value={s.id} disabled={s.full} defaultChecked={chosen.includes(s.id)} data-invalid={errors.shifts && !s.full ? "" : undefined} className={t.optionInput} />}
                 title={s.name}
-                meta={s.full ? "Full" : s.remaining !== null && s.remaining <= 5 ? `${s.remaining} spot${s.remaining === 1 ? "" : "s"} left` : null}
+                meta={s.full ? theme.text.shiftFull : s.remaining !== null && s.remaining <= 5 ? fill(s.remaining === 1 ? theme.text.oneSpotLeft : theme.text.spotsLeft, { count: String(s.remaining) }) : null}
               >
                 <span className={t.optionDetail}>{formatShift(s, timezone)}</span>
                 {s.description ? <span className={t.optionDetail}>{s.description}</span> : null}
@@ -52,7 +54,7 @@ export function VolunteerForm({ slug, timezone, volunteering }: { slug: string;
       {volunteering.fields.map((f) => (
         <Question key={f.name} field={f} idPrefix="volunteer" error={errors[f.name]} value={values[f.name]} />
       ))}
-      <Submit label={volunteering.submitLabel} pending="Signing up…" />
+      <Submit label={volunteering.submitLabel} pending={theme.text.signingUp} />
     </form>
   );
 }

package/template/src/hearth/forms/fields.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { BlockOf } from "@the-smithy/hearth";
-import type { InputHTMLAttributes, ReactNode } from "react";
+import { useEffect, useRef, type InputHTMLAttributes, type ReactNode } from "react";
 import { useFormStatus } from "react-dom";
 import { theme } from "@/theme";
 
@@ -12,6 +12,18 @@ const t = theme.form;
 /** A question defined in Hearth (a form field, an event's volunteer question). */
 type FormField = BlockOf<"form">["data"]["fields"] extends (infer F)[] | undefined ? F : never;
 
+/**
+ * For a form's `ref`: after a submit comes back with errors, moves focus to the first field with one. Fields mark
+ * themselves with aria-invalid; choices that can't take it (a group of radio buttons) with data-invalid.
+ */
+export function useFocusFirstInvalid(state: unknown) {
+  const form = useRef<HTMLFormElement>(null);
+  useEffect(() => {
+    if (state) form.current?.querySelector<HTMLElement>('[aria-invalid="true"], [data-invalid]')?.focus();
+  }, [state]);
+  return form;
+}
+
 export function Alert({ children }: { children: ReactNode }) {
   return (
     <p role="alert" className={t.alert}>
@@ -33,7 +45,7 @@ export function Honeypot() {
   return (
     <div aria-hidden className="absolute -left-[9999px]">
       <label>
-        Leave this empty
+        {theme.text.honeypot}
         <input name="_gotcha" tabIndex={-1} autoComplete="off" />
       </label>
     </div>
@@ -65,7 +77,7 @@ export function TextField({ label, optional, error, textarea, rows = 3, ...input
     <label className={t.field}>
       <span className={t.label}>
         {label}
-        {optional ? <span className={t.optional}>(optional)</span> : null}
+        {optional ? <span className={t.optional}>{theme.text.optional}</span> : null}
       </span>
       {textarea ? <textarea {...(common as object)} rows={rows} /> : <input {...common} />}
       <FieldError id={describedBy}>{error}</FieldError>
@@ -97,14 +109,14 @@ export function Question({ field: f, idPrefix, error, value }: { field: FormFiel
         <>
           <label htmlFor={id} className={t.label}>
             {f.label}
-            {f.required ? null : <span className={t.optional}>(optional)</span>}
+            {f.required ? null : <span className={t.optional}>{theme.text.optional}</span>}
           </label>
           {f.type === "textarea" ? (
             <textarea {...common} rows={5} defaultValue={value} placeholder={f.placeholder} className={t.input} />
           ) : f.type === "select" ? (
             <select {...common} defaultValue={value ?? ""} className={t.input}>
               <option value="" disabled>
-                {f.placeholder || "Choose one…"}
+                {f.placeholder || theme.text.chooseOne}
               </option>
               {(f.options ?? []).map((o) => (
                 <option key={o}>{o}</option>

package/template/src/hearth/hearth.css

@@ -1,52 +1,8 @@
 /*
- * Hearth's base CSS, shared by every site: the on-dark variant, rich text and focus rings. Don't edit it in a site:
- * tokens and the site's own CSS go in src/theme/theme.css, which is loaded after this file and can override anything here.
+ * What Hearth's slots need to work, shared by every site: the on-dark variant. Don't edit it in a site: tokens and the
+ * site's own CSS go in src/theme/theme.css. Rich text and focus rings are in base.css, so that a site inside an app, whose
+ * own CSS already sets those, can import this file alone.
  */
 
 /* On an inverse or accent ground: set by sections with a dark tone, the hero, image calls to action and the footer. */
 @custom-variant on-dark (&:where([data-ground="dark"], [data-ground="dark"] *));
-
-/* Markdown from Hearth (rich text, FAQ answers, media + text). Unlayered, so its line height beats text-* sizes. */
-.prose {
-  line-height: 1.7;
-}
-.prose > * + * {
-  margin-top: 1em;
-}
-.prose h2 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  line-height: 1.25;
-  margin-top: 1.6em;
-}
-.prose h3 {
-  font-size: 1.35rem;
-  font-weight: 700;
-  margin-top: 1.4em;
-}
-.prose a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-.prose ul {
-  list-style: disc;
-  padding-left: 1.4em;
-}
-.prose ol {
-  list-style: decimal;
-  padding-left: 1.4em;
-}
-.prose blockquote {
-  border-left: 3px solid var(--color-line);
-  padding-left: 1em;
-  font-style: italic;
-}
-.prose img {
-  border-radius: 0.75rem;
-}
-
-/* Unlayered, so it beats utilities like focus:outline-none: keyboard focus always shows. */
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}

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

@@ -25,7 +25,7 @@ export function MobileNav({ siteName, links, cta, dropdowns = {} }: { siteName:
       <button type="button" className={t.toggle} aria-haspopup="dialog" onClick={() => dialog.current?.showModal()}>
         {theme.text.menu}
       </button>
-      <dialog ref={dialog} aria-label="Menu" className={t.dialog}>
+      <dialog ref={dialog} aria-label={theme.text.menu} className={t.dialog}>
         <div className={t.top}>
           <p className={t.title}>{siteName}</p>
           <button type="button" className={t.close} onClick={close}>

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

@@ -2,12 +2,16 @@
 
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
+import { theme } from "@/theme";
 import { SmartLink } from "../ui";
 
-/** A menu link that marks itself as the current page (aria-current), for the theme's aria-[current=page]: variant. */
+/**
+ * A menu link that marks itself as the current page (aria-current), for the theme's aria-[current=page]: variant. It
+ * counts as current on its own address and the ones under it, or only its own with `page.navMatch` set to "exact".
+ */
 export function NavLink({ href, className, onClick, children }: { href: string; className: string; onClick?: () => void; children: ReactNode }) {
   const pathname = usePathname();
-  const current = href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
+  const current = href === "/" || theme.page.navMatch === "exact" ? pathname === href : pathname === href || pathname.startsWith(`${href}/`);
   return (
     <SmartLink href={href} className={className} onClick={onClick} aria-current={current ? "page" : undefined}>
       {children}

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

@@ -1,14 +1,10 @@
+import type { Viewport } from "next";
 import type { ReactNode } from "react";
-import { HearthAnalytics } from "@the-smithy/hearth/analytics";
 import { siteLang } from "@the-smithy/hearth/next";
-import { HearthPreview } from "@the-smithy/hearth/preview";
 import { theme } from "@/theme";
-import { Blocks } from "../blocks";
 import { fontVariables } from "@/theme/fonts";
 import { hearthNext } from "../client";
-import { Popup } from "./Popup";
-import { SiteFooter } from "./SiteFooter";
-import { SiteHeader } from "./SiteHeader";
+import SiteFrame from "./SiteFrame";
 
 /**
  * What every page starts from: full links, the title pattern, the default description and share image, the site's
@@ -17,35 +13,15 @@ import { SiteHeader } from "./SiteHeader";
  */
 export const generateMetadata = () => hearthNext.siteMetadata();
 
+/** The browser's color around the page on phones (`page.themeColor`), when the site sets one. */
+export const viewport: Viewport = theme.page.themeColor ? { themeColor: theme.page.themeColor } : {};
+
 export default async function RootLayout({ children }: { children: ReactNode }) {
-  const [site, preview, globals] = await Promise.all([hearthNext.getSite(), hearthNext.isPreview(), hearthNext.getGlobalBlocks()]);
-  const t = theme.page;
-  // 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]} />]),
-  );
+  const site = await hearthNext.getSite();
   return (
     <html lang={siteLang(site)} className={fontVariables || undefined}>
-      <body className={t.body}>
-        <a href="#main" className={t.skipLink}>
-          Skip to content
-        </a>
-        {/* Live draft preview from Hearth: shows while an editor previews, refreshes as they edit. */}
-        {preview ? <HearthPreview /> : null}
-        <SiteHeader site={site} dropdowns={dropdowns} />
-        <main id="main" className={t.main}>
-          {children}
-        </main>
-        <SiteFooter 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}
+      <body className={theme.page.body}>
+        <SiteFrame>{children}</SiteFrame>
       </body>
     </html>
   );

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/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>
   );
 }