components/email/specimen/samples.ts

Functions

Imports

It imports components/email/email.ts. No module of this repo imports it.

Source

1// Sample mails for the states page. Invented, with an obviously fake token. Each frame is the
2// real renderEmail output in an iframe. A frame forced to light drops the dark rules; one forced
3// to dark applies them whatever the page's own scheme, so both show on one page.
4import { alert, magicLink, notice, renderEmail, reset, verification, type Common } from "../email.ts";
5
6const common: Common = { brand: { name: "Carrel", family: "purple" }, to: "reader@example.com" };
7const link = { url: "https://carrel.example/auth/verify?t=EXAMPLE-NOT-A-TOKEN", expiresIn: "15 minutes" };
8
9const SAMPLES: Record<string, () => string> = {
10  magicLink: () => renderEmail(magicLink, { ...common, ...link }).html,
11  verification: () => renderEmail(verification, { ...common, ...link }).html,
12  reset: () => renderEmail(reset, { ...common, ...link }).html,
13  alert: () =>
14    renderEmail(alert, {
15      ...common,
16      level: "crit",
17      what: "Backups have not run for 26 hours",
18      when: "08:15 UTC on 8 October",
19      details: ["The nightly backup job failed twice. The last good copy is from 6 October."],
20      url: "https://carrel.example/admin/health",
21    }).html,
22  notice: () =>
23    renderEmail(notice, {
24      ...common,
25      title: "Your drafts moved",
26      body: ["Drafts now live under Writing in the sidebar.", "Nothing was deleted, and the links you shared still work."],
27      action: { label: "Open Writing", url: "https://carrel.example/writing" },
28    }).html,
29};
30
31const DARK_RULES = /@media \(prefers-color-scheme: dark\)\{[\s\S]*?\n\}\n/;
32
33export function renderSamples(root: ParentNode = document): void {
34  for (const frame of root.querySelectorAll<HTMLIFrameElement>("iframe[data-email]")) {
35    const html = SAMPLES[frame.dataset.email ?? ""]?.();
36    if (html === undefined) throw new Error(`no sample for ${frame.dataset.email}`);
37    frame.style.setProperty("inline-size", `${frame.dataset.width ?? "600"}px`);
38    frame.srcdoc = frame.dataset.scheme === "light" ? html.replace(DARK_RULES, "") : html.replace("@media (prefers-color-scheme: dark)", "@media all");
39  }
40}