@imontene/mdrender 2.9.0 → 2.11.0

package/dist/render/mermaid-style.js

@@ -0,0 +1,169 @@
+/**
+ * The finish mdrender gives Mermaid diagrams, in every theme:
+ *
+ * - shapes with slightly rounded corners: rectangles (nodes, subgraphs, sequence actors and
+ *   notes) through CSS `rx`/`ry`, and polygon nodes (decision, hexagon, parallelogram,
+ *   trapezoid) redrawn as paths with eased corners, since an SVG polygon has no corner radius;
+ * - subgraph titles in bold;
+ * - shape and subgraph fills kept in their colours but partly transparent, so the page and its
+ *   watermarks show through.
+ *
+ * The CSS goes to Mermaid as `themeCSS`, so it applies while Mermaid measures labels: a bold
+ * subgraph title gets the room it needs. Polygons are rounded after rendering, which leaves the
+ * diagram's size unchanged.
+ */
+/** Corner radius of rectangles and polygon nodes, in CSS px. */
+export const CORNER_RADIUS = 5;
+/** Opacity of shape and subgraph fills (strokes and text stay opaque). */
+export const FILL_OPACITY = 0.72;
+const SHAPES = [
+    ".node rect",
+    ".node polygon",
+    ".node circle",
+    ".node ellipse",
+    ".node path.label-container",
+    // Hand-drawn shapes (flag, cylinder…) carry the class on their group: fill-opacity inherits.
+    ".node .outer-path",
+    ".cluster rect",
+    "rect.actor",
+    "rect.note",
+];
+export const MERMAID_THEME_CSS = [
+    `.node rect, .cluster rect, rect.actor, rect.note { rx: ${CORNER_RADIUS}px; ry: ${CORNER_RADIUS}px; }`,
+    `${SHAPES.join(", ")} { fill-opacity: ${FILL_OPACITY}; }`,
+    ".cluster-label, .cluster-label * { font-weight: 700; }",
+    // Mermaid's "neo" look drops a shadow under shapes; under a see-through fill it would show
+    // through the whole shape and grey it, hiding the page behind instead of revealing it.
+    `${SHAPES.join(", ")}, .node .outer-path path { filter: none !important; }`,
+].join("\n");
+function parsePoints(points) {
+    const numbers = points
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    if (numbers.length < 6 || numbers.length % 2 !== 0 || numbers.some((n) => !Number.isFinite(n))) {
+        return undefined;
+    }
+    const result = [];
+    for (let i = 0; i < numbers.length; i += 2)
+        result.push([numbers[i], numbers[i + 1]]);
+    return result;
+}
+const round = (n) => Math.round(n * 100) / 100;
+/**
+ * Path data for a closed polygon whose corners are eased with quadratic curves of `radius`
+ * (smaller where an edge is too short for it: at most a third of each adjacent edge).
+ */
+export function roundedPolygonPath(points, radius = CORNER_RADIUS) {
+    const n = points.length;
+    const corners = points.map((p, i) => {
+        const prev = points[(i - 1 + n) % n];
+        const next = points[(i + 1) % n];
+        const toPrev = Math.hypot(prev[0] - p[0], prev[1] - p[1]);
+        const toNext = Math.hypot(next[0] - p[0], next[1] - p[1]);
+        const r = Math.min(radius, toPrev / 3, toNext / 3);
+        const along = (q, d) => d === 0 ? p : [p[0] + ((q[0] - p[0]) * r) / d, p[1] + ((q[1] - p[1]) * r) / d];
+        return { start: along(prev, toPrev), corner: p, end: along(next, toNext) };
+    });
+    const fmt = (p) => `${round(p[0])},${round(p[1])}`;
+    const parts = [`M${fmt(corners[0].end)}`];
+    for (let i = 1; i <= n; i++) {
+        const c = corners[i % n];
+        parts.push(`L${fmt(c.start)}`, `Q${fmt(c.corner)} ${fmt(c.end)}`);
+    }
+    return parts.join(" ") + " Z";
+}
+const near = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]) < 0.5;
+/** Distance from q to the line through a and b. */
+function offLine(a, b, q) {
+    const length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (length === 0)
+        return Math.hypot(q[0] - a[0], q[1] - a[1]);
+    return Math.abs((b[0] - a[0]) * (a[1] - q[1]) - (a[0] - q[0]) * (b[1] - a[1])) / length;
+}
+/**
+ * The corners of a closed shape drawn only with straight lines written as cubic segments, as
+ * Mermaid draws its flag and other hand-drawn polygons: the fill as one subpath, the outline as
+ * each side drawn twice ("M a C … b M a C … b M b C … c …"). Undefined for any path with a curve,
+ * another command, a gap or an open end.
+ */
+export function straightPathCorners(d) {
+    const tokens = d.match(/[a-z]|-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi) ?? [];
+    const segments = [];
+    let current;
+    let i = 0;
+    const take = () => {
+        const x = Number(tokens[i]);
+        const y = Number(tokens[i + 1]);
+        i += 2;
+        return Number.isFinite(x) && Number.isFinite(y) ? [x, y] : undefined;
+    };
+    while (i < tokens.length) {
+        const command = tokens[i++];
+        if (command === "M") {
+            current = take();
+            if (!current)
+                return undefined;
+        }
+        else if (command === "C" && current) {
+            // One or more segments after a single "C".
+            do {
+                const c1 = take();
+                const c2 = take();
+                const to = take();
+                if (!c1 || !c2 || !to)
+                    return undefined;
+                if (offLine(current, to, c1) > 0.5 || offLine(current, to, c2) > 0.5)
+                    return undefined;
+                segments.push([current, to]);
+                current = to;
+            } while (i < tokens.length && !/[a-z]/i.test(tokens[i]));
+        }
+        else if (command === "Z" || command === "z") {
+            continue;
+        }
+        else {
+            return undefined;
+        }
+    }
+    // Drop each side's repeated stroke, then the sides must chain into a closed shape.
+    const sides = segments.filter(([from, to], k) => k === 0 || !(near(from, segments[k - 1][0]) && near(to, segments[k - 1][1])));
+    if (sides.length < 3)
+        return undefined;
+    for (let k = 1; k < sides.length; k++)
+        if (!near(sides[k][0], sides[k - 1][1]))
+            return undefined;
+    if (!near(sides.at(-1)[1], sides[0][0]))
+        return undefined;
+    const corners = sides.map(([from]) => from);
+    // Drop points that do not turn (several segments along one side).
+    const turning = corners.filter((p, k) => {
+        const prev = corners[(k - 1 + corners.length) % corners.length];
+        const next = corners[(k + 1) % corners.length];
+        return offLine(prev, next, p) > 0.5;
+    });
+    return turning.length >= 3 ? turning : undefined;
+}
+const NODE_PATH = /<path\b([^>]*?)\sd="([^"]*)"/g;
+const NODE_POLYGON = /<polygon\b([^>]*?)\spoints="([^"]*)"([^>]*?)(\/?)>(<\/polygon>)?/g;
+/**
+ * Round the corners of node polygons: `<polygon class="label-container">` (decision, hexagon,
+ * parallelogram, trapezoid) and closed shapes drawn only with straight segments (the flag).
+ * Other polygons and paths (arrowheads, edges, curved shapes) are left alone.
+ */
+export function roundNodePolygons(svg, radius = CORNER_RADIUS) {
+    return svg
+        .replace(NODE_POLYGON, (tag, before, points, after) => {
+        if (!/\bclass="[^"]*\blabel-container\b/.test(before + after))
+            return tag;
+        const parsed = parsePoints(points);
+        if (!parsed)
+            return tag;
+        return `<path${before} d="${roundedPolygonPath(parsed, radius)}"${after}></path>`;
+    })
+        .replace(NODE_PATH, (tag, before, d) => {
+        const corners = straightPathCorners(d);
+        return corners ? `<path${before} d="${roundedPolygonPath(corners, radius)}"` : tag;
+    });
+}
+//# sourceMappingURL=mermaid-style.js.map

package/dist/render/mermaid.js

@@ -1,6 +1,7 @@
 import { MERMAID_JS, readTextAsset } from "../assets.js";
 import { mermaidPlaceholder } from "../markdown/mermaid.js";
 import { FONT_FAMILIES, fontFaceCss, fontStack } from "./fonts.js";
+import { MERMAID_THEME_CSS, roundNodePolygons } from "./mermaid-style.js";
 import { escapeHtml } from "../html.js";
 import { authorConfigured, candidate, chooseCandidate, flipWorthTrying, flippedDirection, flowchartHeader, withDirection, WRAPPING_WIDTHS, wrapsExhausted, } from "./mermaid-fit.js";
 export { MERMAID_THEMES } from "../options.js";
@@ -25,6 +26,8 @@ function mermaidConfig(theme, font, fontPx, wrap, themeVariables = {}) {
         fontSize: fontPx,
         themeVariables: { ...themeVariables, fontFamily, fontSize: `${fontPx}px` },
         htmlLabels: true,
+        // Rounded corners, bold subgraph titles, see-through fills (render/mermaid-style.ts).
+        themeCSS: MERMAID_THEME_CSS,
         // Actors only at the top of sequence diagrams: repeating them below costs height.
         sequence: { mirrorActors: false },
         ...(wrap === undefined ? {} : { flowchart: { wrappingWidth: wrap } }),
@@ -51,7 +54,8 @@ body { margin: 0; width: ${widthPx}px; font-family: ${fontStack(font)}; }</style
             // Load the font weights Mermaid uses before it measures any text.
             await Promise.all(["400", "600", "700"].map((w) => document.fonts.load(`${w} 16px "${family}"`)));
         }, family);
-        const render = (source, id, wrap) => page.evaluate(async (source, id, config) => {
+        const render = (source, id, wrap) => page
+            .evaluate(async (source, id, config) => {
             const { mermaid } = globalThis;
             // Each render sets the whole configuration, so one layout never leaks into the next.
             mermaid.initialize(config);
@@ -61,7 +65,10 @@ body { margin: 0; width: ${widthPx}px; font-family: ${fontStack(font)}; }</style
             catch (error) {
                 return { error: String(error?.message ?? error) };
             }
-        }, source, id, mermaidConfig(theme, font, fontPx, wrap, options.themeVariables));
+        }, source, id, mermaidConfig(theme, font, fontPx, wrap, options.themeVariables))
+            .then((result) => 
+        // Rounding the polygons keeps each diagram's size, so autofit measures it the same.
+        "svg" in result ? { svg: roundNodePolygons(result.svg) } : result);
         const results = [];
         for (const [i, block] of blocks.entries()) {
             const id = `mermaid-${i + 1}`;

package/dist/render/page.d.ts

@@ -1,4 +1,6 @@
 import type { PageSize } from "../options.js";
+/** Width and height of the paper in millimetres, as printed. */
+export declare function paperSizeMm(pageSize: PageSize, landscape: boolean): [number, number];
 export declare function lengthToPx(length: string): number;
 /** Exact width of the text column in CSS pixels, as Chrome prints it. */
 export declare function textWidthPx(pageSize: PageSize, landscape: boolean, margin: {

package/dist/render/page.js

@@ -7,6 +7,11 @@ const PAPER_MM = {
     Legal: [215.9, 355.6],
     Tabloid: [279.4, 431.8],
 };
+/** Width and height of the paper in millimetres, as printed. */
+export function paperSizeMm(pageSize, landscape) {
+    const [width, height] = PAPER_MM[pageSize];
+    return landscape ? [height, width] : [width, height];
+}
 const PX_PER_UNIT = { px: 1, in: 96, cm: 96 / 2.54, mm: 96 / 25.4 };
 export function lengthToPx(length) {
     const match = /^(\d+(?:\.\d+)?)(mm|cm|in|px)$/.exec(length);

package/dist/render/template.d.ts

@@ -1,5 +1,5 @@
 import { escapeHtml } from "../html.js";
-import type { BuiltinTheme, TextFont } from "../options.js";
+import { type BuiltinTheme, type TextFont } from "../options.js";
 export { escapeHtml };
 /** Stylesheets of a built-in theme, with the fonts it adds to the text and code ones. */
 export declare function builtinThemeCss(theme: BuiltinTheme): string[];
@@ -21,6 +21,8 @@ export interface DocumentParts {
     abstract?: string;
     keywords?: string[];
     showTitle?: boolean;
+    /** Extra classes of the title block (the magazine cover's ink and text position). */
+    headerClass?: string;
     /** Theme stylesheet contents. Defaults to the built-in light theme. */
     themeCss?: string[];
     /** Text font to embed. Defaults to Manrope. */

package/dist/render/template.js

@@ -1,7 +1,8 @@
 import { readTextAsset } from "../assets.js";
 import { escapeHtml } from "../html.js";
 import { DEFAULT_LANG, strings } from "../i18n.js";
-import { fontFaceCss, serifFontFaceCss } from "./fonts.js";
+import { fontFaceCss, magazineFontFaceCss, serifFontFaceCss } from "./fonts.js";
+import { isMagazineTheme } from "../options.js";
 import { katexCss } from "./katex.js";
 import { version } from "../version.js";
 export { escapeHtml };
@@ -21,11 +22,17 @@ const THEME_FILES = {
     light: ["theme.css"],
     dark: ["theme.css", "theme-dark.css"],
     academic_basic: ["theme.css", "theme-academic-basic.css"],
+    tech_magazine: ["theme.css", "theme-tech-magazine.css"],
+    "tech_magazine-dark": ["theme.css", "theme-tech-magazine.css", "theme-tech-magazine-dark.css"],
 };
 /** Stylesheets of a built-in theme, with the fonts it adds to the text and code ones. */
 export function builtinThemeCss(theme) {
     const css = THEME_FILES[theme].map(asset);
-    return theme === "academic_basic" ? [serifFontFaceCss(), ...css] : css;
+    if (theme === "academic_basic")
+        return [serifFontFaceCss(), ...css];
+    if (isMagazineTheme(theme))
+        return [magazineFontFaceCss(), ...css];
+    return css;
 }
 /** Stylesheet for a density other than "normal", applied after the theme. */
 export function densityCss(density) {
@@ -47,7 +54,7 @@ function titleBlock(parts) {
     const meta = [author ? withSuperscripts(author) : undefined, date ? escapeHtml(date) : undefined];
     const metaText = meta.filter(Boolean).join(" · ");
     return [
-        `<header class="doc-header">`,
+        `<header class="doc-header${parts.headerClass ? ` ${escapeHtml(parts.headerClass)}` : ""}">`,
         kicker ? `<p class="doc-kicker">${escapeHtml(kicker)}</p>` : "",
         `<h1 class="doc-title">${escapeHtml(title)}</h1>`,
         subtitle ? `<p class="doc-subtitle">${escapeHtml(subtitle)}</p>` : "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imontene/mdrender",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "Command-line app for Windows and Linux that renders Markdown — with LaTeX equations and Mermaid diagrams — to PDF and HTML set in Manrope or Inter",
   "keywords": [
     "markdown",
@@ -40,7 +40,8 @@
     "!dist/**/*.map",
     "README.md",
     "LICENSE",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "tech_magazine"
   ],
   "engines": {
     "node": ">=22.12"
@@ -67,6 +68,7 @@
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@fontsource/manrope": "^5.3.0",
+    "@fontsource/newsreader": "^5.3.0",
     "@fontsource/stix-two-text": "^5.3.0",
     "@puppeteer/browsers": "^3.2.3",
     "chokidar": "^5.0.0",

package/tech_magazine/AlphaZeroChess/magazine.json

@@ -0,0 +1,9 @@
+{
+  "accent": "#2f6bff",
+  "covers": {
+    "1": { "ink": "dark", "veil": "rgba(255, 255, 255, 0.6)" },
+    "2": { "ink": "light", "veil": "rgba(8, 14, 28, 0.85)" },
+    "3": { "ink": "dark", "veil": "rgba(246, 238, 228, 0.65)" },
+    "4": { "ink": "light", "veil": "rgba(20, 10, 4, 0.65)" }
+  }
+}