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

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

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

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

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

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

@@ -1,83 +0,0 @@
-import { directionsUrl, pinned, type BlockOf } from "@the-smithy/hearth";
-import { Markdown, Section, SectionHeading, SmartLink } from "@/components/ui";
-import { OpenMap } from "./OpenMap";
-
-const linkStyle = "font-semibold text-highlight underline underline-offset-4";
-
-export function Location({ block }: { block: BlockOf<"location"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
-      <div className="grid gap-10 md:grid-cols-2">
-        <div className="flex flex-col gap-4 text-lg">
-          <h3 className="text-xl font-semibold">{d.name}</h3>
-          <address className="whitespace-pre-line not-italic">{d.address}</address>
-          {d.hours ? <p className="whitespace-pre-line">{d.hours}</p> : null}
-          {d.notes ? <Markdown className="opacity-80">{d.notes}</Markdown> : null}
-          <a href={directionsUrl(d)} rel="noopener" className={linkStyle}>
-            Get 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="aspect-[4/3]" /> : 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 onMap = d.showMap ? pinned(d.items) : [];
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <div className={`grid gap-10 ${onMap.length ? "md:grid-cols-[2fr_3fr]" : ""}`}>
-        {onMap.length ? (
-          <OpenMap places={onMap} label={d.heading ? `Map: ${d.heading}` : "Map of our locations"} className="aspect-[4/3] md:sticky md:top-24 md:order-2 md:aspect-auto md:h-[min(36rem,80vh)]" />
-        ) : null}
-        <ul className={`divide-y divide-line border-y border-line ${onMap.length ? "" : "grid gap-x-10 sm:grid-cols-2 sm:divide-y-0 sm:border-y-0"}`}>
-          {d.items.map((place, i) => (
-            <li key={i} className="flex flex-col gap-2 py-6">
-              <h3 className="text-xl font-semibold">{place.name}</h3>
-              <address className="whitespace-pre-line not-italic">{place.address}</address>
-              {place.hours ? <p className="whitespace-pre-line">{place.hours}</p> : null}
-              {place.notes ? <p className="whitespace-pre-line opacity-80">{place.notes}</p> : null}
-              <p className="mt-1 flex flex-wrap gap-x-6 gap-y-2">
-                <a href={directionsUrl(place)} rel="noopener" className={linkStyle}>
-                  Get directions<span className="sr-only"> to {place.name}</span>
-                </a>
-                {place.link ? (
-                  <SmartLink href={place.link.href} className={linkStyle}>
-                    {place.link.label}
-                  </SmartLink>
-                ) : null}
-              </p>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </Section>
-  );
-}
-
-export function Schedule({ block }: { block: BlockOf<"schedule"> }) {
-  const d = block.data;
-  return (
-    <Section>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
-      <ol className="max-w-3xl divide-y divide-line border-y border-line">
-        {d.items.map((item, i) => (
-          <li key={i} className="grid gap-1 py-5 sm:grid-cols-[10rem_1fr] sm:gap-6">
-            <p className="font-semibold text-highlight">{item.time}</p>
-            <div>
-              <p className="text-lg font-semibold">{item.title}</p>
-              {item.details ? <p className="mt-1 opacity-80">{item.details}</p> : null}
-            </div>
-          </li>
-        ))}
-      </ol>
-    </Section>
-  );
-}

package/template/src/components/ui.tsx

@@ -1,137 +0,0 @@
-import Link from "next/link";
-import { Fragment, type ReactNode } from "react";
-import ReactMarkdown from "react-markdown";
-import { focalPosition, type ImageRef } from "@the-smithy/hearth";
-
-type LinkRef = { label: string; href: string };
-export type Tone = "default" | "muted" | "inverse" | "accent";
-
-const toneClass: Record<Tone, string> = {
-  default: "bg-bg text-ink",
-  muted: "bg-muted text-ink",
-  inverse: "bg-inverse text-inverse-ink",
-  accent: "bg-accent text-accent-ink",
-};
-
-export const isDark = (tone?: Tone) => tone === "inverse" || tone === "accent";
-
-/** A full-width band with the site's content width inside. */
-export function Section({ tone = "default", id, className = "", children }: { tone?: Tone; id?: string; className?: string; children: ReactNode }) {
-  return (
-    <section id={id} className={`${toneClass[tone]} ${id ? "scroll-mt-8" : ""}`}>
-      <div className={`mx-auto max-w-site px-4 py-16 sm:px-6 sm:py-20 ${className}`}>{children}</div>
-    </section>
-  );
-}
-
-/**
- * Headings may mark words with *asterisks* to highlight them:
- * "Fresh bread, *baked daily*".
- */
-export function Emphasis({ text, className = "text-highlight" }: { text: string; className?: string }) {
-  return (
-    <>
-      {text.split(/\*([^*]+)\*/g).map((part, i) =>
-        i % 2 ? (
-          <span key={i} className={className}>
-            {part}
-          </span>
-        ) : (
-          <Fragment key={i}>{part}</Fragment>
-        ),
-      )}
-    </>
-  );
-}
-
-/** The text without highlight markers, for alt text and titles. */
-export const plain = (text: string) => text.replace(/\*([^*]+)\*/g, "$1");
-
-export function SectionHeading({ eyebrow, heading, intro, dark }: { eyebrow?: string; heading?: string; intro?: string; dark?: boolean }) {
-  if (!eyebrow && !heading && !intro) return null;
-  return (
-    <div className="mb-10 max-w-3xl">
-      {eyebrow ? <p className="mb-3 text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{eyebrow}</p> : null}
-      {heading ? (
-        <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight tracking-tight">
-          <Emphasis text={heading} className={dark ? "underline decoration-2 underline-offset-4" : "text-highlight"} />
-        </h2>
-      ) : null}
-      {intro ? <p className="mt-4 text-lg leading-relaxed opacity-85">{intro}</p> : null}
-    </div>
-  );
-}
-
-export function Markdown({ children, className = "" }: { children: string; className?: string }) {
-  return (
-    <div className={`prose text-lg ${className}`}>
-      <ReactMarkdown>{children}</ReactMarkdown>
-    </div>
-  );
-}
-
-const isExternal = (href: string) => /^(https?:|mailto:|tel:)/.test(href);
-
-/** A link to a path on the site or to anywhere else. */
-export function SmartLink({ href, className, children }: { href: string; className?: string; children: ReactNode }) {
-  return isExternal(href) ? (
-    <a href={href} className={className}>
-      {children}
-    </a>
-  ) : (
-    <Link href={href} className={className}>
-      {children}
-    </Link>
-  );
-}
-
-export function Button({ link, variant = "primary", dark }: { link?: LinkRef; variant?: "primary" | "secondary"; dark?: boolean }) {
-  if (!link) return null;
-  const cls =
-    variant === "primary"
-      ? dark
-        ? "rounded-lg bg-inverse-ink px-6 py-3.5 font-semibold text-inverse hover:opacity-90"
-        : "rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90"
-      : "rounded-lg border-[1.5px] border-current/40 px-6 py-3.5 font-medium hover:border-current";
-  return (
-    <SmartLink href={link.href} className={`inline-block ${cls}`}>
-      {link.label}
-    </SmartLink>
-  );
-}
-
-/**
- * An image from Hearth. Its width and height (from Hearth's media library) reserve its space, so the page doesn't jump
- * as it loads. `priority` loads it first: use it for the image at the top of the page (the hero), which is usually
- * the largest thing on screen; everything else loads as it scrolls into view.
- *
- * `crop` is for images cropped to fill a frame (`object-cover`): they keep the focal point set in Hearth's media
- * library in view. Give the frame's aspect ratio (`crop={4 / 3}` for `aspect-[4/3]`) to centre the focal point, or
- * `crop` alone for frames whose shape changes with the screen (a full-bleed hero). Leave it off for uncropped images.
- */
-/* eslint-disable @next/next/no-img-element -- Hearth serves media from its CDN at the uploaded size */
-export function Img({
-  image,
-  className = "",
-  priority = false,
-  crop,
-}: {
-  image: ImageRef;
-  className?: string;
-  priority?: boolean;
-  crop?: number | true;
-}) {
-  const objectPosition = crop ? focalPosition(image, crop === true ? undefined : crop) : undefined;
-  return (
-    <img
-      src={image.src}
-      alt={image.alt}
-      {...(image.width && image.height ? { width: image.width, height: image.height } : {})}
-      loading={priority ? "eager" : "lazy"}
-      fetchPriority={priority ? "high" : "auto"}
-      decoding={priority ? "sync" : "async"}
-      className={className}
-      style={objectPosition ? { objectPosition } : undefined}
-    />
-  );
-}