← Public packages
@kentcdodds/kit
Kit.com helpers for subscribers, tags, forms, sequences, and broadcasts.
src/html.js
50 lines · 2.2 KB · JavaScript/**
* Optional HTML builders that match kcd-youtube Kit email conventions.
* These produce valid Kit HTML — they do not guarantee a particular editor UI.
*/
/**
* @param {{ withName: string, withoutName: string }} options
*/
export function buildLiquidGreeting({ withName, withoutName }) {
return `<p>{% if subscriber.first_name != blank %}${withName}{% else %}${withoutName}{% endif %}</p>`
}
/** @param {string} html */
export function buildParagraph(html) {
return `<p>${html}</p>`
}
/**
* Sequence-style linked image — see packages/bepe episode kit-email.md files
* @param {{ href: string, src: string, alt?: string }} options
*/
export function buildLinkedImage({ href, src, alt = '' }) {
return `<p><a href="${href}"><img src="${src}" alt="${alt}" style="width:100%;max-width:600px;display:block;" /></a></p>`
}
/**
* Broadcast-style linked image with caption — workshop announcement pattern.
* @param {{ href: string, src: string, alt?: string, caption?: string }} options
*/
export function buildWorkshopImageBlock({ href, src, alt = '', caption = '' }) {
const figcaption = caption
? `<figcaption style="text-align:center;display:block">${caption}</figcaption>`
: ''
return `<table width="100%" border="0" cellSpacing="0" cellPadding="0" style="text-align:center;table-layout:fixed;float:none" class="email-image"><tbody><tr><td align="center"><figure style="margin-top:12px;margin-bottom:12px;margin-left:0;margin-right:0;max-width:800px;width:100%"><a style="display:block" href="${href}" target="_blank" rel="noopener noreferrer" class="kit-image-link"><img src="${src}" width="800" height="auto" alt="${alt}" style="border-radius:4px 4px 4px 4px;width:800px;height:auto;object-fit:contain"/></a>${figcaption}</figure></td></tr></tbody></table>`
}
/** @param {string[]} items */
export function buildUnorderedList(items) {
const lis = items.map((item) => `<li>${item}</li>`).join('\n')
return `<ul>\n${lis}\n</ul>`
}
/**
* Join email body fragments the way kit-email.md files do (blank line between blocks).
* @param {string[]} blocks
* @param {{ separator?: string }} [options]
*/
export function joinEmailBlocks(blocks, { separator = '\n\n' } = {}) {
return blocks.filter(Boolean).join(separator)
}