v4: weekly digests and monthly recaps go out by email, every email is written once as Markdown in the app's one catalog, and a review of the last two commits removes what they stated twice — users get a weekly digest (what happened to them, what the people and playlists they follow posted, the week's top dumps, the community) and a monthly recap (the month's top dumps and the community), both on by default, in their own style and scheme. digest-service sends what is due every quarter of an hour from digest_schedule (migration 0020), which holds each user's rolling 7- or 30-day period; existing users' first periods are spread over the coming week or month, a digest more than a period late covers the last full one, an empty one isn't sent, and an address like admin@localhost is skipped. Each digest carries a one-click unsubscribe (List-Unsubscribe and List-Unsubscribe-Post, POST /api/users/unsubscribe) and a link to the new /unsubscribe page, which asks before turning that cadence off, since mail scanners open every link; the token (lib/jwt) names the user and the cadence and never expires. The welcome email now says the digests are on. The emails' words moved out of a hand-written api/mail/strings.ts into the Lingui catalogs the interface uses: lingui extracts api/mail/ too, the catalogs moved to a top-level locales/ that both halves read, compile emits ES modules the server imports (api/mail/i18n.ts), messages take ICU plurals, and the labels the settings tab, the unsubscribe page and the emails share are one message each (their French had already drifted apart). Each template writes its email once as Markdown, which is the plain-text part, and EmailKit.render draws its blocks in the style (a lone link is a button, a list item starting with an image a thumbnail row, a numbered list a ranking, --- the footer), so no string is declared for an HTML and a text version; user text is escaped for Markdown, which the welcome body didn't do for usernames, whose _ read as emphasis. paint() set colors before a border-top shorthand that reset them, so every divider was black. The review also gave one home to what was written twice: the locale list (shared/locale.ts, read by lingui.config, the client, the server and its catalog loader), the base style and default scheme (shared/theme.ts), an email's look (lookOf, which digest-service, welcome and reset share), whether email is on (EMAIL_ENABLED, read by email-service and index.html), a setting's column and its default in the digests' SQL (SETTINGS_COLUMNS, DEFAULT_SETTINGS), the unsubscribe token (made once, not parsed back from a URL), AuthProvider's compare-and-store, ThemeProvider's twin style and scheme code (useThemeChoice), the test JWT encoder, and duplicate digest messages. The email palettes stay a flattened copy of the themes' tokens, now under a test that caught Times' secondary and link colors drifting. The Dockerfile copies api/mail and locales so the build extracts the emails' messages and the server finds its catalogs, and deno.json maps @lingui/core for the runtime image. 236 backend tests (new: digest building, sending, catch-up, scheduling and unsubscribing; the Markdown renderer; French from the catalog; palettes against themes; the stagger migration; unsubscribe tokens) and 661 frontend tests (new: the unsubscribe page) pass, and tsc, eslint, doc:lint, deno check, deno lint and deno fmt are clean.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
@@ -13,8 +13,20 @@
|
||||
* @module
|
||||
*/
|
||||
|
||||
import { type EmailLocale, OG_SITE_NAME, SITE_EMOJI } from "../config.ts";
|
||||
import type { ColorScheme, StyleName } from "../../shared/theme.ts";
|
||||
import { Marked, Parser, type Token, type Tokens } from "marked";
|
||||
|
||||
import {
|
||||
DEFAULT_STYLE,
|
||||
EMAIL_LOCALE,
|
||||
OG_SITE_NAME,
|
||||
SITE_EMOJI,
|
||||
} from "../config.ts";
|
||||
import {
|
||||
type ColorScheme,
|
||||
DEFAULT_COLOR_SCHEME,
|
||||
type StyleName,
|
||||
} from "../../shared/theme.ts";
|
||||
import type { UserSettings } from "../../shared/settings.ts";
|
||||
import {
|
||||
EMAIL_STYLES,
|
||||
type EmailPalette,
|
||||
@@ -29,19 +41,36 @@ import {
|
||||
export interface RenderedEmail {
|
||||
subject: string;
|
||||
html: string;
|
||||
/** The plain-text part, for clients that show no HTML. */
|
||||
/**
|
||||
* The plain-text part, for clients that show no HTML. It is Markdown, so it
|
||||
* reads as text and renders as the email's outline.
|
||||
*/
|
||||
text: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Passed to {@link EmailKit}. The instance's style draws the emails that
|
||||
* aren't a user's own; a digest takes its reader's settings.
|
||||
* Passed to {@link EmailKit}, made by {@link lookOf}: the instance's style for
|
||||
* the emails that aren't a user's own, their settings for a digest.
|
||||
*/
|
||||
export interface EmailLook {
|
||||
style: StyleName;
|
||||
scheme: ColorScheme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the look of a reader's settings. An unset style is the instance's,
|
||||
* as on the site, and an unset scheme the system's; with no settings at all,
|
||||
* as for the welcome and reset emails, both are.
|
||||
*/
|
||||
export function lookOf(
|
||||
settings: Pick<UserSettings, "style" | "colorScheme"> | null = null,
|
||||
): EmailLook {
|
||||
return {
|
||||
style: settings?.style ?? DEFAULT_STYLE,
|
||||
scheme: settings?.colorScheme ?? DEFAULT_COLOR_SCHEME,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Names a color of an {@link EmailPalette}, as {@link EmailKit.paint} takes
|
||||
* it, so that the dark block can recolor the element by the same name.
|
||||
@@ -79,14 +108,31 @@ export function esc(value: string): string {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Escapes `value` for Markdown, so that user text in a plain-text part (a
|
||||
* title with `*` or `[`, say) stays text.
|
||||
*/
|
||||
export function escMd(value: string): string {
|
||||
return value.replace(/[\\`*_[\]<>#!|~]/g, "\\$&");
|
||||
}
|
||||
|
||||
/** Returns a Markdown link to `url` labelled with `text`, escaped. */
|
||||
export function mdLink(text: string, url: string): string {
|
||||
const safeUrl = url.replace(
|
||||
/[()\s]/g,
|
||||
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`,
|
||||
);
|
||||
return `[${escMd(text)}](${safeUrl})`;
|
||||
}
|
||||
|
||||
const gradient = (colors: string[]) =>
|
||||
`linear-gradient(90deg,${colors.join(",")})`;
|
||||
|
||||
/**
|
||||
* Draws the blocks of an email in one {@link EmailLook}. A template creates
|
||||
* one, builds its body with the block methods, and wraps it with
|
||||
* {@link EmailKit.document}. The blocks return HTML: text passed to them must
|
||||
* already be escaped with {@link esc}.
|
||||
* Draws an email in one {@link EmailLook}. A template writes the email as
|
||||
* Markdown and hands it to {@link EmailKit.render}, which draws each block in
|
||||
* the style. The block methods return HTML: text passed to them must already
|
||||
* be escaped with {@link esc}.
|
||||
*/
|
||||
export class EmailKit {
|
||||
/** The style being drawn. */
|
||||
@@ -98,10 +144,12 @@ export class EmailKit {
|
||||
/** The font stack, for templates that set their own blocks. */
|
||||
readonly font: string;
|
||||
|
||||
constructor(look: EmailLook, readonly locale: EmailLocale) {
|
||||
constructor(look: EmailLook) {
|
||||
this.style = EMAIL_STYLES[look.style];
|
||||
this.palette = look.scheme === "dark" ? this.style.dark : this.style.light;
|
||||
this.darkPalette = look.scheme === "auto" ? this.style.dark : null;
|
||||
this.darkPalette = look.scheme === DEFAULT_COLOR_SCHEME
|
||||
? this.style.dark
|
||||
: null;
|
||||
this.font = this.style.font;
|
||||
}
|
||||
|
||||
@@ -140,7 +188,9 @@ export class EmailKit {
|
||||
style += `border-color:${p[roles.bd] ?? p.rule};`;
|
||||
}
|
||||
const cls = classes.length ? ` class="${classes.join(" ")}"` : "";
|
||||
return `${cls} style="${style}${css}"`;
|
||||
// The colors come last: a shorthand such as `border-top` in `css` would
|
||||
// otherwise reset them.
|
||||
return `${cls} style="${css}${style}"`;
|
||||
}
|
||||
|
||||
/** Returns a link to `href` around `html`, in the link color. */
|
||||
@@ -156,21 +206,6 @@ export class EmailKit {
|
||||
}>${html}</a>`;
|
||||
}
|
||||
|
||||
/** Returns `@username`, set off as a name. */
|
||||
name(username: string): string {
|
||||
return `<b${
|
||||
this.paint(
|
||||
{ fg: "text" },
|
||||
`font-weight:${Math.max(600, this.style.heavy)};`,
|
||||
)
|
||||
}>@${esc(username)}</b>`;
|
||||
}
|
||||
|
||||
/** Returns `html` in the muted color, inline. */
|
||||
muted(html: string): string {
|
||||
return `<span${this.paint({ fg: "muted" })}>${html}</span>`;
|
||||
}
|
||||
|
||||
/** Returns the email's heading, in the style's title type. */
|
||||
heading(html: string, marginBottom = 24): string {
|
||||
const t = this.style.title;
|
||||
@@ -281,30 +316,6 @@ export class EmailKit {
|
||||
}>${html}</div>`;
|
||||
}
|
||||
|
||||
/** Returns `lines`, one per line, in the secondary color. */
|
||||
lines(lines: string[]): string {
|
||||
return `<div${
|
||||
this.paint(
|
||||
{ fg: "sec" },
|
||||
`font-family:${this.font};font-size:${
|
||||
this.fs(14)
|
||||
};line-height:1.7;margin:0 0 18px;`,
|
||||
)
|
||||
}>${lines.join("<br>")}</div>`;
|
||||
}
|
||||
|
||||
/** Returns a block set off from what precedes it by a hairline. */
|
||||
aside(html: string): string {
|
||||
return `<div${
|
||||
this.paint(
|
||||
{ fg: "muted", bd: "rule" },
|
||||
`border-top:1px solid;font-family:${this.font};font-size:${
|
||||
this.fs(13.5)
|
||||
};line-height:1.6;padding:16px 0 14px;`,
|
||||
)
|
||||
}>${html}</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a section of the card: a divider in the style's rule (none before
|
||||
* the first), an uppercase title in the accent color, and `html`.
|
||||
@@ -343,16 +354,327 @@ export class EmailKit {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the whole HTML document: the brand, the card with the optional
|
||||
* `eyebrow` and `title` over `body`, and the `footer`. `preheader` is the
|
||||
* hidden first line inboxes show beside the subject.
|
||||
* Returns the email written as `markdown`: the Markdown itself is the
|
||||
* plain-text part, and its blocks, drawn in this kit's style, are the HTML.
|
||||
* Each template writes its email once this way. The blocks map as follows.
|
||||
*
|
||||
* - `# Title` is the heading; an `*emphasised*` paragraph above it, the
|
||||
* eyebrow. Elsewhere an emphasised paragraph is a note.
|
||||
* - `## Section` starts a section, with its divider; `### Name` a subhead.
|
||||
* - A link alone in a paragraph is a button, an image alone a wide image,
|
||||
* and a fenced block a box for a raw link.
|
||||
* - A list item whose text starts with an image, then a link, is a row
|
||||
* with that thumbnail and the link as its title; what follows is its
|
||||
* detail, and an emphasised word right after the link a pill. Other items
|
||||
* are sentences, where emphasis marks the date. A numbered list ranks its
|
||||
* rows, and a quote under an item is set as one.
|
||||
* - A bold number is a figure.
|
||||
* - What follows the last `---` is the footer.
|
||||
*/
|
||||
document(
|
||||
{ subject, preheader, eyebrow, title, body, footer }: {
|
||||
render(
|
||||
{ subject, preheader, markdown }: {
|
||||
subject: string;
|
||||
preheader: string;
|
||||
markdown: string;
|
||||
},
|
||||
): RenderedEmail {
|
||||
const cut = markdown.lastIndexOf("\n---\n");
|
||||
const body = cut === -1 ? markdown : markdown.slice(0, cut);
|
||||
const foot = cut === -1 ? "" : markdown.slice(cut + 5);
|
||||
return {
|
||||
subject,
|
||||
html: this.document({
|
||||
subject,
|
||||
preheader,
|
||||
body: this.blocks(this.marked.lexer(body)),
|
||||
footer: this.marked.lexer(foot)
|
||||
.filter((t): t is Tokens.Paragraph => t.type === "paragraph")
|
||||
.map((t) => this.inline(t.tokens, "footer")).join("<br>"),
|
||||
}),
|
||||
text: markdown,
|
||||
};
|
||||
}
|
||||
|
||||
/** How {@link inline} draws emphasis and links, by where they sit. */
|
||||
private mode: "text" | "footer" | "row" | "sentence" = "text";
|
||||
|
||||
/** Draws Markdown's inline tokens with the kit's colors. */
|
||||
private readonly marked: Marked = (() => {
|
||||
// deno-lint-ignore no-this-alias
|
||||
const kit = this;
|
||||
return new Marked({
|
||||
renderer: {
|
||||
link({ href, tokens }) {
|
||||
const html = this.parser.parseInline(tokens);
|
||||
return kit.mode === "footer"
|
||||
? `<a href="${esc(href)}"${
|
||||
kit.paint({ fg: "muted" }, "text-decoration:underline;")
|
||||
}>${html}</a>`
|
||||
: kit.link(html, href);
|
||||
},
|
||||
strong({ tokens }) {
|
||||
const html = this.parser.parseInline(tokens);
|
||||
const figure = /^[\d\s., ]+$/.test(html);
|
||||
return `<b${
|
||||
kit.paint(
|
||||
{ fg: "text" },
|
||||
figure
|
||||
? `font-size:${kit.fs(22)};font-weight:${kit.style.heavy};`
|
||||
: `font-weight:${Math.max(600, kit.style.heavy)};`,
|
||||
)
|
||||
}>${html}</b>`;
|
||||
},
|
||||
em({ tokens }) {
|
||||
const html = this.parser.parseInline(tokens);
|
||||
if (kit.mode === "row") return kit.pill(html);
|
||||
if (kit.mode === "sentence") {
|
||||
return `<span${
|
||||
kit.paint(
|
||||
{ fg: kit.palette.date ? "date" : "muted" },
|
||||
`font-size:${kit.fs(12.5)};white-space:nowrap;${
|
||||
kit.palette.date ? "font-style:italic;" : ""
|
||||
}`,
|
||||
)
|
||||
}>${html}</span>`;
|
||||
}
|
||||
return `<i>${html}</i>`;
|
||||
},
|
||||
codespan({ text }) {
|
||||
return `<code style="font-family:Menlo,Consolas,'Courier New',monospace;">${text}</code>`;
|
||||
},
|
||||
image({ href, text }) {
|
||||
return kit.image(href, text, 104, 78);
|
||||
},
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
||||
private inline(tokens: Token[], mode: EmailKit["mode"]): string {
|
||||
this.mode = mode;
|
||||
try {
|
||||
return Parser.parseInline(tokens, this.marked.defaults);
|
||||
} finally {
|
||||
this.mode = "text";
|
||||
}
|
||||
}
|
||||
|
||||
/** Draws the body's blocks, gathering each `##` section with its content. */
|
||||
private blocks(tokens: Token[]): string {
|
||||
const out: string[] = [];
|
||||
let section: { title: string; parts: string[] } | null = null;
|
||||
let first = true;
|
||||
let headed = false;
|
||||
const push = (html: string) =>
|
||||
section ? section.parts.push(html) : out.push(html);
|
||||
const close = () => {
|
||||
if (!section) return;
|
||||
out.push(this.section(section.title, section.parts.join(""), first));
|
||||
first = false;
|
||||
section = null;
|
||||
};
|
||||
for (const token of tokens) {
|
||||
switch (token.type) {
|
||||
case "heading": {
|
||||
const html = this.inline(token.tokens ?? [], "text");
|
||||
if (token.depth === 1) {
|
||||
headed = true;
|
||||
push(this.heading(html));
|
||||
} else if (token.depth === 2) {
|
||||
close();
|
||||
section = { title: html, parts: [] };
|
||||
} else {
|
||||
push(this.subhead(html));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "paragraph": {
|
||||
const kids = (token.tokens ?? []).filter((t) =>
|
||||
!(t.type === "text" && !t.raw.trim())
|
||||
);
|
||||
const only = kids.length === 1 ? kids[0] : null;
|
||||
if (only?.type === "link") {
|
||||
push(
|
||||
this.button(this.inline(only.tokens ?? [], "text"), only.href),
|
||||
);
|
||||
} else if (only?.type === "image") {
|
||||
push(
|
||||
`${
|
||||
this.image(only.href, only.text, 528, 264)
|
||||
}<div style="height:14px;line-height:14px;font-size:0;"> </div>`,
|
||||
);
|
||||
} else if (only?.type === "em") {
|
||||
const html = this.inline(only.tokens ?? [], "text");
|
||||
push(headed ? this.note(html) : this.eyebrow(html));
|
||||
} else {
|
||||
push(this.para(this.inline(token.tokens ?? [], "text")));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "list":
|
||||
push(this.list(token as Tokens.List));
|
||||
break;
|
||||
case "blockquote":
|
||||
push(this.quote(this.inline(
|
||||
(token.tokens ?? []).flatMap((t) =>
|
||||
"tokens" in t ? t.tokens ?? [] : []
|
||||
),
|
||||
"text",
|
||||
)));
|
||||
break;
|
||||
case "code":
|
||||
push(this.linkBox(esc(token.text)));
|
||||
break;
|
||||
case "html":
|
||||
push(token.text);
|
||||
break;
|
||||
}
|
||||
}
|
||||
close();
|
||||
return out.join("");
|
||||
}
|
||||
|
||||
/** Draws a list as rows, ranked when it is numbered. */
|
||||
private list(list: Tokens.List): string {
|
||||
const start = typeof list.start === "number" ? list.start : 1;
|
||||
return list.items.map((item, i) => {
|
||||
const text = item.tokens.find((t) =>
|
||||
t.type === "text" || t.type === "paragraph"
|
||||
) as Tokens.Text | Tokens.Paragraph | undefined;
|
||||
const quote = item.tokens.find((t) => t.type === "blockquote") as
|
||||
| Tokens.Blockquote
|
||||
| undefined;
|
||||
let rest: Token[] = [...(text?.tokens ?? [])];
|
||||
const skipSpace = () => {
|
||||
while (rest[0]?.type === "text" && !rest[0].raw.trim()) {
|
||||
rest = rest.slice(1);
|
||||
}
|
||||
};
|
||||
skipSpace();
|
||||
const image = rest[0]?.type === "image"
|
||||
? rest.shift() as Tokens.Image
|
||||
: null;
|
||||
skipSpace();
|
||||
const link = rest[0]?.type === "link"
|
||||
? rest.shift() as Tokens.Link
|
||||
: null;
|
||||
|
||||
let content: string;
|
||||
if (link) {
|
||||
const pills: Token[] = [];
|
||||
skipSpace();
|
||||
while (rest[0]?.type === "em") {
|
||||
pills.push(rest.shift()!);
|
||||
skipSpace();
|
||||
}
|
||||
// The detail follows the title after a " · ".
|
||||
if (rest[0]?.type === "text") {
|
||||
const t = rest[0] as Tokens.Text;
|
||||
const trimmed = t.text.replace(/^\s*·\s*/, "");
|
||||
rest[0] = { ...t, text: trimmed, raw: trimmed, tokens: undefined };
|
||||
}
|
||||
content = `<a href="${esc(link.href)}"${
|
||||
this.paint(
|
||||
{ fg: "text" },
|
||||
`font-size:${
|
||||
this.fs(15)
|
||||
};line-height:1.35;font-weight:${this.style.heavy};text-decoration:none;`,
|
||||
)
|
||||
}>${this.inline(link.tokens, "text")}</a>${this.inline(pills, "row")}${
|
||||
rest.length
|
||||
? `<div${
|
||||
this.paint(
|
||||
{ fg: "muted" },
|
||||
`font-size:${this.fs(13)};line-height:1.5;margin-top:3px;`,
|
||||
)
|
||||
}>${this.inline(rest, "text")}</div>`
|
||||
: ""
|
||||
}`;
|
||||
} else {
|
||||
content = `<div${
|
||||
this.paint(
|
||||
{ fg: "sec" },
|
||||
`font-size:${this.fs(14.5)};line-height:1.5;`,
|
||||
)
|
||||
}>${this.inline(rest, "sentence")}</div>`;
|
||||
}
|
||||
if (quote) {
|
||||
content += this.quote(this.inline(
|
||||
quote.tokens.flatMap((t) => "tokens" in t ? t.tokens ?? [] : []),
|
||||
"text",
|
||||
));
|
||||
}
|
||||
|
||||
const size = list.ordered ? [64, 48] : [104, 78];
|
||||
return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 ${
|
||||
link || image ? 16 : 10
|
||||
}px;"><tr>${
|
||||
list.ordered
|
||||
? `<td width="30" valign="top"${
|
||||
this.paint(
|
||||
{ fg: "accent" },
|
||||
`font-family:${this.font};font-size:${this.fs(20)};font-weight:${
|
||||
Math.max(600, this.style.heavy)
|
||||
};line-height:1.2;`,
|
||||
)
|
||||
}>${start + i}</td>`
|
||||
: ""
|
||||
}${
|
||||
image
|
||||
? `<td width="${size[0]}" valign="top" style="padding-right:${
|
||||
list.ordered ? 12 : 14
|
||||
}px;">${
|
||||
this.image(image.href, image.text, size[0], size[1], link?.href)
|
||||
}</td>`
|
||||
: ""
|
||||
}<td valign="top" style="font-family:${this.font};">${content}</td></tr></table>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
/** Returns the small uppercase line above the heading. */
|
||||
private eyebrow(html: string): string {
|
||||
return `<div${
|
||||
this.paint(
|
||||
{ fg: "muted" },
|
||||
`font-family:${this.font};font-size:${
|
||||
this.fs(12)
|
||||
};font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin:0 0 8px;`,
|
||||
)
|
||||
}>${html}</div>`;
|
||||
}
|
||||
|
||||
/** Returns a quoted comment or message. */
|
||||
private quote(html: string): string {
|
||||
return `<div${
|
||||
this.paint(
|
||||
{ fg: "quote" },
|
||||
`font-family:${this.font};font-size:${
|
||||
this.fs(14.5)
|
||||
};line-height:1.5;font-style:italic;margin:4px 0 0;`,
|
||||
)
|
||||
}>“${html}”</div>`;
|
||||
}
|
||||
|
||||
/** Returns a raw link set in a box, for clients that break buttons. */
|
||||
private linkBox(html: string): string {
|
||||
return `<div${
|
||||
this.paint(
|
||||
{ fg: "sec", bg: "soft" },
|
||||
`font-family:Menlo,Consolas,'Courier New',monospace;font-size:12px;line-height:1.5;border-radius:${
|
||||
Math.min(this.style.radius.img, 6)
|
||||
}px;padding:10px 12px;margin:0 0 22px;word-break:break-all;`,
|
||||
)
|
||||
}>${html}</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the whole HTML document: the brand, the card holding `body`, and
|
||||
* the `footer`. `preheader` is the hidden first line inboxes show beside the
|
||||
* subject.
|
||||
*/
|
||||
private document(
|
||||
{ subject, preheader, body, footer }: {
|
||||
subject: string;
|
||||
preheader: string;
|
||||
eyebrow?: string;
|
||||
title?: string;
|
||||
body: string;
|
||||
footer: string;
|
||||
},
|
||||
@@ -390,7 +712,7 @@ export class EmailKit {
|
||||
: "light";
|
||||
|
||||
return `<!doctype html>
|
||||
<html lang="${this.locale}">
|
||||
<html lang="${EMAIL_LOCALE}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
@@ -453,19 +775,6 @@ ${
|
||||
};${frame}padding:34px 36px 12px;`,
|
||||
)
|
||||
}>
|
||||
${
|
||||
eyebrow
|
||||
? `<div${
|
||||
this.paint(
|
||||
{ fg: "muted" },
|
||||
`font-family:${this.font};font-size:${
|
||||
this.fs(12)
|
||||
};font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin:0 0 8px;`,
|
||||
)
|
||||
}>${eyebrow}</div>`
|
||||
: ""
|
||||
}
|
||||
${title ? this.heading(title) : ""}
|
||||
${body}
|
||||
</td></tr>
|
||||
<tr><td${
|
||||
@@ -483,19 +792,6 @@ ${body}
|
||||
</html>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a footer: `reason` (why the reader gets this email), then
|
||||
* `links`, each `[label, href]`, joined on one line.
|
||||
*/
|
||||
footer(reason: string, links: [string, string][] = []): string {
|
||||
const linkHtml = links.map(([label, href]) =>
|
||||
`<a href="${esc(href)}"${
|
||||
this.paint({ fg: "muted" }, "text-decoration:underline;")
|
||||
}>${label}</a>`
|
||||
).join(" · ");
|
||||
return `${reason}${linkHtml ? `<br>${linkHtml}` : ""}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the CSS that recolors every painted element in dark mode, or
|
||||
* nothing off the "auto" scheme.
|
||||
|
||||
Reference in New Issue
Block a user