@glw907/cairn-cms 0.11.0 → 0.14.0

package/src/lib/render/rehype-dispatch.ts

@@ -1,6 +1,6 @@
 import type { Root, Element, ElementContent } from 'hast';
 import { h } from 'hastscript';
-import type { ComponentRegistry } from './registry.js';
+import { dataAttrProp, type ComponentContext, type ComponentDef, type ComponentRegistry } from './registry.js';
 
 export function isElement(node: ElementContent | undefined): node is Element {
   return !!node && node.type === 'element';
@@ -23,24 +23,6 @@ export function iconSpan(glyphEl: Element, role?: string): Element {
 /** A site's icon factory: turn a stamped icon name + role into a hast element. */
 export type MakeIcon = (name: string, role?: string) => Element;
 
-// Pull the section's <h2> out, retag it .card-title, and build the .ec-head row
-// (optional icon + heading). Returns the head plus the remaining body children.
-// `makeIcon` (site-supplied) turns the stamped data-icon into an element; omit it
-// for a head with no icon.
-export function splitHead(node: Element, makeIcon?: MakeIcon): { head: Element; rest: ElementContent[] } {
-  const children = node.children as ElementContent[];
-  const i = children.findIndex((c) => isElement(c) && c.tagName === 'h2');
-  const h2 = children[i] as Element;
-  h2.properties = { ...h2.properties, className: ['card-title'] };
-  const rest = children.filter((_, j) => j !== i);
-  const icon = strProp(node, 'dataIcon');
-  const role = strProp(node, 'dataRole');
-  const headKids: ElementContent[] = [];
-  if (makeIcon && icon) headKids.push(makeIcon(icon, role));
-  headKids.push(h2);
-  return { head: h('div', { className: ['ec-head'] }, headKids), rest };
-}
-
 /** Section wrapper: `<section class=…><div class="card-body">…</div></section>`. */
 export function cardShell(classes: string[], body: ElementContent[]): Element {
   return h('section', { className: classes }, [h('div', { className: ['card-body'] }, body)]);
@@ -70,11 +52,76 @@ function transformChildren(children: ElementContent[], registry: ComponentRegist
   });
 }
 
+// Read a stamped attribute back into its typed value. Booleans arrive as the strings
+// 'true'/'false'; everything else is the literal string the author wrote.
+function readAttributes(node: Element, def: ComponentDef): Record<string, string | boolean> {
+  const out: Record<string, string | boolean> = {};
+  for (const field of def.attributes ?? []) {
+    const value = strProp(node, dataAttrProp(field.key));
+    if (value == null) continue;
+    out[field.key] = field.type === 'boolean' ? value === 'true' : value;
+  }
+  return out;
+}
+
+// The title label paragraph carries data-slot="title"; build() wants its inline children, not
+// the marked paragraph. Return the paragraph's children.
+function stripSlotMarker(child: ElementContent): ElementContent[] {
+  return isElement(child) ? (child.children as ElementContent[]) : [child];
+}
+
+// Split a component's stamped children into named slots and the default body. A child marked
+// data-slot="title"/<name> routes to that slot; an unmarked child is body. A repeatable slot
+// wraps a <ul>, so its items are that list's <li> children, one child-list per item.
+function partitionSlots(node: Element): {
+  slot(name: string): ElementContent[];
+  items(name: string): ElementContent[][];
+} {
+  const named = new Map<string, ElementContent[]>();
+  const body: ElementContent[] = [];
+  for (const child of node.children as ElementContent[]) {
+    const slotName = isElement(child) ? strProp(child, 'dataSlot') : undefined;
+    if (slotName === 'title') named.set('title', stripSlotMarker(child));
+    else if (slotName) named.set(slotName, [child]);
+    else body.push(child);
+  }
+  return {
+    slot(name: string): ElementContent[] {
+      if (name === 'body') return body;
+      const wrap = named.get(name);
+      if (!wrap) return [];
+      // For title we stored the label's own children, so return them as-is. For a markdown or
+      // inline named slot the wrapper <div> holds the rendered children; unwrap it.
+      if (name === 'title') return wrap;
+      const div = wrap[0];
+      return isElement(div) ? (div.children as ElementContent[]) : wrap;
+    },
+    items(name: string): ElementContent[][] {
+      const wrap = named.get(name);
+      const div = wrap?.[0];
+      if (!div || !isElement(div)) return [];
+      const ul = (div.children as ElementContent[]).find((c) => isElement(c) && c.tagName === 'ul');
+      if (!ul || !isElement(ul)) return [];
+      return (ul.children as ElementContent[])
+        .filter((li) => isElement(li) && li.tagName === 'li')
+        .map((li) => (li as Element).children as ElementContent[]);
+    },
+  };
+}
+
 function transformNode(node: Element, registry: ComponentRegistry): Element {
   node.children = transformChildren(node.children as ElementContent[], registry);
   const name = strProp(node, 'dataPrimitive');
   const def = name ? registry.get(name) : undefined;
-  return def ? def.build(node) : node;
+  if (!def) return node;
+  const parts = partitionSlots(node);
+  const ctx: ComponentContext = {
+    attributes: readAttributes(node, def),
+    slot: parts.slot,
+    items: parts.items,
+    node,
+  };
+  return def.build(ctx);
 }
 
 /** Rehype transformer: dispatch each stamped element through its registry `build`

package/src/lib/render/remark-directives.ts

@@ -1,7 +1,22 @@
 import type { Paragraph, PhrasingContent, Root, Text } from 'mdast';
 import type { ContainerDirective, LeafDirective, TextDirective } from 'mdast-util-directive';
 import { visit } from 'unist-util-visit';
-import type { ComponentRegistry } from './registry.js';
+import { dataAttrProp, type ComponentRegistry } from './registry.js';
+
+// mdast-util-directive carries the `[label]` as a paragraph whose `data.directiveLabel` is set.
+function isDirectiveLabel(node: unknown): boolean {
+  return Boolean((node as { data?: { directiveLabel?: boolean } }).data?.directiveLabel);
+}
+
+// Stamp data-slot on a child so the rehype dispatch partitioner can route it. For a nested
+// container directive we also set hName so it renders as a <div> wrapper rather than being
+// dropped as an unknown directive.
+function markSlot(node: unknown, name: string): void {
+  const n = node as { type?: string; data?: { hName?: string; hProperties?: Record<string, string> } };
+  const data = n.data ?? (n.data = {});
+  if (n.type === 'containerDirective') data.hName = 'div';
+  data.hProperties = { ...(data.hProperties ?? {}), dataSlot: name };
+}
 
 // Reconstruct a directive's authored attribute block (`{#id .class key="value"}`).
 // Accidental prose directives carry none, so this is almost always empty.
@@ -41,6 +56,7 @@ export function remarkDirectiveStamp(registry: ComponentRegistry) {
   return (tree: Root) => {
     visit(tree, 'containerDirective', (node: ContainerDirective) => {
       if (!known.has(node.name)) return;
+      const def = registry.get(node.name);
       const attrs = node.attributes ?? {};
       const role = attrs.role || undefined;
       let icon = attrs.icon || undefined;
@@ -49,10 +65,32 @@ export function remarkDirectiveStamp(registry: ComponentRegistry) {
       const properties: Record<string, string> = { dataPrimitive: node.name };
       if (icon) properties.dataIcon = icon;
       if (role) properties.dataRole = role;
+      // Carry every declared attribute to hast so the dispatch partitioner can build the
+      // component context. data-attr-<key> survives to the element; build() consumes it and
+      // returns a fresh element, so the marker never reaches the published DOM.
+      for (const field of def?.attributes ?? []) {
+        const raw = attrs[field.key];
+        if (raw != null) properties[dataAttrProp(field.key)] = raw;
+      }
 
       const data = node.data ?? (node.data = {});
       data.hName = 'div';
       data.hProperties = properties;
+
+      // Mark the title label paragraph and the nested slot directives so they survive to hast
+      // and the partitioner can find them. A slot named in the component schema (other than the
+      // default body) is a nested container directive; the title is the directive [label].
+      const slotNames = new Set((def?.slots ?? []).map((s) => s.name));
+      for (const child of node.children) {
+        if (isDirectiveLabel(child) && slotNames.has('title')) {
+          markSlot(child, 'title');
+        } else if (
+          (child as { type?: string }).type === 'containerDirective' &&
+          slotNames.has((child as { name: string }).name)
+        ) {
+          markSlot(child, (child as { name: string }).name);
+        }
+      }
     });
 
     visit(tree, ['textDirective', 'leafDirective'], (node, index, parent) => {

package/src/lib/sveltekit/public-routes.ts

@@ -8,6 +8,7 @@ import type { ContentSummary, ContentEntry } from '../delivery/content-index.js'
 import type { SiteIndex } from '../delivery/site-index.js';
 import { buildSeoMeta } from '../delivery/seo.js';
 import type { SeoMeta } from '../delivery/seo.js';
+import { readSeoFields, resolveImageUrl } from '../delivery/seo-fields.js';
 
 /** Injected dependencies for the public loaders. */
 export interface PublicRoutesDeps {
@@ -20,6 +21,9 @@ export interface PublicRoutesDeps {
   description: string;
   /** Absolute feed URLs for the head's autodiscovery links. */
   feeds?: { rss?: string; json?: string };
+  /** A site-wide default OG image, used when an entry declares none. Resolved to absolute like the
+   *  canonical URL, so a relative path such as "/og/default.png" works. */
+  defaultImage?: string;
 }
 
 /** The archive and tag list data: summaries the template renders. */
@@ -49,7 +53,7 @@ export interface EntryData {
 
 /** Build the public loaders for a site's unified index. */
 export function createPublicRoutes(deps: PublicRoutesDeps) {
-  const { site, render, origin, siteName, description, feeds } = deps;
+  const { site, render, origin, siteName, description, feeds, defaultImage } = deps;
 
   /** Resolve one concept's index by id, or a 404 (the route names an unconfigured concept). */
   function indexOf(conceptId: string) {
@@ -64,15 +68,21 @@ export function createPublicRoutes(deps: PublicRoutesDeps) {
     if (!entry) throw error(404, `Not found: ${event.url.pathname}`);
     const { newer, older } = site.adjacent(entry);
     const canonicalUrl = origin + entry.permalink;
+    const fields = readSeoFields(entry.frontmatter);
+    const rawImage = fields.image ?? defaultImage;
+    const image = rawImage ? resolveImageUrl(rawImage, origin) : undefined;
     // A dated entry is an article; an undated one (a page) is a website.
     const seo = buildSeoMeta({
       title: entry.title,
-      description: (entry.frontmatter.description as string) || entry.excerpt || description,
+      description: fields.description || entry.excerpt || description,
       canonicalUrl,
       siteName,
       type: entry.date ? 'article' : 'website',
       ...(entry.date ? { published: entry.date } : {}),
       ...(entry.updated ? { modified: entry.updated } : {}),
+      ...(image ? { image } : {}),
+      ...(fields.robots ? { robots: fields.robots } : {}),
+      ...(fields.author ? { author: fields.author } : {}),
       feeds,
     });
     return { entry, html: await render(entry.body, { stagger: true }), canonicalUrl, seo, newer, older };