class EmailKit

Draws an email in one EmailLook. A template writes the email as Markdown and hands it to EmailKit.render, which draws each block in the style. The block methods return HTML: text passed to them must already be escaped with esc.

Constructors

EmailKit(look: EmailLook)

Properties

readonly
darkPalette: EmailPalette | null

The palette that replaces it in dark mode, on the "auto" scheme only.

readonly
font: string

The font stack, for templates that set their own blocks.

The palette inlined into the HTML.

readonly
style: EmailStyle

The style being drawn.

Methods

button(
label: string,
href: string
): string

Returns a button linking to href.

fs(px: number): string

Returns px, scaled for the style, as a CSS length.

heading(
html: string,
marginBottom?: number
): string

Returns the email's heading, in the style's title type.

image(
src: string,
alt: string,
width: number,
height: number,
href?: string
): string

Returns an image block, rounded as the style rounds images.

note(
html: string,
css?: string
): string

Returns a smaller paragraph in the muted color.

paint(
roles: { fg?: PaletteRole; bg?: PaletteRole; bd?: PaletteRole; extra?: string[]; },
css?: string
): string

Returns the class and style attributes of an element colored by roles: fg for its text, bg for its fill, bd for its border. The classes let the dark block recolor it; css is the rest of its style.

para(
html: string,
css?: string
): string

Returns a paragraph. css adds to or overrides its style.

pill(label: string): string

Returns a small uppercase pill, as on one's own dump in a list.

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.

  • # 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.
section(
title: string,
html: string,
first?: boolean
): string

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.

subhead(html: string): string

Returns a small bold heading inside a section.

Usage

import { EmailKit } from "api/mail/layout.ts";