@the-smithy/create-hearth-site 0.30.0 → 0.33.0

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

@@ -1,5 +1,6 @@
 import { directionsUrl, pinned, type BlockOf } from "@the-smithy/hearth";
 import { theme } from "@/theme";
+import { Part } from "../parts";
 import { ExternalLink, fill, Markdown, Section, SectionHeading, SmartLink } from "../ui";
 import { OpenMap } from "./OpenMap";
 
@@ -9,16 +10,20 @@ export function Location({ block }: { block: BlockOf<"location"> }) {
   const Title = d.heading ? "h3" : "h2";
   return (
     <Section block="location" id={block.anchor}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+      <Part name="location.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+      </Part>
       <div className={t.grid}>
         <div className={t.details}>
-          <Title className={t.name}>{d.name}</Title>
-          <address className={t.address}>{d.address}</address>
-          {d.hours ? <p className={t.hours}>{d.hours}</p> : null}
-          {d.notes ? <Markdown className={t.notes}>{d.notes}</Markdown> : null}
-          <ExternalLink href={directionsUrl(d)} rel="noopener" className={t.directions}>
-            {theme.text.directions}
-          </ExternalLink>
+          <Part name="location.details" props={{ block }}>
+            <Title className={t.name}>{d.name}</Title>
+            <address className={t.address}>{d.address}</address>
+            {d.hours ? <p className={t.hours}>{d.hours}</p> : null}
+            {d.notes ? <Markdown className={t.notes}>{d.notes}</Markdown> : null}
+            <ExternalLink href={directionsUrl(d)} rel="noopener" className={t.directions}>
+              {theme.text.directions}
+            </ExternalLink>
+          </Part>
         </div>
         {/* Content from before map pins has none: it shows no map until the pin is set in Hearth. */}
         {d.showMap && d.position ? <OpenMap places={[{ name: d.name, address: d.address, position: d.position }]} label={fill(theme.text.mapOf, { name: d.name })} className={t.map} /> : null}
@@ -35,27 +40,31 @@ export function Locations({ block }: { block: BlockOf<"locations"> }) {
   const Title = d.heading ? "h3" : "h2";
   return (
     <Section block="locations" id={block.anchor}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="locations.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <div className={t.grid} data-map={onMap.length ? "" : undefined}>
         {onMap.length ? <OpenMap places={onMap} label={d.heading ? fill(theme.text.mapHeading, { heading: d.heading }) : theme.text.mapPlaces} className={t.map} /> : null}
         <ul className={onMap.length ? t.list : t.listNoMap}>
           {d.items.map((place, i) => (
             <li key={i} className={t.item}>
-              <Title className={t.name}>{place.name}</Title>
-              <address className={t.address}>{place.address}</address>
-              {place.hours ? <p className={t.hours}>{place.hours}</p> : null}
-              {place.notes ? <p className={t.notes}>{place.notes}</p> : null}
-              <p className={t.links}>
-                <ExternalLink href={directionsUrl(place)} rel="noopener" className={t.link}>
-                  {theme.text.directions}
-                  <span className="sr-only"> {fill(theme.text.directionsTo, { name: place.name })}</span>
-                </ExternalLink>
-                {place.link ? (
-                  <SmartLink href={place.link.href} className={t.link}>
-                    {place.link.label}
-                  </SmartLink>
-                ) : null}
-              </p>
+              <Part name="locations.item" props={{ block, item: place, index: i, heading: Title }}>
+                <Title className={t.name}>{place.name}</Title>
+                <address className={t.address}>{place.address}</address>
+                {place.hours ? <p className={t.hours}>{place.hours}</p> : null}
+                {place.notes ? <p className={t.notes}>{place.notes}</p> : null}
+                <p className={t.links}>
+                  <ExternalLink href={directionsUrl(place)} rel="noopener" className={t.link}>
+                    {theme.text.directions}
+                    <span className="sr-only"> {fill(theme.text.directionsTo, { name: place.name })}</span>
+                  </ExternalLink>
+                  {place.link ? (
+                    <SmartLink href={place.link.href} className={t.link}>
+                      {place.link.label}
+                    </SmartLink>
+                  ) : null}
+                </p>
+              </Part>
             </li>
           ))}
         </ul>
@@ -69,15 +78,19 @@ export function Schedule({ block }: { block: BlockOf<"schedule"> }) {
   const t = theme.schedule;
   return (
     <Section block="schedule" id={block.anchor}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="schedule.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <ol className={t.list}>
         {d.items.map((item, i) => (
           <li key={i} className={t.item}>
-            <p className={t.time}>{item.time}</p>
-            <div>
-              <p className={t.title}>{item.title}</p>
-              {item.details ? <p className={t.details}>{item.details}</p> : null}
-            </div>
+            <Part name="schedule.item" props={{ block, item, index: i }}>
+              <p className={t.time}>{item.time}</p>
+              <div>
+                <p className={t.title}>{item.title}</p>
+                {item.details ? <p className={t.details}>{item.details}</p> : null}
+              </div>
+            </Part>
           </li>
         ))}
       </ol>

package/template/src/hearth/blocks/media.tsx

@@ -1,6 +1,7 @@
 import { videoEmbedUrl, type BlockOf } from "@the-smithy/hearth";
 import { HearthEmbed } from "@the-smithy/hearth/react";
 import { theme } from "@/theme";
+import { Part } from "../parts";
 import { ExternalLink, Img, Section, SectionHeading } from "../ui";
 
 export function Gallery({ block }: { block: BlockOf<"gallery"> }) {
@@ -8,14 +9,18 @@ export function Gallery({ block }: { block: BlockOf<"gallery"> }) {
   const t = theme.gallery;
   return (
     <Section block="gallery" id={block.anchor}>
-      <SectionHeading heading={d.heading} intro={d.intro} />
+      <Part name="gallery.heading" props={{ block }}>
+        <SectionHeading heading={d.heading} intro={d.intro} />
+      </Part>
       <ul className={t.list} data-columns={d.columns}>
         {d.images.map((item, i) => (
           <li key={i}>
-            <figure>
-              <Img image={item.image} crop={4 / 3} className={t.image} />
-              {item.caption ? <figcaption className={t.caption}>{item.caption}</figcaption> : null}
-            </figure>
+            <Part name="gallery.item" props={{ block, item, index: i }}>
+              <figure>
+                <Img image={item.image} crop={4 / 3} className={t.image} />
+                {item.caption ? <figcaption className={t.caption}>{item.caption}</figcaption> : null}
+              </figure>
+            </Part>
           </li>
         ))}
       </ul>
@@ -30,7 +35,9 @@ export function Video({ block }: { block: BlockOf<"video"> }) {
   if (!src) return null;
   return (
     <Section block="video" id={block.anchor}>
-      <SectionHeading heading={d.heading} />
+      <Part name="video.heading" props={{ block }}>
+        <SectionHeading heading={d.heading} />
+      </Part>
       <figure className={t.figure}>
         <div className={t.frame}>
           <iframe
@@ -67,16 +74,20 @@ export function People({ block }: { block: BlockOf<"people"> }) {
   const Title = d.heading ? "h3" : "h2";
   return (
     <Section block="people" id={block.anchor}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="people.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <ul className={t.list}>
         {d.people.map((p, i) => (
           <li key={i} className={t.person}>
-            {p.image ? <Img image={p.image} crop={1} className={t.image} /> : null}
-            <div>
-              <Title className={t.name}>{p.name}</Title>
-              {p.role ? <p className={t.role}>{p.role}</p> : null}
-            </div>
-            {p.bio ? <p className={t.bio}>{p.bio}</p> : null}
+            <Part name="people.item" props={{ block, item: p, index: i, heading: Title }}>
+              {p.image ? <Img image={p.image} crop={1} className={t.image} /> : null}
+              <div>
+                <Title className={t.name}>{p.name}</Title>
+                {p.role ? <p className={t.role}>{p.role}</p> : null}
+              </div>
+              {p.bio ? <p className={t.bio}>{p.bio}</p> : null}
+            </Part>
           </li>
         ))}
       </ul>
@@ -89,19 +100,23 @@ export function Logos({ block }: { block: BlockOf<"logos"> }) {
   const t = theme.logos;
   return (
     <Section block="logos" id={block.anchor}>
-      <SectionHeading heading={d.heading} intro={d.intro} />
+      <Part name="logos.heading" props={{ block }}>
+        <SectionHeading heading={d.heading} intro={d.intro} />
+      </Part>
       <ul className={t.list}>
         {d.logos.map((l, i) => {
           const mark = l.logo ? <Img image={{ src: l.logo.src, alt: l.logo.alt || l.name }} className={t.image} /> : <span className={t.name}>{l.name}</span>;
           return (
             <li key={i}>
-              {l.url ? (
-                <ExternalLink href={l.url} rel="noopener" className={t.link}>
-                  {mark}
-                </ExternalLink>
-              ) : (
-                mark
-              )}
+              <Part name="logos.item" props={{ block, item: l, index: i }}>
+                {l.url ? (
+                  <ExternalLink href={l.url} rel="noopener" className={t.link}>
+                    {mark}
+                  </ExternalLink>
+                ) : (
+                  mark
+                )}
+              </Part>
             </li>
           );
         })}

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

@@ -16,11 +16,17 @@ import { Share } from "./Share";
 
 /** An event's page: its structured data, and the site's EventPage override or Hearth's own. Used at /events/… and /<collection>/…. */
 export function EventView({ event }: { event: HearthEventDetail }) {
-  const Page = overrides.EventPage ?? EventContent;
+  const Page = overrides.EventPage;
   return (
     <>
       <JsonLd data={event.meta.jsonLd} />
-      <Page event={event} />
+      {Page ? (
+        <Page event={event}>
+          <EventContent event={event} />
+        </Page>
+      ) : (
+        <EventContent event={event} />
+      )}
     </>
   );
 }

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

@@ -13,11 +13,17 @@ import { Share } from "./Share";
 
 /** A fundraiser's page: its structured data, and the site's FundraiserPage override or Hearth's own. */
 export function FundraiserView({ fundraiser }: { fundraiser: FundraiserDetail }) {
-  const Page = overrides.FundraiserPage ?? FundraiserContent;
+  const Page = overrides.FundraiserPage;
   return (
     <>
       <JsonLd data={fundraiser.meta.jsonLd} />
-      <Page fundraiser={fundraiser} />
+      {Page ? (
+        <Page fundraiser={fundraiser}>
+          <FundraiserContent fundraiser={fundraiser} />
+        </Page>
+      ) : (
+        <FundraiserContent fundraiser={fundraiser} />
+      )}
     </>
   );
 }

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

@@ -7,7 +7,14 @@ import { DonateForm } from "./DonateForm";
  * offers the active ones to choose from.
  */
 export async function DonationForm(props: Omit<DonateFormProps, "fundraisers">) {
-  const Form = overrides.DonateForm ?? DonateForm;
+  const Form = overrides.DonateForm;
   const fundraisers = props.fundraiser ? [] : await hearthNext.getFundraisers({ status: "active" });
-  return <Form {...props} fundraisers={fundraisers.map((f) => ({ slug: f.slug, title: f.title }))} />;
+  const all = { ...props, fundraisers: fundraisers.map((f) => ({ slug: f.slug, title: f.title })) };
+  return Form ? (
+    <Form {...all}>
+      <DonateForm {...all} />
+    </Form>
+  ) : (
+    <DonateForm {...all} />
+  );
 }

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

@@ -17,7 +17,7 @@ import { SiteHeader } from "./SiteHeader";
 export default async function SiteFrame({ children, headerActions }: { children: ReactNode; headerActions?: ReactNode }) {
   const [site, preview, globals] = await Promise.all([hearthNext.getSite(), hearthNext.isPreview(), hearthNext.getGlobalBlocks()]);
   const t = theme.page;
-  const Footer = overrides.Footer ?? SiteFooter;
+  const Footer = overrides.Footer;
   // 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]} />]),
@@ -33,7 +33,13 @@ export default async function SiteFrame({ children, headerActions }: { children:
       <main id="main" className={t.main}>
         {children}
       </main>
-      <Footer site={site} />
+      {Footer ? (
+        <Footer site={site}>
+          <SiteFooter site={site} />
+        </Footer>
+      ) : (
+        <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}>

package/template/src/hearth/overrides.ts

@@ -1,6 +1,6 @@
 import type { Fundraiser, FundraiserDetail, HearthEvent, HearthEventDetail, Site } from "@the-smithy/hearth";
 import type { BlockComponents } from "@the-smithy/hearth/react";
-import type { ComponentType } from "react";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
 import * as site from "@/theme/overrides";
 
 /** The level of a card's title: the next one down from what's above the cards, so h3 under a block's heading and h2 without one. */
@@ -18,27 +18,109 @@ export type DonateFormProps = {
   submitLabel?: string;
 };
 
+type BlockType = keyof BlockComponents;
+/** A block of one type, as its component is given it. */
+type Block<T extends BlockType> = ComponentProps<NonNullable<BlockComponents[T]>>["block"];
+type ItemOf<T extends BlockType, K extends keyof Block<T>["data"]> = NonNullable<Block<T>["data"][K]> extends readonly (infer I)[] ? I : never;
+
+/** What an override is given as well as its props: Hearth's own version, drawn, to place inside the site's or leave out. */
+type WithHearths<P> = P & { children?: ReactNode };
+
+/** A site's component for a whole block: given the block, and Hearth's own block as `children`. */
+export type BlockOverride<T extends BlockType> = ComponentType<WithHearths<{ block: Block<T> }>>;
+export type BlockOverrides = { [T in BlockType]?: BlockOverride<T> };
+
+type One<T extends BlockType> = { block: Block<T> };
+/** One item of a list: the item, its place in the list (from 0), and the block. */
+type Item<T extends BlockType, K extends keyof Block<T>["data"]> = { block: Block<T>; item: ItemOf<T, K>; index: number };
+/** An item with a title: `heading` is the title's level, h3 under the block's heading and h2 without one. */
+type TitledItem<T extends BlockType, K extends keyof Block<T>["data"]> = Item<T, K> & { heading: CardHeading };
+
+/**
+ * The parts of Hearth's blocks a site can replace or add to in src/theme/overrides.tsx (`parts`), keeping the rest of
+ * the block and its updates. Each is given these props and Hearth's own part as `children`. A part is what's inside its
+ * element, which stays Hearth's, with its classes: an item is a card's contents inside its <li>.
+ *
+ * - `heading`: the block's heading (eyebrow, heading and intro). The hero's and a CTA's: the text above the buttons.
+ * - `item`: one item's contents, inside its element (an <li>; a stat's <div>; a question's <div> or <details>).
+ * - `actions`: the block's links, inside its button row. The row is drawn for a site's part even with no links.
+ * - `media`: the block's image, where it has one. Without one, children is null and a site's part can still draw something.
+ * - `details`: a location's name, address, hours and directions, beside its map.
+ */
+export type PartProps = {
+  "hero.heading": One<"hero">;
+  "hero.actions": One<"hero">;
+  "hero.media": One<"hero">;
+  "mediaText.heading": One<"mediaText">;
+  "mediaText.actions": One<"mediaText">;
+  "mediaText.media": One<"mediaText">;
+  "stats.heading": One<"stats">;
+  "stats.item": Item<"stats", "items">;
+  "cardGrid.heading": One<"cardGrid">;
+  "cardGrid.item": TitledItem<"cardGrid", "items">;
+  "projects.heading": One<"projects">;
+  "projects.item": TitledItem<"projects", "items">;
+  "pricing.heading": One<"pricing">;
+  "pricing.item": TitledItem<"pricing", "plans">;
+  "cta.heading": One<"cta">;
+  "cta.actions": One<"cta">;
+  "cta.media": One<"cta">;
+  "faq.heading": One<"faq">;
+  "faq.item": Item<"faq", "items">;
+  "gallery.heading": One<"gallery">;
+  "gallery.item": Item<"gallery", "images">;
+  "video.heading": One<"video">;
+  "people.heading": One<"people">;
+  "people.item": TitledItem<"people", "people">;
+  "logos.heading": One<"logos">;
+  "logos.item": Item<"logos", "logos">;
+  "location.heading": One<"location">;
+  "location.details": One<"location">;
+  "locations.heading": One<"locations">;
+  "locations.item": TitledItem<"locations", "items">;
+  "schedule.heading": One<"schedule">;
+  "schedule.item": Item<"schedule", "items">;
+  "form.heading": One<"form">;
+  "upcomingEvents.heading": One<"upcomingEvents">;
+  "pastEvents.heading": One<"pastEvents">;
+  "eventSpotlight.actions": One<"eventSpotlight">;
+  "eventSpotlight.media": One<"eventSpotlight">;
+  "collectionList.heading": One<"collectionList">;
+  "collectionList.item": TitledItem<"collectionList", "entries">;
+  "fundraiserGrid.heading": One<"fundraiserGrid">;
+  "fundraiserSpotlight.actions": One<"fundraiserSpotlight">;
+  "fundraiserSpotlight.media": One<"fundraiserSpotlight">;
+  "donate.heading": One<"donate">;
+};
+export type PartName = keyof PartProps;
+export type PartOverride<N extends PartName> = ComponentType<WithHearths<PartProps[N]>>;
+export type PartOverrides = { [N in PartName]?: PartOverride<N> | null };
+
 /**
  * Everything src/theme/overrides.tsx can export. All of it is optional, so a site's file, which updates never replace,
  * exports only what it uses. The types are here for that file to use: `export const Footer: Overrides["Footer"] = …`.
+ * Each but Logo is given Hearth's own version as `children`: `<>{children}<Extra /></>` adds to it and keeps it up to
+ * date; leaving children out replaces it.
  */
 export type Overrides = {
-  /** Replaces a whole block's component. */
-  blocks?: Partial<BlockComponents>;
+  /** A whole block, by type. */
+  blocks?: BlockOverrides;
+  /** One part of a block, keeping the rest of it (see PartProps). */
+  parts?: PartOverrides;
   /** The logo in the header, and in the footer if the `footer.logo` slot is set. */
   Logo?: ComponentType<{ site: Site; place: "header" | "footer" }> | null;
-  /** Replaces the footer. */
-  Footer?: ComponentType<{ site: Site }> | null;
-  /** Replaces an event's page, at /events/… and in collections. Its structured data is drawn around it. */
-  EventPage?: ComponentType<{ event: HearthEventDetail }> | null;
-  /** Replaces a fundraiser's page. Its structured data is drawn around it. */
-  FundraiserPage?: ComponentType<{ fundraiser: FundraiserDetail }> | null;
-  /** Replaces an event's card, as an <li>. May be async. */
-  EventCard?: ComponentType<{ event: HearthEvent; heading: CardHeading }> | null;
-  /** Replaces a fundraiser's card, as an <li>. May be async. */
-  FundraiserCard?: ComponentType<{ fundraiser: Fundraiser; heading: CardHeading }> | null;
-  /** Replaces the donation form. */
-  DonateForm?: ComponentType<DonateFormProps> | null;
+  /** The footer. */
+  Footer?: ComponentType<WithHearths<{ site: Site }>> | null;
+  /** An event's page, at /events/… and in collections. Its structured data is drawn around it. */
+  EventPage?: ComponentType<WithHearths<{ event: HearthEventDetail }>> | null;
+  /** A fundraiser's page. Its structured data is drawn around it. */
+  FundraiserPage?: ComponentType<WithHearths<{ fundraiser: FundraiserDetail }>> | null;
+  /** An event's card, as an <li> (Hearth's, in children, is one too). May be async. */
+  EventCard?: ComponentType<WithHearths<{ event: HearthEvent; heading: CardHeading }>> | null;
+  /** A fundraiser's card, as an <li> (Hearth's, in children, is one too). May be async. */
+  FundraiserCard?: ComponentType<WithHearths<{ fundraiser: Fundraiser; heading: CardHeading }>> | null;
+  /** The donation form. */
+  DonateForm?: ComponentType<WithHearths<DonateFormProps>> | null;
 };
 
 /**

package/template/src/hearth/parts.tsx

@@ -0,0 +1,17 @@
+import type { ComponentType, ReactNode } from "react";
+import { overrides, type PartName, type PartProps } from "./overrides";
+
+/*
+ * The named parts of Hearth's blocks (PartProps in ./overrides.ts), which a site can replace or add to in
+ * src/theme/overrides.tsx and keep the rest of the block, with its updates. Server components only.
+ */
+
+/** Has the site its own component for this part? (Read when drawing, not as a file loads.) */
+export const hasPart = (name: PartName) => Boolean(overrides.parts?.[name]);
+
+/** One part of a block: Hearth's (`children`), or the site's, given Hearth's as its children to keep, add to or leave out. */
+export function Part<N extends PartName>({ name, props, children }: { name: N; props: PartProps[N]; children?: ReactNode }) {
+  // Typed by name in PartOverrides; here every part is one shape.
+  const Site = overrides.parts?.[name] as ComponentType<Record<string, unknown> & { children?: ReactNode }> | null | undefined;
+  return Site ? <Site {...(props as Record<string, unknown>)}>{children}</Site> : children;
+}

package/template/src/theme/overrides.tsx

@@ -1,27 +1,42 @@
-import type { BlockComponents } from "@the-smithy/hearth/react";
 import type { ComponentType } from "react";
 import type { Site } from "@the-smithy/hearth";
+import type { Overrides } from "@/hearth/overrides";
 
 /**
- * The last resort, when a design can't be reached with slots and tokens: replace a whole block's component, or the
- * parts below. Replaced components are this site's own code: `pnpm hearth:update` won't update them, so check them
- * against src/hearth after each update. Build them from src/hearth/ui.tsx and the theme, and say why in SITE.md.
+ * When slots, tokens and CSS can't reach a design: add to Hearth's components, replace one part of a block, or, last,
+ * replace a whole one. Each is given Hearth's own version as `children`. Keep it, and the site's code adds to Hearth's,
+ * which updates keep current; leave it out, and the site's replaces it and falls behind. `pnpm hearth:update` lists
+ * what's overridden here whose Hearth version changed (`pnpm hearth:overrides` checks any time). Build from
+ * src/hearth/ui.tsx and the theme, and say why in SITE.md. The types are in src/hearth/overrides.ts.
  *
- *   import { CountingStats } from "./CountingStats";
- *   export const blocks: Partial<BlockComponents> = { stats: CountingStats };
+ * A part of a block, keeping the rest of it (all of them: PartProps in src/hearth/overrides.ts). A part is what's
+ * inside its element: `heading`, an `item`'s contents inside its <li>, the `actions` inside the button row, `media`.
  *
- * Export any of these too, used everywhere the template draws them (types in src/hearth/overrides.ts). They can import
- * Hearth's components, Blocks too. Words, dates and hiding things are slots: try those first.
+ *   export const parts: Overrides["parts"] = {
+ *     "hero.actions": ({ children }) => <>{children}<a href="tel:…" className={theme.button.secondary}>Call us</a></>,
+ *     "cardGrid.item": ({ item, children }) => <>{children}{item.link ? null : <Soon />}</>,
+ *   };
  *
- *   export const Footer: Overrides["Footer"] = ({ site }) => …                the whole footer
- *   export const EventPage: Overrides["EventPage"] = ({ event }) => …         an event's page, reusing EventRegisterSection
- *                                                                             and EventVolunteerSection from EventView
- *   export const FundraiserPage: Overrides["FundraiserPage"] = ({ fundraiser }) => …
+ * A whole block, by type: add to Hearth's, or leave children out to replace it.
+ *
+ *   export const blocks: Overrides["blocks"] = {
+ *     stats: ({ children }) => <>{children}<p className="…">Figures audited in 2026.</p></>,
+ *   };
+ *
+ * And these, everywhere the template draws them. They can import Hearth's components, Blocks too. Words, dates and
+ * hiding things are slots: try those first.
+ *
+ *   export const Footer: Overrides["Footer"] = ({ site, children }) => …          the footer
+ *   export const EventPage: Overrides["EventPage"] = ({ event, children }) => …   an event's page; or build one from
+ *                                                                               EventRegisterSection and EventVolunteerSection
+ *   export const FundraiserPage: Overrides["FundraiserPage"] = ({ fundraiser, children }) => …
  *   export const EventCard: Overrides["EventCard"] = async ({ event, heading }) => <li>…</li>
  *   export const FundraiserCard: Overrides["FundraiserCard"] = ({ fundraiser, heading }) => <li>…</li>
- *   export const DonateForm: Overrides["DonateForm"] = (props) => …
+ *   export const DonateForm: Overrides["DonateForm"] = ({ children, ...props }) => …
  */
-export const blocks: Partial<BlockComponents> = {};
+export const parts: Overrides["parts"] = {};
+
+export const blocks: Overrides["blocks"] = {};
 
 /**
  * The header's logo; leave null to show the logo uploaded in Hearth (Settings → Search & sharing) and the site name.