@imontene/mdrender 2.9.0 → 2.11.0

package/dist/assets/theme-tech-magazine.css

@@ -0,0 +1,535 @@
+/*
+ * mdrender magazine theme (tech_magazine): loaded after theme.css. A technology magazine: Inter
+ * from 300 to 800, Newsreader for the standfirst, drop cap and pull quotes, one wide ragged
+ * column. With a title, the title block is a full-bleed cover over a picture from
+ * tech_magazine/<magazine-name>/ (render/magazine.ts sets the picture, the masthead, the accent
+ * and the page margins, header and footer). theme-tech-magazine-dark.css swaps the colours.
+ */
+
+:root {
+  --tm-bg: #ffffff;
+  --tm-ink: #1d1d1f;
+  --tm-ink-secondary: #424245;
+  --tm-ink-muted: #6e6e73;
+  --tm-hairline: #d2d2d7;
+  --tm-surface: #f5f5f7;
+  /* The accent of the AlphaZeroChess covers; `accent:` or the magazine's magazine.json change it. */
+  --tm-accent: #2f6bff;
+  /* The accent as text and rules on the page (lighter on the dark page). */
+  --tm-accent-text: var(--tm-accent);
+  --tm-code-bg: #1d1d1f;
+  --tm-serif: "Newsreader", Georgia, serif;
+  --tm-sans: var(--font-text);
+
+  --color-text: var(--tm-ink);
+  --color-muted: var(--tm-ink-muted);
+  --color-heading: var(--tm-ink);
+  --color-link: var(--tm-accent-text);
+  --color-border: var(--tm-hairline);
+  --color-subtle-bg: var(--tm-surface);
+  --color-accent: var(--tm-accent-text);
+  --color-bg: var(--tm-bg);
+  --color-stripe: var(--tm-bg);
+  --alert-note: var(--tm-accent-text);
+  --alert-tip: var(--tm-accent-text);
+  --alert-important: var(--tm-accent-text);
+
+  /* Code sits on a dark card in both variants. */
+  --code-keyword: #ff7ab2;
+  --code-title: #dabaff;
+  --code-constant: #d9c97c;
+  --code-string: #ff8170;
+  --code-builtin: #78c2b3;
+  --code-comment: #8a8a8f;
+  --code-tag: #6bdfff;
+  --code-text: #f5f5f7;
+}
+
+/* Header and footer (their text comes from render/magazine.ts): small, tracked, uppercase. */
+@page {
+  background: var(--tm-bg);
+
+  @top-left {
+    font:
+      600 6.5pt/1 "Inter",
+      sans-serif;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--tm-ink-muted);
+  }
+
+  @top-center {
+    font:
+      600 6.5pt/1 "Inter",
+      sans-serif;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--tm-ink-muted);
+  }
+
+  @top-right {
+    font:
+      600 6.5pt/1 "Inter",
+      sans-serif;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--tm-ink-muted);
+  }
+
+  @bottom-left {
+    font:
+      600 6.5pt/1 "Inter",
+      sans-serif;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--tm-ink-muted);
+  }
+
+  @bottom-center {
+    font:
+      600 6.5pt/1 "Inter",
+      sans-serif;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--tm-ink-muted);
+  }
+
+  @bottom-right {
+    font:
+      700 7.5pt/1 "Inter",
+      sans-serif;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--tm-ink);
+  }
+}
+
+body {
+  font-family: var(--tm-sans);
+  font-feature-settings: "kern", "calt", "ss01";
+  line-height: 1.55;
+  color: var(--tm-ink);
+}
+
+.markdown-body {
+  max-width: 680px;
+}
+
+/* In the PDF the page margins set the column, and the cover spans the whole sheet. */
+@media print {
+  .markdown-body {
+    max-width: none;
+  }
+}
+
+/*
+ * Cover: the title block over the picture, filling page 1 (render/magazine.ts sets its size).
+ * cover-ink-light: white text over a dark veil; cover-ink-dark: dark text over a light one.
+ * cover-text-top / cover-text-bottom: where the text sits, the veil fading from that edge.
+ */
+.doc-header {
+  --tm-veil: rgba(0, 0, 0, 0.6);
+  --cover-ink: #ffffff;
+  --cover-ink-soft: rgba(255, 255, 255, 0.86);
+  --cover-ink-muted: rgba(255, 255, 255, 0.7);
+  --cover-rule: rgba(255, 255, 255, 0.35);
+  --cover-kicker: color-mix(in srgb, var(--tm-accent) 55%, white);
+  --cover-veil-direction: to bottom;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 41mm 22mm 26mm;
+  overflow: hidden;
+  color: var(--cover-ink);
+  border: 0;
+  /* The veil, then the cover picture (render/magazine.ts adds it as a second layer). */
+  background-color: #07080d;
+  background-image: linear-gradient(
+    var(--cover-veil-direction),
+    var(--tm-veil) 0%,
+    transparent 50%
+  );
+  background-position:
+    center,
+    center top;
+  background-size: auto, cover;
+  background-repeat: no-repeat;
+  break-after: page;
+}
+
+.doc-header.cover-ink-dark {
+  --tm-veil: rgba(255, 255, 255, 0.6);
+  --cover-ink: #1d1d1f;
+  --cover-ink-soft: rgba(29, 29, 31, 0.82);
+  --cover-ink-muted: rgba(29, 29, 31, 0.65);
+  --cover-rule: rgba(0, 0, 0, 0.25);
+  --cover-kicker: var(--tm-accent);
+  background-color: #f4f4f6;
+}
+
+.doc-header.cover-text-bottom {
+  --cover-veil-direction: to top;
+  justify-content: flex-end;
+}
+
+@media screen {
+  .doc-header {
+    min-height: 70vh;
+    margin-bottom: 3em;
+    padding: 7em 3em 3em;
+    border-radius: 24px;
+  }
+}
+
+/* Masthead: the magazine's name at the top of the cover, the date on the right. */
+.doc-header::before {
+  position: absolute;
+  top: 18mm;
+  left: 22mm;
+  right: 22mm;
+  padding-bottom: 4mm;
+  font-size: 26pt;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--cover-rule);
+}
+
+.doc-header::after {
+  position: absolute;
+  top: 20.5mm;
+  right: 22mm;
+  font-size: 7pt;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--cover-ink-muted);
+}
+
+@media screen {
+  .doc-header::before {
+    top: 1.2em;
+    left: 1.2em;
+    right: 1.2em;
+    font-size: 20pt;
+  }
+
+  .doc-header::after {
+    top: 1.9em;
+    right: 1.4em;
+  }
+}
+
+.doc-kicker {
+  margin: 0 0 1em;
+  font-size: 8pt;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--cover-kicker);
+}
+
+.doc-header .doc-title {
+  margin: 0 0 0.35em;
+  padding: 0;
+  font-size: 48pt;
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  color: var(--cover-ink);
+  border: 0;
+}
+
+.doc-subtitle {
+  max-width: 64%;
+  margin: 0 0 1.4em;
+  font-family: var(--tm-serif);
+  font-size: 15pt;
+  font-style: italic;
+  line-height: 1.3;
+  color: var(--cover-ink-soft);
+}
+
+.doc-meta {
+  margin: 0;
+  padding: 0;
+  font-size: 7.5pt;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--cover-ink-muted);
+  border: 0;
+}
+
+.doc-header :is(.doc-affiliations, .doc-abstract, .doc-keywords) {
+  max-width: 64%;
+  color: var(--cover-ink-soft);
+}
+
+/* Opening: a large lead paragraph with a serif drop cap (after the cover, or first). */
+.doc-header + p,
+.markdown-body > p:first-child {
+  margin-bottom: 1.2em;
+  font-size: 1.32em;
+  font-weight: 300;
+  line-height: 1.5;
+  color: var(--tm-ink);
+}
+
+.doc-header + p::first-letter,
+.markdown-body > p:first-child::first-letter {
+  float: left;
+  margin: 0.06em 0.09em 0 0;
+  font-family: var(--tm-serif);
+  font-size: 4.1em;
+  font-weight: 600;
+  line-height: 0.82;
+  color: var(--tm-accent-text);
+}
+
+p {
+  margin: 0 0 0.95em;
+}
+
+strong {
+  font-weight: 700;
+}
+
+a {
+  color: var(--tm-accent-text);
+}
+
+/* Headings: big and heavy, or small and in the accent. */
+h1,
+h2,
+h3,
+h4 {
+  border: 0;
+  padding: 0;
+  color: var(--tm-ink);
+}
+
+h2 {
+  margin: 1.9em 0 0.5em;
+  font-size: 1.95em;
+  font-weight: 800;
+  line-height: 1.12;
+  letter-spacing: -0.028em;
+}
+
+h3 {
+  margin: 1.6em 0 0.4em;
+  font-size: 0.78em;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tm-accent-text);
+}
+
+h4 {
+  margin: 1.3em 0 0.3em;
+  font-size: 1.05em;
+  font-weight: 700;
+}
+
+/* Pull quote: the serif, large, after a short rule in the accent. */
+blockquote:not(.markdown-alert) {
+  margin: 1.8em 0;
+  padding: 0.9em 0 0;
+  border: 0;
+  border-top: 3px solid var(--tm-accent-text);
+  width: 62%;
+  color: var(--tm-ink);
+  break-inside: avoid;
+}
+
+blockquote:not(.markdown-alert) p {
+  margin: 0 0 0.4em;
+  font-family: var(--tm-serif);
+  font-size: 1.75em;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.22;
+  letter-spacing: -0.01em;
+}
+
+blockquote:not(.markdown-alert) p + p {
+  font-family: var(--tm-sans);
+  font-size: 0.72em;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--tm-ink-muted);
+}
+
+/* Alerts as sidebar cards. */
+.markdown-alert {
+  margin: 1.6em 0;
+  padding: 1.1em 1.3em 0.4em;
+  border: 0;
+  border-radius: 16px;
+  background: var(--tm-surface);
+}
+
+.markdown-alert-title {
+  margin-bottom: 0.5em;
+  font-size: 0.72em;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tm-accent-text);
+}
+
+/* The card's own first line in bold is its title: the alert label is not shown. */
+.markdown-alert-title {
+  display: none;
+}
+
+.markdown-alert-title + p > strong:only-child {
+  font-size: 0.78em;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tm-accent-text);
+}
+
+.markdown-alert > p:not(.markdown-alert-title) {
+  font-size: 0.95em;
+}
+
+.markdown-alert ul {
+  padding-left: 1.2em;
+}
+
+/* Figures with rounded corners and a small grey caption. */
+figure {
+  margin: 1.8em 0;
+  break-inside: avoid;
+}
+
+figure img {
+  display: block;
+  width: 100%;
+  border-radius: 18px;
+}
+
+figcaption {
+  margin-top: 0.7em;
+  font-size: 0.8em;
+  line-height: 1.45;
+  color: var(--tm-ink-muted);
+}
+
+figcaption strong {
+  color: var(--tm-ink);
+}
+
+/* Tables as spec sheets: hairlines between rows, labels in grey, values in bold. */
+table {
+  width: 100%;
+  margin: 1.4em 0 1.8em;
+  font-size: 0.92em;
+  border-top: 1.5px solid var(--tm-ink);
+}
+
+th,
+td {
+  padding: 0.7em 0.8em 0.7em 0;
+  border: 0;
+  border-bottom: 0.75px solid var(--tm-hairline);
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  font-size: 0.78em;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--tm-ink-muted);
+  background: none;
+}
+
+td {
+  font-weight: 600;
+}
+
+td:first-child {
+  font-weight: 400;
+  color: var(--tm-ink-muted);
+}
+
+tbody tr:nth-child(2n) {
+  background: none;
+}
+
+/* Code: a dark card, as on a keynote slide. */
+code {
+  padding: 0.12em 0.4em;
+  border-radius: 6px;
+  background: var(--tm-surface);
+  font-size: 0.86em;
+}
+
+pre {
+  margin: 1.4em 0;
+  padding: 1.2em 1.4em;
+  border: 0;
+  border-radius: 16px;
+  background: var(--tm-code-bg);
+  color: var(--code-text);
+  font-size: 0.82em;
+}
+
+pre code {
+  color: inherit;
+}
+
+/* Section break: three dots in the accent. */
+hr {
+  height: auto;
+  margin: 2.2em 0;
+  background: none;
+  text-align: center;
+}
+
+hr::after {
+  content: "•  •  •";
+  font-size: 1em;
+  letter-spacing: 0.4em;
+  color: var(--tm-accent-text);
+}
+
+.mermaid-diagram {
+  margin: 1.8em 0;
+  padding: 1.4em;
+  border-radius: 18px;
+  background: var(--tm-surface);
+}
+
+/* Footnotes: small, after a short rule. */
+hr.footnotes-sep {
+  margin: 2.5em 0 1em;
+  height: 1px;
+  width: 25%;
+  background: var(--tm-hairline);
+}
+
+hr.footnotes-sep::after {
+  content: none;
+}
+
+.footnotes {
+  font-size: 0.78em;
+  color: var(--tm-ink-muted);
+}
+
+/* A paragraph that introduces a listing or a diagram stays on its page. */
+p:has(+ pre),
+p:has(+ .mermaid-diagram) {
+  break-after: avoid;
+}

package/dist/assets.d.ts

@@ -31,6 +31,18 @@ export declare const INTER_FACES: readonly [{
     readonly style: "italic";
     readonly file: "Inter-BoldItalic.woff2";
 }];
+/** Extra Inter weights of the magazine themes: light standfirsts and extra-bold titles. */
+export declare const INTER_MAGAZINE_FACES: readonly [{
+    readonly weight: 300;
+    readonly style: "normal";
+    readonly file: "Inter-Light.woff2";
+}, {
+    readonly weight: 800;
+    readonly style: "normal";
+    readonly file: "Inter-ExtraBold.woff2";
+}];
+/** Newsreader, the serif of the magazine themes: drop caps, pull quotes and the standfirst. */
+export declare const NEWSREADER_STYLESHEETS: string[];
 /** Manrope faces in use (Fontsource, split into unicode-range subsets); it has no italics. */
 export declare const MANROPE_STYLESHEETS: string[];
 export declare const MONO_STYLESHEETS: string[];
@@ -40,6 +52,13 @@ export declare const KATEX_CSS = "katex/dist/katex.min.css";
 export declare const MERMAID_JS = "mermaid/dist/mermaid.min.js";
 export declare const THEMES: string[];
 export declare const PACKAGE_JSON = "mdrender/package.json";
+/** Cover pictures shipped with mdrender: tech_magazine/<magazine>/<file>. */
+export declare const MAGAZINES_KEY = "mdrender/tech_magazine";
+/**
+ * Files of a folder of shipped assets (e.g. "mdrender/tech_magazine/AlphaZeroChess"), as asset
+ * keys; empty when the folder does not exist. Inside the executable, from the embedded keys.
+ */
+export declare function listAssets(folderKey: string): string[];
 /** Fonts referenced by a stylesheet as url(...woff2), as asset keys. */
 export declare function woff2References(cssKey: string, css: string): string[];
 /**

package/dist/assets.js

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -78,6 +78,17 @@ export const INTER_FACES = [
     { weight: 700, style: "normal", file: "Inter-Bold.woff2" },
     { weight: 700, style: "italic", file: "Inter-BoldItalic.woff2" },
 ];
+/** Extra Inter weights of the magazine themes: light standfirsts and extra-bold titles. */
+export const INTER_MAGAZINE_FACES = [
+    { weight: 300, style: "normal", file: "Inter-Light.woff2" },
+    { weight: 800, style: "normal", file: "Inter-ExtraBold.woff2" },
+];
+/** Newsreader, the serif of the magazine themes: drop caps, pull quotes and the standfirst. */
+export const NEWSREADER_STYLESHEETS = [
+    "@fontsource/newsreader/400.css",
+    "@fontsource/newsreader/400-italic.css",
+    "@fontsource/newsreader/600.css",
+];
 /** Manrope faces in use (Fontsource, split into unicode-range subsets); it has no italics. */
 export const MANROPE_STYLESHEETS = [
     "@fontsource/manrope/400.css",
@@ -104,9 +115,40 @@ export const THEMES = [
     "mdrender/assets/theme-antigravity.css",
     "mdrender/assets/theme-antigravity-dark.css",
     "mdrender/assets/theme-academic-basic.css",
+    "mdrender/assets/theme-tech-magazine.css",
+    "mdrender/assets/theme-tech-magazine-dark.css",
     "mdrender/assets/density-compact.css",
 ];
 export const PACKAGE_JSON = "mdrender/package.json";
+/** Cover pictures shipped with mdrender: tech_magazine/<magazine>/<file>. */
+export const MAGAZINES_KEY = "mdrender/tech_magazine";
+/**
+ * Files of a folder of shipped assets (e.g. "mdrender/tech_magazine/AlphaZeroChess"), as asset
+ * keys; empty when the folder does not exist. Inside the executable, from the embedded keys.
+ */
+export function listAssets(folderKey) {
+    const prefix = folderKey.replace(/\/$/, "") + "/";
+    if (isSea()) {
+        const keys = sea.getAssetKeys();
+        return keys.filter((k) => k.startsWith(prefix) && !k.slice(prefix.length).includes("/")).sort();
+    }
+    const dir = assetPath(folderKey);
+    if (!existsSync(dir))
+        return [];
+    return readdirSync(dir, { withFileTypes: true })
+        .filter((entry) => entry.isFile())
+        .map((entry) => prefix + entry.name)
+        .sort();
+}
+/** Every shipped file under tech_magazine/, as asset keys. */
+function magazineAssets() {
+    const root = assetPath(MAGAZINES_KEY);
+    if (!existsSync(root))
+        return [];
+    return readdirSync(root, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory())
+        .flatMap((entry) => listAssets(`${MAGAZINES_KEY}/${entry.name}`));
+}
 /** Fonts referenced by a stylesheet as url(...woff2), as asset keys. */
 export function woff2References(cssKey, css) {
     return [...css.matchAll(/url\((['"]?)([^)'"]+\.woff2)\1\)/g)].map((m) => relativeAsset(cssKey, m[2]));
@@ -117,12 +159,16 @@ export function woff2References(cssKey, css) {
  */
 export function assetManifest() {
     const keys = new Set([PACKAGE_JSON, ...THEMES, MERMAID_JS]);
-    for (const { file } of INTER_FACES)
+    for (const { file } of [...INTER_FACES, ...INTER_MAGAZINE_FACES]) {
         keys.add(`${INTER_DIR}/${file}`);
+    }
+    for (const key of magazineAssets())
+        keys.add(key);
     for (const cssKey of [
         ...MANROPE_STYLESHEETS,
         ...MONO_STYLESHEETS,
         ...SERIF_STYLESHEETS,
+        ...NEWSREADER_STYLESHEETS,
         KATEX_CSS,
     ]) {
         keys.add(cssKey);

package/dist/cli.js

@@ -69,8 +69,8 @@ function addDocumentOptions(command) {
         .option("--watermark-field", "soft fields of light in the top-left and bottom-right corners of every PDF page")
         .option("--density <density>", "normal or compact (tighter spacing) (default: normal)")
         .option("--font-size <size>", "text size, e.g. 10pt or 11pt (default: 10.5pt)")
-        .option("--theme <theme>", "antigravity, antigravity-dark, light, dark, academic_basic, or a .css file replacing " +
-        "the theme (default: antigravity)")
+        .option("--theme <theme>", "antigravity, antigravity-dark, light, dark, academic_basic, tech_magazine, " +
+        "tech_magazine-dark, or a .css file replacing the theme (default: antigravity)")
         .option("--css <file>", "extra stylesheet (repeatable)", collect)
         .option("--mermaid-theme <theme>", `Mermaid theme: ${MERMAID_THEMES.join(", ")} ` +
         "(default: the page theme's — base in Anti-Gravity colours, neutral for light, dark for dark)")