@the-smithy/hearth 0.14.0 → 0.15.0

package/dist/react.d.ts

@@ -30,6 +30,10 @@ type GuideTheme = {
     media?: string;
     /** The "+" on an expandable question. */
     accent?: string;
+    /** A step's label ("Step 1": the text-and-image block's eyebrow). */
+    eyebrow?: string;
+    /** A step's screenshot (the text-and-image block's image, shown full width under the step). */
+    screenshot?: string;
 };
 type GuideLinkProps = {
     href: string;
@@ -47,6 +51,15 @@ type GuideBlocksProps = {
 };
 /** Block types a guide can use; anything else is skipped. */
 declare const GUIDE_BLOCK_TYPES: readonly ["hero", "richText", "mediaText", "schedule", "cardGrid", "faq", "gallery", "video", "quote", "stats", "cta"];
+/**
+ * The guide's sections that have a heading, in order, with the anchor each one gets: for an "In this guide" list.
+ *
+ *   guideOutline(page.blocks).map((s) => <a href={`#${s.id}`}>{s.title}</a>)
+ */
+declare function guideOutline(blocks: readonly unknown[]): {
+    id: string;
+    title: string;
+}[];
 /**
  * Render a guide's blocks with your product's styles.
  *
@@ -95,4 +108,4 @@ declare function HearthEmbed({ block, className }: {
     className?: string;
 }): react.JSX.Element;
 
-export { type BlockComponents, GUIDE_BLOCK_TYPES, GuideBlocks, type GuideBlocksProps, type GuideLinkProps, type GuideTheme, HearthBlocks, HearthEmbed, JsonLd };
+export { type BlockComponents, GUIDE_BLOCK_TYPES, GuideBlocks, type GuideBlocksProps, type GuideLinkProps, type GuideTheme, HearthBlocks, HearthEmbed, JsonLd, guideOutline };

package/dist/react.js

@@ -6,6 +6,14 @@ import { EMBED_ALLOW, EMBED_SANDBOX, embedDocument } from "@the-smithy/hearth-sc
 import { videoEmbedUrl } from "@the-smithy/hearth-schema";
 import { jsx, jsxs } from "react/jsx-runtime";
 var GUIDE_BLOCK_TYPES = ["hero", "richText", "mediaText", "schedule", "cardGrid", "faq", "gallery", "video", "quote", "stats", "cta"];
+var anchor = (text) => text.toLowerCase().replace(/\*/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+var headingOf = (b) => typeof b.data?.heading === "string" && b.data.heading.trim() ? b.data.heading.trim() : null;
+function guideOutline(blocks) {
+  return blocks.flatMap((b) => {
+    const title = GUIDE_BLOCK_TYPES.includes(b.type) && b.type !== "cta" ? headingOf(b) : null;
+    return title ? [{ id: anchor(title), title: title.replace(/\*/g, "") }] : [];
+  });
+}
 var stack = (gap) => ({ display: "flex", flexDirection: "column", gap });
 var grid = (min) => ({ display: "grid", gap: "0.75rem", gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${min}), 1fr))` });
 var fill = { display: "block", width: "100%", height: "auto" };
@@ -32,13 +40,14 @@ function GuideBlocks({ blocks, theme = {}, renderMarkdown = plainMarkdown, linkC
         return md(d.markdown);
       case "mediaText": {
         const image = d.image;
-        return /* @__PURE__ */ jsxs("div", { style: { ...grid("16rem"), alignItems: "start", gap: "1.25rem" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { ...stack("0.75rem"), order: d.imagePosition === "left" ? 2 : 1 }, children: [
+        return /* @__PURE__ */ jsxs("div", { style: stack("0.75rem"), children: [
+          /* @__PURE__ */ jsxs("div", { style: stack("0.375rem"), children: [
+            str(d.eyebrow) ? /* @__PURE__ */ jsx("p", { className: t.eyebrow, children: str(d.eyebrow) }) : null,
             heading(d.heading),
-            md(d.markdown),
+            str(d.markdown) ? md(d.markdown) : null,
             d.cta ? /* @__PURE__ */ jsx("p", { children: link(d.cta) }) : null
           ] }),
-          image ? /* @__PURE__ */ jsx("figure", { style: { margin: 0, order: d.imagePosition === "left" ? 1 : 2 }, children: img(image) }) : null
+          image ? /* @__PURE__ */ jsx("figure", { style: { margin: 0 }, children: img(image, t.screenshot ?? t.media) }) : null
         ] });
       }
       case "schedule": {
@@ -131,7 +140,8 @@ function GuideBlocks({ blocks, theme = {}, renderMarkdown = plainMarkdown, linkC
   }
   return /* @__PURE__ */ jsx("div", { className: t.root, style: t.root ? void 0 : stack("2rem"), children: blocks.map((b, i) => {
     const out = render(b);
-    return out ? /* @__PURE__ */ jsx("section", { children: out }, b.id ?? i) : null;
+    const title = b.type !== "cta" ? headingOf(b) : null;
+    return out ? /* @__PURE__ */ jsx("section", { id: title ? anchor(title) : void 0, style: title ? { scrollMarginTop: "1.5rem" } : void 0, children: out }, b.id ?? i) : null;
   }) });
 }
 
@@ -175,5 +185,6 @@ export {
   GuideBlocks,
   HearthBlocks,
   HearthEmbed,
-  JsonLd
+  JsonLd,
+  guideOutline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-smithy/hearth",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Typed client for the Hearth Delivery API: content, SEO, forms and publish webhooks.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -45,7 +45,7 @@
     "llms.md"
   ],
   "dependencies": {
-    "@the-smithy/hearth-schema": "^0.14.0"
+    "@the-smithy/hearth-schema": "^0.15.0"
   },
   "peerDependencies": {
     "next": ">=15",