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

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} 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,257 +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} 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} 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} 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}
-                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} 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} 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} />;
-}

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

@@ -1,104 +0,0 @@
-import Link from "next/link";
-import type { BlockOf, HearthEvent } from "@the-smithy/hearth";
-import { Registration } from "@/components/Registration";
-import { Img, Section, SectionHeading } from "@/components/ui";
-
-/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone. */
-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 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;
-  const sameDay = end && day.format(start) === day.format(end);
-  if (e.allDay) return end && !sameDay ? `${day.format(start)} – ${day.format(end)}` : day.format(start);
-  if (!end) return `${day.format(start)} · ${time.format(start)}`;
-  return sameDay ? `${day.format(start)} · ${time.format(start)} – ${time.format(end)}` : `${day.format(start)} ${time.format(start)} – ${day.format(end)} ${time.format(end)}`;
-}
-
-export function EventCard({ event }: { event: HearthEvent }) {
-  const cancelled = event.status === "cancelled";
-  return (
-    <li className="flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line">
-      {event.image ? <Img image={event.image} className="aspect-[16/9] w-full object-cover" /> : null}
-      <div className="flex flex-1 flex-col gap-2 p-6">
-        <p className="text-sm font-semibold text-highlight">
-          {cancelled ? <span className="mr-2 rounded bg-danger px-1.5 py-0.5 text-white">Cancelled</span> : null}
-          <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
-        </p>
-        <h3 className="text-xl font-semibold">
-          <Link href={event.path} className="after:absolute after:inset-0 hover:underline">
-            {event.title}
-          </Link>
-        </h3>
-        {event.location.name ? <p className="opacity-75">{event.location.name}</p> : null}
-        {event.summary ? <p className="leading-relaxed opacity-85">{event.summary}</p> : null}
-        <div className="mt-auto pt-2">
-          <Registration event={event} size="small" />
-        </div>
-      </div>
-    </li>
-  );
-}
-
-export function EventList({ events }: { events: HearthEvent[] }) {
-  if (!events.length) return <p className="text-lg opacity-75">No upcoming events right now. Check back soon.</p>;
-  return (
-    <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 [&>li]:relative">
-      {events.map((e) => (
-        <EventCard key={e.slug} event={e} />
-      ))}
-    </ul>
-  );
-}
-
-export function UpcomingEvents({ block }: { block: BlockOf<"upcomingEvents"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <EventList events={d.events} />
-      {d.events.length ? (
-        <p className="mt-8">
-          <Link href="/events" className="font-semibold underline underline-offset-4">
-            All events →
-          </Link>
-        </p>
-      ) : null}
-    </Section>
-  );
-}
-
-/** Events that have ended, most recent first (a talk archive). They keep their pages, so each still links to it. */
-export function PastEvents({ block }: { block: BlockOf<"pastEvents"> }) {
-  const d = block.data;
-  if (!d.events.length) return null;
-  return (
-    <Section tone="muted">
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <EventList events={d.events} />
-    </Section>
-  );
-}
-
-export function EventSpotlight({ block }: { block: BlockOf<"eventSpotlight"> }) {
-  const e = block.data.event;
-  if (!e) return null;
-  return (
-    <Section tone="muted">
-      <div className="grid items-center gap-10 md:grid-cols-2">
-        <div>
-          {block.data.heading ? <p className="mb-3 text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{block.data.heading}</p> : null}
-          <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight">{e.title}</h2>
-          <p className="mt-3 text-lg font-semibold text-highlight">{formatEventDate(e)}</p>
-          {e.location.name ? <p className="mt-1 opacity-80">{e.location.name}</p> : null}
-          {e.summary ? <p className="mt-4 text-lg opacity-85">{e.summary}</p> : null}
-          <Link href={e.path} className="mt-6 inline-block rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90">
-            Event details
-          </Link>
-        </div>
-        {e.image ? <Img image={e.image} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
-      </div>
-    </Section>
-  );
-}

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

@@ -1,120 +0,0 @@
-import Link from "next/link";
-import type { BlockOf, Fundraiser } from "@the-smithy/hearth";
-import { DonateForm } from "@/components/DonateForm";
-import { Img, Section, SectionHeading } from "@/components/ui";
-
-/** Cents → "$1,250". */
-export const money = (cents: number) => (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 });
-
-/** Raised so far, against the goal when there is one. */
-export function Progress({ fundraiser, large }: { fundraiser: Fundraiser; large?: boolean }) {
-  const { raisedCents, goalCents, donorCount } = fundraiser;
-  const pct = goalCents ? Math.min(100, Math.round((raisedCents / goalCents) * 100)) : null;
-  return (
-    <div className="flex flex-col gap-2">
-      <p className={large ? "text-2xl" : "text-base"}>
-        <span className="font-bold">{money(raisedCents)}</span>
-        <span className="opacity-75">{goalCents ? ` raised of ${money(goalCents)}` : " raised"}</span>
-      </p>
-      {pct !== null ? (
-        <div className="h-2.5 overflow-hidden rounded-full bg-line" role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100} aria-label="Progress toward the goal">
-          <div className="h-full rounded-full bg-accent" style={{ width: `${pct}%` }} />
-        </div>
-      ) : null}
-      {donorCount ? (
-        <p className="text-sm opacity-75">
-          {donorCount} online donation{donorCount === 1 ? "" : "s"}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-export function FundraiserCard({ fundraiser }: { fundraiser: Fundraiser }) {
-  return (
-    <li className="relative flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line">
-      {fundraiser.image ? <Img image={fundraiser.image} className="aspect-[16/9] w-full object-cover" /> : null}
-      <div className="flex flex-1 flex-col gap-3 p-6">
-        {fundraiser.status === "completed" ? <p className="w-fit rounded bg-muted px-2 py-0.5 text-sm font-semibold">Completed</p> : null}
-        <h3 className="text-xl font-semibold">
-          <Link href={fundraiser.path} className="after:absolute after:inset-0 hover:underline">
-            {fundraiser.title}
-          </Link>
-        </h3>
-        {fundraiser.summary ? <p className="leading-relaxed opacity-85">{fundraiser.summary}</p> : null}
-        <div className="mt-auto pt-2">
-          <Progress fundraiser={fundraiser} />
-        </div>
-      </div>
-    </li>
-  );
-}
-
-export function FundraiserList({ fundraisers }: { fundraisers: Fundraiser[] }) {
-  if (!fundraisers.length) return <p className="text-lg opacity-75">No fundraisers right now. Check back soon.</p>;
-  return (
-    <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
-      {fundraisers.map((f) => (
-        <FundraiserCard key={f.slug} fundraiser={f} />
-      ))}
-    </ul>
-  );
-}
-
-export function FundraiserGrid({ block }: { block: BlockOf<"fundraiserGrid"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <FundraiserList fundraisers={d.fundraisers} />
-      {d.fundraisers.length ? (
-        <p className="mt-8">
-          <Link href="/fundraisers" className="font-semibold underline underline-offset-4">
-            All fundraisers →
-          </Link>
-        </p>
-      ) : null}
-    </Section>
-  );
-}
-
-export function FundraiserSpotlight({ block }: { block: BlockOf<"fundraiserSpotlight"> }) {
-  const f = block.data.fundraiser;
-  if (!f) return null;
-  return (
-    <Section tone="muted">
-      <div className="grid items-center gap-10 md:grid-cols-2">
-        <div className="flex flex-col gap-4">
-          {block.data.heading ? <p className="text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{block.data.heading}</p> : null}
-          <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight">{f.title}</h2>
-          {f.summary ? <p className="text-lg opacity-85">{f.summary}</p> : null}
-          <Progress fundraiser={f} large />
-          <p className="flex flex-wrap gap-3 pt-2">
-            {f.status === "active" ? (
-              <Link href={`${f.path}#donate`} className="rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90">
-                Donate
-              </Link>
-            ) : null}
-            <Link href={f.path} className="rounded-lg px-6 py-3.5 font-semibold ring-1 ring-line hover:bg-surface">
-              Learn more
-            </Link>
-          </p>
-        </div>
-        {f.image ? <Img image={f.image} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
-      </div>
-    </Section>
-  );
-}
-
-export function Donate({ block }: { block: BlockOf<"donate"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <SectionHeading heading={d.heading} intro={d.intro} />
-        {d.fundraiser ? <p className="mb-6 font-semibold">Supporting: {d.fundraiser.title}</p> : null}
-        <DonateForm presetsCents={d.presetsCents} minCents={d.minCents} maxCents={d.maxCents} fundraiser={d.fundraiser?.slug} submitLabel={d.submitLabel} />
-      </div>
-    </Section>
-  );
-}

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

@@ -1,52 +0,0 @@
-import type { BlockOf } from "@the-smithy/hearth";
-import { Section, SectionHeading } from "@/components/ui";
-
-export function Location({ block }: { block: BlockOf<"location"> }) {
-  const d = block.data;
-  const query = encodeURIComponent(`${d.name}, ${d.address}`);
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
-      <div className="grid gap-10 md:grid-cols-2">
-        <div className="flex flex-col gap-4 text-lg">
-          <h3 className="text-xl font-semibold">{d.name}</h3>
-          <address className="whitespace-pre-line not-italic">{d.address}</address>
-          {d.hours ? <p className="whitespace-pre-line">{d.hours}</p> : null}
-          {d.notes ? <p className="opacity-80">{d.notes}</p> : null}
-          <a href={`https://www.google.com/maps/dir/?api=1&destination=${query}`} rel="noopener" className="font-semibold text-highlight underline underline-offset-4">
-            Get directions
-          </a>
-        </div>
-        {d.showMap ? (
-          <iframe
-            title={`Map of ${d.name}`}
-            src={`https://www.google.com/maps?q=${query}&output=embed`}
-            loading="lazy"
-            referrerPolicy="no-referrer-when-downgrade"
-            className="aspect-[4/3] w-full rounded-xl border-0 bg-muted"
-          />
-        ) : null}
-      </div>
-    </Section>
-  );
-}
-
-export function Schedule({ block }: { block: BlockOf<"schedule"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <ol className="max-w-3xl divide-y divide-line border-y border-line">
-        {d.items.map((item, i) => (
-          <li key={i} className="grid gap-1 py-5 sm:grid-cols-[10rem_1fr] sm:gap-6">
-            <p className="font-semibold text-highlight">{item.time}</p>
-            <div>
-              <p className="text-lg font-semibold">{item.title}</p>
-              {item.details ? <p className="mt-1 opacity-80">{item.details}</p> : null}
-            </div>
-          </li>
-        ))}
-      </ol>
-    </Section>
-  );
-}