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

package/template/src/app/apple-icon.tsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "next/og";
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 export const size = { width: 180, height: 180 };
 export const contentType = "image/png";

package/template/src/app/donate/page.tsx

@@ -1,35 +1,2 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { DonateForm } from "@/components/DonateForm";
-import { Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
-  return {
-    title: "Donate",
-    description: `Support ${site.name} with a donation.`,
-    alternates: { canonical: "/donate" },
-    openGraph: { title: "Donate", url: "/donate" },
-  };
-}
-
-/**
- * A general donation page (sites with Giving). Ask staff to reserve "donate" on the site's Plan card in Hearth so
- * no page takes this address. For a page built in Hearth instead, use the Donation form block there.
- */
-export default async function DonatePage() {
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "giving")) notFound();
-  const giving = site.settings.giving;
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Donate</h1>
-        <p className="mb-10 text-lg opacity-85">Your gift supports {giving.legalName || site.name}.</p>
-        <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} />
-      </div>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/donate.tsx.
+export { default, generateMetadata } from "@/hearth/pages/donate";

package/template/src/app/donate/thank-you/page.tsx

@@ -1,22 +1,2 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { Section } from "@/components/ui";
-
-export const metadata: Metadata = { title: "Thank you", robots: { index: false, follow: false } };
-
-/** Where the payment page sends donors back. The receipt is emailed once the payment completes. */
-export default function ThankYouPage() {
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Thank you</h1>
-        <p className="text-lg opacity-85">Your gift makes a difference. If you gave your email, a receipt is on its way.</p>
-        <p className="mt-8">
-          <Link href="/" className="font-semibold underline underline-offset-4">
-            Back to the homepage
-          </Link>
-        </p>
-      </div>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/thank-you.tsx.
+export { default, metadata } from "@/hearth/pages/thank-you";

package/template/src/app/events/[slug]/page.tsx

@@ -1,26 +1,2 @@
-import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { permanentRedirect } from "next/navigation";
-import { EventView } from "@/components/EventView";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-type Props = { params: Promise<{ slug: string }> };
-
-async function load(slug: string) {
-  const site = await hearthNext.getSite();
-  return hasFeature(site, "events") ? hearthNext.getEvent(slug) : null;
-}
-
-export async function generateMetadata({ params }: Props) {
-  const event = await load((await params).slug);
-  return event ? metadataFromMeta(event.meta) : {};
-}
-
-/** Events without a type live here. Events in a collection (e.g. Talks) live at their collection's address. */
-export default async function EventPage({ params }: Props) {
-  const slug = (await params).slug;
-  const event = await load(slug);
-  if (!event) return hearthNext.redirectOrNotFound(`/events/${slug}`);
-  if (event.path !== `/events/${event.slug}`) permanentRedirect(event.path);
-  return <EventView event={event} />;
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/event.tsx.
+export { default, generateMetadata } from "@/hearth/pages/event";

package/template/src/app/events/page.tsx

@@ -1,29 +1,2 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { EventList } from "@/components/blocks/events";
-import { Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
-  return {
-    title: "Events",
-    description: `Upcoming events from ${site.name}.`,
-    alternates: { canonical: "/events" },
-    openGraph: { title: "Events", url: "/events" },
-  };
-}
-
-/** Upcoming events (only on sites with the Events feature in Hearth). */
-export default async function EventsPage() {
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "events")) notFound();
-  const events = await hearthNext.getEvents({ when: "upcoming" });
-  return (
-    <Section>
-      <h1 className="mb-10 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Events</h1>
-      <EventList events={events} />
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/events.tsx.
+export { default, generateMetadata } from "@/hearth/pages/events";

package/template/src/app/fundraisers/[slug]/page.tsx

@@ -1,55 +1,2 @@
-import { metadataFromMeta } from "@the-smithy/hearth/next";
-import { JsonLd } from "@the-smithy/hearth/react";
-import { Blocks } from "@/components/blocks";
-import { Progress } from "@/components/blocks/giving";
-import { DonateForm } from "@/components/DonateForm";
-import { Img, Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-type Props = { params: Promise<{ slug: string }> };
-
-async function load(slug: string) {
-  const site = await hearthNext.getSite();
-  return hasFeature(site, "giving") ? { site, fundraiser: await hearthNext.getFundraiser(slug) } : null;
-}
-
-export async function generateMetadata({ params }: Props) {
-  const loaded = await load((await params).slug);
-  return loaded?.fundraiser ? metadataFromMeta(loaded.fundraiser.meta) : {};
-}
-
-/** A fundraiser's page: progress and a donation form, then its story blocks. */
-export default async function FundraiserPage({ params }: Props) {
-  const slug = (await params).slug;
-  const loaded = await load(slug);
-  if (!loaded?.fundraiser) return hearthNext.redirectOrNotFound(`/fundraisers/${slug}`);
-  const { site, fundraiser: f } = loaded;
-  const giving = site.settings.giving;
-
-  return (
-    <>
-      <JsonLd data={f.meta.jsonLd} />
-      <section className="bg-muted">
-        <div className="mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2">
-          <div className="flex flex-col gap-4">
-            <p className="text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{f.status === "completed" ? "Completed fundraiser" : "Fundraiser"}</p>
-            <h1 className="text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight">{f.title}</h1>
-            {f.summary ? <p className="text-lg opacity-85">{f.summary}</p> : null}
-            <Progress fundraiser={f} large />
-          </div>
-          {f.image ? <Img image={f.image} crop={4 / 3} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
-        </div>
-      </section>
-      <Blocks blocks={f.blocks} />
-      {f.status === "active" ? (
-        <Section>
-          <div className="max-w-2xl">
-            <h2 className="mb-6 text-2xl font-bold">Give to {f.title}</h2>
-            <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
-          </div>
-        </Section>
-      ) : null}
-    </>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/fundraiser.tsx.
+export { default, generateMetadata } from "@/hearth/pages/fundraiser";

package/template/src/app/fundraisers/page.tsx

@@ -1,37 +1,2 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { FundraiserList } from "@/components/blocks/giving";
-import { Section } from "@/components/ui";
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const site = await hearthNext.getSite();
-  return {
-    title: "Fundraisers",
-    description: `Fundraisers and campaigns from ${site.name}: see how each is doing and give.`,
-    alternates: { canonical: "/fundraisers" },
-    openGraph: { title: "Fundraisers", url: "/fundraisers" },
-  };
-}
-
-/** Active fundraisers, then completed ones (only on sites with the Giving feature in Hearth). */
-export default async function FundraisersPage() {
-  const site = await hearthNext.getSite();
-  if (!hasFeature(site, "giving")) notFound();
-  const [active, completed] = await Promise.all([hearthNext.getFundraisers({ status: "active" }), hearthNext.getFundraisers({ status: "completed" })]);
-  return (
-    <>
-      <Section>
-        <h1 className="mb-10 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Fundraisers</h1>
-        <FundraiserList fundraisers={active} />
-      </Section>
-      {completed.length ? (
-        <Section tone="muted">
-          <h2 className="mb-8 text-2xl font-bold">Completed</h2>
-          <FundraiserList fundraisers={completed} />
-        </Section>
-      ) : null}
-    </>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/fundraisers.tsx.
+export { default, generateMetadata } from "@/hearth/pages/fundraisers";

package/template/src/app/globals.css

@@ -1,78 +1,4 @@
+/* Managed by Hearth (pnpm hearth:update replaces it). The site's tokens and CSS go in src/theme/theme.css. */
 @import "tailwindcss";
-
-/*
- * The site's brand. Blocks only use these tokens, so restyling a new site starts here.
- * Hearth's "tone" options map to them: default, muted, inverse and accent.
- */
-@theme {
-  --color-bg: #fbfaf7;
-  --color-ink: #1c1c1a;
-  --color-muted-ink: #5b5b55;
-  /* Dividers and card edges: decorative, so they can be faint. */
-  --color-line: #e3e0d8;
-  /* Form field and option borders: the border is how people see the field, so it needs 3:1 on surface, bg and muted. */
-  --color-field: #8a867e;
-  --color-surface: #ffffff;
-  --color-muted: #f1eee7;
-  --color-inverse: #1c1c1a;
-  --color-inverse-ink: #f6f4ee;
-  --color-accent: #2f5d50;
-  --color-accent-ink: #ffffff;
-  /* Highlighted words in headings (*like this*) and links. Check contrast on every ground. */
-  --color-highlight: #2f5d50;
-  --color-danger: #a12a1f;
-
-  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --container-site: 72rem;
-}
-
-body {
-  background: var(--color-bg);
-  color: var(--color-ink);
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Markdown from Hearth (rich text, FAQ answers, media + text). */
-.prose {
-  line-height: 1.7;
-}
-.prose > * + * {
-  margin-top: 1em;
-}
-.prose h2 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  line-height: 1.25;
-  margin-top: 1.6em;
-}
-.prose h3 {
-  font-size: 1.35rem;
-  font-weight: 700;
-  margin-top: 1.4em;
-}
-.prose a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-.prose ul {
-  list-style: disc;
-  padding-left: 1.4em;
-}
-.prose ol {
-  list-style: decimal;
-  padding-left: 1.4em;
-}
-.prose blockquote {
-  border-left: 3px solid var(--color-line);
-  padding-left: 1em;
-  font-style: italic;
-}
-.prose img {
-  border-radius: 0.75rem;
-}
-
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
+@import "../hearth/hearth.css";
+@import "../theme/theme.css";

package/template/src/app/icon.tsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "next/og";
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 export const size = { width: 64, height: 64 };
 export const contentType = "image/png";

package/template/src/app/layout.tsx

@@ -1,38 +1,4 @@
-import type { ReactNode } from "react";
-import { HearthAnalytics } from "@the-smithy/hearth/analytics";
-import { siteLang } from "@the-smithy/hearth/next";
-import { HearthPreview } from "@the-smithy/hearth/preview";
-import { SiteFooter } from "@/components/SiteFooter";
-import { SiteHeader } from "@/components/SiteHeader";
-import { hearthNext } from "@/lib/hearth";
+// Managed by Hearth (pnpm hearth:update replaces it): the layout is src/hearth/layout/RootLayout.tsx, styled in src/theme.
 import "./globals.css";
 
-/**
- * What every page starts from: full links, the title pattern, the default description and share image, the site's
- * language, Google and Bing verification, and no indexing on preview deploys or while the site is hidden in Hearth.
- * Pages from Hearth then set their own title, description, canonical address and share image.
- */
-export const generateMetadata = () => hearthNext.siteMetadata();
-
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const site = await hearthNext.getSite();
-  const preview = await hearthNext.isPreview();
-  return (
-    <html lang={siteLang(site)}>
-      <body className="flex min-h-dvh flex-col">
-        <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-surface focus:px-4 focus:py-2">
-          Skip to content
-        </a>
-        {/* Live draft preview from Hearth: shows while an editor previews, refreshes as they edit. */}
-        {preview ? <HearthPreview /> : null}
-        <SiteHeader site={site} />
-        <main id="main" className="flex-1">
-          {children}
-        </main>
-        <SiteFooter site={site} />
-        {/* Hearth's built-in visitor analytics (cookieless, no banner needed): off in draft preview and when the site turns it off. */}
-        {site.analytics && !preview ? <HearthAnalytics config={site.analytics} /> : null}
-      </body>
-    </html>
-  );
-}
+export { default, generateMetadata } from "@/hearth/layout/RootLayout";

package/template/src/app/llms.txt/route.ts

@@ -0,0 +1,7 @@
+import { hearthNext } from "@/hearth/client";
+
+/**
+ * The summary AI tools read (https://llmstxt.org): the organization, its contact details and hours, and every
+ * page search engines may list, with a line on each. Not found on preview deploys and while the site is hidden.
+ */
+export const GET = hearthNext.llmsTxtHandler();

package/template/src/app/not-found.tsx

@@ -1,14 +1,2 @@
-import Link from "next/link";
-import { Section } from "@/components/ui";
-
-export default function NotFound() {
-  return (
-    <Section className="py-28">
-      <h1 className="text-4xl font-bold">Page not found</h1>
-      <p className="mt-4 text-lg opacity-80">The page you&apos;re looking for has moved or no longer exists.</p>
-      <Link href="/" className="mt-8 inline-block rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90">
-        Go to the homepage
-      </Link>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/not-found.tsx.
+export { default } from "@/hearth/pages/not-found";

package/template/src/app/registered/page.tsx

@@ -1,22 +1,2 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { Section } from "@/components/ui";
-
-export const metadata: Metadata = { title: "You're registered", robots: { index: false, follow: false } };
-
-/** Where the payment page sends people after paying for a ticket. The confirmation is emailed once payment completes. */
-export default function RegisteredPage() {
-  return (
-    <Section>
-      <div className="max-w-2xl">
-        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">You&apos;re registered</h1>
-        <p className="text-lg opacity-85">Thanks for signing up. A confirmation is on its way to your email.</p>
-        <p className="mt-8">
-          <Link href="/events" className="font-semibold underline underline-offset-4">
-            See all events
-          </Link>
-        </p>
-      </div>
-    </Section>
-  );
-}
+// Managed by Hearth (pnpm hearth:update replaces it). Style it in src/theme; the page is src/hearth/pages/registered.tsx.
+export { default, metadata } from "@/hearth/pages/registered";

package/template/src/app/robots.ts

@@ -1,4 +1,4 @@
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "@/hearth/client";
 
 /**
  * Keeps crawlers out until the site has a domain in Hearth, while it's hidden from search engines there, and on

package/template/src/app/sitemap.ts

@@ -1,5 +1,5 @@
-import { hearthNext } from "@/lib/hearth";
-import { hasFeature } from "@/lib/site";
+import { hearthNext } from "@/hearth/client";
+import { hasFeature } from "@/hearth/site";
 
 /** Every indexable page, event and fundraiser in Hearth, plus the pages this site's own code serves. */
 export default async function sitemap() {

package/template/src/{app → hearth}/actions.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import type { FormResult } from "@the-smithy/hearth";
-import { hearthNext } from "@/lib/hearth";
+import { hearthNext } from "./client";
 
 export type FormState = {
   ok?: boolean;

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

@@ -3,9 +3,10 @@
 import { directionsUrl, type Position } from "@the-smithy/hearth";
 import { useEffect, useRef, useState } from "react";
 import "maplibre-gl/dist/maplibre-gl.css";
+import { theme } from "@/theme";
+import { cx } from "../theme";
 
-/** Free OpenStreetMap tiles from OpenFreeMap: no key, no account, no cookies. Swap for another MapLibre style to restyle. */
-const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+const t = theme.map;
 
 export type MapPlace = { name: string; address: string; position: Position };
 
@@ -31,7 +32,8 @@ export function OpenMap({ places, label, className = "" }: { places: MapPlace[];
       const list: MapPlace[] = JSON.parse(key);
       const map = new ml.Map({
         container: el,
-        style: MAP_STYLE,
+        // Free OpenStreetMap tiles from OpenFreeMap by default (no key, no cookies); the theme's map.style swaps them.
+        style: t.style,
         center: [list[0].position.lng, list[0].position.lat],
         zoom: 15,
         attributionControl: { compact: true },
@@ -51,7 +53,7 @@ export function OpenMap({ places, label, className = "" }: { places: MapPlace[];
         bounds.extend(at);
         const pin = document.createElement("button");
         pin.type = "button";
-        pin.className = "block size-6 rounded-full border-[3px] border-white bg-highlight shadow-md";
+        pin.className = t.pin;
         pin.setAttribute("aria-label", place.name);
         new ml.Marker({ element: pin }).setLngLat(at).setPopup(new ml.Popup({ offset: 14, closeButton: true }).setDOMContent(popup(place))).addTo(map);
       }
@@ -75,10 +77,10 @@ export function OpenMap({ places, label, className = "" }: { places: MapPlace[];
   }, [key, label]);
 
   return (
-    <div className={`relative overflow-hidden rounded-xl bg-muted [&_.maplibregl-map]:font-sans [&_.maplibregl-popup-close-button]:size-8 [&_.maplibregl-popup-close-button]:text-xl ${className}`}>
+    <div className={cx(t.frame, className)}>
       {/* Sized by the frame: MapLibre makes its container position: relative. */}
       <div ref={container} className="size-full" />
-      {failed ? <p className="absolute inset-0 grid place-items-center p-6 text-center opacity-80">The map couldn&apos;t load.</p> : null}
+      {failed ? <p className={t.failed}>{theme.text.mapFailed}</p> : null}
     </div>
   );
 }
@@ -86,7 +88,7 @@ export function OpenMap({ places, label, className = "" }: { places: MapPlace[];
 /** A pin's popup, built as elements (never HTML strings) so names and addresses stay plain text. */
 function popup(place: MapPlace) {
   const box = document.createElement("div");
-  box.className = "grid gap-1 pr-4 font-sans text-sm text-ink";
+  box.className = t.popup;
   const name = document.createElement("strong");
   name.textContent = place.name;
   const address = document.createElement("span");
@@ -95,8 +97,8 @@ function popup(place: MapPlace) {
   const link = document.createElement("a");
   link.href = directionsUrl(place);
   link.rel = "noopener";
-  link.className = "font-semibold text-highlight underline underline-offset-4";
-  link.textContent = "Get directions";
+  link.className = t.popupLink;
+  link.textContent = theme.text.directions;
   box.append(name, address, link);
   return box;
 }

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

@@ -0,0 +1,74 @@
+import Link from "next/link";
+import type { BlockOf, CollectionEntry } from "@the-smithy/hearth";
+import { theme } from "@/theme";
+import { formatEntryDate } from "../format";
+import { fill, Img, Section, SectionHeading } from "../ui";
+
+const t = theme.collectionList;
+
+function Card({ entry }: { entry: CollectionEntry }) {
+  return (
+    <li className={t.card}>
+      {entry.image ? <Img image={entry.image} crop={16 / 10} className={t.image} /> : null}
+      <div className={t.body}>
+        {entry.date ? <p className={t.date}>{formatEntryDate(entry.date)}</p> : null}
+        <h3 className={t.title}>
+          <Link href={entry.path} className={t.link}>
+            {entry.title}
+          </Link>
+        </h3>
+        {entry.summary ? <p className={t.summary}>{entry.summary}</p> : null}
+        {entry.tags.length ? (
+          <ul className={t.tags}>
+            {entry.tags.map((tag) => (
+              <li key={tag} className={t.tag}>
+                {tag}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+/** Entries of a page collection (a blog, case studies…), as cards or a simple list. */
+export function CollectionList({ block }: { block: BlockOf<"collectionList"> }) {
+  const { entries, collection, layout } = block.data;
+  return (
+    <Section block="collectionList">
+      <SectionHeading eyebrow={block.data.eyebrow} heading={block.data.heading} intro={block.data.intro} />
+      {!entries.length ? (
+        <p className={t.empty}>{theme.text.noEntries}</p>
+      ) : layout === "list" ? (
+        <ul className={t.list}>
+          {entries.map((e) => (
+            <li key={e.path} className={t.listItem}>
+              <Link href={e.path} className={t.listLink}>
+                {e.title}
+              </Link>
+              {e.date || e.summary ? (
+                <p className={t.listMeta}>
+                  {e.date ? <span className={t.listDate}>{formatEntryDate(e.date)}</span> : null}
+                  {e.date && e.summary ? " · " : null}
+                  {e.summary}
+                </p>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <ul className={t.cards}>
+          {entries.map((e) => (
+            <Card key={e.path} entry={e} />
+          ))}
+        </ul>
+      )}
+      {collection && entries.length >= block.data.limit ? (
+        <Link href={collection.path} className={t.more}>
+          {fill(theme.text.allEntries, { collection: collection.name.toLowerCase() })}
+        </Link>
+      ) : null}
+    </Section>
+  );
+}