@dogsbay/format-astro 0.2.0-beta.127 → 0.2.0-beta.128

package/dist/serialize.js

@@ -176,6 +176,7 @@ export function escapeTemplate(s) {
 export function treeToAstro(nodes, options) {
     const ctx = {
         imports: new Set(),
+        diagramIds: new Map(),
         indent: 0,
         scripts: new Set(),
         mode: options?.mode ?? "template",
@@ -495,6 +496,9 @@ function templateInlineEmitters() {
             strike: (s) => `<s>${s}</s>`,
         }),
         link: (node, ctx) => {
+            // Inside a whole-card link, a link is its text (wholeCardLink)
+            if (cardLinkDepth > 0)
+                return ctx.recurse(node.children);
             // A link node an importer built directly never passed markdown-it's
             // scheme check: a `javascript:` href keeps its text and loses the link.
             if (!isSafeHref(node.href)) {
@@ -565,6 +569,8 @@ function htmlModeInlineEmitters() {
         // EXPRESSION, inside a string that becomes a `set:html` value. Astro never
         // parses it as markup, so the reader saw the braces and quotes.
         link: (node, ctx) => {
+            if (cardLinkDepth > 0)
+                return ctx.recurse(node.children);
             if (!isSafeHref(node.href)) {
                 ctx.report("link", `unsafe link target dropped (${node.href.slice(0, 40)})`);
                 return ctx.recurse(node.children);
@@ -1141,8 +1147,18 @@ function diagramToAstro(node, ctx) {
     ctx.imports.add("diagram");
     const lang = node.props?.lang || "mermaid";
     const code = node.props?.code ?? "";
-    const svg = node.props?.svg ?? "";
+    let svg = node.props?.svg ?? "";
     const title = node.props?.title;
+    // A Pele SVG's ids (`<prefix>-title`, `<prefix>-desc`, for aria-labelledby) are unique within
+    // its source page. A book view or an include can show the same diagram twice on one page, so
+    // the later copies are renamed; the prefix appears nowhere else in the SVG.
+    const prefix = /^<svg[^>]*\bclass="pele\b/.test(svg) ? /\sid="(dg-[0-9a-f]{12}(?:-\d+)?)-/.exec(svg)?.[1] : undefined;
+    if (prefix) {
+        const n = (ctx.diagramIds.get(prefix) ?? 0) + 1;
+        ctx.diagramIds.set(prefix, n);
+        if (n > 1)
+            svg = svg.split(prefix).join(`${prefix}-p${n}`);
+    }
     const attrs = [`lang="${escapeAttr(lang)}"`, `code={${escapeExpr(code)}}`, `svg={${escapeExpr(svg)}}`];
     if (title)
         attrs.push(componentAttr("title", title).trimStart());
@@ -1364,6 +1380,25 @@ function endpointToAstro(node, ctx) {
         `  <ApiCodePanel slot="code">${codeBody}</ApiCodePanel>\n` +
         `</ApiLayout>`);
 }
+/**
+ * Whole-card links being emitted. Inside one, a link in the card's body is its text: a browser
+ * ends the outer <a> at an inner one, so the rest of the card fell out of the link (and lost
+ * not-prose). The serializer is synchronous, so a depth count is enough.
+ */
+let cardLinkDepth = 0;
+function wholeCardLink(yes, fn) {
+    if (!yes)
+        return fn();
+    cardLinkDepth++;
+    try {
+        return fn();
+    }
+    finally {
+        cardLinkDepth--;
+    }
+}
+/** A card's title: not-prose, or docs.css's h3 rule (1.25rem, 2rem above) applies inside the card. */
+const CARD_TITLE_CLASS = "not-prose m-0 border-0 p-0 text-base font-semibold";
 function cardsToAstro(node, ctx) {
     ctx.imports.add("grid");
     ctx.imports.add("card");
@@ -1382,9 +1417,9 @@ function cardsToAstro(node, ctx) {
             const icon = card.props?.icon;
             // Description sources: inline content, children, or props.description.
             // Child blocks carry their own <p>, so they get a <div>: <p><p>…</p></p> is invalid HTML.
-            const blocks = childrenToAstro(card, ctx);
+            const blocks = wholeCardLink(!!href, () => childrenToAstro(card, ctx));
             const inner = blocks
-                || (card.inline ? inlineToTemplate(card.inline) : "")
+                || (card.inline ? wholeCardLink(!!href, () => inlineToTemplate(card.inline)) : "")
                 || (description ? escapeTemplate(description) : "");
             const descTag = blocks ? "div" : "p";
             // Icon renders inline before the title — picks up Lucide
@@ -1396,7 +1431,7 @@ function cardsToAstro(node, ctx) {
             if (icon) {
                 iconHtml = cardIconHtml(icon, title, ctx);
             }
-            const titleHtml = title ? `<h3 class="text-base font-semibold">${escapeTemplate(title)}</h3>` : "";
+            const titleHtml = title ? `<h3 class="${CARD_TITLE_CLASS}">${escapeTemplate(title)}</h3>` : "";
             // A description and a body are both shown (the description used to be dropped when a body existed).
             const lead = blocks && description
                 ? `<p class="text-sm text-muted-foreground mt-1 [text-decoration:none]">${escapeTemplate(description)}</p>`
@@ -1415,7 +1450,7 @@ function cardsToAstro(node, ctx) {
                 "title", "href", "description", "icon", "variant", "class", "tone",
             ]);
             if (href) {
-                return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" class="[text-decoration:none] text-foreground">\n${iconHtml}\n${titleHtml}\n${desc}\n</a>\n</CardContent>\n</Card>`;
+                return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" class="not-prose [text-decoration:none] text-foreground">\n${iconHtml}\n${titleHtml}\n${desc}\n</a>\n</CardContent>\n</Card>`;
             }
             return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n${iconHtml}\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;
         }).join("\n");
@@ -1448,9 +1483,9 @@ function standaloneCardToAstro(node, ctx) {
     const description = node.props?.description;
     const icon = node.props?.icon;
     // Child blocks carry their own <p>, so they get a <div>: <p><p>…</p></p> is invalid HTML.
-    const blocks = childrenToAstro(node, ctx);
+    const blocks = wholeCardLink(!!href, () => childrenToAstro(node, ctx));
     const inner = blocks
-        || (node.inline ? inlineToTemplate(node.inline) : "")
+        || (node.inline ? wholeCardLink(!!href, () => inlineToTemplate(node.inline)) : "")
         || (description ? escapeTemplate(description) : "");
     const descTag = blocks ? "div" : "p";
     // Icon renders inline before the title (same shape as the
@@ -1461,7 +1496,7 @@ function standaloneCardToAstro(node, ctx) {
         iconHtml = `<Icon name="${escapeAttr(icon)}" class="size-5 mb-2 text-muted-foreground" />`;
     }
     const titleHtml = title
-        ? `<h3 class="text-base font-semibold">${escapeTemplate(title)}</h3>`
+        ? `<h3 class="${CARD_TITLE_CLASS}">${escapeTemplate(title)}</h3>`
         : "";
     // A description and a body are both shown (the description used to be dropped when a body existed).
     const lead = blocks && description
@@ -1480,7 +1515,7 @@ function standaloneCardToAstro(node, ctx) {
         "title", "href", "description", "icon", "variant", "class", "tone",
     ]);
     if (href) {
-        return `<Card${classAttr}${passthrough}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" class="[text-decoration:none] text-foreground">\n${iconHtml}\n${titleHtml}\n${desc}\n</a>\n</CardContent>\n</Card>`;
+        return `<Card${classAttr}${passthrough}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" class="not-prose [text-decoration:none] text-foreground">\n${iconHtml}\n${titleHtml}\n${desc}\n</a>\n</CardContent>\n</Card>`;
     }
     return `<Card${classAttr}${passthrough}>\n<CardContent class="p-0">\n${iconHtml}\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/format-astro",
-  "version": "0.2.0-beta.127",
+  "version": "0.2.0-beta.128",
   "description": "Astro format plugin for Dogsbay — export TreeNode[] to Astro component markup",
   "type": "module",
   "main": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "MIT",
   "dependencies": {
     "markdown-it": "^14.3.0",
-    "@dogsbay/format-dogsbay-md": "0.2.0-beta.127",
-    "@dogsbay/serialize-core": "0.2.0-beta.127",
-    "@dogsbay/site-files": "0.2.0-beta.127",
-    "@dogsbay/render-html": "0.2.0-beta.127",
-    "@dogsbay/types": "0.2.0-beta.127",
-    "@dogsbay/ui": "0.2.0-beta.127"
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.128",
+    "@dogsbay/render-html": "0.2.0-beta.128",
+    "@dogsbay/serialize-core": "0.2.0-beta.128",
+    "@dogsbay/site-files": "0.2.0-beta.128",
+    "@dogsbay/types": "0.2.0-beta.128",
+    "@dogsbay/ui": "0.2.0-beta.128"
   },
   "repository": {
     "type": "git",