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

package/template/src/components/VolunteerForm.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import { useActionState } from "react";
-import { useFormStatus } from "react-dom";
-import type { EventVolunteering } from "@the-smithy/hearth";
-import { volunteer, type VolunteerState } 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";
-
-/** A shift's day and time in the event's time zone: "Sat, Nov 14 · 8:00 AM – 11:00 AM". */
-function shiftTime(s: { startsAt: string; endsAt: string }, timeZone: string) {
-  const day = (d: string) => new Date(d).toLocaleDateString("en-US", { timeZone, weekday: "short", month: "short", day: "numeric" });
-  const time = (d: string) => new Date(d).toLocaleTimeString("en-US", { timeZone, hour: "numeric", minute: "2-digit" });
-  return day(s.startsAt) === day(s.endsAt) ? `${day(s.startsAt)} · ${time(s.startsAt)} – ${time(s.endsAt)}` : `${day(s.startsAt)} ${time(s.startsAt)} – ${day(s.endsAt)} ${time(s.endsAt)}`;
-}
-
-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 ? "Signing up…" : label}
-    </button>
-  );
-}
-
-/**
- * Volunteer sign-up for an event: name and email, shifts to choose from (when the event lists them), then the
- * event's own questions. Sign-ups land under the event's Volunteers in Hearth.
- */
-export function VolunteerForm({ slug, timezone, volunteering }: { slug: string; timezone: string; volunteering: EventVolunteering }) {
-  const [state, action] = useActionState<VolunteerState | null, FormData>(volunteer.bind(null, slug), null);
-  const errors = state && !state.ok ? state.fieldErrors : {};
-  const values = (state && !state.ok ? state.values : undefined) ?? {};
-  const chosen = (state && !state.ok ? state.shifts : undefined) ?? [];
-  const many = volunteering.pickShifts === "many";
-
-  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" noValidate>
-      {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}
-      {/* Honeypot: hidden from people, filled in by bots. */}
-      <div aria-hidden className="absolute -left-[9999px]">
-        <label>
-          Leave this empty
-          <input name="_gotcha" tabIndex={-1} autoComplete="off" />
-        </label>
-      </div>
-      <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" defaultValue={values.name} aria-invalid={errors.name ? true : undefined} 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" defaultValue={values.email} aria-invalid={errors.email ? true : undefined} className={input} />
-          {errors.email ? <span className="mt-1 block text-danger">{errors.email}</span> : null}
-        </label>
-      </div>
-      {volunteering.pickShifts !== "none" ? (
-        <fieldset>
-          <legend className="mb-3 font-semibold">{many ? "Shifts you can do" : "Choose a shift"}</legend>
-          <div className="space-y-3">
-            {volunteering.shifts.map((s) => (
-              <label key={s.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 ${s.full ? "cursor-not-allowed opacity-50" : ""}`}>
-                <input
-                  type={many ? "checkbox" : "radio"}
-                  name="shift"
-                  value={s.id}
-                  disabled={s.full}
-                  defaultChecked={chosen.includes(s.id)}
-                  className="mt-1 size-5 accent-accent"
-                />
-                <span className="flex-1">
-                  <span className="flex flex-wrap justify-between gap-2 font-semibold">
-                    <span>{s.name}</span>
-                    <span className="font-normal opacity-80">{s.full ? "Full" : s.remaining !== null && s.remaining <= 5 ? `${s.remaining} spot${s.remaining === 1 ? "" : "s"} left` : null}</span>
-                  </span>
-                  <span className="mt-0.5 block opacity-80">{shiftTime(s, timezone)}</span>
-                  {s.description ? <span className="mt-1 block opacity-80">{s.description}</span> : null}
-                </span>
-              </label>
-            ))}
-          </div>
-          {errors.shifts ? <p className="mt-2 text-danger">{errors.shifts}</p> : null}
-        </fieldset>
-      ) : null}
-      {volunteering.fields.map((f) => {
-        const id = `volunteer-${f.name}`;
-        const error = errors[f.name];
-        const common = { id, name: f.name, required: f.required, "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-error` : undefined };
-        return (
-          <div key={f.name}>
-            {f.type === "checkbox" ? (
-              <label className="flex items-center gap-3">
-                <input type="checkbox" {...common} defaultChecked={values[f.name] === "on"} className="size-5 accent-accent" />
-                {f.label}
-              </label>
-            ) : (
-              <>
-                <label htmlFor={id} className="mb-1.5 block font-semibold">
-                  {f.label}
-                  {f.required ? null : <span className="ml-1 font-normal opacity-70">(optional)</span>}
-                </label>
-                {f.type === "textarea" ? (
-                  <textarea {...common} rows={4} defaultValue={values[f.name]} placeholder={f.placeholder} className={input} />
-                ) : f.type === "select" ? (
-                  <select {...common} defaultValue={values[f.name] ?? ""} className={input}>
-                    <option value="" disabled>
-                      {f.placeholder || "Choose one…"}
-                    </option>
-                    {(f.options ?? []).map((o) => (
-                      <option key={o}>{o}</option>
-                    ))}
-                  </select>
-                ) : (
-                  <input {...common} type={f.type} defaultValue={values[f.name]} placeholder={f.placeholder} autoComplete={f.type === "tel" ? "tel" : undefined} className={input} />
-                )}
-              </>
-            )}
-            {error ? (
-              <p id={`${id}-error`} className="mt-1.5 text-sm text-danger">
-                {error}
-              </p>
-            ) : null}
-          </div>
-        );
-      })}
-      <Submit label={volunteering.submitLabel} />
-    </form>
-  );
-}

package/template/src/components/blocks/Form.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import type { BlockOf } from "@the-smithy/hearth";
-import { useActionState } from "react";
-import { useFormStatus } from "react-dom";
-import { submitHearthForm, type FormState } from "@/app/actions";
-
-type FormData_ = BlockOf<"form">["data"];
-
-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";
-
-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 ? "Sending…" : label}
-    </button>
-  );
-}
-
-/** The fields of a Hearth `form` block, posted through a server action. */
-export function HearthForm({ form }: { form: FormData_ }) {
-  const [state, action] = useActionState<FormState, FormData>(submitHearthForm.bind(null, form.formKey), {});
-
-  if (state.ok) {
-    return (
-      <p role="status" className="rounded-xl bg-accent p-6 text-lg font-semibold text-accent-ink">
-        {state.message || form.successMessage}
-      </p>
-    );
-  }
-
-  return (
-    <form action={action} className="space-y-5" noValidate>
-      {state.message ? (
-        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger">
-          {state.message}
-        </p>
-      ) : null}
-      {/* Honeypot: hidden from people, filled in by bots. */}
-      <div aria-hidden className="absolute -left-[9999px]">
-        <label>
-          Leave this empty
-          <input name="_gotcha" tabIndex={-1} autoComplete="off" />
-        </label>
-      </div>
-      {form.fields.map((f) => {
-        const id = `${form.formKey}-${f.name}`;
-        const error = state.fieldErrors?.[f.name];
-        const value = state.values?.[f.name];
-        const common = { id, name: f.name, required: f.required, "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-error` : undefined };
-        return (
-          <div key={f.name}>
-            {f.type === "checkbox" ? (
-              <label className="flex items-center gap-3">
-                <input type="checkbox" {...common} defaultChecked={value === "on"} className="size-5 accent-accent" />
-                {f.label}
-              </label>
-            ) : (
-              <>
-                <label htmlFor={id} className="mb-1.5 block font-semibold">
-                  {f.label}
-                  {f.required ? null : <span className="ml-1 font-normal opacity-70">(optional)</span>}
-                </label>
-                {f.type === "textarea" ? (
-                  <textarea {...common} rows={5} defaultValue={value} placeholder={f.placeholder} className={input} />
-                ) : f.type === "select" ? (
-                  <select {...common} defaultValue={value ?? ""} className={input}>
-                    <option value="" disabled>
-                      {f.placeholder || "Choose one…"}
-                    </option>
-                    {(f.options ?? []).map((o) => (
-                      <option key={o}>{o}</option>
-                    ))}
-                  </select>
-                ) : (
-                  <input {...common} type={f.type} defaultValue={value} placeholder={f.placeholder} autoComplete={f.type === "email" ? "email" : f.type === "tel" ? "tel" : f.name === "name" ? "name" : undefined} className={input} />
-                )}
-              </>
-            )}
-            {error ? (
-              <p id={`${id}-error`} className="mt-1.5 text-sm text-danger">
-                {error}
-              </p>
-            ) : null}
-          </div>
-        );
-      })}
-      <Submit label={form.submitLabel} />
-    </form>
-  );
-}

package/template/src/components/blocks/collections.tsx

@@ -1,75 +0,0 @@
-import Link from "next/link";
-import type { BlockOf, CollectionEntry } from "@the-smithy/hearth";
-import { Img, Section, SectionHeading } from "@/components/ui";
-
-const date = (iso: string | null) =>
-  iso ? new Date(`${iso.slice(0, 10)}T12:00:00Z`).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }) : null;
-
-function Card({ entry }: { entry: CollectionEntry }) {
-  return (
-    <li className="relative flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line">
-      {entry.image ? <Img image={entry.image} crop={16 / 10} className="aspect-[16/10] w-full object-cover" /> : null}
-      <div className="flex flex-1 flex-col gap-2 p-6">
-        {entry.date ? <p className="text-sm font-semibold text-highlight">{date(entry.date)}</p> : null}
-        <h3 className="text-xl font-semibold">
-          <Link href={entry.path} className="after:absolute after:inset-0 hover:underline">
-            {entry.title}
-          </Link>
-        </h3>
-        {entry.summary ? <p className="leading-relaxed opacity-85">{entry.summary}</p> : null}
-        {entry.tags.length ? (
-          <ul className="mt-auto flex flex-wrap gap-2 pt-2">
-            {entry.tags.map((t) => (
-              <li key={t} className="rounded-full bg-muted px-3 py-1 text-xs font-semibold">
-                {t}
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-    </li>
-  );
-}
-
-/** Entries of a page collection (a blog, case studies…), as cards or a simple list. */
-export function CollectionList({ block }: { block: BlockOf<"collectionList"> }) {
-  const { entries, collection, layout } = block.data;
-  return (
-    <Section>
-      <SectionHeading eyebrow={block.data.eyebrow} heading={block.data.heading} intro={block.data.intro} />
-      {!entries.length ? (
-        <p className="text-lg opacity-75">Nothing here yet. Check back soon.</p>
-      ) : layout === "list" ? (
-        <ul className="max-w-3xl divide-y divide-line border-y border-line">
-          {entries.map((e) => (
-            <li key={e.path} className="py-5">
-              <Link href={e.path} className="text-lg font-semibold hover:underline">
-                {e.title}
-              </Link>
-              {e.date || e.summary ? (
-                <p className="mt-1 opacity-80">
-                  {e.date ? <span className="font-semibold">{date(e.date)}</span> : null}
-                  {e.date && e.summary ? " · " : null}
-                  {e.summary}
-                </p>
-              ) : null}
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
-          {entries.map((e) => (
-            <Card key={e.path} entry={e} />
-          ))}
-        </ul>
-      )}
-      {collection && entries.length >= block.data.limit ? (
-        <p className="mt-8">
-          <Link href={collection.path} className="font-semibold underline underline-offset-4">
-            All {collection.name.toLowerCase()} →
-          </Link>
-        </p>
-      ) : null}
-    </Section>
-  );
-}

package/template/src/components/blocks/content.tsx

@@ -1,258 +0,0 @@
-import type { BlockOf } from "@the-smithy/hearth";
-import { Button, Emphasis, Img, isDark, Markdown, Section, SectionHeading, SmartLink } from "@/components/ui";
-
-export function Hero({ block }: { block: BlockOf<"hero"> }) {
-  const d = block.data;
-  return (
-    <section className="relative overflow-hidden bg-inverse text-inverse-ink">
-      {d.image ? <Img image={d.image} crop priority className="absolute inset-0 size-full object-cover opacity-35" /> : null}
-      <div className={`relative mx-auto max-w-site px-4 sm:px-6 ${d.size === "full" ? "py-28 sm:py-36" : "py-16 sm:py-20"}`}>
-        {d.logo ? <Img image={d.logo} priority className="mb-6 h-20 w-auto sm:h-24" /> : null}
-        {d.eyebrow ? <p className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] opacity-80">{d.eyebrow}</p> : null}
-        <h1 className="max-w-4xl text-[clamp(36px,5vw,64px)] font-bold leading-[1.05] tracking-tight">
-          <Emphasis text={d.heading} className="underline decoration-2 underline-offset-[6px]" />
-        </h1>
-        {d.body ? <p className="mt-5 max-w-2xl text-lg leading-relaxed opacity-85 sm:text-xl">{d.body}</p> : null}
-        {d.primaryCta || d.secondaryCta ? (
-          <div className="mt-8 flex flex-wrap gap-3">
-            <Button link={d.primaryCta} dark />
-            <Button link={d.secondaryCta} variant="secondary" />
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-}
-
-export function RichText({ block }: { block: BlockOf<"richText"> }) {
-  return (
-    <Section>
-      <Markdown className={block.data.width === "narrow" ? "max-w-3xl" : ""}>{block.data.markdown}</Markdown>
-    </Section>
-  );
-}
-
-export function MediaText({ block }: { block: BlockOf<"mediaText"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <div className={`grid items-center gap-10 md:grid-cols-2 ${d.imagePosition === "left" ? "md:[&>*:first-child]:order-2" : ""}`}>
-        <div>
-          <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
-          <Markdown>{d.markdown}</Markdown>
-          {d.cta ? (
-            <div className="mt-6">
-              <Button link={d.cta} />
-            </div>
-          ) : null}
-        </div>
-        {d.image ? <Img image={d.image} crop={d.imageFit === "contain" ? undefined : 4 / 3} className={`w-full rounded-xl ${d.imageFit === "contain" ? "max-h-96 object-contain" : "aspect-[4/3] object-cover"}`} /> : null}
-      </div>
-    </Section>
-  );
-}
-
-export function Stats({ block }: { block: BlockOf<"stats"> }) {
-  return (
-    <Section tone="inverse">
-      <SectionHeading heading={block.data.heading} dark />
-      <dl className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
-        {block.data.items.map((s, i) => (
-          <div key={i} className="flex flex-col-reverse">
-            <dt className="mt-2 opacity-80">{s.label}</dt>
-            <dd className="text-5xl font-bold">{s.value}</dd>
-          </div>
-        ))}
-      </dl>
-    </Section>
-  );
-}
-
-export function CardGrid({ block }: { block: BlockOf<"cardGrid"> }) {
-  const d = block.data;
-  const dark = isDark(d.tone);
-  return (
-    <Section tone={d.tone}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} dark={dark} />
-      <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
-        {d.items.map((c, i) => (
-          <li key={i} className={`flex flex-col gap-3 rounded-2xl p-7 ${dark ? "bg-white/10" : "bg-surface ring-1 ring-line"}`}>
-            {c.image ? <Img image={c.image} crop={16 / 10} className="mb-2 aspect-[16/10] w-full rounded-lg object-cover" /> : null}
-            <h3 className="text-xl font-semibold">{c.title}</h3>
-            {c.body ? <p className="leading-relaxed opacity-80">{c.body}</p> : null}
-            {c.link ? (
-              <SmartLink href={c.link.href} className="mt-auto pt-2 font-semibold underline underline-offset-4">
-                {c.link.label} →
-              </SmartLink>
-            ) : null}
-          </li>
-        ))}
-      </ul>
-    </Section>
-  );
-}
-
-export function Projects({ block }: { block: BlockOf<"projects"> }) {
-  const d = block.data;
-  const dark = isDark(d.tone);
-  const grid = d.layout === "grid";
-  return (
-    <Section tone={d.tone}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} dark={dark} />
-      <ul className={grid ? "grid gap-5 sm:grid-cols-2 lg:grid-cols-3" : "grid gap-14"}>
-        {d.items.map((p, i) => (
-          <li
-            key={i}
-            className={
-              grid
-                ? `flex flex-col gap-3 rounded-2xl p-7 ${dark ? "bg-white/10" : "bg-surface ring-1 ring-line"}`
-                : "grid items-center gap-8 md:grid-cols-2"
-            }
-          >
-            {p.image ? (
-              <Img
-                image={p.image}
-                crop={16 / 10}
-                className={`aspect-[16/10] w-full rounded-xl object-cover object-top ${grid ? "mb-2" : i % 2 ? "md:order-2" : ""}`}
-              />
-            ) : null}
-            <div className="flex flex-col gap-3">
-              <div className="flex flex-wrap items-center gap-3">
-                <h3 className="text-xl font-semibold">{p.name}</h3>
-                {p.status ? <span className="rounded-full bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink">{p.status}</span> : null}
-              </div>
-              {p.role ? <p className="text-sm font-semibold uppercase tracking-[0.12em] opacity-75">{p.role}</p> : null}
-              {p.description ? <Markdown className="leading-relaxed opacity-80">{p.description}</Markdown> : null}
-              {p.stack.length ? (
-                <ul className="flex flex-wrap gap-2">
-                  {p.stack.map((s, j) => (
-                    <li key={j} className={`rounded-md px-2.5 py-1 text-sm ${dark ? "bg-white/10" : "bg-surface ring-1 ring-line"}`}>
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              ) : null}
-              {p.url ? (
-                <SmartLink href={p.url} className="mt-auto pt-2 font-semibold underline underline-offset-4">
-                  Visit {p.name} →
-                </SmartLink>
-              ) : null}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </Section>
-  );
-}
-
-export function Pricing({ block }: { block: BlockOf<"pricing"> }) {
-  const d = block.data;
-  const dark = isDark(d.tone);
-  return (
-    <Section tone={d.tone}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} dark={dark} />
-      <ul className={`grid gap-5 sm:grid-cols-2 ${d.plans.length >= 4 ? "lg:grid-cols-4" : "lg:grid-cols-3"}`}>
-        {d.plans.map((p, i) => (
-          <li
-            key={i}
-            className={`flex flex-col gap-4 rounded-2xl p-7 ${dark ? "bg-white/10" : "bg-surface"} ${p.highlight ? "ring-2 ring-accent" : dark ? "" : "ring-1 ring-line"}`}
-          >
-            {p.highlight ? <p className="self-start rounded-full bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink">{p.highlight}</p> : null}
-            <h3 className="text-xl font-semibold">{p.name}</h3>
-            <p>
-              <span className="text-4xl font-bold tracking-tight">{p.price}</span>
-              {p.period ? <span className="ml-1 opacity-75">{p.period}</span> : null}
-            </p>
-            {p.description ? <p className="leading-relaxed opacity-80">{p.description}</p> : null}
-            {p.features.length ? (
-              <ul className="grid gap-2 opacity-90">
-                {p.features.map((f, j) => (
-                  <li key={j} className="flex gap-2.5">
-                    <span aria-hidden className={dark ? "" : "text-highlight"}>
-                      ✓
-                    </span>
-                    {f}
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-            {p.cta ? (
-              <div className="mt-auto pt-2">
-                <Button link={p.cta} variant={p.highlight ? undefined : "secondary"} dark={dark} />
-              </div>
-            ) : null}
-          </li>
-        ))}
-      </ul>
-      {d.footnote ? <Markdown className="mt-8 max-w-3xl text-sm opacity-80">{d.footnote}</Markdown> : null}
-    </Section>
-  );
-}
-
-export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
-  const d = block.data;
-  const content = (dark: boolean) => (
-    <div className="flex flex-wrap items-center justify-between gap-8">
-      <div className="max-w-2xl">
-        <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight">
-          <Emphasis text={d.heading} className={dark ? "underline decoration-2 underline-offset-4" : "text-highlight"} />
-        </h2>
-        {d.body ? <p className="mt-3 text-lg opacity-85">{d.body}</p> : null}
-      </div>
-      <div className="flex flex-wrap gap-3">
-        <Button link={d.primary} dark={dark} />
-        <Button link={d.secondary} variant="secondary" />
-      </div>
-    </div>
-  );
-  if (!d.image) return <Section tone={d.tone}>{content(isDark(d.tone))}</Section>;
-  return (
-    <section className="relative overflow-hidden text-white">
-      <Img image={d.image} crop className="absolute inset-0 size-full object-cover" />
-      <div className="relative bg-black/55">
-        <div className="mx-auto max-w-site px-4 py-20 sm:px-6 sm:py-24">{content(true)}</div>
-      </div>
-    </section>
-  );
-}
-
-export function Faq({ block }: { block: BlockOf<"faq"> }) {
-  return (
-    <Section>
-      <SectionHeading heading={block.data.heading} />
-      <div className="max-w-3xl divide-y divide-line border-y border-line">
-        {block.data.items.map((q, i) => (
-          <details key={i} className="group">
-            <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden">
-              {q.question}
-              <span aria-hidden className="text-highlight transition group-open:rotate-45">
-                +
-              </span>
-            </summary>
-            <Markdown className="pb-5 opacity-85">{q.answer}</Markdown>
-          </details>
-        ))}
-      </div>
-    </Section>
-  );
-}
-
-export function Quote({ block }: { block: BlockOf<"quote"> }) {
-  const d = block.data;
-  return (
-    <Section tone={d.tone}>
-      <figure className="flex max-w-3xl flex-col gap-6">
-        <blockquote className="text-2xl font-semibold leading-snug sm:text-3xl">“{d.quote}”</blockquote>
-        {d.name ? (
-          <figcaption className="flex items-center gap-4">
-            {d.image ? <Img image={d.image} crop={1} className="size-14 rounded-full object-cover" /> : null}
-            <span>
-              <span className="block font-semibold">{d.name}</span>
-              {d.role ? <span className="block opacity-75">{d.role}</span> : null}
-            </span>
-          </figcaption>
-        ) : null}
-      </figure>
-    </Section>
-  );
-}

package/template/src/components/blocks/custom.tsx

@@ -1,20 +0,0 @@
-import type { BlockOf } from "@the-smithy/hearth";
-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.
- *
- *   "team-member": ({ values }) => <TeamMember name={values.name as string} photo={values.photo as ImageRef} />,
- */
-const customBlocks: Record<string, ComponentType<{ values: Record<string, unknown> }>> = {};
-
-export function CustomBlock({ block }: { block: BlockOf<"custom"> }) {
-  const Component = customBlocks[block.data.block];
-  if (!Component) {
-    if (process.env.NODE_ENV !== "production") console.warn(`[hearth] No component for custom block "${block.data.block}"; add one in components/blocks/custom.tsx.`);
-    return null;
-  }
-  return <Component values={block.data.values} />;
-}