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

package/template/src/hearth/components/PageContent.tsx

@@ -0,0 +1,23 @@
+import type { Page } from "@the-smithy/hearth";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { Blocks } from "../blocks";
+
+/** A page from Hearth: its structured data and its blocks. */
+export function PageContent({ page }: { page: Page }) {
+  return (
+    <>
+      <JsonLd data={page.meta.jsonLd} />
+      <PageBlocks page={page} />
+    </>
+  );
+}
+
+export function PageBlocks({ page }: { page: Page }) {
+  return (
+    <>
+      {/* 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} />
+    </>
+  );
+}

package/template/src/hearth/components/Registration.tsx

@@ -1,6 +1,7 @@
 import type { HearthEvent } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { hearthNext } from "../client";
+import { ExternalLink } from "../ui";
 
 /** Upcoming until it ends (or, without an end time, until it starts). */
 const isUpcoming = (e: Pick<HearthEvent, "startsAt" | "endsAt">) => new Date(e.endsAt ?? e.startsAt).getTime() > Date.now();
@@ -31,9 +32,9 @@ export async function Registration({ event, size = "large" }: { event: HearthEve
   }
   if (event.registrationUrl) {
     return (
-      <a href={event.registrationUrl} rel="noopener" className={theme.button.primary} data-size={small}>
+      <ExternalLink href={event.registrationUrl} rel="noopener" className={theme.button.primary} data-size={small}>
         {theme.text.register}
-      </a>
+      </ExternalLink>
     );
   }
   const { events } = (await hearthNext.getSite()).settings;

package/template/src/hearth/components/Share.tsx

@@ -23,9 +23,9 @@ export function Share({ title, url, message, heading }: { title: string; url: st
   async function copy(value: string, label: string) {
     try {
       await navigator.clipboard.writeText(value);
-      setStatus(`${label} copied.`);
+      setStatus(theme.text.shareCopied.replace("{what}", label));
     } catch {
-      setStatus("Couldn't copy automatically. Select the text and copy it.");
+      setStatus(theme.text.shareCopyFailed);
     }
   }
 
@@ -33,8 +33,8 @@ export function Share({ title, url, message, heading }: { title: string; url: st
   const targets = [
     { label: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}` },
     { label: "X", href: `https://x.com/intent/post?text=${enc(text)}` },
-    { label: "Email", href: `mailto:?subject=${enc(title)}&body=${enc(text)}` },
-    { label: "Text message", href: `sms:?&body=${enc(text)}` },
+    { label: theme.text.shareEmail, href: `mailto:?subject=${enc(title)}&body=${enc(text)}` },
+    { label: theme.text.shareTextMessage, href: `sms:?&body=${enc(text)}` },
   ];
 
   return (
@@ -66,26 +66,26 @@ export function Share({ title, url, message, heading }: { title: string; url: st
         </div>
         <div className={t.body}>
           <label className={theme.form.field}>
-            <span className={theme.form.label}>Your message</span>
+            <span className={theme.form.label}>{theme.text.shareMessageLabel}</span>
             <textarea id={`${id}-message`} rows={5} value={text} onChange={(e) => setText(e.target.value)} className={t.message} />
           </label>
           <div className={t.copy}>
-            <button type="button" onClick={() => copy(text, "Message")} className={t.copyButton}>
-              Copy message
+            <button type="button" onClick={() => copy(text, theme.text.shareTheMessage)} className={t.copyButton}>
+              {theme.text.shareCopyMessage}
             </button>
-            <button type="button" onClick={() => copy(url, "Link")} className={t.copyButton}>
-              Copy link
+            <button type="button" onClick={() => copy(url, theme.text.shareTheLink)} className={t.copyButton}>
+              {theme.text.shareCopyLink}
             </button>
           </div>
           <p role="status" aria-live="polite" className={t.status}>
             {status}
           </p>
           <div>
-            <p className={t.targetsLabel}>Or share to</p>
+            <p className={t.targetsLabel}>{theme.text.shareTo}</p>
             <div className={t.targets}>
               {nativeShare ? (
                 <button type="button" className={t.target} onClick={() => navigator.share({ title, text }).catch(() => {})}>
-                  More apps…
+                  {theme.text.shareMoreApps}
                 </button>
               ) : null}
               {targets.map((x) => (

package/template/src/hearth/format.ts

@@ -1,9 +1,11 @@
 import type { HearthEvent } from "@the-smithy/hearth";
+import { theme } from "@/theme";
 
-/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone. */
+/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone; "Saturday, October 18 · …" with `page.dateStyle` set to "long". */
 export function formatEventDate(e: Pick<HearthEvent, "startsAt" | "endsAt" | "allDay" | "timezone">) {
   const tz = { timeZone: e.timezone };
-  const day = new Intl.DateTimeFormat("en-US", { ...tz, weekday: "short", month: "short", day: "numeric", year: "numeric" });
+  const words = theme.page.dateStyle === "long" ? "long" : "short";
+  const day = new Intl.DateTimeFormat("en-US", { ...tz, weekday: words, month: words, day: "numeric", year: "numeric" });
   const time = new Intl.DateTimeFormat("en-US", { ...tz, hour: "numeric", minute: "2-digit" });
   const start = new Date(e.startsAt);
   const end = e.endsAt ? new Date(e.endsAt) : null;
@@ -28,4 +30,4 @@ export const formatEntryDate = (iso: string) =>
 export const money = (cents: number) => (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 });
 
 /** A ticket price: "$25" or "Free". */
-export const price = (cents: number) => (cents ? money(cents) : "Free");
+export const price = (cents: number) => (cents ? money(cents) : theme.text.free);

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

@@ -4,7 +4,7 @@ import type { BlockOf } from "@the-smithy/hearth";
 import { useActionState } from "react";
 import { theme } from "@/theme";
 import { submitHearthForm, type FormState } from "../actions";
-import { Alert, Honeypot, Question, Submit, Success } from "./fields";
+import { Alert, Honeypot, Question, Submit, Success, useFocusFirstInvalid } from "./fields";
 
 type FormData_ = BlockOf<"form">["data"];
 
@@ -12,16 +12,18 @@ type FormData_ = BlockOf<"form">["data"];
 export function HearthForm({ form }: { form: FormData_ }) {
   const [state, action] = useActionState<FormState, FormData>(submitHearthForm.bind(null, form.formKey), {});
 
+  const ref = useFocusFirstInvalid(state);
+
   if (state.ok) return <Success>{state.message || form.successMessage}</Success>;
 
   return (
-    <form action={action} className={theme.form.root} noValidate>
+    <form ref={ref} action={action} className={theme.form.root} noValidate>
       {state.message ? <Alert>{state.message}</Alert> : null}
       <Honeypot />
       {form.fields.map((f) => (
         <Question key={f.name} field={f} idPrefix={form.formKey} error={state.fieldErrors?.[f.name]} value={state.values?.[f.name]} />
       ))}
-      <Submit label={form.submitLabel} pending="Sending…" />
+      <Submit label={form.submitLabel} pending={theme.text.sending} />
     </form>
   );
 }

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

@@ -1,69 +1,86 @@
 "use client";
 
-import { useActionState, useState } from "react";
+import { useActionState, useEffect, useState } from "react";
 import type { FormResult } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { donate } from "../actions";
 import { money } from "../format";
-import { Alert, Checkbox, FieldError, Submit, TextField } from "./fields";
+import type { DonateFormProps } from "../overrides";
+import { fill } from "../ui";
+import { Alert, Checkbox, FieldError, Submit, TextField, useFocusFirstInvalid } from "./fields";
 
 const t = theme.form;
 
 /**
- * Suggested amounts (from Hearth's Giving settings), a custom amount and optional details. Submitting starts a
- * checkout through Hearth and sends the donor to the payment page; they come back to /donate/thank-you.
+ * Suggested amounts (from Hearth's Giving settings), a custom amount, a choice of fundraiser and optional details.
+ * Submitting starts a checkout through Hearth and sends the donor to the payment page; they come back to
+ * /donate/thank-you. `fundraiser` gives to that one. Otherwise `fundraisers`, the active ones, are offered, with
+ * "Where it's needed most" first and the one named by ?fundraiser= in the address chosen; without any, there's no choice.
  */
-export function DonateForm({
-  presetsCents,
-  minCents,
-  maxCents,
-  fundraiser,
-  submitLabel = theme.text.donate,
-}: {
-  presetsCents: number[];
-  minCents: number;
-  maxCents: number;
-  fundraiser?: string;
-  submitLabel?: string;
-}) {
+export function DonateForm({ presetsCents, minCents, maxCents, fundraiser, fundraisers = [], submitLabel = theme.text.donate }: DonateFormProps) {
   const [state, action] = useActionState<FormResult | null, FormData>(donate, null);
   const [amount, setAmount] = useState(presetsCents[1] !== undefined ? String(presetsCents[1] / 100) : "custom");
+  const [chosen, setChosen] = useState("");
   const errors = state && !state.ok ? state.fieldErrors : {};
+  const ref = useFocusFirstInvalid(state);
+  const choice = !fundraiser && fundraisers.length > 0;
+
+  // From the address after loading, so that the page can stay prerendered.
+  useEffect(() => {
+    const wanted = new URLSearchParams(window.location.search).get("fundraiser");
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- only known in the browser
+    if (wanted && fundraisers.some((f) => f.slug === wanted)) setChosen(wanted);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once, as the page loads
+  }, []);
 
   return (
-    <form action={action} className={t.root} id="donate">
+    <form ref={ref} action={action} className={t.root} id="donate">
       {state && !state.ok ? <Alert>{state.message}</Alert> : null}
       {fundraiser ? <input type="hidden" name="fundraiser" value={fundraiser} /> : null}
       <fieldset>
-        <legend className={t.legend}>Amount</legend>
+        <legend className={t.legend}>{theme.text.donateAmount}</legend>
         <div className={t.amounts}>
-          {[...presetsCents.map((cents) => ({ value: String(cents / 100), label: money(cents) })), { value: "custom", label: "Other" }].map((a) => (
+          {[...presetsCents.map((cents) => ({ value: String(cents / 100), label: money(cents) })), { value: "custom", label: theme.text.donateOther }].map((a) => (
             <label key={a.value} className={t.amount}>
-              <input type="radio" name="amount" value={a.value} checked={amount === a.value} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
+              <input type="radio" name="amount" value={a.value} checked={amount === a.value} onChange={(e) => setAmount(e.target.value)} data-invalid={errors.amount && amount === a.value && a.value !== "custom" ? "" : undefined} className="sr-only" />
               {a.label}
             </label>
           ))}
         </div>
         {amount === "custom" ? (
           <div className={t.customAmount}>
-            <TextField label="Amount in dollars" name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} />
+            <TextField label={theme.text.donateCustomAmount} name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} data-invalid={errors.amount ? "" : undefined} />
           </div>
         ) : null}
-        <p className={t.hint}>
-          {money(minCents)} to {money(maxCents)}.
-        </p>
+        <p className={t.hint}>{fill(theme.text.donateRange, { min: money(minCents), max: money(maxCents) })}</p>
         <FieldError>{errors.amount}</FieldError>
       </fieldset>
+      {choice ? (
+        <div>
+          <label htmlFor="donate-fundraiser" className={t.label}>
+            {theme.text.donateChoice}
+          </label>
+          <select id="donate-fundraiser" name="fundraiser" value={chosen} onChange={(e) => setChosen(e.target.value)} aria-invalid={errors.fundraiser ? true : undefined} aria-describedby={errors.fundraiser ? "donate-fundraiser-error" : undefined} className={t.input}>
+            <option value="">{theme.text.donateAnywhere}</option>
+            {fundraisers.map((f) => (
+              <option key={f.slug} value={f.slug}>
+                {f.title}
+              </option>
+            ))}
+          </select>
+          <FieldError id="donate-fundraiser-error">{errors.fundraiser}</FieldError>
+        </div>
+      ) : null}
       <div className={t.row}>
-        <TextField label="Name" name="name" autoComplete="name" error={errors.name} />
-        <TextField label="Email for your receipt" name="email" type="email" autoComplete="email" error={errors.email} />
+        <TextField label={theme.text.yourName} name="name" autoComplete="name" error={errors.name} />
+        <TextField label={theme.text.donateEmail} name="email" type="email" autoComplete="email" error={errors.email} />
       </div>
-      <TextField label="Message" optional name="message" textarea rows={3} maxLength={500} error={errors.message} />
-      <Checkbox name="anonymous" label="Don't show my name publicly" />
+      <TextField label={theme.text.donateMessage} optional name="message" textarea rows={3} maxLength={500} error={errors.message} />
+      <Checkbox name="anonymous" label={theme.text.donateAnonymous} />
       {/* Opt-in only, unticked: the fundraiser's updates go to donors who ask (and give an email). */}
-      {fundraiser ? <Checkbox name="updates" label="Send me updates about this fundraiser" /> : null}
-      <Submit label={submitLabel} pending="Opening secure checkout…" />
-      <p className={t.note}>You&apos;ll finish on a secure payment page.</p>
+      {fundraiser || chosen ? <Checkbox name="updates" label={theme.text.donateUpdates} /> : null}
+      <Submit label={submitLabel} pending={theme.text.openingCheckout} />
+      <p className={t.note}>{theme.text.donateNote}</p>
     </form>
   );
 }

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

@@ -0,0 +1,13 @@
+import { hearthNext } from "../client";
+import { overrides, type DonateFormProps } from "../overrides";
+import { DonateForm } from "./DonateForm";
+
+/**
+ * A donation form wherever the template draws one, the site's own if it replaces it. Without a fundraiser of its own, it
+ * offers the active ones to choose from.
+ */
+export async function DonationForm(props: Omit<DonateFormProps, "fundraisers">) {
+  const Form = overrides.DonateForm ?? DonateForm;
+  const fundraisers = props.fundraiser ? [] : await hearthNext.getFundraisers({ status: "active" });
+  return <Form {...props} fundraisers={fundraisers.map((f) => ({ slug: f.slug, title: f.title }))} />;
+}

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

@@ -5,7 +5,8 @@ import type { EventTicket, FormResult } from "@the-smithy/hearth";
 import { theme } from "@/theme";
 import { register } from "../actions";
 import { price } from "../format";
-import { Alert, FieldError, OptionCard, Submit, Success, TextField } from "./fields";
+import { fill } from "../ui";
+import { Alert, FieldError, OptionCard, Submit, Success, TextField, useFocusFirstInvalid } from "./fields";
 
 const t = theme.form;
 
@@ -20,49 +21,50 @@ export function RegistrationForm({ slug, tickets }: { slug: string; tickets: Eve
   const ticket = tickets.find((x) => x.id === ticketId);
   const errors = state && !state.ok ? state.fieldErrors : {};
   const paid = Boolean(ticket?.priceCents);
-  const attendee = ticket?.attendeeLabel ?? "Attendee";
+  const attendee = ticket?.attendeeLabel ?? theme.text.attendee;
+  const ref = useFocusFirstInvalid(state);
 
   if (state?.ok) return <Success>{state.message}</Success>;
 
   return (
-    <form action={action} className={t.root}>
+    <form ref={ref} action={action} className={t.root}>
       {state && !state.ok ? <Alert>{state.message}</Alert> : null}
       <fieldset>
-        <legend className={t.legend}>Ticket</legend>
+        <legend className={t.legend}>{theme.text.ticket}</legend>
         <div className={t.options}>
           {tickets.map((x) => (
             <OptionCard
               key={x.id}
-              input={<input type="radio" name="ticket" value={x.id} checked={ticketId === x.id} disabled={x.soldOut} onChange={() => setTicketId(x.id)} className={t.optionInput} />}
+              input={<input type="radio" name="ticket" value={x.id} checked={ticketId === x.id} disabled={x.soldOut} onChange={() => setTicketId(x.id)} data-invalid={errors.ticket && !x.soldOut ? "" : undefined} className={t.optionInput} />}
               title={x.name}
-              meta={x.soldOut ? "Sold out" : price(x.priceCents)}
+              meta={x.soldOut ? theme.text.soldOut : price(x.priceCents)}
             >
               {x.description ? <span className={t.optionDetail}>{x.description}</span> : null}
-              {x.remaining !== null && !x.soldOut && x.remaining <= 10 ? <span className={t.optionDetail}>{x.remaining} left</span> : null}
+              {x.remaining !== null && !x.soldOut && x.remaining <= 10 ? <span className={t.optionDetail}>{fill(theme.text.ticketsLeft, { count: String(x.remaining) })}</span> : null}
             </OptionCard>
           ))}
         </div>
         <FieldError>{errors.ticket}</FieldError>
       </fieldset>
       <div className={t.row}>
-        <TextField label="Name" name="name" required autoComplete="name" error={errors.name} />
-        <TextField label="Email" name="email" type="email" required autoComplete="email" error={errors.email} />
-        <TextField label="Phone" optional name="phone" type="tel" autoComplete="tel" error={errors.phone} />
-        <TextField label="Team or organization" optional name="teamName" error={errors.teamName} />
+        <TextField label={theme.text.yourName} name="name" required autoComplete="name" error={errors.name} />
+        <TextField label={theme.text.yourEmail} name="email" type="email" required autoComplete="email" error={errors.email} />
+        <TextField label={theme.text.yourPhone} optional name="phone" type="tel" autoComplete="tel" error={errors.phone} />
+        <TextField label={theme.text.teamName} optional name="teamName" error={errors.teamName} />
       </div>
       {ticket && ticket.attendeesPerRegistration > 0 ? (
         <fieldset>
           <legend className={t.legend}>{ticket.attendeesPerRegistration === 1 ? attendee : `${attendee}s`}</legend>
           <div className={t.row}>
             {Array.from({ length: ticket.attendeesPerRegistration }, (_, i) => (
-              <input key={`${ticket.id}-${i}`} name="attendee" required aria-label={`${attendee} ${i + 1}`} placeholder={`${attendee} ${i + 1}`} className={t.input} />
+              <input key={`${ticket.id}-${i}`} name="attendee" required aria-invalid={errors.attendees ? true : undefined} aria-label={`${attendee} ${i + 1}`} placeholder={`${attendee} ${i + 1}`} className={t.input} />
             ))}
           </div>
           <FieldError>{errors.attendees}</FieldError>
         </fieldset>
       ) : null}
-      <TextField label="Notes" optional name="notes" textarea rows={3} maxLength={1000} error={errors.notes} />
-      <Submit label={paid ? "Continue to payment" : theme.text.register} pending={paid ? "Opening secure checkout…" : "Registering…"} />
+      <TextField label={theme.text.notes} optional name="notes" textarea rows={3} maxLength={1000} error={errors.notes} />
+      <Submit label={paid ? theme.text.continueToPayment : theme.text.register} pending={paid ? theme.text.openingCheckout : theme.text.registering} />
     </form>
   );
 }

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