app/lib/content/og-card-text.mjs

Functions

Imports

It imports app/lib/bytes.mjs, app/lib/long-date.mjs, app/lib/media/classify.mjs. Imported by app/lib/content-pages.mjs, app/lib/content/pipeline.mjs, app/lib/search/search.server.ts.

Source

1// Its own module because ogImageKey must hash the same clamped strings the card draws, and because a
2// route names a page's card through it without importing the markdown renderer. Characters stand in
3// for width, so every number here was measured off rendered cards.
4
5import { fnv1a32 } from "../bytes.mjs";
6import { longDateUTC } from "../long-date.mjs";
7import { ASSET_PREFIX } from "../media/classify.mjs";
8
9export const TITLE_MAX = 150;
10
11/**
12 * Measured off rendered 1200x630 cards against the layout in build-og.mjs.
13 *
14 * @type {ReadonlyArray<{ maxChars: number, fontSize: number }>}
15 */
16export const TITLE_SIZES = [
17  { maxChars: 72, fontSize: 72 },
18  { maxChars: 110, fontSize: 54 },
19  { maxChars: TITLE_MAX, fontSize: 42 },
20];
21
22// Two lines of description, enforced here because satori's WebkitLineClamp does nothing.
23export const DESCRIPTION_MAX = 132;
24
25// Dashes as escapes in a string: a hook bans those characters from the repo's bytes.
26const DANGLING_PUNCTUATION = new RegExp("[,;:.\\u2014\\u2013-]+$");
27
28/**
29 * A single word longer than max is still cut: running off the card is worse.
30 *
31 * @param {string | null | undefined} value
32 * @param {number} max
33 * @returns {string}
34 */
35export function clampWords(value, max) {
36  const text = (value ?? "").trim();
37  if (text.length <= max) return text;
38  const cut = text.slice(0, max);
39  const lastSpace = cut.lastIndexOf(" ");
40  const kept = lastSpace > 0 ? cut.slice(0, lastSpace) : cut;
41  return `${kept.replace(DANGLING_PUNCTUATION, "")}…`;
42}
43
44/**
45 * @param {string | null | undefined} title
46 * @returns {string}
47 */
48export function cardTitle(title) {
49  return clampWords(title, TITLE_MAX);
50}
51
52/**
53 * @param {string | null | undefined} description
54 * @returns {string}
55 */
56export function cardDescription(description) {
57  return clampWords(description, DESCRIPTION_MAX);
58}
59
60/**
61 * Throws, never falls back: a title past the last rung means TITLE_MAX and the ladder disagree.
62 *
63 * @param {string} title the title AS DRAWN, i.e. already through `cardTitle`
64 * @returns {number}
65 */
66export function titleFontSize(title) {
67  const length = (title ?? "").length;
68  for (const rung of TITLE_SIZES) {
69    if (length <= rung.maxChars) return rung.fontSize;
70  }
71  throw new Error(
72    `og-card-text: a ${length}-character title is past the last rung of the ` +
73      `ladder (${TITLE_MAX}). Titles must go through cardTitle() first.`,
74  );
75}
76
77// Bump on any card template change: the key hashes only the card's inputs, and an immutable cache
78// ignores a restyled PNG under an unchanged key forever.
79const OG_TEMPLATE_VERSION = 5;
80
81/**
82 * Hashes exactly what the card draws, AS DRAWN (through cardTitle, cardDescription, longDateUTC), so
83 * the key changes when the picture would and never otherwise. FNV-1a: identical in Node and a Worker,
84 * and this is a cache-busting key, not a security boundary.
85 *
86 * @param {{
87 *   slug: string,
88 *   title: string,
89 *   description?: string | null,
90 *   publishAt?: string | null,
91 * }} post
92 */
93export function ogImageKey(post) {
94  const drawnDate = longDateUTC(post.publishAt);
95  const input =
96    `${OG_TEMPLATE_VERSION}\n${post.slug}\n${cardTitle(post.title)}\n` +
97    `${cardDescription(post.description)}\n${drawnDate === null ? "" : drawnDate}`;
98  return `og/${ASSET_PREFIX}${post.slug}-${fnv1a32(input)}.png`;
99}