@the-smithy/create-hearth-site 0.20.0 → 0.22.0

package/template/src/hearth/ui.tsx

@@ -0,0 +1,144 @@
+import Link from "next/link";
+import { Fragment, type AnchorHTMLAttributes, type ReactNode } from "react";
+import ReactMarkdown from "react-markdown";
+import { focalPosition, type ImageRef } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { cx } from "./theme";
+
+/*
+ * The pieces every block is built from. Their classes come from the theme (src/theme/index.ts); build a site's custom
+ * blocks from them too, so they match.
+ */
+
+type LinkRef = { label: string; href: string };
+export type Tone = "default" | "muted" | "inverse" | "accent";
+
+const TONES: readonly string[] = ["default", "muted", "inverse", "accent"];
+/** A tone from Hearth or from a `tone` slot in the theme (anything else is the default). */
+export const toTone = (value: string | undefined): Tone => (value && TONES.includes(value) ? (value as Tone) : "default");
+export const isDark = (tone?: Tone) => tone === "inverse" || tone === "accent";
+/** Marks an element's ground, for the on-dark: variant. */
+export const ground = (tone?: Tone) => ({ "data-ground": isDark(tone) ? "dark" : "light", "data-tone": tone ?? "default" });
+
+/** Fills {name} placeholders in a theme text: fill(theme.text.giveTo, { fundraiser: f.title }). */
+export const fill = (text: string, values: Record<string, string>) => text.replace(/\{(\w+)\}/g, (m, k: string) => values[k] ?? m);
+
+/** A full-width band with the site's content width inside. `block` names the block type, for CSS that targets it. */
+export function Section({ tone = "default", id, block, className, innerClassName, children }: { tone?: Tone; id?: string; block?: string; className?: string; innerClassName?: string; children: ReactNode }) {
+  return (
+    <section id={id} data-block={block} {...ground(tone)} className={cx(theme.tones[tone], theme.section.root, id && "scroll-mt-8", className)}>
+      <div className={cx(theme.section.inner, innerClassName)}>{children}</div>
+    </section>
+  );
+}
+
+/**
+ * Headings may mark words with *asterisks* to highlight them:
+ * "Fresh bread, *baked daily*".
+ */
+export function Emphasis({ text, className = theme.emphasis.mark }: { text: string; className?: string }) {
+  return (
+    <>
+      {text.split(/\*([^*]+)\*/g).map((part, i) =>
+        i % 2 ? (
+          <span key={i} className={className}>
+            {part}
+          </span>
+        ) : (
+          <Fragment key={i}>{part}</Fragment>
+        ),
+      )}
+    </>
+  );
+}
+
+/** The text without highlight markers, for alt text and titles. */
+export const plain = (text: string) => text.replace(/\*([^*]+)\*/g, "$1");
+
+export function SectionHeading({ eyebrow, heading, intro }: { eyebrow?: string; heading?: string; intro?: string }) {
+  if (!eyebrow && !heading && !intro) return null;
+  const t = theme.heading;
+  return (
+    <div className={t.root}>
+      {eyebrow ? <p className={t.eyebrow}>{eyebrow}</p> : null}
+      {heading ? (
+        <h2 className={t.title}>
+          <Emphasis text={heading} />
+        </h2>
+      ) : null}
+      {intro ? <p className={t.intro}>{intro}</p> : null}
+    </div>
+  );
+}
+
+/** Markdown from Hearth. Give it its slot's classes (they include `prose`). */
+export function Markdown({ children, className = theme.markdown.root, ...data }: { children: string; className?: string } & Record<`data-${string}`, string | undefined>) {
+  return (
+    <div className={className} {...data}>
+      <ReactMarkdown>{children}</ReactMarkdown>
+    </div>
+  );
+}
+
+export const isExternal = (href: string) => /^(https?:|mailto:|tel:)/.test(href);
+
+/** A link to a path on the site or to anywhere else. */
+export function SmartLink({ href, className, children, ...rest }: { href: string; className?: string; children: ReactNode } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">) {
+  return isExternal(href) ? (
+    <a href={href} className={className} {...rest}>
+      {children}
+    </a>
+  ) : (
+    <Link href={href} className={className} {...rest}>
+      {children}
+    </Link>
+  );
+}
+
+/** A link drawn as a button: the theme's primary or secondary button, at its normal or small size. */
+export function Button({ link, variant = "primary", size }: { link?: LinkRef; variant?: "primary" | "secondary"; size?: "small" }) {
+  if (!link) return null;
+  return (
+    <SmartLink href={link.href} className={theme.button[variant]} data-size={size}>
+      {link.label}
+    </SmartLink>
+  );
+}
+
+/**
+ * An image from Hearth. Its width and height (from Hearth's media library) reserve its space, so the page doesn't jump
+ * as it loads. `priority` loads it first: use it for the image at the top of the page (the hero), which is usually
+ * the largest thing on screen; everything else loads as it scrolls into view.
+ *
+ * `crop` is for images cropped to fill a frame (`object-cover`): they keep the focal point set in Hearth's media
+ * library in view. Give the frame's aspect ratio (`crop={4 / 3}` for `aspect-[4/3]`) to centre the focal point, or
+ * `crop` alone for frames whose shape changes with the screen (a full-bleed hero). Leave it off for uncropped images.
+ */
+/* eslint-disable @next/next/no-img-element -- Hearth serves media from its CDN at the uploaded size */
+export function Img({
+  image,
+  className = "",
+  priority = false,
+  crop,
+  ...data
+}: {
+  image: ImageRef;
+  className?: string;
+  priority?: boolean;
+  crop?: number | true;
+} & Record<`data-${string}`, string | undefined>) {
+  const objectPosition = crop ? focalPosition(image, crop === true ? undefined : crop) : undefined;
+  return (
+    <img
+      src={image.src}
+      alt={image.alt}
+      {...(image.width && image.height ? { width: image.width, height: image.height } : {})}
+      loading={priority ? "eager" : "lazy"}
+      fetchPriority={priority ? "high" : "auto"}
+      decoding={priority ? "sync" : "async"}
+      className={className}
+      style={objectPosition ? { objectPosition } : undefined}
+      {...data}
+    />
+  );
+}

package/template/src/theme/custom-blocks.tsx

@@ -0,0 +1,11 @@
+import type { ComponentType } from "react";
+
+/**
+ * This site's own blocks (Settings → Custom blocks in Hearth), one component per block key. Hearth stores what
+ * editors enter under `values`, keyed by each field's name; images come as { src, alt } with absolute URLs, links
+ * as { label, href }, lists as arrays of items. GET /custom-blocks (`hearth.customBlocks.list()`) describes them.
+ * Build them from the pieces in src/hearth/ui.tsx so they take the theme.
+ *
+ *   "team-member": ({ values }) => <TeamMember name={values.name as string} photo={values.photo as ImageRef} />,
+ */
+export const customBlocks: Record<string, ComponentType<{ values: Record<string, unknown> }>> = {};

package/template/src/theme/fonts.ts

@@ -0,0 +1,9 @@
+/**
+ * Web fonts for this site, loaded with next/font (self-hosted, no layout shift). Give each a CSS variable, list the
+ * variables below, and use them in theme.css, e.g. --font-sans: var(--font-inter), sans-serif.
+ *
+ *   import { Inter } from "next/font/google";
+ *   const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+ *   export const fontVariables = inter.variable;
+ */
+export const fontVariables = "";

package/template/src/theme/index.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "@/hearth/theme";
+
+/**
+ * This site's look, slot by slot. Every slot and its default classes is in src/hearth/theme/defaults.ts; set only
+ * the ones this design changes. A string replaces the default; a function extends it. Colors and fonts are tokens in
+ * theme.css, so prefer changing a token over many slots.
+ *
+ *   hero: { title: "font-display text-6xl uppercase", inner: (base) => `${base} text-center` },
+ *   button: { primary: "inline-block rounded-none bg-accent px-6 py-3 font-mono uppercase text-accent-ink" },
+ *   stats: { tone: "accent" },
+ *   text: { directions: "Directions" },
+ */
+export const theme = defineTheme({});

package/template/src/theme/overrides.tsx

@@ -0,0 +1,16 @@
+import type { BlockComponents } from "@the-smithy/hearth/react";
+import type { ComponentType } from "react";
+import type { Site } from "@the-smithy/hearth";
+
+/**
+ * The last resort, when a design can't be reached with slots and tokens: replace a whole block's component, or draw
+ * the header's logo yourself. Replaced components are this site's own code: `pnpm hearth:update` won't update them,
+ * so check them against src/hearth/blocks after each update. Build them from src/hearth/ui.tsx and the theme.
+ *
+ *   import { CountingStats } from "./CountingStats";
+ *   export const blocks: Partial<BlockComponents> = { stats: CountingStats };
+ */
+export const blocks: Partial<BlockComponents> = {};
+
+/** The header's logo; leave null to show the logo uploaded in Hearth (Settings → Search & sharing) and the site name. */
+export const Logo: ComponentType<{ site: Site }> | null = null;

package/template/src/theme/theme.css

@@ -0,0 +1,29 @@
+/*
+ * The site's brand: colors, fonts and widths as Tailwind tokens. Hearth's slots (src/hearth/theme/defaults.ts) only
+ * use these names, so a new design starts here. Hearth's "tone" options map onto them: default (bg, ink), muted,
+ * inverse and accent. Check text contrast on every ground, and form field borders at 3:1.
+ *
+ * Add the site's own CSS below the tokens: keyframes, background patterns, @utility classes your slots use.
+ */
+@theme {
+  --color-bg: #fbfaf7;
+  --color-ink: #1c1c1a;
+  --color-muted-ink: #5b5b55;
+  /* Dividers and card edges: decorative, so they can be faint. */
+  --color-line: #e3e0d8;
+  /* Form field and option borders: the border is how people see the field, so it needs 3:1 on surface, bg and muted. */
+  --color-field: #8a867e;
+  --color-surface: #ffffff;
+  --color-muted: #f1eee7;
+  --color-inverse: #1c1c1a;
+  --color-inverse-ink: #f6f4ee;
+  --color-accent: #2f5d50;
+  --color-accent-ink: #ffffff;
+  /* Highlighted words in headings (*like this*) and links. Check contrast on every ground. */
+  --color-highlight: #2f5d50;
+  --color-danger: #a12a1f;
+
+  /* Fonts loaded in src/theme/fonts.ts set variables these can use, e.g. --font-sans: var(--font-inter), sans-serif. */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --container-site: 72rem;
+}

package/template/src/components/DonateForm.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { useActionState, useState } from "react";
-import { useFormStatus } from "react-dom";
-import type { FormResult } from "@the-smithy/hearth";
-import { donate } from "@/app/actions";
-
-const input = "block w-full rounded-lg border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none";
-const money = (cents: number) => (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 });
-
-function Submit({ label }: { label: string }) {
-  const { pending } = useFormStatus();
-  return (
-    <button type="submit" disabled={pending} className="rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90 disabled:opacity-60">
-      {pending ? "Opening secure checkout…" : label}
-    </button>
-  );
-}
-
-/**
- * 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.
- */
-export function DonateForm({
-  presetsCents,
-  minCents,
-  maxCents,
-  fundraiser,
-  submitLabel = "Donate",
-}: {
-  presetsCents: number[];
-  minCents: number;
-  maxCents: number;
-  fundraiser?: string;
-  submitLabel?: string;
-}) {
-  const [state, action] = useActionState<FormResult | null, FormData>(donate, null);
-  const [amount, setAmount] = useState(presetsCents[1] !== undefined ? String(presetsCents[1] / 100) : "custom");
-  const errors = state && !state.ok ? state.fieldErrors : {};
-
-  return (
-    <form action={action} className="space-y-6" id="donate">
-      {state && !state.ok ? (
-        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger">
-          {state.message}
-        </p>
-      ) : null}
-      {fundraiser ? <input type="hidden" name="fundraiser" value={fundraiser} /> : null}
-      <fieldset>
-        <legend className="mb-3 font-semibold">Amount</legend>
-        <div className="flex flex-wrap gap-3">
-          {presetsCents.map((cents) => (
-            <label key={cents} className="cursor-pointer rounded-lg px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent">
-              <input type="radio" name="amount" value={cents / 100} checked={amount === String(cents / 100)} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
-              {money(cents)}
-            </label>
-          ))}
-          <label className="cursor-pointer rounded-lg px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent">
-            <input type="radio" name="amount" value="custom" checked={amount === "custom"} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
-            Other
-          </label>
-        </div>
-        {amount === "custom" ? (
-          <label className="mt-4 block max-w-xs">
-            <span className="mb-1.5 block text-sm font-semibold">Amount in dollars</span>
-            <input name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} className={input} />
-          </label>
-        ) : null}
-        <p className="mt-2 text-sm opacity-75">
-          {money(minCents)} to {money(maxCents)}.
-        </p>
-        {errors.amount ? <p className="mt-2 text-danger">{errors.amount}</p> : null}
-      </fieldset>
-      <div className="grid gap-5 sm:grid-cols-2">
-        <label className="block">
-          <span className="mb-1.5 block font-semibold">Name</span>
-          <input name="name" autoComplete="name" className={input} />
-        </label>
-        <label className="block">
-          <span className="mb-1.5 block font-semibold">Email for your receipt</span>
-          <input name="email" type="email" autoComplete="email" className={input} />
-          {errors.email ? <span className="mt-1 block text-danger">{errors.email}</span> : null}
-        </label>
-      </div>
-      <label className="block">
-        <span className="mb-1.5 block font-semibold">Message (optional)</span>
-        <textarea name="message" rows={3} maxLength={500} className={input} />
-      </label>
-      <label className="flex items-center gap-3">
-        <input type="checkbox" name="anonymous" className="size-5 accent-accent" />
-        Don&apos;t show my name publicly
-      </label>
-      {/* Opt-in only, unticked: the fundraiser's updates go to donors who ask (and give an email). */}
-      {fundraiser ? (
-        <label className="flex items-center gap-3">
-          <input type="checkbox" name="updates" className="size-5 accent-accent" />
-          Send me updates about this fundraiser
-        </label>
-      ) : null}
-      <Submit label={submitLabel} />
-      <p className="text-sm opacity-75">You&apos;ll finish on a secure payment page.</p>
-    </form>
-  );
-}

package/template/src/components/EventView.tsx

@@ -1,107 +0,0 @@
-import type { BlockOf, HearthEventDetail } from "@the-smithy/hearth";
-import { JsonLd } from "@the-smithy/hearth/react";
-import { Blocks } from "@/components/blocks";
-import { Hero } from "@/components/blocks/content";
-import { formatEventDate, volunteerAnchor } from "@/components/blocks/events";
-import { Registration } from "@/components/Registration";
-import { RegistrationForm } from "@/components/RegistrationForm";
-import { VolunteerForm } from "@/components/VolunteerForm";
-import { Img } from "@/components/ui";
-
-/**
- * An event's page: header with date, place and registration, then its blocks. Used at /events/… and /<collection>/….
- * When the event's blocks start with a hero, the hero is the header (its heading is the page's only h1, the event's
- * name its eyebrow, the event's image its picture if it has none) and the details sit in a band under it.
- * Volunteer sign-up goes at the bottom, unless a Volunteer sign-up block for the event is placed on the page.
- */
-export function EventView({ event }: { event: HearthEventDetail }) {
-  const { location } = event;
-  const [first, ...rest] = event.blocks;
-  const hero = first?.type === "hero" ? (first as BlockOf<"hero">) : null;
-  // A Volunteer sign-up block for this event puts the form where the editor placed it, instead of at the bottom.
-  const volunteerBlock = event.blocks.some((b) => b.type === "volunteerSignup" && (b as BlockOf<"volunteerSignup">).data.event.slug === event.slug);
-
-  const cancelled = event.status === "cancelled" ? <p className="w-fit rounded bg-danger px-2 py-1 text-sm font-semibold text-white">This event is cancelled</p> : null;
-  const when = (
-    <p className="text-lg font-semibold text-highlight">
-      <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
-    </p>
-  );
-  const where =
-    location.name || location.address ? (
-      <p>
-        {location.name ? <span className="block font-semibold">{location.name}</span> : null}
-        {location.address ? <span className="block opacity-80">{location.address}</span> : null}
-      </p>
-    ) : null;
-  const summary = event.summary ? <p className="text-lg opacity-85">{event.summary}</p> : null;
-  const actions = (
-    <div className="flex flex-wrap items-center gap-3">
-      <Registration event={event} />
-      {event.volunteering?.open ? (
-        <a href={volunteerBlock ? `#${volunteerAnchor(event.slug)}` : "#volunteer"} className="w-fit rounded-lg px-6 py-3.5 font-semibold ring-2 ring-current hover:opacity-80">
-          Volunteer
-        </a>
-      ) : null}
-    </div>
-  );
-
-  return (
-    <>
-      <JsonLd data={event.meta.jsonLd} />
-      {hero ? (
-        <>
-          <Hero block={{ ...hero, data: { ...hero.data, eyebrow: hero.data.eyebrow ?? event.title, image: hero.data.image ?? event.image ?? undefined } }} />
-          <section className="bg-muted">
-            <div className="mx-auto flex max-w-site flex-wrap items-center justify-between gap-6 px-4 py-8 sm:px-6">
-              <div className="flex flex-col gap-2">
-                {cancelled}
-                {when}
-                {where}
-                {hero.data.body ? null : summary}
-              </div>
-              {actions}
-            </div>
-          </section>
-        </>
-      ) : (
-        <section className="bg-muted">
-          <div className="mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2">
-            <div className="flex flex-col gap-4">
-              {event.collection ? <p className="text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{event.collection.name}</p> : null}
-              {cancelled}
-              <h1 className="text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight">{event.title}</h1>
-              {when}
-              {where}
-              {summary}
-              {actions}
-            </div>
-            {event.image ? <Img image={event.image} crop={4 / 3} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
-          </div>
-        </section>
-      )}
-      <Blocks blocks={hero ? rest : event.blocks} />
-      {event.registration?.open ? (
-        <section id="register" className="mx-auto max-w-site scroll-mt-8 px-4 py-16 sm:px-6">
-          <div className="max-w-2xl">
-            <h2 className="mb-2 text-2xl font-bold">Register</h2>
-            {event.registration.fundraiser ? <p className="mb-6 opacity-80">Ticket sales support {event.registration.fundraiser.title}.</p> : null}
-            <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
-          </div>
-        </section>
-      ) : null}
-      {event.volunteering?.open && !volunteerBlock ? (
-        <section id="volunteer" className="mx-auto max-w-site scroll-mt-8 px-4 py-16 sm:px-6">
-          <div className="max-w-2xl">
-            <h2 className="mb-2 text-2xl font-bold">Volunteer</h2>
-            {event.volunteering.intro ? <p className="mb-2 whitespace-pre-line opacity-85">{event.volunteering.intro}</p> : null}
-            {event.volunteering.fundraiser ? <p className="mb-2 opacity-80">This event supports {event.volunteering.fundraiser.title}.</p> : null}
-            <div className="mt-6">
-              <VolunteerForm slug={event.slug} timezone={event.timezone} volunteering={event.volunteering} />
-            </div>
-          </div>
-        </section>
-      ) : null}
-    </>
-  );
-}

package/template/src/components/RegistrationForm.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import { useActionState, useState } from "react";
-import { useFormStatus } from "react-dom";
-import type { EventTicket, FormResult } from "@the-smithy/hearth";
-import { register } from "@/app/actions";
-
-const input = "block w-full rounded-lg border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none";
-const price = (cents: number) => (cents ? (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 }) : "Free");
-
-function Submit({ paid }: { paid: boolean }) {
-  const { pending } = useFormStatus();
-  return (
-    <button type="submit" disabled={pending} className="rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90 disabled:opacity-60">
-      {pending ? (paid ? "Opening secure checkout…" : "Registering…") : paid ? "Continue to payment" : "Register"}
-    </button>
-  );
-}
-
-/**
- * On-site registration (sites with Tickets): pick a ticket, give contact details and attendee names. Free tickets
- * are confirmed here; paid ones go to the payment page and come back to /registered.
- */
-export function RegistrationForm({ slug, tickets }: { slug: string; tickets: EventTicket[] }) {
-  const [state, action] = useActionState<FormResult | null, FormData>(register.bind(null, slug), null);
-  const available = tickets.filter((t) => !t.soldOut);
-  const [ticketId, setTicketId] = useState(available[0]?.id ?? "");
-  const ticket = tickets.find((t) => t.id === ticketId);
-  const errors = state && !state.ok ? state.fieldErrors : {};
-
-  if (state?.ok) {
-    return (
-      <p role="status" className="rounded-xl bg-accent p-6 text-lg font-semibold text-accent-ink">
-        {state.message}
-      </p>
-    );
-  }
-
-  return (
-    <form action={action} className="space-y-6">
-      {state && !state.ok ? (
-        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger">
-          {state.message}
-        </p>
-      ) : null}
-      <fieldset>
-        <legend className="mb-3 font-semibold">Ticket</legend>
-        <div className="space-y-3">
-          {tickets.map((t) => (
-            <label key={t.id} className={`flex cursor-pointer items-start gap-3 rounded-lg p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent ${t.soldOut ? "opacity-50" : ""}`}>
-              <input type="radio" name="ticket" value={t.id} checked={ticketId === t.id} disabled={t.soldOut} onChange={() => setTicketId(t.id)} className="mt-1 size-5 accent-accent" />
-              <span className="flex-1">
-                <span className="flex flex-wrap justify-between gap-2 font-semibold">
-                  <span>{t.name}</span>
-                  <span>{t.soldOut ? "Sold out" : price(t.priceCents)}</span>
-                </span>
-                {t.description ? <span className="mt-1 block opacity-80">{t.description}</span> : null}
-                {t.remaining !== null && !t.soldOut && t.remaining <= 10 ? <span className="mt-1 block text-sm opacity-75">{t.remaining} left</span> : null}
-              </span>
-            </label>
-          ))}
-        </div>
-        {errors.ticket ? <p className="mt-2 text-danger">{errors.ticket}</p> : null}
-      </fieldset>
-      <div className="grid gap-5 sm:grid-cols-2">
-        <label className="block">
-          <span className="mb-1.5 block font-semibold">Name</span>
-          <input name="name" required autoComplete="name" className={input} />
-          {errors.name ? <span className="mt-1 block text-danger">{errors.name}</span> : null}
-        </label>
-        <label className="block">
-          <span className="mb-1.5 block font-semibold">Email</span>
-          <input name="email" type="email" required autoComplete="email" className={input} />
-          {errors.email ? <span className="mt-1 block text-danger">{errors.email}</span> : null}
-        </label>
-        <label className="block">
-          <span className="mb-1.5 block font-semibold">Phone (optional)</span>
-          <input name="phone" type="tel" autoComplete="tel" className={input} />
-        </label>
-        <label className="block">
-          <span className="mb-1.5 block font-semibold">Team or organization (optional)</span>
-          <input name="teamName" className={input} />
-        </label>
-      </div>
-      {ticket && ticket.attendeesPerRegistration > 0 ? (
-        <fieldset>
-          <legend className="mb-3 font-semibold">{ticket.attendeesPerRegistration === 1 ? (ticket.attendeeLabel ?? "Attendee") : `${ticket.attendeeLabel ?? "Attendee"}s`}</legend>
-          <div className="grid gap-3 sm:grid-cols-2">
-            {Array.from({ length: ticket.attendeesPerRegistration }, (_, i) => (
-              <input key={`${ticket.id}-${i}`} name="attendee" required aria-label={`${ticket.attendeeLabel ?? "Attendee"} ${i + 1}`} placeholder={`${ticket.attendeeLabel ?? "Attendee"} ${i + 1}`} className={input} />
-            ))}
-          </div>
-          {errors.attendees ? <p className="mt-2 text-danger">{errors.attendees}</p> : null}
-        </fieldset>
-      ) : null}
-      <label className="block">
-        <span className="mb-1.5 block font-semibold">Notes (optional)</span>
-        <textarea name="notes" rows={3} maxLength={1000} className={input} />
-      </label>
-      <Submit paid={Boolean(ticket?.priceCents)} />
-    </form>
-  );
-}

package/template/src/components/SiteHeader.tsx

@@ -1,37 +0,0 @@
-import Link from "next/link";
-import type { Site } from "@the-smithy/hearth";
-import { Img, SmartLink } from "@/components/ui";
-
-/** Logo, menu, menu button and announcement banner, all edited in Hearth (Settings → General, and Navigation). */
-export function SiteHeader({ site }: { site: Site }) {
-  const { announcement, seo, tagline, navigation, navigationCta } = site.settings;
-  return (
-    <header className="border-b border-line bg-bg">
-      {announcement ? <p className="bg-accent px-4 py-2 text-center text-sm font-semibold text-accent-ink">{announcement}</p> : null}
-      <div className="mx-auto flex max-w-site flex-wrap items-center justify-between gap-x-8 gap-y-3 px-4 py-4 sm:px-6">
-        <Link href="/" className="flex items-center gap-3 text-xl font-bold">
-          {seo.logo ? <Img image={{ src: seo.logo.src, alt: "" }} className="h-10 w-auto" /> : null}
-          <span className="flex flex-col">
-            <span>{site.name}</span>
-            {tagline ? <span className="text-sm font-normal text-muted-ink">{tagline}</span> : null}
-          </span>
-        </Link>
-        {navigation.length || navigationCta ? (
-          <nav aria-label="Main" className="flex flex-wrap items-center gap-x-6 gap-y-1 font-medium">
-            {navigation.map((item) => (
-              <SmartLink key={item.href + item.label} href={item.href} className="py-2 hover:text-highlight">
-                {item.label}
-              </SmartLink>
-            ))}
-            {/* The menu button (Navigation → Menu button in Hearth): one action that stands out from the links. */}
-            {navigationCta ? (
-              <SmartLink href={navigationCta.href} className="rounded-lg bg-accent px-4 py-2 font-semibold text-accent-ink hover:opacity-90">
-                {navigationCta.label}
-              </SmartLink>
-            ) : null}
-          </nav>
-        ) : null}
-      </div>
-    </header>
-  );
-}