Skip to content
← 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)
}