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

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

@@ -0,0 +1,252 @@
+import type { BlockOf } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { Button, Emphasis, fill, ground, Img, Markdown, Section, SectionHeading, SmartLink, toTone } from "../ui";
+
+export function Hero({ block }: { block: BlockOf<"hero"> }) {
+  const d = block.data;
+  const t = theme.hero;
+  return (
+    <section data-block="hero" {...ground("inverse")} className={t.root}>
+      {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}
+        {d.eyebrow ? <p className={t.eyebrow}>{d.eyebrow}</p> : null}
+        <h1 className={t.title}>
+          <Emphasis text={d.heading} className={t.emphasis} />
+        </h1>
+        {d.body ? <p className={t.body}>{d.body}</p> : null}
+        {d.primaryCta || d.secondaryCta ? (
+          <div className={t.actions}>
+            <Button link={d.primaryCta} />
+            <Button link={d.secondaryCta} variant="secondary" />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export function RichText({ block }: { block: BlockOf<"richText"> }) {
+  return (
+    <Section block="richText">
+      <Markdown className={theme.richText.body} data-width={block.data.width}>
+        {block.data.markdown}
+      </Markdown>
+    </Section>
+  );
+}
+
+export function MediaText({ block }: { block: BlockOf<"mediaText"> }) {
+  const d = block.data;
+  const t = theme.mediaText;
+  return (
+    <Section block="mediaText">
+      <div className={t.grid} data-image={d.imagePosition}>
+        <div className={t.text}>
+          <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+          <Markdown className={t.body}>{d.markdown}</Markdown>
+          {d.cta ? (
+            <div className={t.actions}>
+              <Button link={d.cta} />
+            </div>
+          ) : null}
+        </div>
+        {d.image ? <Img image={d.image} crop={d.imageFit === "contain" ? undefined : 4 / 3} className={t.image} data-fit={d.imageFit} /> : null}
+      </div>
+    </Section>
+  );
+}
+
+export function Stats({ block }: { block: BlockOf<"stats"> }) {
+  const t = theme.stats;
+  return (
+    <Section block="stats" tone={toTone(t.tone)}>
+      <SectionHeading heading={block.data.heading} />
+      <dl className={t.list}>
+        {block.data.items.map((s, i) => (
+          <div key={i} className={t.item}>
+            <dt className={t.label}>{s.label}</dt>
+            <dd className={t.value}>{s.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </Section>
+  );
+}
+
+export function CardGrid({ block }: { block: BlockOf<"cardGrid"> }) {
+  const d = block.data;
+  const t = theme.cardGrid;
+  return (
+    <Section block="cardGrid" 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}>
+            {c.image ? <Img image={c.image} crop={16 / 10} className={t.image} /> : null}
+            <h3 className={t.title}>{c.title}</h3>
+            {c.body ? <p className={t.body}>{c.body}</p> : null}
+            {c.link ? (
+              <SmartLink href={c.link.href} className={t.link}>
+                {c.link.label}
+              </SmartLink>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function Projects({ block }: { block: BlockOf<"projects"> }) {
+  const d = block.data;
+  const t = theme.projects;
+  const grid = d.layout === "grid";
+  return (
+    <Section block="projects" 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) => (
+          <li key={i} className={grid ? t.gridItem : t.showcaseItem} data-flip={!grid && i % 2 ? "" : undefined}>
+            {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>
+                {p.status ? <span className={t.status}>{p.status}</span> : null}
+              </div>
+              {p.role ? <p className={t.role}>{p.role}</p> : null}
+              {p.description ? <Markdown className={t.description}>{p.description}</Markdown> : null}
+              {p.stack.length ? (
+                <ul className={t.stack}>
+                  {p.stack.map((s, j) => (
+                    <li key={j} className={t.stackItem}>
+                      {s}
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+              {p.url ? (
+                <SmartLink href={p.url} className={t.link}>
+                  {fill(theme.text.visitProject, { name: p.name })}
+                </SmartLink>
+              ) : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function Pricing({ block }: { block: BlockOf<"pricing"> }) {
+  const d = block.data;
+  const t = theme.pricing;
+  return (
+    <Section block="pricing" 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>
+            <p className={t.price}>
+              <span className={t.amount}>{p.price}</span>
+              {p.period ? <span className={t.period}>{p.period}</span> : null}
+            </p>
+            {p.description ? <p className={t.description}>{p.description}</p> : null}
+            {p.features.length ? (
+              <ul className={t.features}>
+                {p.features.map((f, j) => (
+                  <li key={j} className={t.feature}>
+                    <span aria-hidden className={t.check} />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            {p.cta ? (
+              <div className={t.actions}>
+                <Button link={p.cta} variant={p.highlight ? "primary" : "secondary"} />
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+      {d.footnote ? <Markdown className={t.footnote}>{d.footnote}</Markdown> : null}
+    </Section>
+  );
+}
+
+export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
+  const d = block.data;
+  const t = theme.cta;
+  const content = (
+    <div className={t.row}>
+      <div className={t.text}>
+        <h2 className={t.title}>
+          <Emphasis text={d.heading} />
+        </h2>
+        {d.body ? <p className={t.body}>{d.body}</p> : null}
+      </div>
+      <div className={t.actions}>
+        <Button link={d.primary} />
+        <Button link={d.secondary} variant="secondary" />
+      </div>
+    </div>
+  );
+  if (!d.image)
+    return (
+      <Section block="cta" tone={d.tone}>
+        {content}
+      </Section>
+    );
+  return (
+    <section data-block="cta" {...ground("inverse")} className={t.imageRoot}>
+      <Img image={d.image} crop className={t.image} />
+      <div className={t.overlay}>
+        <div className={t.overlayInner}>{content}</div>
+      </div>
+    </section>
+  );
+}
+
+export function Faq({ block }: { block: BlockOf<"faq"> }) {
+  const t = theme.faq;
+  return (
+    <Section block="faq">
+      <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>
+    </Section>
+  );
+}
+
+export function Quote({ block }: { block: BlockOf<"quote"> }) {
+  const d = block.data;
+  const t = theme.quote;
+  return (
+    <Section block="quote" tone={d.tone}>
+      <figure className={t.figure}>
+        <blockquote className={t.text}>{d.quote}</blockquote>
+        {d.name ? (
+          <figcaption className={t.caption}>
+            {d.image ? <Img image={d.image} crop={1} className={t.image} /> : null}
+            <span>
+              <span className={t.name}>{d.name}</span>
+              {d.role ? <span className={t.role}>{d.role}</span> : null}
+            </span>
+          </figcaption>
+        ) : null}
+      </figure>
+    </Section>
+  );
+}

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

@@ -0,0 +1,12 @@
+import type { BlockOf } from "@the-smithy/hearth";
+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. */
+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 src/theme/custom-blocks.tsx.`);
+    return null;
+  }
+  return <Component values={block.data.values} />;
+}

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

@@ -0,0 +1,130 @@
+import Link from "next/link";
+import type { BlockOf, HearthEvent } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { Registration } from "../components/Registration";
+import { VolunteerForm } from "../forms/VolunteerForm";
+import { formatEventDate } from "../format";
+import { fill, Img, Section, SectionHeading, toTone } from "../ui";
+
+export { formatEventDate };
+
+export function EventCard({ event }: { event: HearthEvent }) {
+  const t = theme.eventCard;
+  const cancelled = event.status === "cancelled";
+  return (
+    <li className={t.card} data-cancelled={cancelled ? "" : undefined}>
+      {event.image ? <Img image={event.image} crop={16 / 9} className={t.image} /> : null}
+      <div className={t.body}>
+        <p className={t.date}>
+          {cancelled ? <span className={t.cancelled}>{theme.text.cancelled}</span> : null}
+          <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
+        </p>
+        <h3 className={t.title}>
+          <Link href={event.path} className={t.link}>
+            {event.title}
+          </Link>
+        </h3>
+        {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}>
+          <Registration event={event} size="small" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export function EventList({ events }: { events: HearthEvent[] }) {
+  if (!events.length) return <p className={theme.eventCard.empty}>{theme.text.noEvents}</p>;
+  return (
+    <ul className={theme.eventCard.list}>
+      {events.map((e) => (
+        <EventCard key={e.slug} event={e} />
+      ))}
+    </ul>
+  );
+}
+
+export function UpcomingEvents({ block }: { block: BlockOf<"upcomingEvents"> }) {
+  const d = block.data;
+  return (
+    <Section block="upcomingEvents">
+      <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>
+      ) : 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 block="pastEvents" tone={toTone(theme.pastEvents.tone)}>
+      <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;
+  const t = theme.eventSpotlight;
+  if (!e) return null;
+  return (
+    <Section block="eventSpotlight" tone={toTone(t.tone)}>
+      <div className={t.grid}>
+        <div>
+          {block.data.heading ? <p className={t.label}>{block.data.heading}</p> : null}
+          <h2 className={t.title}>{e.title}</h2>
+          <p className={t.date}>{formatEventDate(e)}</p>
+          {e.location.name ? <p className={t.place}>{e.location.name}</p> : null}
+          {e.summary ? <p className={t.summary}>{e.summary}</p> : null}
+          <div className={t.actions}>
+            <Link href={e.path} className={theme.button.primary}>
+              {theme.text.eventDetails}
+            </Link>
+          </div>
+        </div>
+        {e.image ? <Img image={e.image} crop={4 / 3} className={t.image} /> : null}
+      </div>
+    </Section>
+  );
+}
+
+/** Where an event's Volunteer sign-up block sits, for the event header's Volunteer button. */
+export const volunteerAnchor = (slug: string) => `volunteer-${slug}`;
+
+/**
+ * Volunteer sign-up for an event, wherever the block is placed. On another page it names the event and links to it;
+ * once sign-up closes it says so. The event's own page leaves out its built-in form when this block is on it.
+ */
+export function VolunteerSignup({ block }: { block: BlockOf<"volunteerSignup"> }) {
+  const e = block.data.event;
+  const v = e.volunteering;
+  const t = theme.volunteerSignup;
+  const intro = block.data.intro || v.intro;
+  return (
+    <Section block="volunteerSignup" id={volunteerAnchor(e.slug)}>
+      <div className={t.wrap}>
+        <h2 className={t.title}>{block.data.heading || theme.text.volunteer}</h2>
+        {block.data.eventSlug ? (
+          <p className={t.event}>
+            <Link href={e.path} className={t.eventLink}>
+              {e.title}
+            </Link>
+            <span className={t.eventDate}> · {formatEventDate(e)}</span>
+          </p>
+        ) : null}
+        {intro ? <p className={t.intro}>{intro}</p> : null}
+        {v.fundraiser ? <p className={t.note}>{fill(theme.text.supports, { fundraiser: v.fundraiser.title })}</p> : null}
+        <div className={t.form}>{v.open ? <VolunteerForm slug={e.slug} timezone={e.timezone} volunteering={v} /> : <p className={t.closed}>{theme.text.volunteerClosed}</p>}</div>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,123 @@
+import Link from "next/link";
+import type { BlockOf, Fundraiser } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { DonateForm } from "../forms/DonateForm";
+import { money } from "../format";
+import { fill, Img, Section, SectionHeading, toTone } from "../ui";
+
+export { money };
+
+/** 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 t = theme.progress;
+  const pct = goalCents ? Math.min(100, Math.round((raisedCents / goalCents) * 100)) : null;
+  return (
+    <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>
+      </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.fill} style={{ width: `${pct}%` }} />
+        </div>
+      ) : null}
+      {donorCount ? (
+        <p className={t.donors}>
+          {donorCount} online donation{donorCount === 1 ? "" : "s"}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function FundraiserCard({ fundraiser }: { fundraiser: Fundraiser }) {
+  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}>
+          <Link href={fundraiser.path} className={t.link}>
+            {fundraiser.title}
+          </Link>
+        </h3>
+        {fundraiser.summary ? <p className={t.summary}>{fundraiser.summary}</p> : null}
+        <div className={t.progress}>
+          <Progress fundraiser={fundraiser} />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export function FundraiserList({ fundraisers }: { fundraisers: Fundraiser[] }) {
+  if (!fundraisers.length) return <p className={theme.fundraiserCard.empty}>{theme.text.noFundraisers}</p>;
+  return (
+    <ul className={theme.fundraiserCard.list}>
+      {fundraisers.map((f) => (
+        <FundraiserCard key={f.slug} fundraiser={f} />
+      ))}
+    </ul>
+  );
+}
+
+export function FundraiserGrid({ block }: { block: BlockOf<"fundraiserGrid"> }) {
+  const d = block.data;
+  return (
+    <Section block="fundraiserGrid">
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <FundraiserList fundraisers={d.fundraisers} />
+      {d.fundraisers.length ? (
+        <Link href="/fundraisers" className={theme.fundraiserGrid.more}>
+          {theme.text.allFundraisers}
+        </Link>
+      ) : null}
+    </Section>
+  );
+}
+
+export function FundraiserSpotlight({ block }: { block: BlockOf<"fundraiserSpotlight"> }) {
+  const f = block.data.fundraiser;
+  const t = theme.fundraiserSpotlight;
+  if (!f) return null;
+  return (
+    <Section block="fundraiserSpotlight" tone={toTone(t.tone)}>
+      <div className={t.grid}>
+        <div className={t.details}>
+          {block.data.heading ? <p className={t.label}>{block.data.heading}</p> : null}
+          <h2 className={t.title}>{f.title}</h2>
+          {f.summary ? <p className={t.summary}>{f.summary}</p> : null}
+          <Progress fundraiser={f} large />
+          <p className={t.actions}>
+            {f.status === "active" ? (
+              <Link href={`${f.path}#donate`} className={theme.button.primary}>
+                {theme.text.donate}
+              </Link>
+            ) : null}
+            <Link href={f.path} className={t.learnMore}>
+              {theme.text.learnMore}
+            </Link>
+          </p>
+        </div>
+        {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
+      </div>
+    </Section>
+  );
+}
+
+export function Donate({ block }: { block: BlockOf<"donate"> }) {
+  const d = block.data;
+  const t = theme.donate;
+  return (
+    <Section block="donate">
+      <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} />
+      </div>
+    </Section>
+  );
+}

package/template/src/{components → hearth}/blocks/index.tsx

@@ -1,20 +1,22 @@
 import type { BlockOf, ResolvedBlock } from "@the-smithy/hearth";
 import { HearthBlocks, type BlockComponents } from "@the-smithy/hearth/react";
-import { Section, SectionHeading } from "@/components/ui";
+import { theme } from "@/theme";
+import { blocks as overrides } from "@/theme/overrides";
+import { EmberFormBlock } from "../forms/EmberFormBlock";
+import { HearthForm } from "../forms/ContactForm";
+import { Section, SectionHeading } from "../ui";
 import { CollectionList } from "./collections";
 import { CallToAction, CardGrid, Faq, Hero, MediaText, Pricing, Projects, Quote, RichText, Stats } from "./content";
-import { EventSpotlight, PastEvents, UpcomingEvents, VolunteerSignup } from "./events";
 import { CustomBlock } from "./custom";
-import { EmberFormBlock } from "./EmberFormBlock";
-import { HearthForm } from "./Form";
+import { EventSpotlight, PastEvents, UpcomingEvents, VolunteerSignup } from "./events";
 import { Donate, FundraiserGrid, FundraiserSpotlight } from "./giving";
 import { Location, Locations, Schedule } from "./info";
 import { Embed, Gallery, Logos, People, Video } from "./media";
 
 function FormBlock({ block }: { block: BlockOf<"form"> }) {
   return (
-    <Section>
-      <div className="max-w-2xl">
+    <Section block="form">
+      <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. */}
         {block.data.emberFormId ? (
@@ -28,9 +30,9 @@ function FormBlock({ block }: { block: BlockOf<"form"> }) {
 }
 
 /**
- * One component per Hearth block type. Restyle them freely; to leave a type out of this
- * site, delete its line. Types without a component (including ones Hearth adds later)
- * render nothing.
+ * One component per Hearth block type. Sites style them through the theme (src/theme/index.ts); a site that has to
+ * replace one entirely does it in src/theme/overrides.tsx. Types without a component (including ones Hearth adds
+ * later) render nothing.
  */
 export const blocks: BlockComponents = {
   hero: Hero,
@@ -63,6 +65,8 @@ export const blocks: BlockComponents = {
   custom: CustomBlock,
 };
 
+const components: BlockComponents = { ...blocks, ...overrides };
+
 export function Blocks({ blocks: list }: { blocks: ResolvedBlock[] }) {
-  return <HearthBlocks blocks={list} components={blocks} fallback={() => null} />;
+  return <HearthBlocks blocks={list} components={components} fallback={() => null} />;
 }

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

@@ -0,0 +1,84 @@
+import { directionsUrl, pinned, type BlockOf } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { 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;
+  return (
+    <Section block="location">
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+      <div className={t.grid}>
+        <div className={t.details}>
+          <h3 className={t.name}>{d.name}</h3>
+          <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}>
+            {theme.text.directions}
+          </a>
+        </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}
+      </div>
+    </Section>
+  );
+}
+
+/** Several places: one map with a pin for each (places without a pin are only listed), and the list beside it. */
+export function Locations({ block }: { block: BlockOf<"locations"> }) {
+  const d = block.data;
+  const t = theme.locations;
+  const onMap = d.showMap ? pinned(d.items) : [];
+  return (
+    <Section block="locations">
+      <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}
+        <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>
+              <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}>
+                  {theme.text.directions}
+                  <span className="sr-only"> to {place.name}</span>
+                </a>
+                {place.link ? (
+                  <SmartLink href={place.link.href} className={t.link}>
+                    {place.link.label}
+                  </SmartLink>
+                ) : null}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Section>
+  );
+}
+
+export function Schedule({ block }: { block: BlockOf<"schedule"> }) {
+  const d = block.data;
+  const t = theme.schedule;
+  return (
+    <Section block="schedule">
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <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>
+          </li>
+        ))}
+      </ol>
+    </Section>
+  );
+}