@commentray/render 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { renderCodeBrowserHtml } from "./code-browser.js";
+export type { CodeBrowserPageOptions } from "./code-browser.js";
+export { renderFencedCode, renderMarkdownToHtml } from "./markdown-pipeline.js";
+export { renderSideBySideHtml } from "./side-by-side.js";
+export type { SideBySideOptions } from "./side-by-side.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { renderCodeBrowserHtml } from "./code-browser.js";
+export { renderFencedCode, renderMarkdownToHtml } from "./markdown-pipeline.js";
+export { renderSideBySideHtml } from "./side-by-side.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/markdown-pipeline.d.ts

@@ -0,0 +1,3 @@
+export declare function renderMarkdownToHtml(markdown: string): Promise<string>;
+export declare function renderFencedCode(markdownFence: string): Promise<string>;
+//# sourceMappingURL=markdown-pipeline.d.ts.map

package/dist/markdown-pipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-pipeline.d.ts","sourceRoot":"","sources":["../src/markdown-pipeline.ts"],"names":[],"mappings":"AAsCA,wBAAsB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAW5E;AAED,wBAAsB,gBAAgB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAE7E"}

package/dist/markdown-pipeline.js

@@ -0,0 +1,47 @@
+import rehypeHighlight from "rehype-highlight";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+import { visit } from "unist-util-visit";
+import { escapeHtml } from "./html-utils.js";
+function remarkMermaidPlaceholders() {
+    return (tree) => {
+        visit(tree, "code", (node, index, parent) => {
+            if (node.lang !== "mermaid" || parent === undefined || index === undefined)
+                return;
+            const value = node.value;
+            const html = {
+                type: "html",
+                value: `<div class="commentray-mermaid"><pre class="mermaid"><code>${escapeHtml(value)}</code></pre></div>`,
+            };
+            parent.children[index] = html;
+        });
+    };
+}
+const sanitizeSchema = structuredClone(defaultSchema);
+sanitizeSchema.attributes = {
+    ...sanitizeSchema.attributes,
+    code: [...(sanitizeSchema.attributes?.code ?? []), "className"],
+    pre: [...(sanitizeSchema.attributes?.pre ?? []), "className"],
+    span: [...(sanitizeSchema.attributes?.span ?? []), "className"],
+    div: ["className"],
+};
+export async function renderMarkdownToHtml(markdown) {
+    const file = await unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkMermaidPlaceholders)
+        .use(remarkRehype, { allowDangerousHtml: true })
+        .use(rehypeSanitize, sanitizeSchema)
+        .use(rehypeHighlight)
+        .use(rehypeStringify)
+        .process(markdown);
+    return String(file);
+}
+export async function renderFencedCode(markdownFence) {
+    return renderMarkdownToHtml(markdownFence);
+}
+//# sourceMappingURL=markdown-pipeline.js.map

package/dist/markdown-pipeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-pipeline.js","sourceRoot":"","sources":["../src/markdown-pipeline.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,cAAc,EAAE,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,SAAS,yBAAyB;IAChC,OAAO,CAAC,IAAU,EAAE,EAAE;QACpB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,IAAU,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;YAChD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO;YACnF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACzB,MAAM,IAAI,GAAS;gBACjB,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,8DAA8D,UAAU,CAC7E,KAAK,CACN,qBAAqB;aACvB,CAAC;YACF,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;AAEtD,cAAc,CAAC,UAAU,GAAG;IAC1B,GAAG,cAAc,CAAC,UAAU;IAC5B,IAAI,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;IAC/D,GAAG,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,UAAU,EAAE,GAAG,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;IAC7D,IAAI,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;IAC/D,GAAG,EAAE,CAAC,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,QAAgB;IACzD,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;SACzB,GAAG,CAAC,WAAW,CAAC;SAChB,GAAG,CAAC,SAAS,CAAC;SACd,GAAG,CAAC,yBAAyB,CAAC;SAC9B,GAAG,CAAC,YAAY,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;SAC/C,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC;SACnC,GAAG,CAAC,eAAe,CAAC;SACpB,GAAG,CAAC,eAAe,CAAC;SACpB,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrB,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,aAAqB;IAC1D,OAAO,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAC7C,CAAC"}

package/dist/side-by-side.d.ts

@@ -0,0 +1,13 @@
+export type SideBySideOptions = {
+    title?: string;
+    /** Source code text (not yet fenced). */
+    code: string;
+    /** Highlight.js / common language id, e.g. ts, go, json */
+    language: string;
+    /** Commentray markdown body. */
+    commentrayMarkdown: string;
+    /** When true, include Mermaid runtime from CDN in the footer. */
+    includeMermaidRuntime?: boolean;
+};
+export declare function renderSideBySideHtml(opts: SideBySideOptions): Promise<string>;
+//# sourceMappingURL=side-by-side.d.ts.map

package/dist/side-by-side.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-by-side.d.ts","sourceRoot":"","sources":["../src/side-by-side.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAiDnF"}

package/dist/side-by-side.js

@@ -0,0 +1,50 @@
+import { escapeHtml } from "./html-utils.js";
+import { renderFencedCode, renderMarkdownToHtml } from "./markdown-pipeline.js";
+export async function renderSideBySideHtml(opts) {
+    const fence = "```" + opts.language + "\n" + opts.code + "\n```\n";
+    const [codeHtml, commentrayHtml] = await Promise.all([
+        renderFencedCode(fence),
+        renderMarkdownToHtml(opts.commentrayMarkdown),
+    ]);
+    const mermaidScript = opts.includeMermaidRuntime
+        ? `<script type="module">
+import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
+mermaid.initialize({ startOnLoad: true, securityLevel: "strict" });
+mermaid.run({ querySelector: ".mermaid" });
+</script>`
+        : "";
+    const title = opts.title ?? "Commentray";
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${escapeHtml(title)}</title>
+    <style>
+      :root { color-scheme: light dark; }
+      body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+      .layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
+      .pane { overflow: auto; padding: 16px; border-right: 1px solid color-mix(in oklab, CanvasText 20%, Canvas); }
+      .pane:last-child { border-right: none; }
+      .pane h2 { margin-top: 0; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.8; }
+      pre { margin: 0; }
+      .commentray { font-size: 15px; line-height: 1.45; }
+      .commentray img { max-width: 100%; height: auto; }
+    </style>
+  </head>
+  <body>
+    <div class="layout">
+      <section class="pane" aria-label="Source">
+        <h2>Code</h2>
+        ${codeHtml}
+      </section>
+      <section class="pane commentray" aria-label="Commentray">
+        <h2>Commentray</h2>
+        ${commentrayHtml}
+      </section>
+    </div>
+    ${mermaidScript}
+  </body>
+</html>`;
+}
+//# sourceMappingURL=side-by-side.js.map

package/dist/side-by-side.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-by-side.js","sourceRoot":"","sources":["../src/side-by-side.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAchF,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,IAAuB;IAChE,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;QACnD,gBAAgB,CAAC,KAAK,CAAC;QACvB,oBAAoB,CAAC,IAAI,CAAC,kBAAkB,CAAC;KAC9C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAI,CAAC,qBAAqB;QAC9C,CAAC,CAAC;;;;UAII;QACN,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC;IAEzC,OAAO;;;;;aAKI,UAAU,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;UAiBpB,QAAQ;;;;UAIR,cAAc;;;MAGlB,aAAa;;QAEX,CAAC;AACT,CAAC"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@commentray/render",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Markdown + syntax highlighting rendering for Commentray",
+  "license": "MPL-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node esbuild-code-browser-client.mjs",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@m31coding/fuzzy-search": "^2.0.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^22.14.1",
+    "esbuild": "^0.25.12"
+  }
+}