@the-smithy/create-hearth-site 0.24.0 → 0.25.0

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

@@ -1,12 +1,15 @@
 import type { BlockOf } from "@the-smithy/hearth";
 import { theme } from "@/theme";
-import { Button, Emphasis, fill, ground, Img, Markdown, Section, SectionHeading, SmartLink, toTone } from "../ui";
+import { cx } from "../theme";
+import { Button, Emphasis, fill, ground, Img, Markdown, plain, Section, SectionHeading, SmartLink, toTone } from "../ui";
 
 export function Hero({ block }: { block: BlockOf<"hero"> }) {
   const d = block.data;
   const t = theme.hero;
+  const paragraphs = d.body?.split(/\n\s*\n/).filter((p) => p.trim()) ?? [];
+  // Without a tone it's the design's own ground, dark, in `hero.root`. A tone sets the ground, which turns on-dark: on or off.
   return (
-    <section data-block="hero" {...ground("inverse")} className={t.root}>
+    <section id={block.anchor} data-block="hero" data-size={d.size} {...ground(d.tone ?? "inverse")} className={cx(d.tone ? `${theme.tones[d.tone]} ${t.toned}` : t.root, block.anchor && theme.section.anchored)}>
       {d.image ? <Img image={d.image} crop priority className={t.image} /> : null}
       <div className={t.inner} data-size={d.size}>
         {d.logo ? <Img image={d.logo} priority className={t.logo} /> : null}
@@ -14,7 +17,15 @@ export function Hero({ block }: { block: BlockOf<"hero"> }) {
         <h1 className={t.title}>
           <Emphasis text={d.heading} className={t.emphasis} />
         </h1>
-        {d.body ? <p className={t.body}>{d.body}</p> : null}
+        {paragraphs.length > 1 ? (
+          paragraphs.map((p, i) => (
+            <p key={i} className={t.body}>
+              {p}
+            </p>
+          ))
+        ) : d.body ? (
+          <p className={t.body}>{d.body}</p>
+        ) : null}
         {d.primaryCta || d.secondaryCta ? (
           <div className={t.actions}>
             <Button link={d.primaryCta} />
@@ -28,7 +39,7 @@ export function Hero({ block }: { block: BlockOf<"hero"> }) {
 
 export function RichText({ block }: { block: BlockOf<"richText"> }) {
   return (
-    <Section block="richText">
+    <Section block="richText" id={block.anchor}>
       <Markdown className={theme.richText.body} data-width={block.data.width}>
         {block.data.markdown}
       </Markdown>
@@ -40,7 +51,7 @@ export function MediaText({ block }: { block: BlockOf<"mediaText"> }) {
   const d = block.data;
   const t = theme.mediaText;
   return (
-    <Section block="mediaText">
+    <Section block="mediaText" id={block.anchor}>
       <div className={t.grid} data-image={d.imagePosition}>
         <div className={t.text}>
           <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
@@ -60,7 +71,7 @@ export function MediaText({ block }: { block: BlockOf<"mediaText"> }) {
 export function Stats({ block }: { block: BlockOf<"stats"> }) {
   const t = theme.stats;
   return (
-    <Section block="stats" tone={toTone(t.tone)}>
+    <Section block="stats" id={block.anchor} tone={toTone(t.tone)}>
       <SectionHeading heading={block.data.heading} />
       <dl className={t.list}>
         {block.data.items.map((s, i) => (
@@ -74,17 +85,27 @@ export function Stats({ block }: { block: BlockOf<"stats"> }) {
   );
 }
 
+/** A card's title as a key ("Our *history*" is "our-history"), for CSS that targets one card: [data-card="our-history"]. */
+const cardKey = (title: string) =>
+  plain(title)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "") || undefined;
+
 export function CardGrid({ block }: { block: BlockOf<"cardGrid"> }) {
   const d = block.data;
   const t = theme.cardGrid;
+  const Title = d.heading ? "h3" : "h2";
   return (
-    <Section block="cardGrid" tone={d.tone}>
+    <Section block="cardGrid" id={block.anchor} tone={d.tone}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
       <ul className={t.list}>
         {d.items.map((c, i) => (
-          <li key={i} className={t.card}>
+          <li key={i} className={t.card} data-card={cardKey(c.title)} data-icon={c.icon}>
             {c.image ? <Img image={c.image} crop={16 / 10} className={t.image} /> : null}
-            <h3 className={t.title}>{c.title}</h3>
+            <Title className={t.title}>
+              <Emphasis text={c.title} />
+            </Title>
             {c.body ? <p className={t.body}>{c.body}</p> : null}
             {c.link ? (
               <SmartLink href={c.link.href} className={t.link}>
@@ -102,8 +123,9 @@ export function Projects({ block }: { block: BlockOf<"projects"> }) {
   const d = block.data;
   const t = theme.projects;
   const grid = d.layout === "grid";
+  const Title = d.heading ? "h3" : "h2";
   return (
-    <Section block="projects" tone={d.tone}>
+    <Section block="projects" id={block.anchor} tone={d.tone}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
       <ul className={grid ? t.gridList : t.showcaseList} data-layout={d.layout}>
         {d.items.map((p, i) => (
@@ -111,7 +133,7 @@ export function Projects({ block }: { block: BlockOf<"projects"> }) {
             {p.image ? <Img image={p.image} crop={16 / 10} className={t.image} /> : null}
             <div className={t.text}>
               <div className={t.top}>
-                <h3 className={t.name}>{p.name}</h3>
+                <Title className={t.name}>{p.name}</Title>
                 {p.status ? <span className={t.status}>{p.status}</span> : null}
               </div>
               {p.role ? <p className={t.role}>{p.role}</p> : null}
@@ -141,14 +163,15 @@ export function Projects({ block }: { block: BlockOf<"projects"> }) {
 export function Pricing({ block }: { block: BlockOf<"pricing"> }) {
   const d = block.data;
   const t = theme.pricing;
+  const Title = d.heading ? "h3" : "h2";
   return (
-    <Section block="pricing" tone={d.tone}>
+    <Section block="pricing" id={block.anchor} tone={d.tone}>
       <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
       <ul className={t.list} data-count={d.plans.length >= 4 ? "many" : "few"}>
         {d.plans.map((p, i) => (
           <li key={i} className={t.plan} data-highlight={p.highlight ? "" : undefined}>
             {p.highlight ? <p className={t.highlight}>{p.highlight}</p> : null}
-            <h3 className={t.name}>{p.name}</h3>
+            <Title className={t.name}>{p.name}</Title>
             <p className={t.price}>
               <span className={t.amount}>{p.price}</span>
               {p.period ? <span className={t.period}>{p.period}</span> : null}
@@ -196,12 +219,12 @@ export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
   );
   if (!d.image)
     return (
-      <Section block="cta" tone={d.tone}>
+      <Section block="cta" id={block.anchor} tone={d.tone}>
         {content}
       </Section>
     );
   return (
-    <section data-block="cta" {...ground("inverse")} className={t.imageRoot}>
+    <section id={block.anchor} data-block="cta" {...ground("inverse")} className={cx(t.imageRoot, block.anchor && theme.section.anchored)}>
       <Img image={d.image} crop className={t.image} />
       <div className={t.overlay}>
         <div className={t.overlayInner}>{content}</div>
@@ -213,19 +236,32 @@ export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
 export function Faq({ block }: { block: BlockOf<"faq"> }) {
   const t = theme.faq;
   return (
-    <Section block="faq">
+    <Section block="faq" id={block.anchor}>
       <SectionHeading heading={block.data.heading} />
-      <div className={t.list}>
-        {block.data.items.map((q, i) => (
-          <details key={i} className={t.item}>
-            <summary className={t.question}>
-              {q.question}
-              <span aria-hidden className={t.icon} />
-            </summary>
-            <Markdown className={t.answer}>{q.answer}</Markdown>
-          </details>
-        ))}
-      </div>
+      {block.data.display === "list" ? (
+        <dl className={t.terms}>
+          {block.data.items.map((q, i) => (
+            <div key={i} className={t.term}>
+              <dt className={t.termQuestion}>{q.question}</dt>
+              <dd>
+                <Markdown className={t.termAnswer}>{q.answer}</Markdown>
+              </dd>
+            </div>
+          ))}
+        </dl>
+      ) : (
+        <div className={t.list}>
+          {block.data.items.map((q, i) => (
+            <details key={i} className={t.item}>
+              <summary className={t.question}>
+                {q.question}
+                <span aria-hidden className={t.icon} />
+              </summary>
+              <Markdown className={t.answer}>{q.answer}</Markdown>
+            </details>
+          ))}
+        </div>
+      )}
     </Section>
   );
 }
@@ -234,7 +270,7 @@ export function Quote({ block }: { block: BlockOf<"quote"> }) {
   const d = block.data;
   const t = theme.quote;
   return (
-    <Section block="quote" tone={d.tone}>
+    <Section block="quote" id={block.anchor} tone={d.tone}>
       <figure className={t.figure}>
         <blockquote className={t.text}>{d.quote}</blockquote>
         {d.name ? (

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

@@ -1,4 +1,5 @@
 import type { BlockOf } from "@the-smithy/hearth";
+import { theme } from "@/theme";
 import { customBlocks } from "@/theme/custom-blocks";
 
 /** A block type of this site's own (Settings → Custom blocks in Hearth), drawn by its component in src/theme/custom-blocks.tsx. */
@@ -8,5 +9,12 @@ export function CustomBlock({ block }: { block: BlockOf<"custom"> }) {
     if (process.env.NODE_ENV !== "production") console.warn(`[hearth] No component for custom block "${block.data.block}"; add one in src/theme/custom-blocks.tsx.`);
     return null;
   }
-  return <Component values={block.data.values} />;
+  // Custom blocks draw their own markup, so a link's target goes around them.
+  return block.anchor ? (
+    <div id={block.anchor} className={theme.section.anchored}>
+      <Component values={block.data.values} />
+    </div>
+  ) : (
+    <Component values={block.data.values} />
+  );
 }

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
               )}