@the-smithy/create-hearth-site 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-smithy/create-hearth-site",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Start a new client website powered by Hearth: pnpm create @the-smithy/hearth-site",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,7 +29,7 @@
   ],
   "devDependencies": {
     "vitest": "^5.0.3",
-    "@the-smithy/hearth-schema": "^0.12.0"
+    "@the-smithy/hearth-schema": "^0.13.0"
   },
   "scripts": {
     "test": "node --test \"test/**/*.test.js\" && vitest run test/blocks.test.ts"

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

@@ -0,0 +1,20 @@
+import type { BlockOf } from "@the-smithy/hearth";
+import type { ComponentType } from "react";
+
+/**
+ * This site's own blocks (Settings → Custom blocks in Hearth), one component per block key. Hearth stores what
+ * editors enter under `values`, keyed by each field's name; images come as { src, alt } with absolute URLs, links
+ * as { label, href }, lists as arrays of items. GET /custom-blocks (`hearth.customBlocks.list()`) describes them.
+ *
+ *   "team-member": ({ values }) => <TeamMember name={values.name as string} photo={values.photo as ImageRef} />,
+ */
+const customBlocks: Record<string, ComponentType<{ values: Record<string, unknown> }>> = {};
+
+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 components/blocks/custom.tsx.`);
+    return null;
+  }
+  return <Component values={block.data.values} />;
+}

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

@@ -4,11 +4,12 @@ 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 { Gallery, Logos, People, Video } from "./media";
+import { Embed, Gallery, Logos, People, Video } from "./media";
 
 function FormBlock({ block }: { block: BlockOf<"form"> }) {
   return (
@@ -44,6 +45,7 @@ export const blocks: BlockComponents = {
   quote: Quote,
   gallery: Gallery,
   video: Video,
+  embed: Embed,
   people: People,
   logos: Logos,
   location: Location,
@@ -55,6 +57,7 @@ export const blocks: BlockComponents = {
   fundraiserSpotlight: FundraiserSpotlight,
   fundraiserGrid: FundraiserGrid,
   donate: Donate,
+  custom: CustomBlock,
 };
 
 export function Blocks({ blocks: list }: { blocks: ResolvedBlock[] }) {

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

@@ -1,4 +1,5 @@
 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;
@@ -46,6 +47,19 @@ export function Video({ block }: { block: BlockOf<"video"> }) {
   );
 }
 
+/** 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 (