@the-smithy/create-hearth-site 0.0.0-stage → 0.13.0

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

@@ -0,0 +1,120 @@
+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} 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} 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/index.tsx

@@ -0,0 +1,65 @@
+import type { BlockOf, ResolvedBlock } from "@the-smithy/hearth";
+import { HearthBlocks, type BlockComponents } from "@the-smithy/hearth/react";
+import { Section, SectionHeading } from "@/components/ui";
+import { CollectionList } from "./collections";
+import { CallToAction, CardGrid, Faq, Hero, MediaText, Pricing, Projects, Quote, RichText, Stats } from "./content";
+import { EventSpotlight, UpcomingEvents } from "./events";
+import { CustomBlock } from "./custom";
+import { EmberFormBlock } from "./EmberFormBlock";
+import { HearthForm } from "./Form";
+import { Donate, FundraiserGrid, FundraiserSpotlight } from "./giving";
+import { Location, Schedule } from "./info";
+import { Embed, Gallery, Logos, People, Video } from "./media";
+
+function FormBlock({ block }: { block: BlockOf<"form"> }) {
+  return (
+    <Section>
+      <div className="max-w-2xl">
+        <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 ? (
+          <EmberFormBlock formId={block.data.emberFormId} fallback={<HearthForm form={block.data} />} />
+        ) : (
+          <HearthForm form={block.data} />
+        )}
+      </div>
+    </Section>
+  );
+}
+
+/**
+ * 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.
+ */
+export const blocks: BlockComponents = {
+  hero: Hero,
+  richText: RichText,
+  mediaText: MediaText,
+  stats: Stats,
+  cardGrid: CardGrid,
+  cta: CallToAction,
+  faq: Faq,
+  pricing: Pricing,
+  projects: Projects,
+  quote: Quote,
+  gallery: Gallery,
+  video: Video,
+  embed: Embed,
+  people: People,
+  logos: Logos,
+  location: Location,
+  schedule: Schedule,
+  form: FormBlock,
+  upcomingEvents: UpcomingEvents,
+  eventSpotlight: EventSpotlight,
+  collectionList: CollectionList,
+  fundraiserSpotlight: FundraiserSpotlight,
+  fundraiserGrid: FundraiserGrid,
+  donate: Donate,
+  custom: CustomBlock,
+};
+
+export function Blocks({ blocks: list }: { blocks: ResolvedBlock[] }) {
+  return <HearthBlocks blocks={list} components={blocks} fallback={() => null} />;
+}

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

@@ -0,0 +1,52 @@
+import type { BlockOf } from "@the-smithy/hearth";
+import { Section, SectionHeading } from "@/components/ui";
+
+export function Location({ block }: { block: BlockOf<"location"> }) {
+  const d = block.data;
+  const query = encodeURIComponent(`${d.name}, ${d.address}`);
+  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 ? <p className="opacity-80">{d.notes}</p> : null}
+          <a href={`https://www.google.com/maps/dir/?api=1&destination=${query}`} rel="noopener" className="font-semibold text-highlight underline underline-offset-4">
+            Get directions
+          </a>
+        </div>
+        {d.showMap ? (
+          <iframe
+            title={`Map of ${d.name}`}
+            src={`https://www.google.com/maps?q=${query}&output=embed`}
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+            className="aspect-[4/3] w-full rounded-xl border-0 bg-muted"
+          />
+        ) : null}
+      </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/blocks/media.tsx

@@ -0,0 +1,107 @@
+import { videoEmbedUrl, type BlockOf } from "@the-smithy/hearth";
+import { HearthEmbed } from "@the-smithy/hearth/react";
+import { Img, Section, SectionHeading } from "@/components/ui";
+
+const columns = { "2": "sm:grid-cols-2", "3": "sm:grid-cols-2 lg:grid-cols-3", "4": "sm:grid-cols-2 lg:grid-cols-4" } as const;
+
+export function Gallery({ block }: { block: BlockOf<"gallery"> }) {
+  const d = block.data;
+  return (
+    <Section>
+      <SectionHeading heading={d.heading} intro={d.intro} />
+      <ul className={`grid gap-4 ${columns[d.columns]}`}>
+        {d.images.map((item, i) => (
+          <li key={i}>
+            <figure>
+              <Img image={item.image} className="aspect-[4/3] w-full rounded-xl object-cover" />
+              {item.caption ? <figcaption className="mt-2 text-sm opacity-75">{item.caption}</figcaption> : null}
+            </figure>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function Video({ block }: { block: BlockOf<"video"> }) {
+  const d = block.data;
+  const src = videoEmbedUrl(d.url);
+  if (!src) return null;
+  return (
+    <Section>
+      <SectionHeading heading={d.heading} />
+      <figure className="max-w-4xl">
+        <div className="aspect-video overflow-hidden rounded-xl bg-inverse">
+          <iframe
+            src={src}
+            title={d.title}
+            loading="lazy"
+            className="size-full"
+            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+            referrerPolicy="strict-origin-when-cross-origin"
+          />
+        </div>
+        {d.caption ? <figcaption className="mt-3 opacity-75">{d.caption}</figcaption> : null}
+      </figure>
+    </Section>
+  );
+}
+
+/** Embed code from another service, in the SDK's sandboxed frame (it can't reach the rest of the page). */
+export function Embed({ block }: { block: BlockOf<"embed"> }) {
+  const width = { narrow: "max-w-2xl", wide: "max-w-4xl", full: "" }[block.data.width];
+  return (
+    <Section>
+      <figure className={width}>
+        <HearthEmbed block={block} className="rounded-xl" />
+        {block.data.caption ? <figcaption className="mt-3 opacity-75">{block.data.caption}</figcaption> : null}
+      </figure>
+    </Section>
+  );
+}
+
+export function People({ block }: { block: BlockOf<"people"> }) {
+  const d = block.data;
+  return (
+    <Section>
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+        {d.people.map((p, i) => (
+          <li key={i} className="flex flex-col gap-3">
+            {p.image ? <Img image={p.image} className="aspect-square w-full rounded-2xl object-cover" /> : null}
+            <div>
+              <h3 className="text-xl font-semibold">{p.name}</h3>
+              {p.role ? <p className="opacity-75">{p.role}</p> : null}
+            </div>
+            {p.bio ? <p className="leading-relaxed opacity-85">{p.bio}</p> : null}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function Logos({ block }: { block: BlockOf<"logos"> }) {
+  const d = block.data;
+  return (
+    <Section>
+      <SectionHeading heading={d.heading} intro={d.intro} />
+      <ul className="flex flex-wrap items-center gap-x-12 gap-y-6">
+        {d.logos.map((l, i) => {
+          const mark = l.logo ? <Img image={{ src: l.logo.src, alt: l.logo.alt || l.name }} className="h-10 w-auto" /> : <span className="text-lg font-semibold">{l.name}</span>;
+          return (
+            <li key={i}>
+              {l.url ? (
+                <a href={l.url} rel="noopener" className="block opacity-85 hover:opacity-100">
+                  {mark}
+                </a>
+              ) : (
+                mark
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </Section>
+  );
+}

package/template/src/components/ui.tsx

@@ -0,0 +1,105 @@
+import Link from "next/link";
+import { Fragment, type ReactNode } from "react";
+import ReactMarkdown from "react-markdown";
+
+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", className = "", children }: { tone?: Tone; className?: string; children: ReactNode }) {
+  return (
+    <section className={toneClass[tone]}>
+      <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>
+  );
+}
+
+/* eslint-disable @next/next/no-img-element -- Hearth serves media from its CDN at the uploaded size */
+export function Img({ image, className = "" }: { image: { src: string; alt: string }; className?: string }) {
+  return <img src={image.src} alt={image.alt} loading="lazy" decoding="async" className={className} />;
+}

package/template/src/lib/hearth.ts

@@ -0,0 +1,12 @@
+import { createHearthClient } from "@the-smithy/hearth";
+import { createHearthNext } from "@the-smithy/hearth/next";
+
+/** The site's content client. Server-side only: the API key is secret. */
+export const hearth = createHearthClient({
+  site: process.env.HEARTH_SITE!,
+  apiKey: process.env.HEARTH_API_KEY!,
+  baseUrl: process.env.HEARTH_BASE_URL || undefined,
+});
+
+/** Cached, tagged reads plus metadata, sitemap, revalidation and form helpers. */
+export const hearthNext = createHearthNext(hearth);

package/template/src/lib/site.ts

@@ -0,0 +1,9 @@
+import type { Site } from "@the-smithy/hearth";
+
+/** https://<domain> once the site's domain is set in Hearth; otherwise null. */
+export function siteUrl(site: Pick<Site, "domain">): string | null {
+  if (!site.domain) return null;
+  return `https://${site.domain.replace(/^https?:\/\//, "").replace(/\/+$/, "")}`;
+}
+
+export const hasFeature = (site: Pick<Site, "features">, feature: string) => site.features.includes(feature);

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}