@kensio/colophon 2.5.0 → 2.6.0

package/dist/templates/frame.js

@@ -0,0 +1,63 @@
+import { footerBaseline, hasFooter } from "./footer.js";
+import { inset } from "../layout/index.js";
+/** Margin from the image edge, as a fraction of its width. */
+const defaultPadScale = 0.075;
+/** The footer's size, as a fraction of the image's height. */
+const footerScale = 0.032;
+/** Clear space between the content and the footer line, as a fraction of it. */
+const footerGap = 0.02;
+/**
+ * Work out a template's frame. The avatar counts as a footer even where the
+ * config carries no text, since the picture is drawn on the same line and
+ * needs the same room.
+ */
+export function imageFrame(dimensions, config, avatar, options = {}) {
+    const { width, height } = dimensions;
+    const pad = Math.round(width * (options.padScale ?? defaultPadScale));
+    const footerFontSize = Math.round(height * footerScale);
+    const isDrawn = options.footer === true || hasFooter(config) || avatar !== undefined;
+    return {
+        pad,
+        footerFontSize,
+        full: { x: 0, y: 0, width, height },
+        footerRoom: isDrawn ? footerFontSize + Math.round(height * footerGap) : 0,
+        footerY: footerBaseline(height, pad, footerFontSize),
+    };
+}
+/**
+ * The room a mark along the top of the image takes, including the clear space
+ * under it, or nothing at all where there is no mark.
+ *
+ * A height of nothing is the same as no mark, since the gap under a mark that
+ * is not there is the space a template would then be reserving for nobody.
+ */
+export function markRoom(height, gap) {
+    return height === undefined || height === 0 ? 0 : height + gap;
+}
+/**
+ * The space a template's content has: the whole image, less the margins, less
+ * whatever sits along the top, less the footer line.
+ *
+ * `top` is what {@link markRoom} worked out, or whatever else the template put
+ * up there. It is extra: the margin is added here, so a template with nothing
+ * along the top passes nothing.
+ */
+export function contentArea(frame, top = 0) {
+    return inset(frame.full, {
+        top: frame.pad + top,
+        right: frame.pad,
+        left: frame.pad,
+        bottom: frame.pad + frame.footerRoom,
+    });
+}
+/**
+ * A gap that is only there when the thing before it is.
+ *
+ * Stacking a group that a post may not have given anything to means the space
+ * above it has to disappear along with it, or the layout keeps a hole where
+ * the missing part was.
+ */
+export function gapAfter(size, gap) {
+    return size === 0 ? 0 : gap;
+}
+//# sourceMappingURL=frame.js.map

package/dist/templates/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../src/templates/frame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAI3C,8DAA8D;AAC9D,MAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,8DAA8D;AAC9D,MAAM,WAAW,GAAG,KAAK,CAAC;AAE1B,gFAAgF;AAChF,MAAM,SAAS,GAAG,IAAI,CAAC;AAsCvB;;;;GAIG;AACH,MAAM,UAAU,UAAU,CACxB,UAAsB,EACtB,MAAsB,EACtB,MAA8B,EAC9B,OAAO,GAAiB,EAAE;IAE1B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC;IACtE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IACxD,MAAM,OAAO,GACX,OAAO,CAAC,MAAM,KAAK,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,MAAM,KAAK,SAAS,CAAC;IAEvE,OAAO;QACL,GAAG;QACH,cAAc;QACd,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;QACnC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACzE,OAAO,EAAE,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,cAAc,CAAC;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,MAA0B,EAAE,GAAW;IAC9D,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC;AACjE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,KAAY,EAAE,GAAG,GAAG,CAAC;IAC/C,OAAO,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE;QACvB,GAAG,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG;QACpB,KAAK,EAAE,KAAK,CAAC,GAAG;QAChB,IAAI,EAAE,KAAK,CAAC,GAAG;QACf,MAAM,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,UAAU;KACrC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,GAAW;IAChD,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9B,CAAC"}

package/dist/templates/index.d.ts

@@ -4,8 +4,17 @@ import type { Template } from "../types.js";
  * via `config.templates`.
  */
 export declare const builtinTemplates: Readonly<Record<string, Template>>;
+export { articleTemplate } from "./article/index.js";
 export { bannerTemplate } from "./banner/index.js";
 export { cardTemplate } from "./card/index.js";
 export { codeTemplate } from "./code/index.js";
+export { docsTemplate } from "./docs/index.js";
+export { eventTemplate } from "./event/index.js";
+export { photoTemplate } from "./photo/index.js";
+export { quoteTemplate } from "./quote/index.js";
+export { releaseTemplate } from "./release/index.js";
+export { statTemplate } from "./stat/index.js";
+export { terminalTemplate } from "./terminal/index.js";
+export { wordmarkTemplate } from "./wordmark/index.js";
 export { optionalString } from "../props.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK5C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAI/D,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAc5C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAa/D,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/templates/index.js

@@ -1,17 +1,44 @@
+import { articleTemplate } from "./article/index.js";
 import { bannerTemplate } from "./banner/index.js";
 import { cardTemplate } from "./card/index.js";
 import { codeTemplate } from "./code/index.js";
+import { docsTemplate } from "./docs/index.js";
+import { eventTemplate } from "./event/index.js";
+import { photoTemplate } from "./photo/index.js";
+import { quoteTemplate } from "./quote/index.js";
+import { releaseTemplate } from "./release/index.js";
+import { statTemplate } from "./stat/index.js";
+import { terminalTemplate } from "./terminal/index.js";
+import { wordmarkTemplate } from "./wordmark/index.js";
 /**
  * Templates registered out of the box. Projects can add to or override these
  * via `config.templates`.
  */
 export const builtinTemplates = {
+    [articleTemplate.name]: articleTemplate,
     [bannerTemplate.name]: bannerTemplate,
     [cardTemplate.name]: cardTemplate,
     [codeTemplate.name]: codeTemplate,
+    [docsTemplate.name]: docsTemplate,
+    [eventTemplate.name]: eventTemplate,
+    [photoTemplate.name]: photoTemplate,
+    [quoteTemplate.name]: quoteTemplate,
+    [releaseTemplate.name]: releaseTemplate,
+    [statTemplate.name]: statTemplate,
+    [terminalTemplate.name]: terminalTemplate,
+    [wordmarkTemplate.name]: wordmarkTemplate,
 };
+export { articleTemplate } from "./article/index.js";
 export { bannerTemplate } from "./banner/index.js";
 export { cardTemplate } from "./card/index.js";
 export { codeTemplate } from "./code/index.js";
+export { docsTemplate } from "./docs/index.js";
+export { eventTemplate } from "./event/index.js";
+export { photoTemplate } from "./photo/index.js";
+export { quoteTemplate } from "./quote/index.js";
+export { releaseTemplate } from "./release/index.js";
+export { statTemplate } from "./stat/index.js";
+export { terminalTemplate } from "./terminal/index.js";
+export { wordmarkTemplate } from "./wordmark/index.js";
 export { optionalString } from "../props.js";
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAuC;IAClE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;IACjC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;CAClC,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAuC;IAClE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,eAAe;IACvC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;IACjC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;IACjC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;IACjC,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa;IACnC,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa;IACnC,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa;IACnC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,eAAe;IACvC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;IACjC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,gBAAgB;IACzC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,gBAAgB;CAC1C,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { Template } from "../../types.js";
+/**
+ * A photograph with the title over it, set along the bottom.
+ *
+ * The picture comes from the post's `image` prop rather than from config,
+ * which is what separates this from setting a background image: config is the
+ * same for every post, and the whole point here is a different photograph on
+ * each one. A post with no `image` still renders, over the configured
+ * background, which is what a template has to do with a prop it was not given.
+ *
+ * The wash over the picture is not optional. Text over an unshaded photograph
+ * is legible or not depending on what the photograph happens to hold, and a
+ * build cannot look at it. The scrim is heavier than the one a background
+ * image gets, because here the words sit right on top of it.
+ */
+export declare const photoTemplate: Template;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/templates/photo/index.js

@@ -0,0 +1,51 @@
+import { drawLines, image, scrim } from "../../layout/index.js";
+import { footerLine } from "../bottom.js";
+import { contentArea, imageFrame, markRoom } from "../frame.js";
+import { logoElement, logoRect } from "../logo.js";
+import { photoLines } from "./lines.js";
+/** The wash over the picture: clear at the top, dark where the words are. */
+const scrimFrom = 0.15;
+const scrimTo = 0.85;
+const scrimId = "colophon-photo-scrim";
+/**
+ * A photograph with the title over it, set along the bottom.
+ *
+ * The picture comes from the post's `image` prop rather than from config,
+ * which is what separates this from setting a background image: config is the
+ * same for every post, and the whole point here is a different photograph on
+ * each one. A post with no `image` still renders, over the configured
+ * background, which is what a template has to do with a prop it was not given.
+ *
+ * The wash over the picture is not optional. Text over an unshaded photograph
+ * is legible or not depending on what the photograph happens to hold, and a
+ * build cannot look at it. The scrim is heavier than the one a background
+ * image gets, because here the words sit right on top of it.
+ */
+export const photoTemplate = {
+    name: "photo",
+    render({ props, config, dimensions, measure, logo, avatar, picture, }) {
+        const { width, height } = dimensions;
+        const { fontFamily, colors } = config;
+        const frame = imageFrame(dimensions, config, avatar);
+        const { pad } = frame;
+        const mark = logoRect(logo, dimensions, pad, "start");
+        const backdrop = picture === undefined
+            ? ""
+            : image(frame.full, picture.href, { fit: "cover" }) +
+                scrim(frame.full, scrimId, { from: scrimFrom, to: scrimTo });
+        const area = contentArea(frame, markRoom(mark?.height, pad / 2));
+        // Set along the bottom, where the scrim is heaviest and where a picture
+        // usually has least going on.
+        const body = drawLines(photoLines(props, {
+            measure,
+            fontFamily,
+            contentWidth: area.width,
+            titleFs: Math.round(height * 0.086),
+            standfirstFs: Math.round(height * 0.042),
+            height,
+        }), area, { fontFamily, fill: colors.foreground, lineHeight: 1.24, align: "end" });
+        const footer = footerLine(config, frame, width, avatar, measure, "start", 0.85);
+        return backdrop + logoElement(logo, mark) + body + footer;
+    },
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/photo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,6EAA6E;AAC7E,MAAM,SAAS,GAAG,IAAI,CAAC;AACvB,MAAM,OAAO,GAAG,IAAI,CAAC;AAErB,MAAM,OAAO,GAAG,sBAAsB,CAAC;AAEvC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,aAAa,GAAa;IACrC,IAAI,EAAE,OAAO;IACb,MAAM,CAAC,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,GACS;QAChB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QACtC,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QACrD,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;QAEtD,MAAM,QAAQ,GACZ,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC;gBACjD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;QAEnE,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QAEjE,wEAAwE;QACxE,8BAA8B;QAC9B,MAAM,IAAI,GAAG,SAAS,CACpB,UAAU,CAAC,KAAK,EAAE;YAChB,OAAO;YACP,UAAU;YACV,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YACnC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YACxC,MAAM;SACP,CAAC,EACF,IAAI,EACJ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CACxE,CAAC;QAEF,MAAM,MAAM,GAAG,UAAU,CACvB,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,CACL,CAAC;QAEF,OAAO,QAAQ,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5D,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,21 @@
+import type { TextLine } from "../../layout/index.js";
+import type { MeasureText, MetaImageProps } from "../../types.js";
+/** The space the photo's text has, and how to measure it into it. */
+export interface PhotoText {
+    readonly measure: MeasureText;
+    readonly fontFamily: string;
+    readonly contentWidth: number;
+    readonly titleFs: number;
+    readonly standfirstFs: number;
+    readonly height: number;
+}
+/**
+ * The title, then the line under it.
+ *
+ * Both are shorter here than on the templates that have the whole image to
+ * themselves. Text over a photograph is harder to read whatever the scrim
+ * does, and a paragraph of it hides the picture that was the reason for
+ * choosing this template.
+ */
+export declare function photoLines(props: MetaImageProps, text: PhotoText): TextLine[];
+//# sourceMappingURL=lines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/photo/lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAOlE,qEAAqE;AACrE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,GAAG,QAAQ,EAAE,CAsB7E"}

package/dist/templates/photo/lines.js

@@ -0,0 +1,36 @@
+import { blockLines } from "../../layout/index.js";
+const maxTitleLines = 3;
+const maxStandfirstLines = 2;
+const titleFloor = 0.6;
+const standfirstFloor = 0.8;
+/**
+ * The title, then the line under it.
+ *
+ * Both are shorter here than on the templates that have the whole image to
+ * themselves. Text over a photograph is harder to read whatever the scrim
+ * does, and a paragraph of it hides the picture that was the reason for
+ * choosing this template.
+ */
+export function photoLines(props, text) {
+    const { measure, fontFamily, contentWidth } = text;
+    return [
+        ...blockLines(props.title, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxTitleLines,
+            fontSize: text.titleFs,
+            floor: titleFloor,
+            fontWeight: 800,
+            opacity: 1,
+        }),
+        ...blockLines(props.subtitle, measure, fontFamily, {
+            maxWidth: contentWidth,
+            maxLines: maxStandfirstLines,
+            fontSize: text.standfirstFs,
+            floor: standfirstFloor,
+            fontWeight: 500,
+            opacity: 0.9,
+            gapBefore: Math.round(text.height * 0.025),
+        }),
+    ];
+}
+//# sourceMappingURL=lines.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../src/templates/photo/lines.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC7B,MAAM,UAAU,GAAG,GAAG,CAAC;AACvB,MAAM,eAAe,GAAG,GAAG,CAAC;AAY5B;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,KAAqB,EAAE,IAAe;IAC/D,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAEnD,OAAO;QACL,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9C,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,KAAK,EAAE,UAAU;YACjB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,CAAC;SACX,CAAC;QACF,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE;YACjD,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,kBAAkB;YAC5B,QAAQ,EAAE,IAAI,CAAC,YAAY;YAC3B,KAAK,EAAE,eAAe;YACtB,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SAC3C,CAAC;KACH,CAAC;AACJ,CAAC"}

package/dist/templates/pill.d.ts

@@ -0,0 +1,33 @@
+import type { Rect } from "../layout/index.js";
+import type { MeasureText } from "../types.js";
+/** How a pill is filled and set. */
+export interface PillStyle {
+    readonly fontFamily: string;
+    readonly fontWeight: number;
+    /** The text colour. */
+    readonly fill: string;
+    readonly background: string;
+    readonly backgroundOpacity?: number;
+    /** Corner radius. Defaults to half the height, so the ends are round. */
+    readonly radius?: number;
+}
+/** The text size a pill of this height sets its label at. */
+export declare function pillFontSize(height: number): number;
+/**
+ * How wide a pill has to be to hold its label.
+ *
+ * Measured rather than counted, because a tag is whatever word a post used and
+ * a row of them is laid out before any of it is drawn. The corner badge on the
+ * `banner` guesses from the character count, which is why it only ever holds a
+ * word or two.
+ */
+export declare function pillWidth(text: string, height: number, style: PillStyle, measure: MeasureText): number;
+/**
+ * A label on a rounded plate: a tag on an article, a date on an event.
+ *
+ * The text is centred in the rectangle it was given rather than set from the
+ * left, so a pill drawn wider than {@link pillWidth} asked for still looks
+ * deliberate.
+ */
+export declare function pill(text: string, rect: Rect, style: PillStyle): string;
+//# sourceMappingURL=pill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../../src/templates/pill.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,oCAAoC;AACpC,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,uBAAuB;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,yEAAyE;IACzE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,GACnB,MAAM,CASR;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,CAsBvE"}

package/dist/templates/pill.js

@@ -0,0 +1,50 @@
+import { baselineFor, box, measureIn, textElement } from "../layout/index.js";
+/** The text's size within the pill, as a fraction of its height. */
+const textScale = 0.5;
+/** Clear space at each end of the text, as a fraction of the pill's height. */
+const padScale = 0.42;
+/** The text size a pill of this height sets its label at. */
+export function pillFontSize(height) {
+    return Math.round(height * textScale);
+}
+/**
+ * How wide a pill has to be to hold its label.
+ *
+ * Measured rather than counted, because a tag is whatever word a post used and
+ * a row of them is laid out before any of it is drawn. The corner badge on the
+ * `banner` guesses from the character count, which is why it only ever holds a
+ * word or two.
+ */
+export function pillWidth(text, height, style, measure) {
+    const fontSize = pillFontSize(height);
+    const width = measureIn(measure, style.fontFamily, style.fontWeight)(text, fontSize);
+    return Math.round(width + height * padScale * 2);
+}
+/**
+ * A label on a rounded plate: a tag on an article, a date on an event.
+ *
+ * The text is centred in the rectangle it was given rather than set from the
+ * left, so a pill drawn wider than {@link pillWidth} asked for still looks
+ * deliberate.
+ */
+export function pill(text, rect, style) {
+    const fontSize = pillFontSize(rect.height);
+    const plate = box(rect, {
+        fill: style.background,
+        radius: style.radius ?? Math.round(rect.height / 2),
+        ...(style.backgroundOpacity !== undefined && {
+            fillOpacity: style.backgroundOpacity,
+        }),
+    });
+    const label = textElement(text, {
+        x: Math.round(rect.x + rect.width / 2),
+        y: baselineFor(rect.y + (rect.height - fontSize) / 2, fontSize),
+        fontFamily: style.fontFamily,
+        fontSize,
+        fontWeight: style.fontWeight,
+        fill: style.fill,
+        anchor: "middle",
+    });
+    return plate + label;
+}
+//# sourceMappingURL=pill.js.map

package/dist/templates/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../src/templates/pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAI9E,oEAAoE;AACpE,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,+EAA+E;AAC/E,MAAM,QAAQ,GAAG,IAAI,CAAC;AActB,6DAA6D;AAC7D,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;AACxC,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CACvB,IAAY,EACZ,MAAc,EACd,KAAgB,EAChB,OAAoB;IAEpB,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,SAAS,CACrB,OAAO,EACP,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,UAAU,CACjB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAElB,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC;AACnD,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAAC,IAAY,EAAE,IAAU,EAAE,KAAgB;IAC7D,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,EAAE;QACtB,IAAI,EAAE,KAAK,CAAC,UAAU;QACtB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QACnD,GAAG,CAAC,KAAK,CAAC,iBAAiB,KAAK,SAAS,IAAI;YAC3C,WAAW,EAAE,KAAK,CAAC,iBAAiB;SACrC,CAAC;KACH,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE;QAC9B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACtC,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC;QAC/D,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,QAAQ;QACR,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;IAEH,OAAO,KAAK,GAAG,KAAK,CAAC;AACvB,CAAC"}

package/dist/templates/portrait.d.ts

@@ -0,0 +1,40 @@
+import type { Rect } from "../layout/index.js";
+import type { ImageAsset } from "../types.js";
+import type { FooterPlacement } from "./footer.js";
+/**
+ * How much of the line the picture takes before the words start.
+ *
+ * A template with something else on the same line, such as the article's
+ * footer at the other end of it, has to know this before it can work out what
+ * room the words are left with.
+ */
+export declare function portraitAdvance(fontSize: number): number;
+/**
+ * How tall a line with a picture on it is, which is more than the words alone
+ * would need. A template stacking such a line with anything else has to leave
+ * room for the picture or the two collide.
+ */
+export declare function portraitHeight(fontSize: number): number;
+/** A line with an avatar on it: the space it has, and where the line sits. */
+export interface PortraitPlacement extends FooterPlacement {
+    /** Left edge and width of the content area the line is set within. */
+    readonly left: number;
+    readonly width: number;
+}
+/** Where the picture and the words beside it ended up. */
+export interface Portrait {
+    readonly rect: Rect;
+    /** Where the label starts, which is after the picture and its gap. */
+    readonly labelX: number;
+}
+/**
+ * Set a circular avatar and a label beside it on one line.
+ *
+ * Only the horizontal placement comes from the row. The baseline is the one
+ * the template asked for, so a line with an avatar and a line without one sit
+ * at the same height.
+ */
+export declare function portraitRow(placement: PortraitPlacement, textWidth: number): Portrait;
+/** The avatar itself, clipped to a circle. */
+export declare function portraitImage(avatar: ImageAsset, rect: Rect, id: string): string;
+//# sourceMappingURL=portrait.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"portrait.d.ts","sourceRoot":"","sources":["../../src/templates/portrait.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAWnD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAExD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,8EAA8E;AAC9E,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,sEAAsE;IACtE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,0DAA0D;AAC1D,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,MAAM,GAChB,QAAQ,CAoBV;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAC3B,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,MAAM,GACT,MAAM,CAMR"}

package/dist/templates/portrait.js

@@ -0,0 +1,56 @@
+import { image, row } from "../layout/index.js";
+/** The avatar's diameter, as a multiple of the line's font size. */
+const avatarScale = 1.9;
+/** Where a circular avatar's centre sits above the line's baseline. */
+const avatarRise = 0.34;
+/** Space between the picture and the words, as a multiple of the size. */
+const gapScale = 0.5;
+/**
+ * How much of the line the picture takes before the words start.
+ *
+ * A template with something else on the same line, such as the article's
+ * footer at the other end of it, has to know this before it can work out what
+ * room the words are left with.
+ */
+export function portraitAdvance(fontSize) {
+    return portraitHeight(fontSize) + Math.round(fontSize * gapScale);
+}
+/**
+ * How tall a line with a picture on it is, which is more than the words alone
+ * would need. A template stacking such a line with anything else has to leave
+ * room for the picture or the two collide.
+ */
+export function portraitHeight(fontSize) {
+    return Math.round(fontSize * avatarScale);
+}
+/**
+ * Set a circular avatar and a label beside it on one line.
+ *
+ * Only the horizontal placement comes from the row. The baseline is the one
+ * the template asked for, so a line with an avatar and a line without one sit
+ * at the same height.
+ */
+export function portraitRow(placement, textWidth) {
+    const { fontSize } = placement;
+    const size = Math.round(fontSize * avatarScale);
+    const gap = textWidth === 0 ? 0 : Math.round(fontSize * gapScale);
+    const [portrait, label] = row([{ size }, { size: Math.round(textWidth), gapBefore: gap }], { x: placement.left, y: placement.y, width: placement.width, height: size }, placement.anchor === "middle" ? "centre" : "start");
+    return {
+        rect: {
+            x: portrait?.x ?? placement.left,
+            y: Math.round(placement.y - fontSize * avatarRise - size / 2),
+            width: size,
+            height: size,
+        },
+        labelX: label?.x ?? placement.left,
+    };
+}
+/** The avatar itself, clipped to a circle. */
+export function portraitImage(avatar, rect, id) {
+    return image(rect, avatar.href, {
+        fit: "cover",
+        radius: Math.round(rect.width / 2),
+        id,
+    });
+}
+//# sourceMappingURL=portrait.js.map

package/dist/templates/portrait.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portrait.js","sourceRoot":"","sources":["../../src/templates/portrait.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAKhD,oEAAoE;AACpE,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,uEAAuE;AACvE,MAAM,UAAU,GAAG,IAAI,CAAC;AAExB,0EAA0E;AAC1E,MAAM,QAAQ,GAAG,GAAG,CAAC;AAErB;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,OAAO,cAAc,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACpE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,QAAgB;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,CAAC;AAC5C,CAAC;AAgBD;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CACzB,SAA4B,EAC5B,SAAiB;IAEjB,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,GAAG,CAC3B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAC3D,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAC3E,SAAS,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CACnD,CAAC;IAEF,OAAO;QACL,IAAI,EAAE;YACJ,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,SAAS,CAAC,IAAI;YAChC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,QAAQ,GAAG,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC;YAC7D,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;SACb;QACD,MAAM,EAAE,KAAK,EAAE,CAAC,IAAI,SAAS,CAAC,IAAI;KACnC,CAAC;AACJ,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,aAAa,CAC3B,MAAkB,EAClB,IAAU,EACV,EAAU;IAEV,OAAO,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE;QAC9B,GAAG,EAAE,OAAO;QACZ,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAClC,EAAE;KACH,CAAC,CAAC;AACL,CAAC"}

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

@@ -0,0 +1,11 @@
+import type { Template } from "../../types.js";
+/**
+ * A pull quote: the quotation mark, the words, and who said them.
+ *
+ * The quotation is the whole image, so there is no logo up in the corner
+ * competing with it. What the post carries instead is the speaker: an `author`
+ * and an optional `role`, with the `avatar` prop drawn beside them where there
+ * is one.
+ */
+export declare const quoteTemplate: Template;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/templates/quote/index.js

@@ -0,0 +1,60 @@
+import { linesHeight, stack } from "../../layout/index.js";
+import { drawSlot, footerLine } from "../bottom.js";
+import { contentArea, imageFrame } from "../frame.js";
+import { attributionText, quoteLines } from "./lines.js";
+import { markBand, quoteMark } from "./mark.js";
+import { speaker, speakerRoom } from "./speaker.js";
+/** How the lines of the quotation are stacked. */
+const lineHeight = 1.3;
+/**
+ * A pull quote: the quotation mark, the words, and who said them.
+ *
+ * The quotation is the whole image, so there is no logo up in the corner
+ * competing with it. What the post carries instead is the speaker: an `author`
+ * and an optional `role`, with the `avatar` prop drawn beside them where there
+ * is one.
+ */
+export const quoteTemplate = {
+    name: "quote",
+    render({ props, config, dimensions, measure, avatar, }) {
+        const { width, height } = dimensions;
+        const { fontFamily, colors } = config;
+        // The avatar goes on the attribution line rather than the footer, so as
+        // far as the frame is concerned there is none.
+        const frame = imageFrame(dimensions, config, undefined, {
+            padScale: 0.09,
+        });
+        const area = contentArea(frame);
+        const lines = quoteLines(props, {
+            measure,
+            fontFamily,
+            contentWidth: area.width,
+            quoteFs: Math.round(height * 0.075),
+        });
+        const markFs = Math.round(height * 0.17);
+        const said = attributionText(props);
+        const saidFs = Math.round(height * 0.04);
+        const [markSlot, textSlot, saidSlot] = stack([
+            { size: markBand(markFs) },
+            {
+                size: linesHeight(lines, lineHeight),
+                gapBefore: Math.round(height * 0.03),
+            },
+            {
+                size: speakerRoom(said, saidFs, avatar),
+                gapBefore: Math.round(height * 0.055),
+            },
+        ], area);
+        const body = drawSlot(lines, textSlot, {
+            fontFamily,
+            fill: colors.foreground,
+            lineHeight,
+            anchor: "middle",
+        });
+        return (quoteMark(markSlot, markFs, fontFamily, colors.brandWarm) +
+            body +
+            speaker(said, saidSlot, saidFs, config, avatar, measure) +
+            footerLine(config, frame, width, undefined, measure, "middle", 0.7));
+    },
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/quote/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,UAAU,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEpD,kDAAkD;AAClD,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAa;IACrC,IAAI,EAAE,OAAO;IACb,MAAM,CAAC,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,GACU;QAChB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QACtC,wEAAwE;QACxE,+CAA+C;QAC/C,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE;YACtD,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE;YAC9B,OAAO;YACP,UAAU;YACV,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;SACpC,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;QAEzC,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,KAAK,CAC1C;YACE,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE;YAC1B;gBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;gBACpC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;aACrC;YACD;gBACE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC;gBACvC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;aACtC;SACF,EACD,IAAI,CACL,CAAC;QAEF,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE;YACrC,UAAU;YACV,IAAI,EAAE,MAAM,CAAC,UAAU;YACvB,UAAU;YACV,MAAM,EAAE,QAAQ;SACjB,CAAC,CAAC;QAEH,OAAO,CACL,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,SAAS,CAAC;YACzD,IAAI;YACJ,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;YACxD,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,CACpE,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,24 @@
+import type { TextLine } from "../../layout/index.js";
+import type { MeasureText, MetaImageProps } from "../../types.js";
+/** The space the quotation has, and how to measure it into it. */
+export interface QuoteText {
+    readonly measure: MeasureText;
+    readonly fontFamily: string;
+    readonly contentWidth: number;
+    readonly quoteFs: number;
+}
+/**
+ * The quotation itself, read from `quote` or from `title`.
+ *
+ * Both names are taken because a post that is about one sentence usually has
+ * that sentence in its title already, and making it write the same words twice
+ * to get an image of them would be a poor trade for a tidier prop list.
+ */
+export declare function quoteLines(props: MetaImageProps, text: QuoteText): TextLine[];
+/**
+ * Who said it: the name, then whatever the post added about them, after an em
+ * dash. The dash is what makes the line read as an attribution rather than as
+ * another line of the quotation.
+ */
+export declare function attributionText(props: MetaImageProps): string;
+//# sourceMappingURL=lines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/templates/quote/lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKlE,kEAAkE;AAClE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,GAAG,QAAQ,EAAE,CAW7E;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAS7D"}