@dogsbay/render-html 0.2.0-beta.128 → 0.2.0-beta.129

package/dist/capabilities.js

@@ -40,7 +40,7 @@ export const RENDER_HTML_CAPABILITIES = [
         note: "Deliberately no embed: the page must work offline and make no request to YouTube. The Astro pipeline embeds on click.",
     },
     // ── Components ───────────────────────────────────────────
-    { feature: "callout", support: "full", rendersAs: "Alert markup (12 variants, aliases mapped); collapsible → CollapsibleAlert `<details>`" },
+    { feature: "callout", support: "full", rendersAs: "Alert markup (12 variants, aliases mapped, a custom `icon`); collapsible → CollapsibleAlert `<details>`" },
     { feature: "details", support: "full", rendersAs: "CollapsibleAlert `<details>`, as the Astro serializer" },
     { feature: "details-sheet", support: "full", rendersAs: "`<db-details-sheet>` around the CollapsibleAlert `<details>` (a right-hand native `<dialog>` when the element script runs; a collapsible block with `js: none`)" },
     { feature: "theme", support: "full", rendersAs: "a `<div class=\"dark …\" data-theme>` (THEME_SCOPES); an unknown name keeps the content and is reported" },

package/dist/render.js

@@ -753,23 +753,52 @@ function calloutLabel(type, ctx) {
 }
 function callout(n, ctx) {
     const p = (n.props ?? {});
-    const type = (str(p.type) ?? "note").toLowerCase();
+    // `variant` first, as format-astro reads it (Starlight and MkDocs importers write it)
+    const type = (str(p.variant) ?? str(p.type) ?? "note").toLowerCase();
     const variant = ALERT_VARIANT[VARIANT_ALIAS[type] ?? type] ? VARIANT_ALIAS[type] ?? type : "note";
     const title = str(p.title);
-    const titleHtml = title ? renderInline(parseInline(title), ctx) : esc(calloutLabel(type, ctx));
+    const titleHtml = title ? titleMarkup(title, ctx) : esc(calloutLabel(type, ctx));
     const body = renderBlocks(n.children, ctx);
-    if (p.collapsible === true || p.collapsible === "true" || p.collapsed != null) {
-        const open = p.collapsed === false || p.collapsed === "false" || p.open != null;
-        return collapsibleAlert(variant, titleHtml, body, open, p);
+    if (flagOn(p.collapsible) || p.collapsed != null) {
+        const open = p.collapsed === false || p.collapsed === "false" || flagOn(p.open);
+        return collapsibleAlert(variant, titleHtml, body, open, { ...p, "data-type": p["data-type"] ?? type }, ctx);
     }
     return (`<div${attrs({ ...passthrough(p, `${ALERT_BASE} ${ALERT_VARIANT[variant]} my-4`), "data-variant": variant, "data-type": type, role: "note" })}>` +
-        (ALERT_ICONS[variant] ?? "").replace("<svg ", '<svg aria-hidden="true" focusable="false" ') +
+        alertIcon(variant, p, ctx) +
         `<div data-part="title" class="mb-1 text-sm font-semibold leading-none tracking-tight">${titleHtml}</div>` +
         `<div class="text-sm [&_p]:leading-relaxed">${body}</div></div>\n`);
 }
-function collapsibleAlert(variant, titleHtml, body, open, p) {
+/** Formatting tags with no attributes, the HTML a title keeps (format-astro `TITLE_TAG`). */
+const TITLE_TAG = /^<\/?(?:code|kbd|b|strong|i|em|s|del|mark|sub|sup|br)\s*\/?>$/i;
+/**
+ * A callout or details title: inline Markdown, and raw HTML other than bare formatting tags as text
+ * (format-astro `titleInline`). `Map<K, V>` from an importer lost words as HTML.
+ */
+function titleMarkup(title, ctx) {
+    return renderInline(parseInline(title).map((n) => (n.type === "html-inline" && !TITLE_TAG.test(n.html.trim()) ? { type: "text", text: n.html } : n)), ctx);
+}
+/**
+ * A presence flag: `open`, `open=""`, `open="true"` and `true` are on; absent, `false` and `"false"` are
+ * off. format-astro reads flags with the same rule (`flagOn`); `open="false"` used to open here.
+ */
+function flagOn(v) {
+    return v !== undefined && v !== null && v !== false && v !== "false";
+}
+/**
+ * The icon an alert draws: the author's `icon` when it resolves (Alert.astro's rule, through the same
+ * resolver as `:icon`), else the variant's. An `icon` that resolves to nothing is reported, as `:icon` is.
+ */
+function alertIcon(variant, p, ctx) {
+    const name = str(p.icon);
+    const custom = name ? resolveIconMarkup(name, ctx) : undefined;
+    if (name && custom === undefined)
+        (ctx.missingIcons ??= new Set()).add(name);
+    const svg = custom ?? ALERT_ICONS[variant] ?? "";
+    return svg.startsWith("<svg") && !/^<svg[^>]*aria-hidden/.test(svg) ? svg.replace("<svg ", '<svg aria-hidden="true" focusable="false" ') : svg;
+}
+function collapsibleAlert(variant, titleHtml, body, open, p, ctx) {
     const c = COLLAPSIBLE[variant] ?? COLLAPSIBLE.note;
-    const icon = (ALERT_ICONS[variant] ?? "").replace("<svg ", '<svg aria-hidden="true" focusable="false" ');
+    const icon = alertIcon(variant, p, ctx);
     return (`<details${attrs({ ...passthrough(p, `group/collapsible relative my-4 w-full overflow-hidden rounded-lg border [&>summary]:list-none [&>summary::-webkit-details-marker]:hidden ${c.border}`), "data-variant": variant, open })}>` +
         `<summary class="flex cursor-pointer select-none items-center gap-2 px-4 py-3 text-sm font-semibold ${c.summary}"><span class="shrink-0 [&>svg]:size-4 ${c.icon}">${icon}</span><span class="flex-1 text-foreground" data-part="title">${titleHtml}</span><span class="shrink-0 text-muted-foreground transition-transform duration-200 group-open/collapsible:rotate-180">${ALERT_CHEVRON.replace("<svg ", '<svg aria-hidden="true" focusable="false" ')}</span></summary>` +
         `<div class="px-4 py-3 text-sm [&_p]:leading-relaxed ${c.body}">${body}</div></details>\n`);
@@ -899,7 +928,7 @@ function details(n, ctx) {
     // `variant` as documented, then `type`, as the Astro pipeline reads it.
     const type = (str(p.variant) ?? str(p.type) ?? "").toLowerCase();
     const variant = ALERT_VARIANT[VARIANT_ALIAS[type] ?? type] ? VARIANT_ALIAS[type] ?? type : "note";
-    const html = collapsibleAlert(variant, renderInline(parseInline(title), ctx), renderBlocks(n.children, ctx), p.open != null && p.open !== false, p);
+    const html = collapsibleAlert(variant, titleMarkup(title, ctx), renderBlocks(n.children, ctx), flagOn(p.open), p, ctx);
     // `sheet`: the same details, which <db-details-sheet> opens as a side
     // sheet when its script runs (and which stays a details when it does not)
     if (!isDetailsSheet(p))
@@ -934,6 +963,14 @@ function insideLink(yes, ctx, fn) {
  * gives, so pages match the Astro pipeline's. Without one: the built-in Lucide set. An icon neither knows is
  * recorded for a build warning and leaves a marked, empty span.
  */
+/** An icon's markup without a wrapper: the host's resolver (an SVG, or an emoji in Alert.astro's span), then the built-in set. */
+function resolveIconMarkup(name, ctx) {
+    const resolved = ctx.icons?.(name);
+    if (resolved)
+        return resolved.startsWith("<") ? resolved : `<span aria-hidden="true" class="inline-block w-[1em] text-center leading-none">${esc(resolved)}</span>`;
+    const builtin = name.replace(/^lucide:/, "");
+    return hasIcon(builtin) ? icon(builtin) : undefined;
+}
 function namedIcon(name, cls, ctx) {
     const resolved = ctx.icons?.(name);
     if (resolved)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/render-html",
-  "version": "0.2.0-beta.128",
+  "version": "0.2.0-beta.129",
   "description": "Dogsbay MD TreeNode → HTML with the Astro components' markup and classes. No highlighter, math or CSS compiler unless you pass one; Worker- and browser-safe",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,9 +30,9 @@
   "dependencies": {
     "htmlparser2": "^10.1.0",
     "markdown-it": "^14.3.0",
-    "@dogsbay/format-dogsbay-md": "0.2.0-beta.128",
-    "@dogsbay/serialize-core": "0.2.0-beta.128",
-    "@dogsbay/types": "0.2.0-beta.128"
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.129",
+    "@dogsbay/serialize-core": "0.2.0-beta.129",
+    "@dogsbay/types": "0.2.0-beta.129"
   },
   "peerDependencies": {
     "katex": "^0.16.0"