@kensio/colophon 2.5.0 → 2.6.0

package/dist/templates/terminal/index.js

@@ -0,0 +1,62 @@
+import { optionalString } from "../../props.js";
+import { codeFooter } from "../code/chrome.js";
+import { blockColumns } from "../code/fit.js";
+import { fitSnippet } from "../code/layout.js";
+import { layoutPanel } from "../code/panel.js";
+import { hugPanel, panelSvg } from "../code/plate.js";
+import { codeBody } from "../code/spans.js";
+import { warnIfTruncated } from "../code/warn.js";
+import { charWidthRatio } from "../code/width.js";
+import { hasFooter } from "../footer.js";
+import { terminalSession } from "./session.js";
+import { barHeight, titleBar } from "./window.js";
+/**
+ * A command and what it printed, in a terminal window.
+ *
+ * Reads `command`, `output`, an optional `prompt` (`$` by default) and an
+ * optional `title` for the window bar. What separates it from the `code`
+ * template is the chrome: the same text on a plain panel is a snippet, and in
+ * a window it is something somebody ran.
+ *
+ * Almost all of it is the `code` template underneath, down to the character
+ * grid, the fitting and the truncation warning, so everything under
+ * `config.code` applies here too: the monospace family, the line height, the
+ * syntax theme the window takes its colours from, and the font-size bounds.
+ */
+export const terminalTemplate = {
+    name: "terminal",
+    async render({ props, config, dimensions, measure }) {
+        const { width, height } = dimensions;
+        const footerFs = Math.round(height * 0.032);
+        const session = await terminalSession(props, config);
+        const available = layoutPanel(dimensions, config, 0, footerFs, false, hasFooter(config));
+        // The bar is measured against the space the window was allotted rather
+        // than against the window it ends up as, so that the room reserved for it
+        // and the bar that is drawn are the same height.
+        const bar = barHeight(available.width);
+        const fitted = fitSnippet(session, { ...available, y: available.y + bar, height: available.height - bar }, width, config, charWidthRatio(measure, config.code.fontFamily));
+        warnIfTruncated(config, dimensions, {
+            dropped: session.lines.length - fitted.lines.length,
+            clipped: fitted.clipped,
+        }, session.lines.length, "terminal session");
+        const body = fitted.lines.length * fitted.step;
+        const window = hugPanel(available, {
+            width: blockColumns(fitted.lines) * fitted.charWidth + fitted.padding * 2,
+            height: bar + body + fitted.padding * 2,
+        });
+        const shadow = Math.max(1, Math.round(Math.min(width, height) * 0.01));
+        return (panelSvg(window, session.background, shadow) +
+            titleBar(window, bar, optionalString(props.title) ?? "", config, measure) +
+            codeBody(fitted.lines, {
+                originX: window.x + fitted.padding,
+                originY: window.y + bar + (window.height - bar - body) / 2,
+                fontSize: fitted.fontSize,
+                charWidth: fitted.charWidth,
+                step: fitted.step,
+                fontFamily: config.code.fontFamily,
+                foreground: session.foreground,
+            }) +
+            codeFooter(dimensions, footerFs, config));
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/templates/terminal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/terminal/index.ts"],"names":[],"mappings":"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"}

package/dist/templates/terminal/session.d.ts

@@ -0,0 +1,17 @@
+import type { HighlightedCode } from "../../highlight/index.js";
+import type { MetaImageProps, ResolvedConfig } from "../../types.js";
+/**
+ * The session as one grid of lines: the commands, then what they printed.
+ *
+ * The commands go through the syntax highlighter as shell, which is what makes
+ * a flag look like a flag and a string look like a string. The output does
+ * not: it is whatever the program printed, and a shell grammar run over it
+ * would colour arbitrary words for reasons the reader cannot see. It is set in
+ * the theme's own foreground, a little faded, which is the difference a
+ * terminal shows between what you typed and what came back.
+ *
+ * Both are on one grid so that the whole session is fitted, clipped and drawn
+ * by the same code the `code` template uses.
+ */
+export declare function terminalSession(props: MetaImageProps, config: ResolvedConfig): Promise<HighlightedCode>;
+//# sourceMappingURL=session.d.ts.map

package/dist/templates/terminal/session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../../../src/templates/terminal/session.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiDrE;;;;;;;;;;;;GAYG;AACH,wBAAsB,eAAe,CACnC,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,cAAc,GACrB,OAAO,CAAC,eAAe,CAAC,CAoC1B"}

package/dist/templates/terminal/session.js

@@ -0,0 +1,86 @@
+import { expandTabs, highlightCode } from "../../highlight/index.js";
+import { optionalString } from "../../props.js";
+/** How faint the output is against the command that produced it. */
+const outputOpacity = 0.68;
+/** What goes in front of a command when the post names no prompt. */
+const defaultPrompt = "$";
+/** One line of output: no grammar, no colour of its own, just dimmer. */
+function outputLine(text, tabSize) {
+    return [
+        {
+            text: expandTabs(text, tabSize),
+            column: 0,
+            color: undefined,
+            opacity: outputOpacity,
+            bold: false,
+            italic: false,
+        },
+    ];
+}
+/** The prompt itself, in the site's accent colour. */
+function promptToken(prompt, accent) {
+    return {
+        text: prompt,
+        column: 0,
+        color: accent,
+        opacity: undefined,
+        bold: true,
+        italic: false,
+    };
+}
+/** The width of the widest line, in characters. */
+function widest(lines) {
+    let longest = 0;
+    for (const tokens of lines) {
+        const last = tokens.at(-1);
+        if (last !== undefined) {
+            longest = Math.max(longest, last.column + last.text.length);
+        }
+    }
+    return longest;
+}
+/**
+ * The session as one grid of lines: the commands, then what they printed.
+ *
+ * The commands go through the syntax highlighter as shell, which is what makes
+ * a flag look like a flag and a string look like a string. The output does
+ * not: it is whatever the program printed, and a shell grammar run over it
+ * would colour arbitrary words for reasons the reader cannot see. It is set in
+ * the theme's own foreground, a little faded, which is the difference a
+ * terminal shows between what you typed and what came back.
+ *
+ * Both are on one grid so that the whole session is fitted, clipped and drawn
+ * by the same code the `code` template uses.
+ */
+export async function terminalSession(props, config) {
+    const prompt = optionalString(props["prompt"]) ?? defaultPrompt;
+    const command = optionalString(props["command"]) ?? "";
+    const output = optionalString(props["output"]) ?? "";
+    const { tabSize } = config.code;
+    const highlighted = await highlightCode(command, {
+        language: "bash",
+        theme: optionalString(props["theme"]) ?? config.code.theme,
+        tabSize,
+    });
+    // Every line of the command block gets its own prompt, since a block of them
+    // is a run of commands typed one after another, which is what a terminal
+    // shows. A blank line between two of them does not: a prompt with nothing
+    // after it reads as a command that was never typed.
+    const indent = prompt === "" ? 0 : prompt.length + 1;
+    const commands = highlighted.lines.map((tokens) => [
+        ...(indent === 0 || tokens.length === 0
+            ? []
+            : [promptToken(prompt, config.colors.brandWarm)]),
+        ...tokens.map((token) => ({ ...token, column: token.column + indent })),
+    ]);
+    const printed = output === ""
+        ? []
+        : output
+            .replaceAll("\r\n", "\n")
+            .replace(/\n+$/, "")
+            .split("\n")
+            .map((line) => outputLine(line, tabSize));
+    const lines = [...(command === "" ? [] : commands), ...printed];
+    return { ...highlighted, lines, longestLine: widest(lines) };
+}
+//# sourceMappingURL=session.js.map

package/dist/templates/terminal/session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.js","sourceRoot":"","sources":["../../../src/templates/terminal/session.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,oEAAoE;AACpE,MAAM,aAAa,GAAG,IAAI,CAAC;AAE3B,qEAAqE;AACrE,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,yEAAyE;AACzE,SAAS,UAAU,CAAC,IAAY,EAAE,OAAe;IAC/C,OAAO;QACL;YACE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC;YAC/B,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,aAAa;YACtB,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,KAAK;SACd;KACF,CAAC;AACJ,CAAC;AAED,sDAAsD;AACtD,SAAS,WAAW,CAAC,MAAc,EAAE,MAAc;IACjD,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,KAAK;KACd,CAAC;AACJ,CAAC;AAED,mDAAmD;AACnD,SAAS,MAAM,CAAC,KAAwC;IACtD,IAAI,OAAO,GAAG,CAAC,CAAC;IAEhB,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CACnC,KAAqB,EACrB,MAAsB;IAEtB,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,aAAa,CAAC;IAChE,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC;IACvD,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;IACrD,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAEhC,MAAM,WAAW,GAAG,MAAM,aAAa,CAAC,OAAO,EAAE;QAC/C,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK;QAC1D,OAAO;KACR,CAAC,CAAC;IAEH,6EAA6E;IAC7E,yEAAyE;IACzE,0EAA0E;IAC1E,oDAAoD;IACpD,MAAM,MAAM,GAAG,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC;QACjD,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YACrC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;QACnD,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;KACxE,CAAC,CAAC;IAEH,MAAM,OAAO,GACX,MAAM,KAAK,EAAE;QACX,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,MAAM;aACH,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC;aACxB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;aACnB,KAAK,CAAC,IAAI,CAAC;aACX,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAElD,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC;IAEhE,OAAO,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AAC/D,CAAC"}

package/dist/templates/terminal/window.d.ts

@@ -0,0 +1,14 @@
+import type { MeasureText, ResolvedConfig } from "../../types.js";
+import type { Panel } from "../code/panel.js";
+/** How tall the title bar is on a window of this width. */
+export declare function barHeight(windowWidth: number): number;
+/**
+ * The bar across the top of the window: a lighter band, the buttons, and the
+ * title in the middle of what is left.
+ *
+ * The band is white at low opacity rather than a colour of its own, so it
+ * lifts whatever the code theme's background happens to be instead of having
+ * to be chosen against it.
+ */
+export declare function titleBar(window: Panel, height: number, title: string, config: ResolvedConfig, measure: MeasureText): string;
+//# sourceMappingURL=window.d.ts.map

package/dist/templates/terminal/window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/templates/terminal/window.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAiB9C,2DAA2D;AAC3D,wBAAgB,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAErD;AAwBD;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,WAAW,GACnB,MAAM,CA6BR"}

package/dist/templates/terminal/window.js

@@ -0,0 +1,84 @@
+import { baselineFor, box, clampLine, measureIn, textElement, } from "../../layout/index.js";
+/** The title bar's height, as a fraction of the window's width. */
+const barScale = 0.055;
+/** The buttons' diameter, as a fraction of the bar's height. */
+const buttonScale = 0.26;
+/**
+ * The three buttons, in the colours every reader has seen on a window.
+ *
+ * They are not the site's colours and are not meant to be. The point of the
+ * chrome is that the image is recognised as a terminal before a word of it is
+ * read, and these are what does the recognising.
+ */
+const buttons = ["#ff5f57", "#febc2e", "#28c840"];
+/** How tall the title bar is on a window of this width. */
+export function barHeight(windowWidth) {
+    return Math.round(windowWidth * barScale);
+}
+/**
+ * A rectangle with its top corners rounded and its bottom ones square, which
+ * is the shape of a title bar sitting in the top of a rounded window.
+ *
+ * It has to be one shape rather than a rounded rectangle with a square one
+ * over its bottom half, which is the obvious way to do it and the wrong one:
+ * the band is drawn at low opacity, so anywhere the two overlapped would be
+ * painted twice and come out as a lighter block with a curve through it.
+ */
+function roundedTop(rect, radius) {
+    const { x, y, width, height } = rect;
+    const r = Math.min(radius, Math.round(width / 2), height);
+    return (`M${String(x)} ${String(y + r)}` +
+        `a${String(r)} ${String(r)} 0 0 1 ${String(r)} ${String(-r)}` +
+        `h${String(width - r * 2)}` +
+        `a${String(r)} ${String(r)} 0 0 1 ${String(r)} ${String(r)}` +
+        `v${String(height - r)}h${String(-width)}z`);
+}
+/**
+ * The bar across the top of the window: a lighter band, the buttons, and the
+ * title in the middle of what is left.
+ *
+ * The band is white at low opacity rather than a colour of its own, so it
+ * lifts whatever the code theme's background happens to be instead of having
+ * to be chosen against it.
+ */
+export function titleBar(window, height, title, config, measure) {
+    const { radius } = window;
+    const diameter = Math.round(height * buttonScale);
+    const gap = Math.round(diameter * 1.7);
+    const left = window.x + Math.round(height * 0.6);
+    const middle = window.y + Math.round(height / 2);
+    const band = `<path d="${roundedTop({ x: window.x, y: window.y, width: window.width, height }, radius)}"` +
+        ` fill="#ffffff" fill-opacity="0.07"/>${box({ x: window.x, y: window.y + height, width: window.width, height: 1 }, { fill: "#ffffff", fillOpacity: 0.1 })}`;
+    const lights = buttons
+        .map((fill, index) => box({
+        x: left + index * gap,
+        y: middle - Math.round(diameter / 2),
+        width: diameter,
+        height: diameter,
+    }, { radius: Math.round(diameter / 2), fill }))
+        .join("");
+    return band + lights + windowTitle(title, window, height, config, measure);
+}
+/**
+ * The window's title, centred in the bar. It is cut to the room between the
+ * buttons and the far edge, taking the buttons' width off both sides so that
+ * it stays centred in the bar rather than in what the buttons left.
+ */
+function windowTitle(title, window, height, config, measure) {
+    if (title === "") {
+        return "";
+    }
+    const fontSize = Math.round(height * 0.42);
+    const reserved = Math.round(height * 2.4);
+    return textElement(clampLine(title, window.width - reserved * 2, measureIn(measure, config.fontFamily, 600), fontSize), {
+        x: Math.round(window.x + window.width / 2),
+        y: baselineFor(window.y + (height - fontSize) / 2, fontSize),
+        fontFamily: config.fontFamily,
+        fontSize,
+        fontWeight: 600,
+        fill: "#ffffff",
+        fillOpacity: 0.6,
+        anchor: "middle",
+    });
+}
+//# sourceMappingURL=window.js.map

package/dist/templates/terminal/window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window.js","sourceRoot":"","sources":["../../../src/templates/terminal/window.ts"],"names":[],"mappings":"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"}

package/dist/templates/version.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The version as it is drawn, or nothing where the post named none.
+ *
+ * A `v` goes in front, since that is how a release is written down nearly
+ * everywhere a reader will have seen one, but only where the post has not
+ * written one itself. Frontmatter is hand-typed and both `1.2.0` and `v1.2.0`
+ * are what somebody means by the same release, so the alternative is an image
+ * that says `vv1.2.0`.
+ *
+ * Any leading `v` counts, not only one in front of a digit, since `vNext` and
+ * `v2.0` are the same kind of label and nothing here validates a version
+ * anyway. The cost is that a version that genuinely starts with a `v` and is
+ * not a prefix goes unprefixed, and no such version has ever been written.
+ */
+export declare function versionLabel(value: unknown): string | undefined;
+//# sourceMappingURL=version.d.ts.map

package/dist/templates/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/templates/version.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAQ/D"}

package/dist/templates/version.js

@@ -0,0 +1,23 @@
+import { optionalString } from "../props.js";
+/**
+ * The version as it is drawn, or nothing where the post named none.
+ *
+ * A `v` goes in front, since that is how a release is written down nearly
+ * everywhere a reader will have seen one, but only where the post has not
+ * written one itself. Frontmatter is hand-typed and both `1.2.0` and `v1.2.0`
+ * are what somebody means by the same release, so the alternative is an image
+ * that says `vv1.2.0`.
+ *
+ * Any leading `v` counts, not only one in front of a digit, since `vNext` and
+ * `v2.0` are the same kind of label and nothing here validates a version
+ * anyway. The cost is that a version that genuinely starts with a `v` and is
+ * not a prefix goes unprefixed, and no such version has ever been written.
+ */
+export function versionLabel(value) {
+    const version = optionalString(value);
+    if (version === undefined || version === "") {
+        return undefined;
+    }
+    return version.startsWith("v") ? version : `v${version}`;
+}
+//# sourceMappingURL=version.js.map

package/dist/templates/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/templates/version.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CAAC,KAAc;IACzC,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAEtC,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;QAC5C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC;AAC3D,CAAC"}

package/dist/templates/wordmark/index.d.ts

@@ -0,0 +1,13 @@
+import type { Template } from "../../types.js";
+/**
+ * The logo above the name and its tagline, for a homepage or a repository
+ * preview: the image a project uses when the thing being shared is the project
+ * itself rather than a post.
+ *
+ * The mark is part of the centred group rather than pinned to the top corner
+ * as it is elsewhere, since here it is the subject of the image. A project
+ * with no logo configured gets the name and tagline alone, which is the same
+ * layout with nothing above it.
+ */
+export declare const wordmarkTemplate: Template;
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/wordmark/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/wordmark/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,gBAAgB,CAAC;AAShE;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,EAAE,QAmD9B,CAAC"}

package/dist/templates/wordmark/index.js

@@ -0,0 +1,53 @@
+import { linesHeight, stack } from "../../layout/index.js";
+import { drawSlot, footerLine } from "../bottom.js";
+import { contentArea, gapAfter, imageFrame } from "../frame.js";
+import { wordmarkLines } from "./lines.js";
+import { markElement, markHeight } from "./mark.js";
+/** How the lines of the name and tagline are stacked. */
+const lineHeight = 1.2;
+/**
+ * The logo above the name and its tagline, for a homepage or a repository
+ * preview: the image a project uses when the thing being shared is the project
+ * itself rather than a post.
+ *
+ * The mark is part of the centred group rather than pinned to the top corner
+ * as it is elsewhere, since here it is the subject of the image. A project
+ * with no logo configured gets the name and tagline alone, which is the same
+ * layout with nothing above it.
+ */
+export const wordmarkTemplate = {
+    name: "wordmark",
+    render({ props, config, dimensions, measure, logo, avatar, }) {
+        const { width, height } = dimensions;
+        const frame = imageFrame(dimensions, config, avatar, {
+            padScale: 0.09,
+        });
+        const area = contentArea(frame);
+        const lines = wordmarkLines(props, {
+            measure,
+            fontFamily: config.fontFamily,
+            contentWidth: area.width,
+            nameFs: Math.round(height * 0.11),
+            taglineFs: Math.round(height * 0.045),
+            height,
+        });
+        const mark = markHeight(logo, height);
+        const [markSlot, textSlot] = stack([
+            { size: mark },
+            {
+                size: linesHeight(lines, lineHeight),
+                gapBefore: gapAfter(mark, Math.round(height * 0.055)),
+            },
+        ], area);
+        const body = drawSlot(lines, textSlot, {
+            fontFamily: config.fontFamily,
+            fill: config.colors.foreground,
+            lineHeight,
+            anchor: "middle",
+        });
+        return (markElement(logo, markSlot) +
+            body +
+            footerLine(config, frame, width, avatar, measure, "middle"));
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/templates/wordmark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/wordmark/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEpD,yDAAyD;AACzD,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAa;IACxC,IAAI,EAAE,UAAU;IAChB,MAAM,CAAC,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,GACU;QAChB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE;YACnD,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE;YACjC,OAAO;YACP,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;YACjC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YACrC,MAAM;SACP,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACtC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,KAAK,CAChC;YACE,EAAE,IAAI,EAAE,IAAI,EAAE;YACd;gBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;gBACpC,SAAS,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;aACtD;SACF,EACD,IAAI,CACL,CAAC;QAEF,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE;YACrC,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU;YAC9B,UAAU;YACV,MAAM,EAAE,QAAQ;SACjB,CAAC,CAAC;QAEH,OAAO,CACL,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC;YAC3B,IAAI;YACJ,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAC5D,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/templates/wordmark/lines.d.ts

@@ -0,0 +1,22 @@
+import type { TextLine } from "../../layout/index.js";
+import type { MeasureText, MetaImageProps } from "../../types.js";
+/** The space the wordmark's text has, and how to measure it into it. */
+export interface WordmarkText {
+    readonly measure: MeasureText;
+    readonly fontFamily: string;
+    readonly contentWidth: number;
+    readonly nameFs: number;
+    readonly taglineFs: number;
+    readonly height: number;
+}
+/**
+ * The name, then the tagline under it.
+ *
+ * The name is one line however small that has to make it, because a product
+ * name broken across two stops looking like a wordmark. A scoped package name,
+ * which is the case this template exists for, is exactly the string that would
+ * otherwise be broken up: it is one long word, so wrapping it splits it
+ * mid-word rather than at the slash.
+ */
+export declare function wordmarkLines(props: MetaImageProps, text: WordmarkText): TextLine[];
+//# sourceMappingURL=lines.d.ts.map

package/dist/templates/wordmark/lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/wordmark/lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOtD,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAWlE,wEAAwE;AACxE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAuCD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,YAAY,GACjB,QAAQ,EAAE,CAeZ"}

package/dist/templates/wordmark/lines.js

@@ -0,0 +1,61 @@
+import { blockLines, clampLine, measureIn, optionalString, } from "../../layout/index.js";
+const maxNameLines = 1;
+const maxTaglineLines = 2;
+/** The weight the name is both drawn at and measured at, which have to agree. */
+const nameWeight = 800;
+const nameFloor = 0.45;
+const taglineFloor = 0.8;
+/**
+ * The name as one line: shrunk until it fits, and cut with an ellipsis when
+ * even the floor is not small enough.
+ *
+ * Wrapping is what the fitting would otherwise do at that point, and a name
+ * with no spaces in it wraps mid-word. A cut says the name goes on; a name
+ * broken across two lines looks like the name.
+ */
+function nameLines(props, text) {
+    const { measure, fontFamily, contentWidth } = text;
+    const name = optionalString(props.title) ?? "";
+    const [line] = blockLines(name, measure, fontFamily, {
+        maxWidth: contentWidth,
+        maxLines: maxNameLines,
+        fontSize: text.nameFs,
+        floor: nameFloor,
+        fontWeight: nameWeight,
+        opacity: 1,
+    });
+    if (line === undefined || line.text === name) {
+        return line === undefined ? [] : [line];
+    }
+    return [
+        {
+            ...line,
+            text: clampLine(name, contentWidth, measureIn(measure, fontFamily, nameWeight), line.fontSize),
+        },
+    ];
+}
+/**
+ * The name, then the tagline under it.
+ *
+ * The name is one line however small that has to make it, because a product
+ * name broken across two stops looking like a wordmark. A scoped package name,
+ * which is the case this template exists for, is exactly the string that would
+ * otherwise be broken up: it is one long word, so wrapping it splits it
+ * mid-word rather than at the slash.
+ */
+export function wordmarkLines(props, text) {
+    const { measure, fontFamily, contentWidth } = text;
+    return [
+        ...nameLines(props, text),
+        ...blockLines(props.subtitle, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxTaglineLines,
+            fontSize: text.taglineFs,
+            floor: taglineFloor,
+            fontWeight: 500,
+            opacity: 0.85,
+            gapBefore: Math.round(text.height * 0.035),
+        }),
+    ];
+}
+//# sourceMappingURL=lines.js.map

package/dist/templates/wordmark/lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/wordmark/lines.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,cAAc,GACf,MAAM,uBAAuB,CAAC;AAG/B,MAAM,YAAY,GAAG,CAAC,CAAC;AACvB,MAAM,eAAe,GAAG,CAAC,CAAC;AAE1B,iFAAiF;AACjF,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB,MAAM,SAAS,GAAG,IAAI,CAAC;AACvB,MAAM,YAAY,GAAG,GAAG,CAAC;AAYzB;;;;;;;GAOG;AACH,SAAS,SAAS,CAAC,KAAqB,EAAE,IAAkB;IAC1D,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IACnD,MAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC/C,MAAM,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE;QACnD,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,IAAI,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,UAAU;QACtB,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;IAEH,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;QAC7C,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL;YACE,GAAG,IAAI;YACP,IAAI,EAAE,SAAS,CACb,IAAI,EACJ,YAAY,EACZ,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,EAC1C,IAAI,CAAC,QAAQ,CACd;SACF;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAqB,EACrB,IAAkB;IAElB,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAEnD,OAAO;QACL,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC;QACzB,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE;YACjD,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,eAAe;YACzB,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,KAAK,EAAE,YAAY;YACnB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SAC3C,CAAC;KACH,CAAC;AACJ,CAAC"}

package/dist/templates/wordmark/mark.d.ts

@@ -0,0 +1,16 @@
+import type { Rect } from "../../layout/index.js";
+import type { ImageAsset } from "../../types.js";
+/**
+ * How tall the mark is drawn, or nothing at all where the project configured
+ * no logo, which is what takes the mark and the gap under it out of the stack.
+ */
+export declare function markHeight(logo: ImageAsset | undefined, imageHeight: number): number;
+/**
+ * The mark, centred in the slot the stack gave it.
+ *
+ * Its width comes from the height it was allotted and the proportions of the
+ * file, as it does in the corner of every other template, so one logo works on
+ * a square and a landscape alike.
+ */
+export declare function markElement(logo: ImageAsset | undefined, slot: Rect | undefined): string;
+//# sourceMappingURL=mark.d.ts.map

package/dist/templates/wordmark/mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/templates/wordmark/mark.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKjD;;;GAGG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,WAAW,EAAE,MAAM,GAClB,MAAM,CAER;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,IAAI,EAAE,IAAI,GAAG,SAAS,GACrB,MAAM,CAiBR"}

package/dist/templates/wordmark/mark.js

@@ -0,0 +1,30 @@
+import { image } from "../../layout/index.js";
+/** The mark's height, as a fraction of the image's. */
+const markScale = 0.2;
+/**
+ * How tall the mark is drawn, or nothing at all where the project configured
+ * no logo, which is what takes the mark and the gap under it out of the stack.
+ */
+export function markHeight(logo, imageHeight) {
+    return logo === undefined ? 0 : Math.round(imageHeight * markScale);
+}
+/**
+ * The mark, centred in the slot the stack gave it.
+ *
+ * Its width comes from the height it was allotted and the proportions of the
+ * file, as it does in the corner of every other template, so one logo works on
+ * a square and a landscape alike.
+ */
+export function markElement(logo, slot) {
+    if (logo === undefined || slot === undefined || slot.height === 0) {
+        return "";
+    }
+    const width = Math.round(slot.height * logo.aspect);
+    return image({
+        x: Math.round(slot.x + (slot.width - width) / 2),
+        y: slot.y,
+        width,
+        height: slot.height,
+    }, logo.href, { fit: "contain" });
+}
+//# sourceMappingURL=mark.js.map

package/dist/templates/wordmark/mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mark.js","sourceRoot":"","sources":["../../../src/templates/wordmark/mark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAI9C,uDAAuD;AACvD,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,IAA4B,EAC5B,WAAmB;IAEnB,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;AACtE,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,IAA4B,EAC5B,IAAsB;IAEtB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClE,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;IAEpD,OAAO,KAAK,CACV;QACE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,KAAK;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;KACpB,EACD,IAAI,CAAC,IAAI,EACT,EAAE,GAAG,EAAE,SAAS,EAAE,CACnB,CAAC;AACJ,CAAC"}

package/dist/text/clamp.d.ts

@@ -0,0 +1,12 @@
+import type { MeasureAt } from "./fit.js";
+/**
+ * Cut one line to the width it has, marking the cut with an ellipsis.
+ *
+ * This is what a line that may not wrap does instead of wrapping: a bullet in
+ * a list of changes, a breadcrumb, a window title. Shrinking is the better
+ * answer wherever there is room for it, which is what `fitText` is for and why
+ * most text goes through that instead. A line set alongside others at the same
+ * size cannot shrink on its own without looking like a mistake.
+ */
+export declare function clampLine(text: string, maxWidth: number, measure: MeasureAt, fontSize: number): string;
+//# sourceMappingURL=clamp.d.ts.map

package/dist/text/clamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../src/text/clamp.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CA8BR"}

package/dist/text/clamp.js

@@ -0,0 +1,41 @@
+import { ellipsis } from "./ellipsis.js";
+/**
+ * Cut one line to the width it has, marking the cut with an ellipsis.
+ *
+ * This is what a line that may not wrap does instead of wrapping: a bullet in
+ * a list of changes, a breadcrumb, a window title. Shrinking is the better
+ * answer wherever there is room for it, which is what `fitText` is for and why
+ * most text goes through that instead. A line set alongside others at the same
+ * size cannot shrink on its own without looking like a mistake.
+ */
+export function clampLine(text, maxWidth, measure, fontSize) {
+    const full = measure(text, fontSize);
+    if (full <= maxWidth || text === "") {
+        return text;
+    }
+    const isWithin = (length) => measure(text.slice(0, length) + ellipsis, fontSize) <= maxWidth;
+    // Start from what the width would be if every character were as wide as the
+    // average, then walk to the real answer. A proportional face makes that a
+    // guess rather than a result, so it is corrected in both directions. The
+    // floor of nought is what stops a caller with no room left, which is a width
+    // that has come out negative, reaching `slice` with a negative length and
+    // being cut from the wrong end.
+    let kept = Math.max(0, Math.min(text.length, Math.floor((text.length * maxWidth) / full)));
+    while (kept < text.length && isWithin(kept + 1)) {
+        kept += 1;
+    }
+    while (kept > 0 && !isWithin(kept)) {
+        kept -= 1;
+    }
+    return withoutSplitPair(text.slice(0, kept)).trimEnd() + ellipsis;
+}
+/**
+ * Drop a trailing lone surrogate, which is what cutting by string index does
+ * to a character outside the basic plane: an emoji in a changelog entry is two
+ * units long, and half of one is not a character at all. Escaping it would put
+ * an unpaired surrogate in the document.
+ */
+function withoutSplitPair(text) {
+    return /[\uD800-\uDBFF]$/.test(text) ? text.slice(0, -1) : text;
+}
+//# sourceMappingURL=clamp.js.map