@imontene/mdrender 2.8.1 → 2.10.0

package/dist/convert.js

@@ -7,13 +7,14 @@ import { extractFrontMatter } from "./frontmatter.js";
 import { strings } from "./i18n.js";
 import { renderMarkdown } from "./markdown/index.js";
 import { buildToc, tocPlaceholder } from "./markdown/toc.js";
-import { BUILTIN_THEMES, DEFAULT_FONT_SIZE, fontSizePx, isDarkTheme, mergeOptions, normalizeOptions, OptionsError, resolveMargins, } from "./options.js";
+import { BUILTIN_THEMES, DEFAULT_FONT_SIZE, fontSizePx, isDarkTheme, isMagazineTheme, mergeOptions, normalizeOptions, OptionsError, resolveMargins, } from "./options.js";
 import { BrowserSession } from "./render/browser.js";
 import { DEFAULT_FOOTER, headerFooterTemplate } from "./render/header-footer.js";
 import { fillMermaid, renderMermaid } from "./render/mermaid.js";
 import { SMALL_SCALE } from "./render/mermaid-fit.js";
 import { headerFooterStyle, isAntigravityTheme, mermaidThemeVariables, } from "./render/antigravity.js";
 import { fieldImage } from "./render/field.js";
+import { magazinePage } from "./render/magazine.js";
 import { FONT_FAMILIES, fontStack } from "./render/fonts.js";
 import { WATERMARK_CSS, watermarkHtml } from "./render/watermark.js";
 import { contentHeightPx, contentWidthPx, lengthToPx, textWidthPx } from "./render/page.js";
@@ -85,16 +86,22 @@ export function headerFooterSpaceWarnings(margin, hasHeader, hasFooter) {
     return warnings;
 }
 /**
- * Justified paragraphs in the PDF: the body's, and those directly inside a quote or an alert
- * (the same ones markdown/hyphenate.ts gives soft hyphens). Lists, tables, footnotes, the title
- * block, the table of contents and diagram labels stay aligned left. Print only: on screen the
- * HTML keeps ragged lines.
+ * Justified text in the PDF: the body's paragraphs, those directly inside a quote or an alert,
+ * and bulleted and numbered list items (the same ones markdown/hyphenate.ts gives soft hyphens).
+ * Tables, footnotes, the title block, the table of contents and diagram labels stay aligned
+ * left, as does code inside a list item. Print only: on screen the HTML keeps ragged lines.
  */
 const JUSTIFY_CSS = `@media print {
   .markdown-body > p,
-  .markdown-body > blockquote > p:not(.markdown-alert-title) {
+  .markdown-body > blockquote > p:not(.markdown-alert-title),
+  .markdown-body > :is(ul, ol) li,
+  .markdown-body > blockquote > :is(ul, ol) li {
     text-align: justify;
   }
+  /* What list items may hold besides text keeps its own alignment. */
+  .markdown-body li :is(pre, table) {
+    text-align: start;
+  }
 }`;
 /** Font size, if set, and the page's text height (used to fit images and diagrams). */
 function layoutCss(options, margin) {
@@ -176,7 +183,7 @@ paged = false) {
         lang: options.lang,
         // Soft hyphens only where paragraphs are justified: in the PDF.
         hyphenate: paged && options.justify ? options.lang : undefined,
-        figures: options.theme === "academic_basic",
+        figures: options.theme === "academic_basic" || isMagazineTheme(options.theme),
     });
     const diagnostics = [
         ...config.warnings.map((message) => ({ severity: "warning", message })),
@@ -233,6 +240,26 @@ paged = false) {
         });
     }
     const watermark = paged ? watermarks(options, margin) : "";
+    const showTitle = options.title !== undefined;
+    const magazine = isMagazineTheme(options.theme)
+        ? magazinePage({
+            options,
+            margin,
+            baseDir,
+            hasCover: showTitle,
+            values: {
+                title,
+                author: options.author === undefined ? undefined : plainAuthor(options.author),
+                date: options.date,
+            },
+        })
+        : undefined;
+    if (magazine) {
+        diagnostics.push(...magazine.diagnostics);
+        if (magazine.coverNumber !== undefined) {
+            notes.push({ message: `cover: picture ${magazine.coverNumber}` });
+        }
+    }
     const html = buildHtmlDocument({
         title,
         body,
@@ -245,7 +272,8 @@ paged = false) {
         affiliations: options.affiliations,
         abstract: options.abstract,
         keywords: options.keywords,
-        showTitle: options.title !== undefined,
+        showTitle,
+        headerClass: magazine?.headerClass,
         themeCss,
         font: options.font,
         beforeBody: watermark || undefined,
@@ -253,6 +281,7 @@ paged = false) {
             ...densityCss(options.density),
             layoutCss(options, margin),
             ...(watermark ? [WATERMARK_CSS] : []),
+            ...(magazine ? [magazine.css] : []),
         ],
         extraCss,
     });
@@ -275,17 +304,22 @@ export async function convertFile(convert) {
             const margin = resolveMargins(options);
             const author = options.author === undefined ? undefined : plainAuthor(options.author);
             const values = { title: doc.title, author, date: options.date };
-            const footer = options.footer ?? (options.pageNumbers ? DEFAULT_FOOTER : undefined);
-            const hasHeaderFooter = options.header !== undefined || footer !== undefined;
-            doc.diagnostics.push(...headerFooterSpaceWarnings(margin, options.header !== undefined, footer !== undefined));
+            // The magazine themes draw margins, header and footer in their stylesheet (magazine.ts).
+            const magazine = isMagazineTheme(options.theme);
+            const footer = magazine
+                ? undefined
+                : (options.footer ?? (options.pageNumbers ? DEFAULT_FOOTER : undefined));
+            const header = magazine ? undefined : options.header;
+            const hasHeaderFooter = header !== undefined || footer !== undefined;
+            doc.diagnostics.push(...headerFooterSpaceWarnings(margin, header !== undefined, footer !== undefined));
             const pageLook = headerFooterStyle(options.theme);
             const session = await browsers.get();
             const { pdf, blocked } = await session.printPdf(doc.html, {
                 format: options.pageSize,
                 landscape: options.orientation === "landscape",
-                margin,
+                margin: magazine ? { top: "0mm", right: "0mm", bottom: "0mm", left: "0mm" } : margin,
                 headerTemplate: hasHeaderFooter
-                    ? headerFooterTemplate(options.header, values, margin, options.font, pageLook)
+                    ? headerFooterTemplate(header, values, margin, options.font, pageLook)
                     : undefined,
                 footerTemplate: hasHeaderFooter
                     ? headerFooterTemplate(footer, values, margin, options.font, pageLook)

package/dist/markdown/hyphenate.js

@@ -42,12 +42,16 @@ export function hyphenatorFor(lang) {
     return hyphenate;
 }
 /**
- * Whether a paragraph is justified: top-level, or directly inside a blockquote or alert (the
- * same paragraphs as the print stylesheet in convert.ts). Lists, footnotes and tables are not.
+ * Whether a paragraph is justified (the same paragraphs as the print stylesheet in convert.ts):
+ * top-level, directly inside a blockquote or alert, or in a bulleted or numbered list item
+ * (nested lists too). Footnotes and tables are not.
  */
 function justified(containers) {
-    return (containers.length === 0 || (containers.length === 1 && containers[0] === "blockquote_open"));
+    // Bulleted and numbered lists (nested too) are justified like the text around them.
+    const blocks = containers.filter((c) => !LIST_CONTAINERS.has(c));
+    return blocks.length === 0 || (blocks.length === 1 && blocks[0] === "blockquote_open");
 }
+const LIST_CONTAINERS = new Set(["bullet_list_open", "ordered_list_open", "list_item_open"]);
 function hyphenateInline(inline, hyphenate) {
     let inAutolink = 0;
     for (const child of inline.children ?? []) {

package/dist/options.d.ts

@@ -13,10 +13,17 @@ export declare const MERMAID_THEMES: readonly ["default", "neutral", "dark", "fo
 export type MermaidTheme = (typeof MERMAID_THEMES)[number];
 export declare const MERMAID_FLIPS: readonly ["auto", "never"];
 export type MermaidFlip = (typeof MERMAID_FLIPS)[number];
-export declare const BUILTIN_THEMES: readonly ["antigravity", "antigravity-dark", "light", "dark", "academic_basic"];
+export declare const BUILTIN_THEMES: readonly ["antigravity", "antigravity-dark", "light", "dark", "academic_basic", "tech_magazine", "tech_magazine-dark"];
 export type BuiltinTheme = (typeof BUILTIN_THEMES)[number];
 /** Built-in themes with a dark page. */
 export declare const isDarkTheme: (theme: string) => boolean;
+/** The magazine themes: a full-bleed cover and page margins drawn by the stylesheet. */
+export declare const isMagazineTheme: (theme: string) => boolean;
+export declare const COVER_TEXT_POSITIONS: readonly ["top", "bottom"];
+export type CoverTextPosition = (typeof COVER_TEXT_POSITIONS)[number];
+/** Colour of the cover text: dark ink for light pictures, light ink for dark ones. */
+export declare const COVER_INKS: readonly ["dark", "light"];
+export type CoverInk = (typeof COVER_INKS)[number];
 export declare const TEXT_FONTS: readonly ["manrope", "inter"];
 export type TextFont = (typeof TEXT_FONTS)[number];
 export declare const DENSITIES: readonly ["normal", "compact"];
@@ -79,6 +86,16 @@ export interface DocumentOptions {
     /** Summary shown under the title block (paragraphs separated by blank lines). */
     abstract?: string;
     keywords?: string[];
+    /** Magazine themes: folder of cover pictures under tech_magazine/, and the masthead. */
+    magazineName?: string;
+    /** Magazine themes: number of the cover picture; a random one when unset. */
+    cover?: number;
+    /** Magazine themes: where the title sits on the cover. */
+    coverText?: CoverTextPosition;
+    /** Magazine themes: colour of the cover text; the magazine's own setting for a cover wins. */
+    coverInk?: CoverInk;
+    /** Magazine themes: accent colour (drop cap, small headings, rules), e.g. "#2f6bff". */
+    accent?: string;
 }
 export declare const DEFAULT_OPTIONS: DocumentOptions;
 /**

package/dist/options.js

@@ -12,9 +12,16 @@ export const BUILTIN_THEMES = [
     "light",
     "dark",
     "academic_basic",
+    "tech_magazine",
+    "tech_magazine-dark",
 ];
 /** Built-in themes with a dark page. */
-export const isDarkTheme = (theme) => theme === "dark" || theme === "antigravity-dark";
+export const isDarkTheme = (theme) => theme === "dark" || theme === "antigravity-dark" || theme === "tech_magazine-dark";
+/** The magazine themes: a full-bleed cover and page margins drawn by the stylesheet. */
+export const isMagazineTheme = (theme) => theme.startsWith("tech_magazine");
+export const COVER_TEXT_POSITIONS = ["top", "bottom"];
+/** Colour of the cover text: dark ink for light pictures, light ink for dark ones. */
+export const COVER_INKS = ["dark", "light"];
 export const TEXT_FONTS = ["manrope", "inter"];
 export const DENSITIES = ["normal", "compact"];
 export const DEFAULT_OPTIONS = {
@@ -34,12 +41,21 @@ export const DEFAULT_OPTIONS = {
     css: [],
     lang: DEFAULT_LANG,
 };
+/** The magazine themes: one wide ragged column in Inter on generous margins. */
+const MAGAZINE_DEFAULTS = {
+    margin: "20mm 24mm 22mm",
+    fontSize: "10.5pt",
+    font: "inter",
+    justify: false,
+};
 /**
  * Defaults of a built-in theme, applied under every other layer: the academic theme sets its
  * two columns in smaller type on wider margins, with Inter for titles, captions and labels.
  */
 export const THEME_DEFAULTS = {
     academic_basic: { margin: "18mm 8mm", fontSize: "9.5pt", font: "inter" },
+    tech_magazine: MAGAZINE_DEFAULTS,
+    "tech_magazine-dark": MAGAZINE_DEFAULTS,
 };
 export class OptionsError extends MdRenderError {
     constructor(message) {
@@ -76,6 +92,27 @@ const oneOf = (choices) => (value, describe) => {
         return match;
     throw new OptionsError(`${describe} must be one of: ${choices.join(", ")}`);
 };
+/** A CSS colour: #rgb, #rrggbb (with or without alpha), rgb()/hsl()/oklch() or a colour name. */
+const COLOR = /^(#[0-9a-f]{3,4}|#[0-9a-f]{6}|#[0-9a-f]{8}|(rgb|rgba|hsl|hsla|oklch|oklab)\([\d\s.,%/+-]+\)|[a-z]+)$/i;
+const color = (value, describe, baseDir) => {
+    const raw = text(value, describe, baseDir).trim();
+    if (COLOR.test(raw))
+        return raw;
+    throw new OptionsError(`${describe} must be a CSS colour, e.g. "#2f6bff"`);
+};
+/** A folder name under tech_magazine/: no path separators, no "..". */
+const folderName = (value, describe, baseDir) => {
+    const raw = text(value, describe, baseDir).trim();
+    if (raw && !/[\\/]/.test(raw) && raw !== "." && raw !== "..")
+        return raw;
+    throw new OptionsError(`${describe} must be the name of a folder inside tech_magazine/`);
+};
+const coverNumber = (value, describe) => {
+    const number = Number(value);
+    if (Number.isInteger(number) && number >= 0)
+        return number;
+    throw new OptionsError(`${describe} must be the number of a cover picture, e.g. 2 or "02"`);
+};
 /** Text, or a list of texts (`keywords: [a, b]`). */
 const textList = (value, describe, baseDir) => {
     const list = Array.isArray(value) ? value : [value];
@@ -169,6 +206,11 @@ const VALIDATORS = {
     affiliations: textList,
     abstract: text,
     keywords: textList,
+    magazineName: folderName,
+    cover: coverNumber,
+    coverText: oneOf(COVER_TEXT_POSITIONS),
+    coverInk: oneOf(COVER_INKS),
+    accent: color,
 };
 /**
  * Validate options from a config file, front matter or the command line.

package/dist/render/fonts.d.ts

@@ -10,6 +10,8 @@ import type { TextFont } from "../options.js";
  * Code: JetBrains Mono from Fontsource (split into unicode-range subsets).
  * Serif (academic theme only): STIX Two Text from Fontsource, the text face of the STIX fonts
  * made for scientific publishing.
+ * Magazine themes: Inter Light and ExtraBold besides the text weights, and Newsreader from
+ * Fontsource for the drop caps, pull quotes and standfirst.
  */
 export declare const FONT_FAMILIES: Record<TextFont, string>;
 /** CSS font-family list for the text: the chosen font, Inter for missing glyphs, the system's. */
@@ -24,6 +26,8 @@ export declare function inlineFontStylesheet(cssKey: string): string;
 export declare function fontFaceCss(font?: TextFont): string;
 /** @font-face rules for STIX Two Text, the academic theme's serif, with the files embedded. */
 export declare function serifFontFaceCss(): string;
+/** @font-face rules the magazine themes add to the text and code fonts, files embedded. */
+export declare function magazineFontFaceCss(): string;
 /** JetBrains Mono Regular alone, for page headers/footers set in the mono family. */
 export declare function monoRegularFontFace(): string;
 /** The text font's regular weight alone, for page headers/footers (rendered apart from the page). */

package/dist/render/fonts.js

@@ -1,4 +1,4 @@
-import { INTER_DIR, INTER_FACES, MANROPE_STYLESHEETS, MONO_STYLESHEETS, readAsset, SERIF_STYLESHEETS, readTextAsset, woff2References, } from "../assets.js";
+import { INTER_DIR, INTER_FACES, INTER_MAGAZINE_FACES, MANROPE_STYLESHEETS, MONO_STYLESHEETS, NEWSREADER_STYLESHEETS, readAsset, SERIF_STYLESHEETS, readTextAsset, woff2References, } from "../assets.js";
 /**
  * Static (non-variable) font files are used on purpose: Chromium embeds variable fonts in PDFs
  * as Type 3 fonts, while static fonts are embedded as proper TrueType fonts.
@@ -10,6 +10,8 @@ import { INTER_DIR, INTER_FACES, MANROPE_STYLESHEETS, MONO_STYLESHEETS, readAsse
  * Code: JetBrains Mono from Fontsource (split into unicode-range subsets).
  * Serif (academic theme only): STIX Two Text from Fontsource, the text face of the STIX fonts
  * made for scientific publishing.
+ * Magazine themes: Inter Light and ExtraBold besides the text weights, and Newsreader from
+ * Fontsource for the drop caps, pull quotes and standfirst.
  */
 export const FONT_FAMILIES = { manrope: "Manrope", inter: "Inter" };
 /** CSS font-family list for the text: the chosen font, Inter for missing glyphs, the system's. */
@@ -72,6 +74,15 @@ export function serifFontFaceCss() {
     serif ??= SERIF_STYLESHEETS.map(inlineFontStylesheet).join("\n");
     return serif;
 }
+let magazine;
+/** @font-face rules the magazine themes add to the text and code fonts, files embedded. */
+export function magazineFontFaceCss() {
+    magazine ??= [
+        ...INTER_MAGAZINE_FACES.map(interFace),
+        ...NEWSREADER_STYLESHEETS.map(inlineFontStylesheet),
+    ].join("\n");
+    return magazine;
+}
 let monoRegular;
 /** JetBrains Mono Regular alone, for page headers/footers set in the mono family. */
 export function monoRegularFontFace() {

package/dist/render/header-footer.d.ts

@@ -13,6 +13,8 @@ export interface HeaderFooterValues {
     author?: string;
     date?: string;
 }
+/** Split on `|` (but not `\|`) into left, center and right columns. */
+export declare function columns(spec: string): [string, string, string];
 /**
  * Chrome header/footer template. Chrome renders it apart from the page, so it carries its own
  * styles and its own copy of the text font.

package/dist/render/header-footer.js

@@ -11,7 +11,7 @@ function renderText(text, values) {
     });
 }
 /** Split on `|` (but not `\|`) into left, center and right columns. */
-function columns(spec) {
+export function columns(spec) {
     const parts = spec.split(/(?<!\\)\|/).map((p) => p.replace(/\\\|/g, "|"));
     if (parts.length === 1)
         return ["", parts[0], ""];

package/dist/render/magazine.d.ts

@@ -0,0 +1,48 @@
+import type { Diagnostic } from "../diagnostics.js";
+import type { DocumentOptions, Margins } from "../options.js";
+/**
+ * The magazine themes (tech_magazine, tech_magazine-dark): a full-bleed cover picture on page 1
+ * and the page margins, header and footer drawn by the stylesheet.
+ *
+ * Cover pictures live in tech_magazine/<magazine-name>/, next to the document or shipped with
+ * mdrender; the number in a file name (cover02.png → 2) is the one `cover:` picks. An optional
+ * magazine.json in the same folder sets the magazine's accent and, per cover, the ink and the
+ * veil behind the text:
+ *
+ *   { "accent": "#2f6bff", "covers": { "1": { "ink": "dark", "veil": "rgba(255,255,255,0.6)" } } }
+ *
+ * A cover's ink there wins over `cover-ink`: the picture decides which text colour reads on it.
+ */
+export declare const MAGAZINE_DIR = "tech_magazine";
+export declare const DEFAULT_MAGAZINE = "AlphaZeroChess";
+/** Number in a file name: the last group of digits ("cover02.png" → 2). */
+export declare function coverNumber(file: string): number | undefined;
+/** A CSS string literal. */
+export declare const cssString: (value: string) => string;
+export interface PageValues {
+    title: string;
+    author?: string;
+    date?: string;
+    magazine: string;
+}
+export interface MagazinePage {
+    /** Stylesheet: cover picture, accent, masthead, page margins, header and footer. */
+    css: string;
+    /** Classes of the title block when it is the cover. */
+    headerClass?: string;
+    /** Number of the cover picture used, for --verbose. */
+    coverNumber?: number;
+    diagnostics: Diagnostic[];
+}
+export interface MagazineInput {
+    options: DocumentOptions;
+    margin: Margins;
+    baseDir: string;
+    /** The document has a title block, which becomes the cover. */
+    hasCover: boolean;
+    values: Omit<PageValues, "magazine">;
+    /** Picks a cover when none is asked for (Math.random; tests pass their own). */
+    random?: () => number;
+}
+/** The magazine theme's page: cover, masthead, margins, header and footer. */
+export declare function magazinePage(input: MagazineInput): MagazinePage;

package/dist/render/magazine.js

@@ -0,0 +1,211 @@
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import path from "node:path";
+import { listAssets, MAGAZINES_KEY, readAsset } from "../assets.js";
+import { columns } from "./header-footer.js";
+import { paperSizeMm } from "./page.js";
+/**
+ * The magazine themes (tech_magazine, tech_magazine-dark): a full-bleed cover picture on page 1
+ * and the page margins, header and footer drawn by the stylesheet.
+ *
+ * Cover pictures live in tech_magazine/<magazine-name>/, next to the document or shipped with
+ * mdrender; the number in a file name (cover02.png → 2) is the one `cover:` picks. An optional
+ * magazine.json in the same folder sets the magazine's accent and, per cover, the ink and the
+ * veil behind the text:
+ *
+ *   { "accent": "#2f6bff", "covers": { "1": { "ink": "dark", "veil": "rgba(255,255,255,0.6)" } } }
+ *
+ * A cover's ink there wins over `cover-ink`: the picture decides which text colour reads on it.
+ */
+export const MAGAZINE_DIR = "tech_magazine";
+export const DEFAULT_MAGAZINE = "AlphaZeroChess";
+const IMAGE_TYPES = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".webp": "image/webp",
+    ".avif": "image/avif",
+    ".svg": "image/svg+xml",
+};
+/** Number in a file name: the last group of digits ("cover02.png" → 2). */
+export function coverNumber(file) {
+    const match = /(\d+)(?!.*\d)/.exec(path.parse(file).name);
+    return match ? Number(match[1]) : undefined;
+}
+function isImage(file) {
+    return path.extname(file).toLowerCase() in IMAGE_TYPES;
+}
+function parseSettings(text, where, diagnostics) {
+    try {
+        const data = JSON.parse(text);
+        if (data && typeof data === "object" && !Array.isArray(data))
+            return data;
+    }
+    catch {
+        // reported below
+    }
+    diagnostics.push({
+        severity: "warning",
+        message: `${where}/magazine.json is not valid; ignored`,
+    });
+    return {};
+}
+function toCovers(files) {
+    return files
+        .filter((file) => isImage(file.name))
+        .flatMap((file) => {
+        const number = coverNumber(file.name);
+        return number === undefined ? [] : [{ number, ...file }];
+    })
+        .sort((a, b) => a.number - b.number);
+}
+/** The magazine's folder next to the document, else the one shipped with mdrender. */
+function findMagazine(name, baseDir, diagnostics) {
+    const local = path.join(baseDir, MAGAZINE_DIR, name);
+    if (existsSync(local) && statSync(local).isDirectory()) {
+        const where = path.join(MAGAZINE_DIR, name);
+        const entries = readdirSync(local).map((file) => ({
+            name: file,
+            read: () => readFileSync(path.join(local, file)),
+        }));
+        const manifest = path.join(local, "magazine.json");
+        const settings = existsSync(manifest)
+            ? parseSettings(readFileSync(manifest, "utf8"), where, diagnostics)
+            : {};
+        return { where, covers: toCovers(entries), settings };
+    }
+    const folderKey = `${MAGAZINES_KEY}/${name}`;
+    const keys = listAssets(folderKey);
+    const entries = keys.map((key) => ({
+        name: path.posix.basename(key),
+        read: () => readAsset(key),
+    }));
+    const manifest = entries.find((entry) => entry.name === "magazine.json");
+    const settings = manifest
+        ? parseSettings(manifest.read().toString("utf8"), `${MAGAZINE_DIR}/${name}`, diagnostics)
+        : {};
+    return { where: `${MAGAZINE_DIR}/${name}`, covers: toCovers(entries), settings };
+}
+function pickCover(folder, wanted, random, diagnostics) {
+    if (folder.covers.length === 0)
+        return undefined;
+    if (wanted !== undefined) {
+        const match = folder.covers.find((cover) => cover.number === wanted);
+        if (match)
+            return match;
+        const available = folder.covers.map((cover) => cover.number).join(", ");
+        diagnostics.push({
+            severity: "warning",
+            message: `cover ${wanted} not found in ${folder.where} (available: ${available}); using a random one`,
+        });
+    }
+    return folder.covers[Math.floor(random() * folder.covers.length)];
+}
+/** A CSS string literal. */
+export const cssString = (value) => `"${value.replace(/[\\"]/g, "\\$&").replace(/[\r\n]+/g, " ")}"`;
+/** Default veil behind the cover text for each ink (theme-tech-magazine.css has the same). */
+const VEILS = {
+    light: "rgba(0, 0, 0, 0.6)",
+    dark: "rgba(255, 255, 255, 0.6)",
+};
+/**
+ * The veil behind the cover text, fading from the edge the text sits at. Written out without
+ * var(): Chrome drops a declaration that has both var() and a value as large as a picture.
+ */
+const veil = (colour, position) => `linear-gradient(${position === "top" ? "to bottom" : "to top"}, ${colour} 0%, transparent 50%)`;
+const COUNTERS = { page: "counter(page)", pages: "counter(pages)" };
+/** A header/footer column ("{magazine} · {date}") as a CSS `content` value. */
+function marginContent(text, values) {
+    const parts = [];
+    let literal = "";
+    for (const piece of text.trim().split(/(\{\w+\})/)) {
+        const name = /^\{(\w+)\}$/.exec(piece)?.[1];
+        const counter = name ? COUNTERS[name] : undefined;
+        if (counter) {
+            if (literal)
+                parts.push(cssString(literal));
+            parts.push(counter);
+            literal = "";
+            continue;
+        }
+        const value = name ? values[name] : undefined;
+        literal += value ?? piece;
+    }
+    if (literal)
+        parts.push(cssString(literal));
+    return parts.length ? parts.join(" ") : undefined;
+}
+const SIDES = ["left", "center", "right"];
+/** `@top-left { content: … }` and so on for a header or footer spec. */
+function marginBoxes(spec, edge, values) {
+    if (!spec)
+        return "";
+    return columns(spec)
+        .map((column, i) => {
+        const content = marginContent(column, values);
+        return content ? `  @${edge}-${SIDES[i]} { content: ${content}; }\n` : "";
+    })
+        .join("");
+}
+/** The magazine theme's page: cover, masthead, margins, header and footer. */
+export function magazinePage(input) {
+    const { options, margin, baseDir, hasCover } = input;
+    const diagnostics = [];
+    const magazine = options.magazineName ?? DEFAULT_MAGAZINE;
+    const values = { ...input.values, magazine };
+    const rules = [];
+    const root = [];
+    let headerClass;
+    let number;
+    const folder = findMagazine(magazine, baseDir, diagnostics);
+    const accent = options.accent ?? folder.settings.accent;
+    if (accent)
+        root.push(`--tm-accent: ${accent};`);
+    if (hasCover) {
+        const cover = pickCover(folder, options.cover, input.random ?? Math.random, diagnostics);
+        if (!cover) {
+            diagnostics.push({
+                severity: "warning",
+                message: `no cover pictures in ${folder.where}: the cover has no picture`,
+            });
+        }
+        const settings = cover ? (folder.settings.covers?.[String(cover.number)] ?? {}) : {};
+        const ink = settings.ink ?? options.coverInk ?? "light";
+        const position = options.coverText ?? "top";
+        if (cover) {
+            const type = IMAGE_TYPES[path.extname(cover.name).toLowerCase()];
+            // Straight into the rule, not through a custom property: Chrome drops one this large.
+            const picture = `url("data:${type};base64,${cover.read().toString("base64")}")`;
+            const layers = `${veil(settings.veil ?? VEILS[ink], position)}, ${picture}`;
+            rules.push(`.doc-header.doc-header { background-image: ${layers}; }`);
+            number = cover.number;
+        }
+        headerClass = `cover-ink-${ink} cover-text-${position}`;
+        const [width, height] = paperSizeMm(options.pageSize, options.orientation === "landscape");
+        rules.push(`@media print { .doc-header { width: ${width}mm; height: ${height}mm; } }`, `.doc-header::before { content: ${cssString(magazine)}; }`, options.date ? `.doc-header::after { content: ${cssString(options.date)}; }` : "");
+    }
+    // Margins, header and footer: Chrome prints with no margins and the stylesheet draws them, so
+    // that the cover can bleed to the edges of page 1.
+    const footer = options.footer ??
+        [options.date ? "{magazine} · {date}" : "{magazine}", options.pageNumbers ? "{page}" : ""].join(" | | ");
+    const page = [
+        `  margin: ${margin.top} ${margin.right} ${margin.bottom} ${margin.left};\n`,
+        marginBoxes(options.header, "top", values),
+        marginBoxes(footer, "bottom", values),
+    ].join("");
+    rules.push(`@page {\n${page}}`);
+    if (hasCover) {
+        const none = ["top", "bottom"]
+            .flatMap((edge) => SIDES.map((side) => `  @${edge}-${side} { content: none; }\n`))
+            .join("");
+        rules.push(`@page :first {\n  margin: 0;\n${none}}`);
+    }
+    if (root.length)
+        rules.unshift(`:root { ${root.join(" ")} }`);
+    return {
+        css: rules.filter(Boolean).join("\n"),
+        headerClass,
+        coverNumber: number,
+        diagnostics,
+    };
+}
+//# sourceMappingURL=magazine.js.map

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. */