@dogsbay/format-astro 0.2.0-beta.159 → 0.2.0-beta.160

package/dist/serialize.js

@@ -1,4 +1,4 @@
-import { walkInline, applyTextFlags, renderLeaf, indent, isSafeHref, apiPageLayout, apiSymbolLevels, renderAroundGroup, isDetailsSheet, stepLead, stepTitle, } from "@dogsbay/serialize-core";
+import { walkInline, applyTextFlags, renderLeaf, indent, isSafeHref, apiPageLayout, apiSymbolLevels, renderAroundGroup, isDetailsSheet, isEmptyTableHead, cardBodyHasLink, stepLead, stepTitle, } from "@dogsbay/serialize-core";
 import { parseInline } from "@dogsbay/format-dogsbay-md";
 import { decorateDiff, hasDiffMarks } from "./diff-decoration.js";
 import { TAB_GLYPH, tabDiffSignal } from "@dogsbay/render-html/diff";
@@ -310,6 +310,9 @@ function nodeToAstroBase(node, ctx) {
         case "table":
             return tableToAstro(node, ctx);
         case "thead":
+            // a header row with no text (`| | |`, a headerless table) is no header (as render-html)
+            if (isEmptyTableHead(node))
+                return "";
             ctx.imports.add("table");
             return `<TableHeader>\n${childrenToAstro(node, ctx)}\n</TableHeader>`;
         case "tbody":
@@ -656,9 +659,12 @@ function proseToAstro(node, ctx) {
 }
 /** TableHead's classes, for a header row's empty cell written as a plain `td`. */
 const EMPTY_HEADER_CELL_CLASS = "px-2 py-2 text-left align-bottom font-semibold text-muted-foreground";
-/** A card title's heading: one level below the last heading on the page, h6 at most. */
-function cardTitleTag(ctx) {
-    return `h${Math.min((ctx.lastHeading ?? 1) + 1, 6)}`;
+/**
+ * A card's title is text styled as one, not a heading (as render-html): a grid of cards is not a
+ * section of the page, and as headings its titles filled the outline and a reader's heading list.
+ */
+function cardTitleTag(_ctx) {
+    return "div";
 }
 function headingToAstro(node, ctx) {
     const level = node.props?.level ?? 1;
@@ -1528,6 +1534,8 @@ function wholeCardLink(yes, fn) {
 }
 /** 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";
+/** Marks a card title for styles and tests (it is a div, not a heading). */
+const CARD_TITLE_ATTR = "data-card-title";
 /**
  * A card group's columns, responsive as render-html draws them (its GRID_COLS): one column on a
  * phone, then up to `cols` (1–6) by Grid's breakpoints (0, 640, 768, 1024). Default 2. A list
@@ -1562,10 +1570,12 @@ function cardsToAstro(node, ctx) {
             const before = ctx.lastHeading;
             // 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 = wholeCardLink(!!href, () => childrenToAstro(card, ctx));
+            // A body with links of its own: the title links, not the whole card (cardBodyHasLink)
+            const whole = !!href && (!title || !cardBodyHasLink([card.children, card.inline]));
+            const blocks = wholeCardLink(whole, () => childrenToAstro(card, ctx));
             ctx.lastHeading = before;
             const inner = blocks
-                || (card.inline ? wholeCardLink(!!href, () => inlineToTemplate(card.inline)) : "")
+                || (card.inline ? wholeCardLink(whole, () => inlineToTemplate(card.inline)) : "")
                 || (description ? escapeTemplate(description) : "");
             const descTag = blocks ? "div" : "p";
             // Icon renders inline before the title — picks up Lucide
@@ -1577,7 +1587,8 @@ function cardsToAstro(node, ctx) {
             if (icon) {
                 iconHtml = cardIconHtml(icon, title, ctx);
             }
-            const titleHtml = title ? `<${tag} class="${CARD_TITLE_CLASS}">${escapeTemplate(title)}</${tag}>` : "";
+            const titleText = href && !whole ? `<a href="${escapeAttr(href)}">${escapeTemplate(title)}</a>` : escapeTemplate(title);
+            const titleHtml = title ? `<${tag} class="${CARD_TITLE_CLASS}" ${CARD_TITLE_ATTR}>${titleText}</${tag}>` : "";
             // 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>`
@@ -1588,14 +1599,14 @@ function cardsToAstro(node, ctx) {
             // A tone (TONES; the card's own, else the group's) sets the card's
             // border and tint: Card's tailwind-variants merge replaces bg-card
             const toned = lookup(CARD_TONE_CLASSES, card.props?.tone ?? node.props?.tone);
-            const cardDefaultClass = href
+            const cardDefaultClass = whole
                 ? toned ? `p-4 ${toned} hover:shadow-md transition-colors` : "p-4 hover:border-foreground/20 transition-colors"
                 : toned ? `p-4 ${toned}` : "p-4";
             const cardClassAttr = mergeClassAttr(cardDefaultClass, card.props?.class);
             const cardPass = renderPassthroughAttrs(card.props, [
                 "title", "href", "description", "icon", "variant", "class", "tone",
             ]);
-            if (href) {
+            if (whole) {
                 return `<Card${cardClassAttr}${cardPass}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" data-variant="card" 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${iconHtml}\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;
@@ -1632,16 +1643,17 @@ function standaloneCardToAstro(node, ctx) {
     const tag = cardTitleTag(ctx);
     const before = ctx.lastHeading;
     // Child blocks carry their own <p>, so they get a <div>: <p><p>…</p></p> is invalid HTML.
-    const blocks = wholeCardLink(!!href, () => childrenToAstro(node, ctx));
+    const whole = !!href && (!title || !cardBodyHasLink([node.children, node.inline]));
+    const blocks = wholeCardLink(whole, () => childrenToAstro(node, ctx));
     ctx.lastHeading = before;
     const inner = blocks
-        || (node.inline ? wholeCardLink(!!href, () => inlineToTemplate(node.inline)) : "")
+        || (node.inline ? wholeCardLink(whole, () => inlineToTemplate(node.inline)) : "")
         || (description ? escapeTemplate(description) : "");
     const descTag = blocks ? "div" : "p";
     // Icon renders inline before the title, a name or an image path, as in a card group
     const iconHtml = icon ? cardIconHtml(icon, title, ctx) : "";
     const titleHtml = title
-        ? `<${tag} class="${CARD_TITLE_CLASS}">${escapeTemplate(title)}</${tag}>`
+        ? `<${tag} class="${CARD_TITLE_CLASS}" ${CARD_TITLE_ATTR}>${href && !whole ? `<a href="${escapeAttr(href)}">${escapeTemplate(title)}</a>` : escapeTemplate(title)}</${tag}>`
         : "";
     // A description and a body are both shown (the description used to be dropped when a body existed).
     const lead = blocks && description
@@ -1652,14 +1664,14 @@ function standaloneCardToAstro(node, ctx) {
         : "");
     // A tone (TONES), as on a card in a group (cardsToAstro)
     const toned = lookup(CARD_TONE_CLASSES, node.props?.tone);
-    const cardDefaultClass = href
+    const cardDefaultClass = whole
         ? toned ? `p-4 ${toned} hover:shadow-md transition-colors` : "p-4 hover:border-foreground/20 transition-colors"
         : toned ? `p-4 ${toned}` : "p-4";
     const classAttr = mergeClassAttr(cardDefaultClass, node.props?.class);
     const passthrough = renderPassthroughAttrs(node.props, [
         "title", "href", "description", "icon", "variant", "class", "tone",
     ]);
-    if (href) {
+    if (whole) {
         return `<Card${classAttr}${passthrough}>\n<CardContent class="p-0">\n<a href="${escapeAttr(href)}" data-variant="card" 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${iconHtml}\n${titleHtml}\n${desc}\n</CardContent>\n</Card>`;

package/dist/theme-css.js

@@ -104,7 +104,7 @@ export function generateGlobalCss() {
 .docs-prose {
   line-height: 1.7;
 
-  /* A heading that is part of a component (a card title: h3.not-prose) keeps the component look */
+  /* A heading inside a component (.not-prose) keeps the component look */
   & h1:not(.dba-api *, .not-prose, .not-prose *) { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -0.025em; }
   & h2:not(.dba-api *, .not-prose, .not-prose *) { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; line-height: 1.3; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; letter-spacing: -0.015em; }
   & h3:not(.dba-api *, .not-prose, .not-prose *) { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; line-height: 1.4; }

package/package.json

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