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

package/template/src/hearth/pages/fundraiser.tsx

@@ -0,0 +1,77 @@
+import { metadataFromMeta } from "@the-smithy/hearth/next";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { theme } from "@/theme";
+import { Blocks } from "../blocks";
+import { Progress } from "../blocks/giving";
+import { hearthNext } from "../client";
+import { Share } from "../components/Share";
+import { DonateForm } from "../forms/DonateForm";
+import { money } from "../format";
+import { hasFeature, siteUrl } from "../site";
+import { fill, Img, Section } from "../ui";
+
+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, Donate and Share, then its story blocks and the donation form. */
+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;
+  const t = theme.fundraiser;
+  const base = siteUrl(site);
+  const url = base ? `${base}${f.path}` : null;
+  const active = f.status === "active";
+
+  return (
+    <>
+      <JsonLd data={f.meta.jsonLd} />
+      <section className={t.header}>
+        <div className={t.headerInner}>
+          <div className={t.details}>
+            <p className={t.label}>{active ? "Fundraiser" : "Completed fundraiser"}</p>
+            <h1 className={t.title}>{f.title}</h1>
+            {f.summary ? <p className={t.summary}>{f.summary}</p> : null}
+            <Progress fundraiser={f} large />
+            {active ? (
+              <div className={t.actions}>
+                <a href="#donate" className={theme.button.primary}>
+                  {theme.text.donate}
+                </a>
+                {url ? (
+                  <Share
+                    title={f.title}
+                    url={url}
+                    message={`I'm supporting ${f.title}${f.goalCents ? `: ${money(f.raisedCents)} raised of ${money(f.goalCents)} so far` : ""}. Give here: ${url}`}
+                    heading="Share this fundraiser"
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
+        </div>
+      </section>
+      <Blocks blocks={f.blocks} />
+      {active ? (
+        <Section block="fundraiserDonate">
+          <div className={t.give}>
+            <h2 className={t.giveTitle}>{fill(theme.text.giveTo, { fundraiser: f.title })}</h2>
+            <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
+          </div>
+        </Section>
+      ) : null}
+    </>
+  );
+}

package/template/src/hearth/pages/fundraisers.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { theme } from "@/theme";
+import { FundraiserList } from "../blocks/giving";
+import { hearthNext } from "../client";
+import { hasFeature } from "../site";
+import { Section } from "../ui";
+
+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 block="fundraisers">
+        <h1 className={theme.page.title}>Fundraisers</h1>
+        <FundraiserList fundraisers={active} />
+      </Section>
+      {completed.length ? (
+        <Section block="fundraisers" tone="muted">
+          <h2 className={theme.fundraiser.completedTitle}>Completed</h2>
+          <FundraiserList fundraisers={completed} />
+        </Section>
+      ) : null}
+    </>
+  );
+}

package/template/src/hearth/pages/not-found.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+import { theme } from "@/theme";
+import { Section } from "../ui";
+
+export default function NotFound() {
+  return (
+    <Section block="notFound" innerClassName={theme.page.notFound}>
+      <h1 className={theme.page.title}>Page not found</h1>
+      <p className={theme.page.lead}>The page you&apos;re looking for has moved or no longer exists.</p>
+      <Link href="/" className={theme.button.primary}>
+        Go to the homepage
+      </Link>
+    </Section>
+  );
+}

package/template/src/hearth/pages/page.tsx

@@ -0,0 +1,54 @@
+import { normalizeSlug } from "@the-smithy/hearth";
+import { metadataFromMeta } from "@the-smithy/hearth/next";
+import { JsonLd } from "@the-smithy/hearth/react";
+import type { Metadata } from "next";
+import { Blocks } from "../blocks";
+import { hearthNext } from "../client";
+import { EventView } from "../components/EventView";
+import { hasFeature } from "../site";
+
+type Props = { params: Promise<{ slug?: string[] }> };
+
+/**
+ * An event in an event collection, e.g. /talks/<event> for a "Talks" collection. Pages are checked first,
+ * so a page at the same address wins.
+ */
+async function collectionEvent(slug: string[] | undefined) {
+  if (!slug || slug.length < 2) return null;
+  const site = await hearthNext.getSite();
+  if (!hasFeature(site, "events")) return null;
+  const prefix = normalizeSlug(slug.slice(0, -1));
+  const collection = (await hearthNext.getCollections()).find((c) => c.kind === "events" && c.slug === prefix);
+  if (!collection) return null;
+  const event = await hearthNext.getEvent(normalizeSlug(slug.at(-1)));
+  return event?.collection?.id === collection.id ? event : null;
+}
+
+/** Every page in Hearth at its path ("/" is "home", "/about" is "about", "/blog/post" is a blog entry), plus events in collections. */
+export default async function Page({ params }: Props) {
+  const slug = (await params).slug;
+  const page = await hearthNext.getPage(slug);
+  if (page) {
+    return (
+      <>
+        <JsonLd data={page.meta.jsonLd} />
+        {/* Pages usually open with a Hero (the visible title); this keeps a heading for the rest. */}
+        {page.blocks[0]?.type === "hero" ? null : <h1 className="sr-only">{page.title}</h1>}
+        <Blocks blocks={page.blocks} />
+      </>
+    );
+  }
+
+  const event = await collectionEvent(slug);
+  if (event) return <EventView event={event} />;
+  // An old address (a renamed page, or the site before it moved to Hearth) redirects; anything else is a 404.
+  return hearthNext.redirectOrNotFound(slug);
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const slug = (await params).slug;
+  const metadata = await hearthNext.generatePageMetadata(slug);
+  if (Object.keys(metadata).length) return metadata;
+  const event = await collectionEvent(slug);
+  return event ? metadataFromMeta(event.meta) : {};
+}

package/template/src/hearth/pages/registered.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { theme } from "@/theme";
+import { Section } from "../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 block="registered">
+      <h1 className={theme.page.title}>You&apos;re registered</h1>
+      <p className={theme.page.lead}>Thanks for signing up. A confirmation is on its way to your email.</p>
+      <Link href="/events" className={theme.page.back}>
+        See all events
+      </Link>
+    </Section>
+  );
+}

package/template/src/hearth/pages/thank-you.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { theme } from "@/theme";
+import { Section } from "../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 block="thankYou">
+      <h1 className={theme.page.title}>Thank you</h1>
+      <p className={theme.page.lead}>Your gift makes a difference. If you gave your email, a receipt is on its way.</p>
+      <Link href="/" className={theme.page.back}>
+        Back to the homepage
+      </Link>
+    </Section>
+  );
+}