app/lib/cv/pdf-html.mjs

Functions

Imports

It imports app/lib/bytes.mjs, app/lib/cv/markdown.mjs, app/lib/seo.ts. Imported by app/lib/cv/pdf.server.ts, app/lib/health/checks.server.ts, app/lib/operator/sync-tools.server.ts.

Source

1// The CV's print document and the numbers the PDF is stamped with, shared by the two renderers: the Worker
2// (app/lib/cv/pdf.server.ts, Browser Run's quickAction after each CV save) and the offline script
3// (scripts/build-cv-pdf.mjs, headless Chrome through puppeteer). One copy of the HTML, so the two cannot draw
4// different documents. Nothing here needs a browser, a filesystem or a Worker binding: the markdown pipeline and
5// the fonts come in as arguments, because the Worker reads them one way and the script another.
6
7import { escapeHtml } from "@dustinedwards/site-runtime/html";
8
9import { toHex } from "../bytes.mjs";
10import { OWNER_ORCID, SITE_ORIGIN } from "../seo.ts";
11import { cvMarkdownBody, cvMarkdownDocument } from "./markdown.mjs";
12
13/** The words the PDF's last line carries before the fingerprint. */
14export const FINGERPRINT_LABEL = "CV data";
15
16/**
17 * Eight hex characters of the twin's source (SHA-256, through Web Crypto so the Worker and Node compute the same).
18 * The PDF prints it, and the stored object carries it as custom metadata, so a PDF rendered from other data than
19 * the CV now holds is a difference two sides can compare.
20 *
21 * @param {import("./entries.mjs").Cv} CV
22 * @returns {Promise<string>}
23 */
24export async function cvFingerprint(CV) {
25  const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(cvMarkdownDocument(CV)));
26  return toHex(digest).slice(0, 8);
27}
28
29/** @param {Uint8Array} bytes */
30function base64(bytes) {
31  let binary = "";
32  for (let at = 0; at < bytes.length; at += 0x8000) binary += String.fromCharCode(...bytes.subarray(at, at + 0x8000));
33  return btoa(binary);
34}
35
36/** @param {string} family @param {Uint8Array} bytes @param {string} style */
37export function fontFaceRule(family, bytes, style) {
38  return `@font-face{font-family:"${family}";src:url(data:font/woff2;base64,${base64(bytes)}) format("woff2");font-style:${style};font-weight:100 900;}`;
39}
40
41/** The three faces the print document uses: file name, family and style, for whoever reads them. */
42export const PDF_FONTS = /** @type {const} */ ([
43  { file: "source-serif-4-latin-normal.woff2", family: "Source Serif 4", style: "normal" },
44  { file: "source-serif-4-latin-italic.woff2", family: "Source Serif 4", style: "italic" },
45  { file: "inter-latin-normal.woff2", family: "Inter", style: "normal" },
46]);
47
48const PRINT_CSS = `
49@page { size: Letter; margin: 0.8in 0.85in 0.85in; }
50html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
51body { margin: 0; color: #1f1a17; font-family: "Source Serif 4", Georgia, serif; font-size: 10.5pt; line-height: 1.42; }
52a { color: inherit; text-decoration: none; }
53.letterhead { border-bottom: 1.5pt solid #4f2d7f; padding-bottom: 10pt; margin-bottom: 4pt; }
54.letterhead h1 { margin: 0; color: #4f2d7f; font-size: 24pt; font-weight: 650; letter-spacing: -0.01em; line-height: 1.1; }
55.letterhead p { margin: 4pt 0 0; font-family: "Inter", Arial, sans-serif; font-size: 9pt; color: #4a423b; line-height: 1.45; }
56.letterhead .edition { text-transform: uppercase; letter-spacing: 0.08em; font-size: 7.5pt; font-weight: 600; color: #6a6159; margin: 0 0 6pt; }
57h2 { margin: 16pt 0 6pt; padding-bottom: 3pt; border-bottom: 0.6pt solid #b9ada0; color: #4f2d7f; font-size: 13pt; font-weight: 650; break-after: avoid; }
58h3 { margin: 10pt 0 4pt; font-family: "Inter", Arial, sans-serif; font-size: 8pt; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #4a423b; break-after: avoid; }
59h4 { margin: 10pt 0 2pt; font-size: 10.5pt; font-weight: 650; break-after: avoid; }
60.heading-anchor { display: none; }
61p { margin: 3pt 0; }
62ul, ol { margin: 3pt 0; padding-left: 16pt; }
63li { margin: 0 0 3.5pt; break-inside: avoid; }
64ul li::marker { color: #8a7d6e; }
65ul:has(> li > strong:first-child) { padding-left: 0; }
66ul > li:has(> strong:first-child) { list-style: none; padding-left: 6.4em; text-indent: -6.4em; }
67ul > li > strong:first-child { display: inline-block; width: 6.4em; text-indent: 0; font-family: "Inter", Arial, sans-serif; font-size: 8.5pt; font-weight: 600; color: #4a423b; }
68ol li::marker { color: #6a6159; font-family: "Inter", Arial, sans-serif; font-size: 8.5pt; }
69strong { font-weight: 650; }
70em { font-style: italic; }
71.fingerprint { margin-top: 18pt; font-family: "Inter", Arial, sans-serif; font-size: 7.5pt; color: #6a6159; }
72`;
73
74/**
75 * The print document for a resolved CV: the letterhead, the twin's markdown through the site's pipeline, the
76 * fonts inlined, and the fingerprint. A function of the CV alone, so whatever holds a CV (the script from the
77 * files, the Worker from D1) renders the same page.
78 *
79 * @param {import("./entries.mjs").Cv} CV
80 * @param {{ renderBody: (input: { file: string, body: string, resolveImage: (src: string) => Promise<never> }) => Promise<{ html: string, blockedUrls: Array<{ url: string }> }>, fontCss: string }} deps
81 *   the site's markdown pipeline, and the `@font-face` rules for PDF_FONTS
82 */
83export async function renderCvHtml(CV, { renderBody, fontCss }) {
84  const rendered = await renderBody({
85    file: "content/cv",
86    body: cvMarkdownBody(CV, { pdf: true }),
87    resolveImage: async (src) => {
88      throw new Error(`the CV references an image (${src}) and its PDF has no image pipeline.`);
89    },
90  });
91  if (rendered.blockedUrls.length > 0) {
92    throw new Error(`the CV carries link(s) the URL allowlist refused: ${rendered.blockedUrls.map((b) => b.url).join(", ")}`);
93  }
94  const { person } = CV;
95  const host = new URL(SITE_ORIGIN).host;
96  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${escapeHtml(`${person.name}, Curriculum Vitae`)}</title>
97<style>${fontCss}${PRINT_CSS}</style></head><body>
98<header class="letterhead">
99<p class="edition">Curriculum Vitae · ${escapeHtml(CV.edition)}</p>
100<h1>${escapeHtml(`${person.name}, ${person.degree}`)}</h1>
101<p>${escapeHtml(`${person.title}, ${person.department}, ${person.org}`)}</p>
102<p><a href="${SITE_ORIGIN}/cv">${escapeHtml(`${host}/cv`)}</a> · <a href="${OWNER_ORCID}">ORCID ${OWNER_ORCID.split("/").pop()}</a></p>
103</header>
104${rendered.html}
105<p class="fingerprint">Generated from the same data as ${escapeHtml(`${host}/cv`)}, where every entry can be searched and filtered. ${FINGERPRINT_LABEL} ${await cvFingerprint(CV)}.</p>
106</body></html>`;
107}
108
109/**
110 * The page.pdf() options, in the form puppeteer and Browser Run's quickAction("pdf") both read (every field is in
111 * quickAction's documented pdfOptions). `format` is lower case, which both accept.
112 *
113 * @param {import("./entries.mjs").Cv} CV
114 */
115export function cvPdfOptions(CV) {
116  return {
117    format: /** @type {"letter"} */ ("letter"),
118    printBackground: true,
119    preferCSSPageSize: true,
120    displayHeaderFooter: true,
121    headerTemplate: "<span></span>",
122    footerTemplate: `<div style="width:100%;padding:0 0.85in;font-family:Arial,sans-serif;font-size:7.5pt;color:#6a6159;display:flex;justify-content:space-between"><span>${escapeHtml(`${CV.person.name}, Curriculum Vitae, ${CV.edition}`)}</span><span><span class="pageNumber"></span> of <span class="totalPages"></span></span></div>`,
123    tagged: true,
124    outline: true,
125  };
126}