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

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

@@ -1,14 +1,16 @@
 import Link from "next/link";
 import type { BlockOf, HearthEvent } from "@the-smithy/hearth";
 import { theme } from "@/theme";
+import { NotHere } from "../components/NotHere";
 import { Registration } from "../components/Registration";
 import { VolunteerForm } from "../forms/VolunteerForm";
 import { formatEventDate } from "../format";
+import { overrides, type CardHeading } from "../overrides";
 import { fill, Img, Section, SectionHeading, toTone } from "../ui";
 
 export { formatEventDate };
 
-export function EventCard({ event }: { event: HearthEvent }) {
+export function EventCard({ event, heading: Heading = "h3" }: { event: HearthEvent; heading?: CardHeading }) {
   const t = theme.eventCard;
   const cancelled = event.status === "cancelled";
   return (
@@ -19,11 +21,11 @@ export function EventCard({ event }: { event: HearthEvent }) {
           {cancelled ? <span className={t.cancelled}>{theme.text.cancelled}</span> : null}
           <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
         </p>
-        <h3 className={t.title}>
+        <Heading className={t.title}>
           <Link href={event.path} className={t.link}>
             {event.title}
           </Link>
-        </h3>
+        </Heading>
         {event.location.name ? <p className={t.place}>{event.location.name}</p> : null}
         {event.summary ? <p className={t.summary}>{event.summary}</p> : null}
         <div className={t.actions}>
@@ -34,12 +36,14 @@ export function EventCard({ event }: { event: HearthEvent }) {
   );
 }
 
-export function EventList({ events }: { events: HearthEvent[] }) {
-  if (!events.length) return <p className={theme.eventCard.empty}>{theme.text.noEvents}</p>;
+/** Event cards (the site's own, if it replaces them). `heading` is the level of their titles; `emptyText` is what to say when there are none. */
+export function EventList({ events, heading = "h3", emptyText }: { events: HearthEvent[]; heading?: CardHeading; emptyText?: string }) {
+  if (!events.length) return <p className={theme.eventCard.empty}>{emptyText || theme.text.noEvents}</p>;
+  const Card = overrides.EventCard ?? EventCard;
   return (
     <ul className={theme.eventCard.list}>
       {events.map((e) => (
-        <EventCard key={e.slug} event={e} />
+        <Card key={e.slug} event={e} heading={heading} />
       ))}
     </ul>
   );
@@ -47,14 +51,18 @@ export function EventList({ events }: { events: HearthEvent[] }) {
 
 export function UpcomingEvents({ block }: { block: BlockOf<"upcomingEvents"> }) {
   const d = block.data;
+  const href = d.collection?.path ?? "/events";
   return (
-    <Section block="upcomingEvents">
+    <Section block="upcomingEvents" id={block.anchor}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <EventList events={d.events} />
-      {d.events.length ? (
-        <Link href="/events" className={theme.upcomingEvents.more}>
-          {theme.text.allEvents}
-        </Link>
+      <EventList events={d.events} heading={d.heading ? "h3" : "h2"} emptyText={d.emptyText} />
+      {/* A limit of 0 is every event already, and on the page it points at the link would go nowhere. */}
+      {d.events.length && d.limit !== 0 ? (
+        <NotHere href={href}>
+          <Link href={href} className={theme.upcomingEvents.more}>
+            {d.collection ? fill(theme.text.allCollectionEvents, { collection: d.collection.name.toLowerCase() }) : theme.text.allEvents}
+          </Link>
+        </NotHere>
       ) : null}
     </Section>
   );
@@ -63,11 +71,11 @@ export function UpcomingEvents({ block }: { block: BlockOf<"upcomingEvents"> })
 /** 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;
+  if (!d.events.length && !d.emptyText) return null;
   return (
-    <Section block="pastEvents" tone={toTone(theme.pastEvents.tone)}>
+    <Section block="pastEvents" id={block.anchor} tone={toTone(theme.pastEvents.tone)}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <EventList events={d.events} />
+      <EventList events={d.events} heading={d.heading ? "h3" : "h2"} emptyText={d.emptyText} />
     </Section>
   );
 }
@@ -77,7 +85,7 @@ export function EventSpotlight({ block }: { block: BlockOf<"eventSpotlight"> })
   const t = theme.eventSpotlight;
   if (!e) return null;
   return (
-    <Section block="eventSpotlight" tone={toTone(t.tone)}>
+    <Section block="eventSpotlight" id={block.anchor} tone={toTone(t.tone)}>
       <div className={t.grid}>
         <div>
           {block.data.heading ? <p className={t.label}>{block.data.heading}</p> : null}
@@ -110,7 +118,7 @@ export function VolunteerSignup({ block }: { block: BlockOf<"volunteerSignup"> }
   const t = theme.volunteerSignup;
   const intro = block.data.intro || v.intro;
   return (
-    <Section block="volunteerSignup" id={volunteerAnchor(e.slug)}>
+    <Section block="volunteerSignup" id={block.anchor ?? volunteerAnchor(e.slug)}>
       <div className={t.wrap}>
         <h2 className={t.title}>{block.data.heading || theme.text.volunteer}</h2>
         {block.data.eventSlug ? (

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

@@ -1,8 +1,10 @@
 import Link from "next/link";
 import type { BlockOf, Fundraiser } from "@the-smithy/hearth";
 import { theme } from "@/theme";
-import { DonateForm } from "../forms/DonateForm";
+import { NotHere } from "../components/NotHere";
+import { DonationForm } from "../forms/DonationForm";
 import { money } from "../format";
+import { overrides, type CardHeading } from "../overrides";
 import { fill, Img, Section, SectionHeading, toTone } from "../ui";
 
 export { money };
@@ -16,34 +18,32 @@ export function Progress({ fundraiser, large }: { fundraiser: Fundraiser; large?
     <div className={t.root}>
       <p className={t.amounts} data-size={large ? "large" : undefined}>
         <span className={t.raised}>{money(raisedCents)}</span>
-        <span className={t.goal}>{goalCents ? ` raised of ${money(goalCents)}` : " raised"}</span>
+        <span className={t.goal}> {goalCents ? fill(theme.text.raisedOfGoal, { goal: money(goalCents) }) : theme.text.raised}</span>
       </p>
       {pct !== null ? (
-        <div className={t.bar} role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100} aria-label="Progress toward the goal">
+        <div className={t.bar} role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100} aria-label={theme.text.progressLabel}>
           <div className={t.fill} style={{ width: `${pct}%` }} />
         </div>
       ) : null}
       {donorCount ? (
-        <p className={t.donors}>
-          {donorCount} online donation{donorCount === 1 ? "" : "s"}
-        </p>
+        <p className={t.donors}>{fill(donorCount === 1 ? theme.text.oneDonation : theme.text.donations, { count: String(donorCount) })}</p>
       ) : null}
     </div>
   );
 }
 
-export function FundraiserCard({ fundraiser }: { fundraiser: Fundraiser }) {
+export function FundraiserCard({ fundraiser, heading: Heading = "h3" }: { fundraiser: Fundraiser; heading?: CardHeading }) {
   const t = theme.fundraiserCard;
   return (
     <li className={t.card} data-status={fundraiser.status}>
       {fundraiser.image ? <Img image={fundraiser.image} crop={16 / 9} className={t.image} /> : null}
       <div className={t.body}>
         {fundraiser.status === "completed" ? <p className={t.completed}>{theme.text.completed}</p> : null}
-        <h3 className={t.title}>
+        <Heading className={t.title}>
           <Link href={fundraiser.path} className={t.link}>
             {fundraiser.title}
           </Link>
-        </h3>
+        </Heading>
         {fundraiser.summary ? <p className={t.summary}>{fundraiser.summary}</p> : null}
         <div className={t.progress}>
           <Progress fundraiser={fundraiser} />
@@ -53,12 +53,14 @@ export function FundraiserCard({ fundraiser }: { fundraiser: Fundraiser }) {
   );
 }
 
-export function FundraiserList({ fundraisers }: { fundraisers: Fundraiser[] }) {
-  if (!fundraisers.length) return <p className={theme.fundraiserCard.empty}>{theme.text.noFundraisers}</p>;
+/** Fundraiser cards (the site's own, if it replaces them). `heading` is the level of their titles; `emptyText` is what to say when there are none. */
+export function FundraiserList({ fundraisers, heading = "h3", emptyText }: { fundraisers: Fundraiser[]; heading?: CardHeading; emptyText?: string }) {
+  if (!fundraisers.length) return <p className={theme.fundraiserCard.empty}>{emptyText || theme.text.noFundraisers}</p>;
+  const Card = overrides.FundraiserCard ?? FundraiserCard;
   return (
     <ul className={theme.fundraiserCard.list}>
       {fundraisers.map((f) => (
-        <FundraiserCard key={f.slug} fundraiser={f} />
+        <Card key={f.slug} fundraiser={f} heading={heading} />
       ))}
     </ul>
   );
@@ -67,13 +69,15 @@ export function FundraiserList({ fundraisers }: { fundraisers: Fundraiser[] }) {
 export function FundraiserGrid({ block }: { block: BlockOf<"fundraiserGrid"> }) {
   const d = block.data;
   return (
-    <Section block="fundraiserGrid">
+    <Section block="fundraiserGrid" id={block.anchor}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <FundraiserList fundraisers={d.fundraisers} />
+      <FundraiserList fundraisers={d.fundraisers} heading={d.heading ? "h3" : "h2"} emptyText={d.emptyText} />
       {d.fundraisers.length ? (
-        <Link href="/fundraisers" className={theme.fundraiserGrid.more}>
-          {theme.text.allFundraisers}
-        </Link>
+        <NotHere href="/fundraisers">
+          <Link href="/fundraisers" className={theme.fundraiserGrid.more}>
+            {theme.text.allFundraisers}
+          </Link>
+        </NotHere>
       ) : null}
     </Section>
   );
@@ -84,7 +88,7 @@ export function FundraiserSpotlight({ block }: { block: BlockOf<"fundraiserSpotl
   const t = theme.fundraiserSpotlight;
   if (!f) return null;
   return (
-    <Section block="fundraiserSpotlight" tone={toTone(t.tone)}>
+    <Section block="fundraiserSpotlight" id={block.anchor} tone={toTone(t.tone)}>
       <div className={t.grid}>
         <div className={t.details}>
           {block.data.heading ? <p className={t.label}>{block.data.heading}</p> : null}
@@ -112,11 +116,11 @@ export function Donate({ block }: { block: BlockOf<"donate"> }) {
   const d = block.data;
   const t = theme.donate;
   return (
-    <Section block="donate">
+    <Section block="donate" id={block.anchor}>
       <div className={t.wrap}>
         <SectionHeading heading={d.heading} intro={d.intro} />
         {d.fundraiser ? <p className={t.supporting}>{fill(theme.text.supporting, { fundraiser: d.fundraiser.title })}</p> : null}
-        <DonateForm presetsCents={d.presetsCents} minCents={d.minCents} maxCents={d.maxCents} fundraiser={d.fundraiser?.slug} submitLabel={d.submitLabel} />
+        <DonationForm presetsCents={d.presetsCents} minCents={d.minCents} maxCents={d.maxCents} fundraiser={d.fundraiser?.slug} submitLabel={d.submitLabel} />
       </div>
     </Section>
   );

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

@@ -1,9 +1,10 @@
 import type { BlockOf, ResolvedBlock } from "@the-smithy/hearth";
 import { HearthBlocks, type BlockComponents } from "@the-smithy/hearth/react";
+import type { ComponentType } from "react";
 import { theme } from "@/theme";
-import { blocks as overrides } from "@/theme/overrides";
 import { EmberFormBlock } from "../forms/EmberFormBlock";
 import { HearthForm } from "../forms/ContactForm";
+import { overrides } from "../overrides";
 import { Section, SectionHeading } from "../ui";
 import { CollectionList } from "./collections";
 import { CallToAction, CardGrid, Faq, Hero, MediaText, Pricing, Projects, Quote, RichText, Stats } from "./content";
@@ -15,7 +16,7 @@ import { Embed, Gallery, Logos, People, Video } from "./media";
 
 function FormBlock({ block }: { block: BlockOf<"form"> }) {
   return (
-    <Section block="form">
+    <Section block="form" id={block.anchor}>
       <div className={theme.formBlock.wrap}>
         <SectionHeading heading={block.data.heading} intro={block.data.intro} />
         {/* Set to an Ember form in Hearth: Ember renders it and keeps the leads; the site's form is the fallback. */}
@@ -65,8 +66,32 @@ export const blocks: BlockComponents = {
   custom: CustomBlock,
 };
 
-const components: BlockComponents = { ...blocks, ...overrides };
+/** A site's replaced block keeps working with anchors from Hearth, whether or not its code knows about them. */
+const anchored = (Component: ComponentType<{ block: ResolvedBlock }>) =>
+  function Anchored({ block }: { block: ResolvedBlock }) {
+    return block.anchor ? (
+      <div id={block.anchor} className={theme.section.anchored}>
+        <Component block={block} />
+      </div>
+    ) : (
+      <Component block={block} />
+    );
+  };
+
+let components: BlockComponents | undefined;
+
+/**
+ * Hearth's blocks with the site's in their place. Made on first use, not as this file loads: an override in
+ * src/theme/overrides.tsx may import Blocks from here, and then that file hasn't finished loading at this point.
+ */
+function allBlocks() {
+  components ??= {
+    ...blocks,
+    ...Object.fromEntries(Object.entries(overrides.blocks ?? {}).map(([type, component]) => [type, anchored(component as ComponentType<{ block: ResolvedBlock }>)])),
+  };
+  return components;
+}
 
 export function Blocks({ blocks: list }: { blocks: ResolvedBlock[] }) {
-  return <HearthBlocks blocks={list} components={components} fallback={() => null} />;
+  return <HearthBlocks blocks={list} components={allBlocks()} fallback={() => null} />;
 }

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

@@ -1,26 +1,27 @@
 import { directionsUrl, pinned, type BlockOf } from "@the-smithy/hearth";
 import { theme } from "@/theme";
-import { Markdown, Section, SectionHeading, SmartLink } from "../ui";
+import { ExternalLink, fill, Markdown, Section, SectionHeading, SmartLink } from "../ui";
 import { OpenMap } from "./OpenMap";
 
 export function Location({ block }: { block: BlockOf<"location"> }) {
   const d = block.data;
   const t = theme.location;
+  const Title = d.heading ? "h3" : "h2";
   return (
-    <Section block="location">
+    <Section block="location" id={block.anchor}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
       <div className={t.grid}>
         <div className={t.details}>
-          <h3 className={t.name}>{d.name}</h3>
+          <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}
-          <a href={directionsUrl(d)} rel="noopener" className={t.directions}>
+          <ExternalLink href={directionsUrl(d)} rel="noopener" className={t.directions}>
             {theme.text.directions}
-          </a>
+          </ExternalLink>
         </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={`Map of ${d.name}`} className={t.map} /> : null}
+        {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}
       </div>
     </Section>
   );
@@ -31,23 +32,24 @@ export function Locations({ block }: { block: BlockOf<"locations"> }) {
   const d = block.data;
   const t = theme.locations;
   const onMap = d.showMap ? pinned(d.items) : [];
+  const Title = d.heading ? "h3" : "h2";
   return (
-    <Section block="locations">
+    <Section block="locations" id={block.anchor}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
       <div className={t.grid} data-map={onMap.length ? "" : undefined}>
-        {onMap.length ? <OpenMap places={onMap} label={d.heading ? `Map: ${d.heading}` : "Map of our locations"} className={t.map} /> : null}
+        {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}>
-              <h3 className={t.name}>{place.name}</h3>
+              <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}>
-                <a href={directionsUrl(place)} rel="noopener" className={t.link}>
+                <ExternalLink href={directionsUrl(place)} rel="noopener" className={t.link}>
                   {theme.text.directions}
-                  <span className="sr-only"> to {place.name}</span>
-                </a>
+                  <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}
@@ -66,7 +68,7 @@ export function Schedule({ block }: { block: BlockOf<"schedule"> }) {
   const d = block.data;
   const t = theme.schedule;
   return (
-    <Section block="schedule">
+    <Section block="schedule" id={block.anchor}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
       <ol className={t.list}>
         {d.items.map((item, i) => (

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

@@ -1,13 +1,13 @@
 import { videoEmbedUrl, type BlockOf } from "@the-smithy/hearth";
 import { HearthEmbed } from "@the-smithy/hearth/react";
 import { theme } from "@/theme";
-import { Img, Section, SectionHeading } from "../ui";
+import { ExternalLink, Img, Section, SectionHeading } from "../ui";
 
 export function Gallery({ block }: { block: BlockOf<"gallery"> }) {
   const d = block.data;
   const t = theme.gallery;
   return (
-    <Section block="gallery">
+    <Section block="gallery" id={block.anchor}>
       <SectionHeading heading={d.heading} intro={d.intro} />
       <ul className={t.list} data-columns={d.columns}>
         {d.images.map((item, i) => (
@@ -29,7 +29,7 @@ export function Video({ block }: { block: BlockOf<"video"> }) {
   const src = videoEmbedUrl(d.url);
   if (!src) return null;
   return (
-    <Section block="video">
+    <Section block="video" id={block.anchor}>
       <SectionHeading heading={d.heading} />
       <figure className={t.figure}>
         <div className={t.frame}>
@@ -52,7 +52,7 @@ export function Video({ block }: { block: BlockOf<"video"> }) {
 export function Embed({ block }: { block: BlockOf<"embed"> }) {
   const t = theme.embed;
   return (
-    <Section block="embed">
+    <Section block="embed" id={block.anchor}>
       <figure className={t.figure} data-width={block.data.width}>
         <HearthEmbed block={block} className={t.frame} />
         {block.data.caption ? <figcaption className={t.caption}>{block.data.caption}</figcaption> : null}
@@ -64,15 +64,16 @@ export function Embed({ block }: { block: BlockOf<"embed"> }) {
 export function People({ block }: { block: BlockOf<"people"> }) {
   const d = block.data;
   const t = theme.people;
+  const Title = d.heading ? "h3" : "h2";
   return (
-    <Section block="people">
+    <Section block="people" id={block.anchor}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
       <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>
-              <h3 className={t.name}>{p.name}</h3>
+              <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}
@@ -87,7 +88,7 @@ export function Logos({ block }: { block: BlockOf<"logos"> }) {
   const d = block.data;
   const t = theme.logos;
   return (
-    <Section block="logos">
+    <Section block="logos" id={block.anchor}>
       <SectionHeading heading={d.heading} intro={d.intro} />
       <ul className={t.list}>
         {d.logos.map((l, i) => {
@@ -95,9 +96,9 @@ export function Logos({ block }: { block: BlockOf<"logos"> }) {
           return (
             <li key={i}>
               {l.url ? (
-                <a href={l.url} rel="noopener" className={t.link}>
+                <ExternalLink href={l.url} rel="noopener" className={t.link}>
                   {mark}
-                </a>
+                </ExternalLink>
               ) : (
                 mark
               )}

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

@@ -8,18 +8,65 @@ import { hearthNext } from "../client";
 import { formatEventDate } from "../format";
 import { RegistrationForm } from "../forms/RegistrationForm";
 import { VolunteerForm } from "../forms/VolunteerForm";
+import { overrides } from "../overrides";
 import { siteUrl } from "../site";
 import { fill, Img } from "../ui";
 import { Registration } from "./Registration";
 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;
+  return (
+    <>
+      <JsonLd data={event.meta.jsonLd} />
+      <Page event={event} />
+    </>
+  );
+}
+
+/** Registration on the event's page (sites with Tickets), while it's open. For an EventPage override to reuse. */
+export function EventRegisterSection({ event }: { event: HearthEventDetail }) {
+  const t = theme.event;
+  if (!event.registration?.open) return null;
+  return (
+    <section id="register" className={t.section}>
+      <div className={t.sectionInner}>
+        <h2 className={t.sectionTitle}>{theme.text.register}</h2>
+        {event.registration.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.ticketsSupport, { fundraiser: event.registration.fundraiser.title })}</p> : null}
+        <div className={t.form}>
+          <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/** Volunteer sign-up on the event's page, while it's open. For an EventPage override to reuse; leave it out if the event's blocks have a Volunteer sign-up. */
+export function EventVolunteerSection({ event }: { event: HearthEventDetail }) {
+  const t = theme.event;
+  if (!event.volunteering?.open) return null;
+  return (
+    <section id="volunteer" className={t.section}>
+      <div className={t.sectionInner}>
+        <h2 className={t.sectionTitle}>{theme.text.volunteer}</h2>
+        {event.volunteering.intro ? <p className={t.sectionIntro}>{event.volunteering.intro}</p> : null}
+        {event.volunteering.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.supports, { fundraiser: event.volunteering.fundraiser.title })}</p> : null}
+        <div className={t.form}>
+          <VolunteerForm slug={event.slug} timezone={event.timezone} volunteering={event.volunteering} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
 /**
- * An event's page: header with date, place and registration, then its blocks. Used at /events/… and /<collection>/….
+ * Hearth's own event page: header with date, place and registration, then its blocks.
  * 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 async function EventView({ event }: { event: HearthEventDetail }) {
+export async function EventContent({ event }: { event: HearthEventDetail }) {
   const t = theme.event;
   const site = await hearthNext.getSite();
   const base = siteUrl(site);
@@ -27,7 +74,7 @@ export async function EventView({ event }: { event: HearthEventDetail }) {
   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 volunteerBlock = event.blocks.find((b) => b.type === "volunteerSignup" && (b as BlockOf<"volunteerSignup">).data.event.slug === event.slug);
   const online = event.attendance === "online" ? theme.text.online : event.attendance === "mixed" ? theme.text.onlineAndInPerson : null;
 
   const cancelled = event.status === "cancelled" ? <p className={t.cancelled}>{theme.text.cancelledEvent}</p> : null;
@@ -49,17 +96,23 @@ export async function EventView({ event }: { event: HearthEventDetail }) {
     <div className={t.actions}>
       <Registration event={event} />
       {event.volunteering?.open ? (
-        <a href={volunteerBlock ? `#${volunteerAnchor(event.slug)}` : "#volunteer"} className={t.volunteer}>
+        <a href={volunteerBlock ? `#${volunteerBlock.anchor ?? volunteerAnchor(event.slug)}` : "#volunteer"} className={t.volunteer}>
           {theme.text.volunteer}
         </a>
       ) : null}
-      {base && event.status !== "cancelled" ? <Share title={event.title} url={`${base}${event.path}`} message={`${event.title}, ${formatEventDate(event)}: ${base}${event.path}`} heading={`Share ${event.title}`} /> : null}
+      {base && event.status !== "cancelled" ? (
+        <Share
+          title={event.title}
+          url={`${base}${event.path}`}
+          message={fill(theme.text.shareEventMessage, { title: event.title, date: formatEventDate(event), url: `${base}${event.path}` })}
+          heading={fill(theme.text.shareEventHeading, { title: event.title })}
+        />
+      ) : 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 } }} />
@@ -92,29 +145,8 @@ export async function EventView({ event }: { event: HearthEventDetail }) {
         </section>
       )}
       <Blocks blocks={hero ? rest : event.blocks} />
-      {event.registration?.open ? (
-        <section id="register" className={t.section}>
-          <div className={t.sectionInner}>
-            <h2 className={t.sectionTitle}>{theme.text.register}</h2>
-            {event.registration.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.ticketsSupport, { fundraiser: event.registration.fundraiser.title })}</p> : null}
-            <div className={t.form}>
-              <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
-            </div>
-          </div>
-        </section>
-      ) : null}
-      {event.volunteering?.open && !volunteerBlock ? (
-        <section id="volunteer" className={t.section}>
-          <div className={t.sectionInner}>
-            <h2 className={t.sectionTitle}>{theme.text.volunteer}</h2>
-            {event.volunteering.intro ? <p className={t.sectionIntro}>{event.volunteering.intro}</p> : null}
-            {event.volunteering.fundraiser ? <p className={t.sectionNote}>{fill(theme.text.supports, { fundraiser: event.volunteering.fundraiser.title })}</p> : null}
-            <div className={t.form}>
-              <VolunteerForm slug={event.slug} timezone={event.timezone} volunteering={event.volunteering} />
-            </div>
-          </div>
-        </section>
-      ) : null}
+      <EventRegisterSection event={event} />
+      {volunteerBlock ? null : <EventVolunteerSection event={event} />}
     </>
   );
 }

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

@@ -0,0 +1,77 @@
+import type { FundraiserDetail } from "@the-smithy/hearth";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { theme } from "@/theme";
+import { Blocks } from "../blocks";
+import { Progress } from "../blocks/giving";
+import { hearthNext } from "../client";
+import { DonationForm } from "../forms/DonationForm";
+import { money } from "../format";
+import { overrides } from "../overrides";
+import { siteUrl } from "../site";
+import { fill, Img, Section } from "../ui";
+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;
+  return (
+    <>
+      <JsonLd data={fundraiser.meta.jsonLd} />
+      <Page fundraiser={fundraiser} />
+    </>
+  );
+}
+
+/** Hearth's own fundraiser page: progress, Donate and Share, then its story blocks and the donation form. */
+export async function FundraiserContent({ fundraiser: f }: { fundraiser: FundraiserDetail }) {
+  const site = await hearthNext.getSite();
+  const giving = site.settings.giving;
+  const t = theme.fundraiser;
+  const base = siteUrl(site);
+  const url = base ? `${base}${f.path}` : null;
+  const active = f.status === "active";
+
+  return (
+    <>
+      <section className={t.header}>
+        <div className={t.headerInner}>
+          <div className={t.details}>
+            <p className={t.label}>{active ? theme.text.fundraiserLabel : theme.text.completedFundraiserLabel}</p>
+            <h1 className={t.title}>{f.title}</h1>
+            {f.summary ? <p className={t.summary}>{f.summary}</p> : null}
+            <Progress fundraiser={f} large />
+            {active ? (
+              <div className={t.actions}>
+                <a href="#donate" className={theme.button.primary}>
+                  {theme.text.donate}
+                </a>
+                {url ? (
+                  <Share
+                    title={f.title}
+                    url={url}
+                    message={
+                      f.goalCents
+                        ? fill(theme.text.shareFundraiserGoalMessage, { title: f.title, raised: money(f.raisedCents), goal: money(f.goalCents), url })
+                        : fill(theme.text.shareFundraiserMessage, { title: f.title, url })
+                    }
+                    heading={theme.text.shareFundraiserHeading}
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
+        </div>
+      </section>
+      <Blocks blocks={f.blocks} />
+      {active ? (
+        <Section block="fundraiserDonate">
+          <div className={t.give}>
+            <h2 className={t.giveTitle}>{fill(theme.text.giveTo, { fundraiser: f.title })}</h2>
+            <DonationForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
+          </div>
+        </Section>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,9 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+/** Draws its children everywhere but at `href`: a link to all of something isn't needed on the page it points at. */
+export function NotHere({ href, children }: { href: string; children: ReactNode }) {
+  return usePathname() === href ? null : children;
+}