@headroom-cms/api 0.1.1

package/dist/react.js

@@ -0,0 +1,275 @@
+// src/react/InlineContent.tsx
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function styleClasses(styles) {
+  if (!styles) return void 0;
+  const classes = [];
+  if (styles.bold) classes.push("hr-bold");
+  if (styles.italic) classes.push("hr-italic");
+  if (styles.underline) classes.push("hr-underline");
+  if (styles.strikethrough) classes.push("hr-strikethrough");
+  if (styles.code) classes.push("hr-code");
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+function resolveHref(href, refs, resolveContentLink) {
+  if (!href.startsWith("headroom://content/")) return href;
+  const match = href.match(/^headroom:\/\/content\/([^/]+)\/([A-Z0-9]+)$/);
+  if (!match) return "#";
+  const [, , contentId] = match;
+  const ref = refs?.[contentId];
+  if (!ref) return "#";
+  return resolveContentLink ? resolveContentLink(ref) : `/${ref.collection}/${ref.slug}`;
+}
+function InlineContent({ content, refs, resolveContentLink }) {
+  if (!content || content.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: content.map((item, i) => {
+    if (item.type === "link") {
+      const resolved = resolveHref(item.href, refs, resolveContentLink);
+      return /* @__PURE__ */ jsx("a", { href: resolved, className: "hr-link", children: /* @__PURE__ */ jsx(
+        InlineContent,
+        {
+          content: item.content,
+          refs,
+          resolveContentLink
+        }
+      ) }, i);
+    }
+    const cls = styleClasses(item.styles);
+    return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: item.text }, i) : /* @__PURE__ */ jsx(React.Fragment, { children: item.text }, i);
+  }) });
+}
+
+// src/react/blocks/Paragraph.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Paragraph({ block, refs, resolveContentLink }) {
+  const content = Array.isArray(block.content) ? block.content : [];
+  return /* @__PURE__ */ jsx2("p", { className: "hr-paragraph", children: /* @__PURE__ */ jsx2(InlineContent, { content, refs, resolveContentLink }) });
+}
+
+// src/react/blocks/Heading.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Heading({ block, refs, resolveContentLink }) {
+  const level = Math.min(block.props?.level || 1, 6);
+  const content = Array.isArray(block.content) ? block.content : [];
+  const className = `hr-heading hr-h${level}`;
+  const inner = /* @__PURE__ */ jsx3(InlineContent, { content, refs, resolveContentLink });
+  switch (level) {
+    case 1:
+      return /* @__PURE__ */ jsx3("h1", { className, children: inner });
+    case 2:
+      return /* @__PURE__ */ jsx3("h2", { className, children: inner });
+    case 3:
+      return /* @__PURE__ */ jsx3("h3", { className, children: inner });
+    case 4:
+      return /* @__PURE__ */ jsx3("h4", { className, children: inner });
+    case 5:
+      return /* @__PURE__ */ jsx3("h5", { className, children: inner });
+    case 6:
+      return /* @__PURE__ */ jsx3("h6", { className, children: inner });
+    default:
+      return /* @__PURE__ */ jsx3("h1", { className, children: inner });
+  }
+}
+
+// src/react/blocks/Image.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function ImageBlock({ block, cdnUrl }) {
+  const storedPath = block.props?.url;
+  const src = storedPath ? cdnUrl ? `${cdnUrl}${storedPath}` : storedPath : "";
+  const alt = block.props?.alt || "";
+  const caption = block.props?.caption || "";
+  if (!src) return null;
+  return /* @__PURE__ */ jsxs("figure", { className: "hr-image", children: [
+    /* @__PURE__ */ jsx4("img", { src, alt, loading: "lazy" }),
+    caption && /* @__PURE__ */ jsx4("figcaption", { children: caption })
+  ] });
+}
+
+// src/react/blocks/CodeBlock.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function CodeBlock({ block }) {
+  const language = block.props?.language || "";
+  const content = Array.isArray(block.content) ? block.content : [];
+  const code = content.map((c) => "text" in c ? c.text : "").join("");
+  return /* @__PURE__ */ jsx5("pre", { className: "hr-code-block", children: /* @__PURE__ */ jsx5("code", { className: language ? `language-${language}` : "", children: code }) });
+}
+
+// src/react/blocks/BulletList.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function BulletList({ items, refs, resolveContentLink }) {
+  return /* @__PURE__ */ jsx6("ul", { className: "hr-bullet-list", children: (items || []).map((item) => {
+    const content = Array.isArray(item.content) ? item.content : [];
+    return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsx6(InlineContent, { content, refs, resolveContentLink }) }, item.id);
+  }) });
+}
+
+// src/react/blocks/NumberedList.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function NumberedList({ items, refs, resolveContentLink }) {
+  return /* @__PURE__ */ jsx7("ol", { className: "hr-numbered-list", children: (items || []).map((item) => {
+    const content = Array.isArray(item.content) ? item.content : [];
+    return /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(InlineContent, { content, refs, resolveContentLink }) }, item.id);
+  }) });
+}
+
+// src/react/blocks/CheckList.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+function CheckList({ items, refs, resolveContentLink }) {
+  return /* @__PURE__ */ jsx8("ul", { className: "hr-check-list", children: (items || []).map((item) => {
+    const checked = item.props?.checked;
+    const content = Array.isArray(item.content) ? item.content : [];
+    return /* @__PURE__ */ jsxs2("li", { className: "hr-check-item", "data-checked": checked || void 0, children: [
+      /* @__PURE__ */ jsx8("span", { className: "hr-checkbox", "aria-checked": checked, children: checked && /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M4 8l3 3 5-6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8(InlineContent, { content, refs, resolveContentLink }) })
+    ] }, item.id);
+  }) });
+}
+
+// src/react/blocks/Table.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Table({ block, refs, resolveContentLink }) {
+  const tableContent = block.content;
+  const rows = tableContent?.rows || [];
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsx9("table", { className: "hr-table", children: /* @__PURE__ */ jsx9("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx9("tr", { children: row.cells.map((cell, cellIndex) => {
+    const Tag = rowIndex === 0 ? "th" : "td";
+    return /* @__PURE__ */ jsx9(Tag, { children: /* @__PURE__ */ jsx9(InlineContent, { content: cell, refs, resolveContentLink }) }, cellIndex);
+  }) }, rowIndex)) }) });
+}
+
+// src/react/blocks/Fallback.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function Fallback({ block, refs, resolveContentLink }) {
+  const content = Array.isArray(block.content) ? block.content : [];
+  return /* @__PURE__ */ jsxs3("div", { className: "hr-fallback", "data-block-type": block.type, children: [
+    /* @__PURE__ */ jsx10("span", { className: "hr-fallback-label", children: block.type }),
+    content.length > 0 && /* @__PURE__ */ jsx10("p", { children: /* @__PURE__ */ jsx10(InlineContent, { content, refs, resolveContentLink }) })
+  ] });
+}
+
+// src/react/blocks/index.ts
+var defaultBlockComponents = {
+  paragraph: Paragraph,
+  heading: Heading,
+  image: ImageBlock,
+  codeBlock: CodeBlock,
+  bulletList: BulletList,
+  numberedList: NumberedList,
+  checkList: CheckList,
+  table: Table
+};
+
+// src/react/BlockRenderer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function defaultResolveContentLink(ref) {
+  if (!ref.published) return "#";
+  return `/${ref.collection}/${ref.slug}`;
+}
+function BlockRenderer({
+  blocks,
+  components,
+  cdnUrl,
+  refs,
+  resolveContentLink,
+  fallback,
+  className
+}) {
+  const merged = { ...defaultBlockComponents, ...components };
+  const renderItems = groupListItems(blocks);
+  const FallbackComponent = fallback === null ? null : fallback ?? Fallback;
+  const resolve = resolveContentLink ?? defaultResolveContentLink;
+  return /* @__PURE__ */ jsx11("div", { className, children: renderItems.map((item, i) => {
+    if (item.listType) {
+      const ListComponent = merged[item.listType];
+      if (ListComponent) {
+        return /* @__PURE__ */ jsx11(
+          ListComponent,
+          {
+            block: item.items[0],
+            items: item.items,
+            cdnUrl,
+            refs,
+            resolveContentLink: resolve,
+            components: merged
+          },
+          item.items[0].id
+        );
+      }
+      return null;
+    }
+    const block = item.block;
+    const Component = merged[block.type];
+    if (!Component) {
+      if (FallbackComponent) {
+        return /* @__PURE__ */ jsx11(
+          FallbackComponent,
+          {
+            block,
+            cdnUrl,
+            refs,
+            resolveContentLink: resolve,
+            components: merged
+          },
+          block.id
+        );
+      }
+      return null;
+    }
+    return /* @__PURE__ */ jsx11(
+      Component,
+      {
+        block,
+        cdnUrl,
+        refs,
+        resolveContentLink: resolve,
+        components: merged
+      },
+      block.id
+    );
+  }) });
+}
+var LIST_TYPE_MAP = {
+  bulletListItem: "bulletList",
+  numberedListItem: "numberedList",
+  checkListItem: "checkList"
+};
+function groupListItems(blocks) {
+  const result = [];
+  for (const block of blocks) {
+    const listType = LIST_TYPE_MAP[block.type];
+    if (listType) {
+      const last = result[result.length - 1];
+      if (last?.listType === listType) {
+        last.items.push(block);
+      } else {
+        result.push({ listType, items: [block] });
+      }
+    } else {
+      result.push({ block });
+    }
+  }
+  return result;
+}
+export {
+  BlockRenderer,
+  BulletList,
+  CheckList,
+  CodeBlock,
+  Fallback,
+  Heading,
+  ImageBlock,
+  InlineContent,
+  NumberedList,
+  Paragraph,
+  Table,
+  defaultBlockComponents
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@headroom-cms/api",
+  "version": "0.1.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./react/headroom-blocks.css": "./dist/headroom-blocks.css",
+    "./blocks/*": "./blocks/*",
+    "./astro": {
+      "types": "./dist/astro.d.ts",
+      "import": "./dist/astro.js"
+    },
+    "./codegen": {
+      "types": "./dist/codegen.d.ts",
+      "import": "./dist/codegen.js",
+      "require": "./dist/codegen.cjs"
+    }
+  },
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "blocks"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "astro": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "astro": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~6.6.3",
+    "@testing-library/react": "~16.3.0",
+    "@types/react": "~19.1.0",
+    "jsdom": "~26.1.0",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
+    "tsup": "~8.5.0",
+    "typescript": "~5.9.3",
+    "astro": "^5.0.0",
+    "@types/node": "~22.0.0",
+    "vitest": "~4.0.18"
+  }
+}