Every email the site sends shares one layout: the site's emoji and name,
then a card holding the content, then a footer. The templates beside this
module (welcome, password reset, digest) build their content with an
EmailKit, which draws each block in a style from styles.ts, and
email-service.ts sends what they return.
Mail clients drop stylesheets, so every block carries inline styles. A
reader on the "auto" scheme gets the light palette inline and the dark one
in a prefers-color-scheme block that Apple's mail apps honour; elsewhere
the light one shows.
-
blocks(tokens: Token[]): string
Draws the body's blocks, gathering each
##section with its content. -
button(): stringlabel: string,href: string
Returns a button linking to
href. -
darkCss(): string
Returns the CSS that recolors every painted element in dark mode, or nothing off the "auto" scheme.
-
darkPalette: EmailPalette | null
The palette that replaces it in dark mode, on the "auto" scheme only.
-
document(unnamed 0: { subject: string; preheader: string; body: string; footer: string; }): string
Returns the whole HTML document: the brand, the card holding
body, and thefooter.preheaderis the hidden first line inboxes show beside the subject. -
eyebrow(html: string): string
Returns the small uppercase line above the heading.
-
font: string
The font stack, for templates that set their own blocks.
-
fs(px: number): string
Returns
px, scaled for the style, as a CSS length. -
heading(): stringhtml: string,marginBottom?: number
Returns the email's heading, in the style's title type.
-
image(): stringsrc: string,alt: string,width: number,height: number,href?: string
Returns an image block, rounded as the style rounds images.
-
inline(): stringtokens: Token[],mode: EmailKit["mode"]
-
link(): stringhtml: string,href: string,strong?: boolean
Returns a link to
hrefaroundhtml, in the link color. -
linkBox(html: string): string
Returns a raw link set in a box, for clients that break buttons.
-
list(list: Tokens.List): string
Draws a list as rows, ranked when it is numbered.
-
marked: Marked
Draws Markdown's inline tokens with the kit's colors.
-
mode: "text" | "footer" | "row" | "sentence"
How inline draws emphasis and links, by where they sit.
-
note(): stringhtml: string,css?: string
Returns a smaller paragraph in the muted color.
-
paint(): stringroles: { fg?: PaletteRole; bg?: PaletteRole; bd?: PaletteRole; extra?: string[]; },css?: string
Returns the
classandstyleattributes of an element colored by roles:fgfor its text,bgfor its fill,bdfor its border. The classes let the dark block recolor it;cssis the rest of its style. -
palette: EmailPalette
The palette inlined into the HTML.
-
para(): stringhtml: string,css?: string
Returns a paragraph.
cssadds to or overrides its style. -
pill(label: string): string
Returns a small uppercase pill, as on one's own dump in a list.
-
quote(html: string): string
Returns a quoted comment or message.
-
render(unnamed 0: { subject: string; preheader: string; markdown: string; }): RenderedEmail
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. -
section(): stringtitle: string,html: string,first?: boolean
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. -
style: EmailStyle
The style being drawn.
-
subhead(html: string): string
Returns a small bold heading inside a section.
Escapes value for HTML text and attributes. Everything users wrote (names,
titles, quotes) goes through it, since none of it may become markup.
Escapes value for Markdown, so that user text in a plain-text part (a
title with * or [, say) stays text.
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.
Returns a Markdown link to url labelled with text, escaped.
Returned by each template to its caller, which hands it to sendEmail
with a recipient.
- html: string
- subject: string
-
text: string
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.
Names a color of an EmailPalette, as EmailKit.paint takes it, so that the dark block can recolor the element by the same name.
Usage
import * as mod from "api/mail/layout.ts";