@dogsbay/render-html 0.0.0-stage → 0.2.0-beta.116

package/dist/css-tools.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Every class name in the page's class attributes, entity-decoded. Markup
+ * from other tools (KaTeX, Mermaid), between the foreign markers, is skipped:
+ * its class names are not Tailwind utilities.
+ */
+export declare function pageClasses(html: string, into?: Set<string>): Set<string>;
+/**
+ * Whitespace and comment removal. Tailwind's own minifier (Lightning CSS)
+ * is native, so it cannot run in a Worker; this keeps strings intact and
+ * only drops what CSS never needs.
+ */
+export declare function minifyCss(css: string): string;

package/dist/css-tools.js

@@ -0,0 +1,75 @@
+/**
+ * Helpers for compiling the stylesheets in css/ for a page: the class names a
+ * page uses (Tailwind compiles only those) and a minifier that runs anywhere.
+ * @dogsbay/render uses both; dogsbay-ssg uses minifyCss, and keeps its own
+ * collectClasses (the same extraction, with a memo for whole-site builds).
+ */
+import { FOREIGN_END, FOREIGN_START, unesc } from "./html.js";
+const FOREIGN_BLOCK = new RegExp(`${FOREIGN_START}[\\s\\S]*?${FOREIGN_END}`, "g");
+/**
+ * Every class name in the page's class attributes, entity-decoded. Markup
+ * from other tools (KaTeX, Mermaid), between the foreign markers, is skipped:
+ * its class names are not Tailwind utilities.
+ */
+export function pageClasses(html, into = new Set()) {
+    const page = html.includes(FOREIGN_START) ? html.replace(FOREIGN_BLOCK, "") : html;
+    // Only inside tags: text that merely looks like class="…" (escaped prose, code) must
+    // not become CSS. A class compiled from text once wrote `</style>` into the stylesheet.
+    for (const tag of page.matchAll(/<[a-zA-Z][^<>]*>/g))
+        for (const m of tag[0].matchAll(/\sclass\s*=\s*(?:"([^"]*)"|'([^']*)')/g))
+            for (const tok of (m[1] ?? m[2]).split(/\s+/))
+                if (tok)
+                    into.add(unesc(tok));
+    return into;
+}
+/**
+ * Whitespace and comment removal. Tailwind's own minifier (Lightning CSS)
+ * is native, so it cannot run in a Worker; this keeps strings intact and
+ * only drops what CSS never needs.
+ */
+export function minifyCss(css) {
+    let out = "";
+    let i = 0;
+    const n = css.length;
+    while (i < n) {
+        const c = css[i];
+        if (c === '"' || c === "'") {
+            const end = findStringEnd(css, i);
+            out += css.slice(i, end);
+            i = end;
+            continue;
+        }
+        if (c === "/" && css[i + 1] === "*") {
+            const end = css.indexOf("*/", i + 2);
+            i = end < 0 ? n : end + 2;
+            // A comment separates tokens: `a/**/b` must not become `ab`.
+            if (/[\w-]$/.test(out) && /^[\w-]/.test(css[i] ?? ""))
+                out += " ";
+            continue;
+        }
+        if (/\s/.test(c)) {
+            while (i < n && /\s/.test(css[i]))
+                i++;
+            const prev = out[out.length - 1];
+            const next = css[i];
+            // Keep one space only where it separates tokens (selectors, values, "and", combinators need it).
+            if (prev && next && !"{};,>~".includes(prev) && !"{};,>~".includes(next) && !(prev === ":" && out.endsWith("):")))
+                out += " ";
+            continue;
+        }
+        if (c === ";" && css[i + 1] === "}") {
+            i++;
+            continue;
+        }
+        out += c;
+        i++;
+    }
+    return out;
+}
+function findStringEnd(s, start) {
+    const q = s[start];
+    let i = start + 1;
+    while (i < s.length && s[i] !== q)
+        i += s[i] === "\\" ? 2 : 1;
+    return i + 1;
+}

package/dist/favicon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The Dogsbay paw, the default favicon for pages Dogsbay renders: dogsbay-ssg
+ * writes it as _dogsbay/assets/favicon.svg, and a standalone page inlines it
+ * as a data: URI so the browser never requests /favicon.ico.
+ *
+ * Source, with the design notes: assets/favicon.svg (from the dogsbay.ai
+ * site). Filled rather than stroked so it does not read as a face at 16px,
+ * and theme-aware (a prefers-color-scheme rule inside the SVG), because the
+ * browser composites a favicon against a light or a dark tab strip.
+ */
+export declare const FAVICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><style> .paw { fill: #1e6e7d; } @media (prefers-color-scheme: dark) { .paw { fill: #7fd3e0; } } </style><g class=\"paw\"><ellipse cx=\"14.5\" cy=\"29.5\" rx=\"6.3\" ry=\"8.6\" transform=\"rotate(-22 14.5 29.5)\"/><ellipse cx=\"26\" cy=\"17.5\" rx=\"6.3\" ry=\"9.2\" transform=\"rotate(-8 26 17.5)\"/><ellipse cx=\"40\" cy=\"17.5\" rx=\"6.3\" ry=\"9.2\" transform=\"rotate(8 40 17.5)\"/><ellipse cx=\"51.5\" cy=\"29.5\" rx=\"6.3\" ry=\"8.6\" transform=\"rotate(22 51.5 29.5)\"/><path d=\"M32 36c9.8 0 16.8 6.8 16.8 13.8S41.8 59.5 32 59.5 15.2 54.3 15.2 47.3 22.2 36 32 36Z\"/></g></svg>";
+/** The favicon as a data: URI, for <link rel="icon"> in a self-contained page. */
+export declare const FAVICON_DATA_URI: string;

package/dist/favicon.js

@@ -0,0 +1,13 @@
+/**
+ * The Dogsbay paw, the default favicon for pages Dogsbay renders: dogsbay-ssg
+ * writes it as _dogsbay/assets/favicon.svg, and a standalone page inlines it
+ * as a data: URI so the browser never requests /favicon.ico.
+ *
+ * Source, with the design notes: assets/favicon.svg (from the dogsbay.ai
+ * site). Filled rather than stroked so it does not read as a face at 16px,
+ * and theme-aware (a prefers-color-scheme rule inside the SVG), because the
+ * browser composites a favicon against a light or a dark tab strip.
+ */
+export const FAVICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><style> .paw { fill: #1e6e7d; } @media (prefers-color-scheme: dark) { .paw { fill: #7fd3e0; } } </style><g class=\"paw\"><ellipse cx=\"14.5\" cy=\"29.5\" rx=\"6.3\" ry=\"8.6\" transform=\"rotate(-22 14.5 29.5)\"/><ellipse cx=\"26\" cy=\"17.5\" rx=\"6.3\" ry=\"9.2\" transform=\"rotate(-8 26 17.5)\"/><ellipse cx=\"40\" cy=\"17.5\" rx=\"6.3\" ry=\"9.2\" transform=\"rotate(8 40 17.5)\"/><ellipse cx=\"51.5\" cy=\"29.5\" rx=\"6.3\" ry=\"8.6\" transform=\"rotate(22 51.5 29.5)\"/><path d=\"M32 36c9.8 0 16.8 6.8 16.8 13.8S41.8 59.5 32 59.5 15.2 54.3 15.2 47.3 22.2 36 32 36Z\"/></g></svg>";
+/** The favicon as a data: URI, for <link rel="icon"> in a self-contained page. */
+export const FAVICON_DATA_URI = `data:image/svg+xml,${encodeURIComponent(FAVICON_SVG)}`;

package/dist/file-tree.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The `:::files` tree, written once for both pipelines: FileTree.astro renders it,
+ * and dogsbay-ssg copies this file (scripts/sync-astro-styles.mjs) and calls it.
+ * Each pipeline turns an entry's inline Markdown into `label` HTML itself.
+ */
+export interface FileTreeItem {
+    /** The entry's label as HTML (already escaped). */
+    label: string;
+    /** A folder: it has entries, or its name ends in "/". */
+    folder: boolean;
+    children: FileTreeItem[];
+}
+/** The whole tree, in a bordered, monospaced box. */
+export declare function fileTreeHtml(items: FileTreeItem[], extraClass?: string): string;

package/dist/file-tree.js

@@ -0,0 +1,20 @@
+// Generated by packages/render-html/scripts/sync-sources.mjs from @dogsbay/ui/src/files/markup.ts. Do not edit.
+/**
+ * The `:::files` tree, written once for both pipelines: FileTree.astro renders it,
+ * and dogsbay-ssg copies this file (scripts/sync-astro-styles.mjs) and calls it.
+ * Each pipeline turns an entry's inline Markdown into `label` HTML itself.
+ */
+const svg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" focusable="false">${body}</svg>`;
+// Lucide folder and file (ISC licence).
+const FOLDER = svg('<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>');
+const FILE = svg('<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>');
+function list(items, nested) {
+    const cls = nested ? "m-0 ml-2 list-none border-l border-border pl-4" : "m-0 list-none p-0";
+    return `<ul class="${cls}">${items
+        .map((it) => `<li class="my-0.5" data-kind="${it.folder ? "folder" : "file"}"><span class="inline-flex items-center gap-1.5">${it.folder ? FOLDER : FILE}<span>${it.label}</span></span>${it.children.length ? list(it.children, true) : ""}</li>`)
+        .join("")}</ul>`;
+}
+/** The whole tree, in a bordered, monospaced box. */
+export function fileTreeHtml(items, extraClass = "") {
+    return `<div class="not-prose my-4 overflow-x-auto rounded-lg border bg-card p-3 font-mono text-sm${extraClass ? ` ${extraClass}` : ""}" data-component="files">${list(items, false)}</div>`;
+}

package/dist/html.d.ts

@@ -0,0 +1,17 @@
+/** HTML escaping and attribute helpers shared by the renderer and layout. */
+export declare function esc(s: unknown): string;
+/** Render `{ a: "x", b: true, c: false }` as ` a="x" b`. Null, undefined and false are dropped. */
+export declare function attrs(map: Record<string, unknown>): string;
+/** Keep the attributes an author may set on any element: id, class, style, data-*, aria-*. */
+export declare function passthrough(props: Record<string, unknown> | undefined, extraClass?: string): Record<string, unknown>;
+/** Lowercase, hyphenated, ASCII-safe id. */
+export declare function slugify(s: string): string;
+/** Decode the entities `esc` writes (and `&amp;` first-class), in one pass. */
+export declare function unesc(s: string): string;
+/**
+ * Around markup made by other tools (KaTeX, Mermaid SVG), whose class names
+ * are their own: the stylesheet build skips it, so a class like "underline"
+ * or "hidden" is not taken as a Tailwind utility. See css-build.ts.
+ */
+export declare const FOREIGN_START = "<!--db-foreign-->";
+export declare const FOREIGN_END = "<!--/db-foreign-->";

package/dist/html.js

@@ -0,0 +1,53 @@
+/** HTML escaping and attribute helpers shared by the renderer and layout. */
+const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+export function esc(s) {
+    return String(s ?? "").replace(/[&<>"']/g, (c) => ESC[c]);
+}
+/** Render `{ a: "x", b: true, c: false }` as ` a="x" b`. Null, undefined and false are dropped. */
+export function attrs(map) {
+    let out = "";
+    for (const [k, v] of Object.entries(map)) {
+        // An empty alt is meaningful (a decorative image) and must be written.
+        if (v == null || v === false || (v === "" && k !== "alt"))
+            continue;
+        out += v === true ? ` ${k}` : ` ${k}="${esc(v)}"`;
+    }
+    return out;
+}
+/** Keep the attributes an author may set on any element: id, class, style, data-*, aria-*. */
+export function passthrough(props, extraClass) {
+    const out = {};
+    const cls = [extraClass, props?.class].filter(Boolean).join(" ");
+    if (cls)
+        out.class = cls;
+    if (!props)
+        return out;
+    for (const [k, v] of Object.entries(props)) {
+        if (k === "id" || k === "style" || k.startsWith("data-") || k.startsWith("aria-"))
+            out[k] = v;
+    }
+    return out;
+}
+/** Lowercase, hyphenated, ASCII-safe id. */
+export function slugify(s) {
+    return (s
+        .toLowerCase()
+        .normalize("NFKD")
+        .replace(/[̀-ͯ]/g, "")
+        .replace(/<[^>]*>/g, "")
+        .replace(/[^\p{L}\p{N}\s_-]/gu, "")
+        .trim()
+        .replace(/[\s_]+/g, "-")
+        .replace(/-+/g, "-") || "section");
+}
+/** Decode the entities `esc` writes (and `&amp;` first-class), in one pass. */
+export function unesc(s) {
+    return s.replace(/&(amp|lt|gt|quot|#39|#x27|apos);/g, (_, e) => ({ amp: "&", lt: "<", gt: ">", quot: '"', "#39": "'", "#x27": "'", apos: "'" })[e]);
+}
+/**
+ * Around markup made by other tools (KaTeX, Mermaid SVG), whose class names
+ * are their own: the stylesheet build skips it, so a class like "underline"
+ * or "hidden" is not taken as a Tailwind utility. See css-build.ts.
+ */
+export const FOREIGN_START = "<!--db-foreign-->";
+export const FOREIGN_END = "<!--/db-foreign-->";

package/dist/icons.d.ts

@@ -0,0 +1,8 @@
+export declare function icon(name: string, cls?: string): string;
+export declare function hasIcon(name: string): boolean;
+/** Admonition variants. Aliases share a look but keep their own label. */
+export declare const CALLOUTS: Record<string, {
+    variant: string;
+    icon: string;
+    label: string;
+}>;

package/dist/icons.js

@@ -0,0 +1,65 @@
+/**
+ * Inline SVG icons (Lucide, ISC licence). Inline so pages need no
+ * icon font or network, which keeps them working from file://.
+ */
+const svg = (body, cls = "db-icon") => `<svg class="${cls}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+const PATHS = {
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    lightbulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
+    "alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    "alert-octagon": '<path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>',
+    "message-square-warning": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/>',
+    "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+    "circle-x": '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+    "circle-help": '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+    bug: '<path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/>',
+    "file-text": '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/>',
+    quote: '<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>',
+    "flask-conical": '<path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/>',
+    flame: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
+    copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+    check: '<path d="M20 6 9 17l-5-5"/>',
+    "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+    "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+    "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+    search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+    menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
+    x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+    moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+    "external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+    link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+    rocket: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
+    book: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>',
+    globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
+    "git-branch": '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+    "list-tree": '<path d="M21 12h-8"/><path d="M21 6H8"/><path d="M21 18h-8"/><path d="M3 6v4c0 1.1.9 2 2 2h3"/><path d="M3 10v6c0 1.1.9 2 2 2h3"/>',
+    printer: '<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/>',
+};
+export function icon(name, cls) {
+    const body = PATHS[name];
+    return body ? svg(body, cls) : "";
+}
+export function hasIcon(name) {
+    return name in PATHS;
+}
+/** Admonition variants. Aliases share a look but keep their own label. */
+export const CALLOUTS = {
+    note: { variant: "note", icon: "info", label: "Note" },
+    info: { variant: "info", icon: "info", label: "Info" },
+    tip: { variant: "tip", icon: "lightbulb", label: "Tip" },
+    hint: { variant: "tip", icon: "lightbulb", label: "Hint" },
+    success: { variant: "success", icon: "circle-check", label: "Success" },
+    important: { variant: "important", icon: "message-square-warning", label: "Important" },
+    warning: { variant: "warning", icon: "alert-triangle", label: "Warning" },
+    attention: { variant: "warning", icon: "alert-triangle", label: "Attention" },
+    caution: { variant: "caution", icon: "alert-octagon", label: "Caution" },
+    danger: { variant: "danger", icon: "flame", label: "Danger" },
+    error: { variant: "danger", icon: "circle-x", label: "Error" },
+    failure: { variant: "danger", icon: "circle-x", label: "Failure" },
+    question: { variant: "question", icon: "circle-help", label: "Question" },
+    bug: { variant: "danger", icon: "bug", label: "Bug" },
+    example: { variant: "example", icon: "flask-conical", label: "Example" },
+    abstract: { variant: "note", icon: "file-text", label: "Abstract" },
+    quote: { variant: "quote", icon: "quote", label: "Quote" },
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @dogsbay/render-html: Dogsbay MD TreeNode → HTML, with the Astro components'
+ * markup and Tailwind classes. Syntax highlighting is a `Highlighter` you pass
+ * (`@dogsbay/highlight`, or none for plain text); math is a function you pass
+ * (`@dogsbay/render-html/math` for KaTeX, or none to keep LaTeX). This entry
+ * imports neither, so it carries no Shiki, KaTeX or Node built-ins.
+ */
+export * from "./render.js";
+export * from "./lines.js";
+export { esc, attrs, passthrough, slugify, unesc } from "./html.js";
+export { icon, hasIcon, CALLOUTS } from "./icons.js";

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ * @dogsbay/render-html: Dogsbay MD TreeNode → HTML, with the Astro components'
+ * markup and Tailwind classes. Syntax highlighting is a `Highlighter` you pass
+ * (`@dogsbay/highlight`, or none for plain text); math is a function you pass
+ * (`@dogsbay/render-html/math` for KaTeX, or none to keep LaTeX). This entry
+ * imports neither, so it carries no Shiki, KaTeX or Node built-ins.
+ */
+export * from "./render.js";
+export * from "./lines.js";
+export { esc, attrs, passthrough, slugify, unesc } from "./html.js";
+export { icon, hasIcon, CALLOUTS } from "./icons.js";

package/dist/kbd-variants.d.ts

@@ -0,0 +1,2 @@
+/** Kbd.astro's classes, shared with dogsbay-ssg (copied by scripts/sync-astro-styles.mjs). */
+export declare const KBD_CLASS = "pointer-events-none inline-flex h-5 items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-[0_1px_0_1px] shadow-muted";

package/dist/kbd-variants.js

@@ -0,0 +1,3 @@
+// Generated by packages/render-html/scripts/sync-sources.mjs from @dogsbay/ui/src/kbd/variants.ts. Do not edit.
+/** Kbd.astro's classes, shared with dogsbay-ssg (copied by scripts/sync-astro-styles.mjs). */
+export const KBD_CLASS = "pointer-events-none inline-flex h-5 items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-[0_1px_0_1px] shadow-muted";

package/dist/lines.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Line annotations, as CodeRich.astro takes them: highlighted lines, diff
+ * additions and removals, and line numbers. `[!code …]` markers in the code
+ * (Shiki's notation) are read too.
+ */
+export interface CodeOptions {
+    highlights?: number[];
+    lineNumbers?: boolean;
+    diffAdd?: number[];
+    diffRemove?: number[];
+}
+export interface Highlighter {
+    /** Uncached rendering; `code` is the memoised entry point. */
+    render(code: string, lang: string | undefined, opts?: CodeOptions): string;
+    /** Returns a `<pre class="shiki">…</pre>` block. */
+    code(code: string, lang: string | undefined, opts?: CodeOptions): string;
+    /** Resolved language id actually used ("text" when unknown). */
+    resolve(lang: string | undefined): string;
+    /** Whether `code` would be served from the cache. */
+    has(code: string, lang: string | undefined, opts?: CodeOptions): boolean;
+    /** Put a block rendered elsewhere (a worker thread) in the cache, as `code` would have. The caller vouches for it: whoever rendered it had loaded what the block needs. */
+    prime(code: string, lang: string | undefined, opts: CodeOptions, html: string): void;
+    /** The cache: entries, characters held, and hits and misses so far; `unloaded`, blocks rendered plain because their grammar was not loaded. */
+    cacheStats(): {
+        entries: number;
+        chars: number;
+        hits: number;
+        misses: number;
+        unloaded?: number;
+    };
+    /**
+     * Load what these blocks need (`highlightInputs` lists a tree's), before
+     * they render: `code` and `render` are synchronous. A block's code matters
+     * as well as its tag: a markdown block reaches the grammars its fences name.
+     * A tag alone loads everything that tag could reach. Optional: a highlighter
+     * with everything loaded up front has none.
+     */
+    load?(blocks: Iterable<string | undefined | {
+        lang: string | undefined;
+        code: string;
+    }>): Promise<void>;
+}
+/** Language names that mean "no highlighting". */
+export declare const PLAIN: Set<string>;
+/** Parse "1,3-5" into [1,3,4,5]. */
+export declare function parseLineRanges(spec: unknown): number[];
+/** CodeRich's gutter: the line number and a diff marker (+, −, or a space) in one column. */
+export declare function gutterHtml(n: number, kind: string, lineNumbers: boolean, diffs: boolean): string;
+/** Code as escaped text, with the annotations and gutter a highlighted block has. `src` has had its unprocessable markers removed. */
+export declare function plainBlock(src: string, opts?: CodeOptions): string;
+/**
+ * Applies the line notation without a grammar, as Shiki's notation transformers
+ * do with one: a marker at the end of a line annotates that line (and the next
+ * N-1 with `:N`); a line that is only a marker annotates the lines after it and
+ * is removed. Other markers (focus, error, word) are left for stripping.
+ */
+export declare function applyLineNotation(code: string, opts?: CodeOptions): {
+    code: string;
+    opts: CodeOptions;
+};
+export declare function createPlainHighlighter(): Highlighter;
+export declare const plainHighlighter: Highlighter;

package/dist/lines.js

@@ -0,0 +1,119 @@
+/**
+ * The code-block contract without Shiki: line annotations, the gutter, and a
+ * plain highlighter that renders code as escaped text with the same markup
+ * (`pre.shiki.shiki-plain`, one `span.line` per line). `render.ts` depends only
+ * on this file, so a renderer built without `highlight.ts` carries no grammar,
+ * theme or TextMate code. `createHighlighter` (highlight.ts) uses the same
+ * plain path for unknown languages.
+ */
+import { stripUnprocessableMarkers } from "./code-markers.js";
+import { esc } from "./html.js";
+/** Language names that mean "no highlighting". */
+export const PLAIN = new Set(["", "text", "txt", "plain", "plaintext", "none", "output", "log", "code", "codeblock"]);
+/** Parse "1,3-5" into [1,3,4,5]. */
+export function parseLineRanges(spec) {
+    if (spec == null)
+        return [];
+    const out = [];
+    for (const part of String(spec).replace(/[{}]/g, "").split(/[,\s]+/)) {
+        const m = /^(\d+)(?:-(\d+))?$/.exec(part);
+        if (!m)
+            continue;
+        const a = Number(m[1]);
+        const b = m[2] ? Number(m[2]) : a;
+        for (let i = a; i <= Math.min(b, a + 5000); i++)
+            out.push(i);
+    }
+    return out;
+}
+/** CodeRich's gutter: the line number and a diff marker (+, −, or a space) in one column. */
+export function gutterHtml(n, kind, lineNumbers, diffs) {
+    if (!lineNumbers && !diffs)
+        return "";
+    const parts = [];
+    if (lineNumbers)
+        parts.push(String(n).padStart(3));
+    if (diffs)
+        parts.push(kind === "add" ? "+" : kind === "remove" ? "−" : " ");
+    return `<span class="gutter${kind ? ` ${kind}` : ""}" data-pagefind-ignore>${parts.join(" ")}</span>`;
+}
+/** Code as escaped text, with the annotations and gutter a highlighted block has. `src` has had its unprocessable markers removed. */
+export function plainBlock(src, opts = {}) {
+    const marks = new Set(opts.highlights ?? []);
+    const adds = new Set(opts.diffAdd ?? []);
+    const removes = new Set(opts.diffRemove ?? []);
+    const cls = opts.lineNumbers ? " line-numbers" : "";
+    const diffs = adds.size > 0 || removes.size > 0;
+    const out = src.split("\n").map((l, i) => {
+        const n = i + 1;
+        const kind = adds.has(n) ? "add" : removes.has(n) ? "remove" : "";
+        const classes = ["line", marks.has(n) && "highlighted", kind && `diff ${kind}`].filter(Boolean).join(" ");
+        return `<span class="${classes}">${gutterHtml(n, kind, !!opts.lineNumbers, diffs)}${esc(l)}</span>`;
+    });
+    return `<pre class="shiki shiki-plain${cls}" tabindex="0"><code>${out.join("\n")}</code></pre>`;
+}
+/**
+ * A highlighter that does not highlight: every block is plain text, and the
+ * language is kept for the block's label. Line notation (`[!code ++]`,
+ * `--`, `highlight`) is applied; other markers are removed. The default when a caller passes
+ * none, so syntax highlighting is opt-in for library users.
+ */
+/** Shiki's line notation: `[!code ++]`, `[!code --]`, `[!code highlight]` / `[!code hl]`, with an optional `:N` line count. */
+const NOTATION = /[ \t]*(?:(?:\/\/|#|--|<!--|\/\*|;)[ \t]*)?\[!code (\+\+|--|highlight|hl)(?::(\d+))?\](?:[ \t]*(?:-->|\*\/))?/;
+/**
+ * Applies the line notation without a grammar, as Shiki's notation transformers
+ * do with one: a marker at the end of a line annotates that line (and the next
+ * N-1 with `:N`); a line that is only a marker annotates the lines after it and
+ * is removed. Other markers (focus, error, word) are left for stripping.
+ */
+export function applyLineNotation(code, opts = {}) {
+    if (!code.includes("[!code"))
+        return { code, opts };
+    const marks = new Set(opts.highlights ?? []);
+    const adds = new Set(opts.diffAdd ?? []);
+    const removes = new Set(opts.diffRemove ?? []);
+    const out = [];
+    let pending;
+    const mark = (n, kind) => (kind === "++" ? adds : kind === "--" ? removes : marks).add(n);
+    for (const line of code.split("\n")) {
+        const m = NOTATION.exec(line);
+        const rest = m ? line.replace(NOTATION, "") : line;
+        if (m && rest.trim() === "") {
+            pending = { kind: m[1], left: Number(m[2] ?? 1) };
+            continue;
+        }
+        out.push(rest);
+        const n = out.length;
+        if (pending && pending.left > 0) {
+            mark(n, pending.kind);
+            if (--pending.left === 0)
+                pending = undefined;
+        }
+        if (m) {
+            const count = Number(m[2] ?? 1);
+            mark(n, m[1]);
+            if (count > 1)
+                pending = { kind: m[1], left: count - 1 };
+        }
+    }
+    return { code: out.join("\n"), opts: { ...opts, highlights: [...marks].sort((a, b) => a - b), diffAdd: [...adds].sort((a, b) => a - b), diffRemove: [...removes].sort((a, b) => a - b) } };
+}
+export function createPlainHighlighter() {
+    const resolve = (lang) => {
+        const l = (lang ?? "").toLowerCase().trim();
+        return PLAIN.has(l) ? "text" : l;
+    };
+    const render = (code, _lang, opts = {}) => {
+        const applied = applyLineNotation(code.replace(/\n$/, ""), opts);
+        return plainBlock(stripUnprocessableMarkers(applied.code, true), applied.opts);
+    };
+    return {
+        resolve,
+        render,
+        code: render,
+        has: () => false,
+        prime: () => { },
+        cacheStats: () => ({ entries: 0, chars: 0, hits: 0, misses: 0 }),
+    };
+}
+export const plainHighlighter = createPlainHighlighter();

package/dist/math.d.ts

@@ -0,0 +1 @@
+export declare function katexMath(latex: string, display: boolean): string;

package/dist/math.js

@@ -0,0 +1,13 @@
+/**
+ * LaTeX → HTML with MathML for screen readers, at build time: no script on
+ * the page. Passed to the renderer as `RenderContext.math` when ssg.math is
+ * on, so a renderer built without it carries no KaTeX.
+ */
+import katex from "katex";
+export function katexMath(latex, display) {
+    // The visual copy is aria-hidden and repeats the MathML, so Pagefind skips it. The FOREIGN
+    // markers render.ts adds keep KaTeX's own class names (underline, overline…) out of the Tailwind candidates.
+    return katex
+        .renderToString(latex, { displayMode: display, throwOnError: false, output: "htmlAndMathml" })
+        .replace(/(<span class="katex-html" aria-hidden="true")/g, "$1 data-pagefind-ignore");
+}