88 lines
3.6 KiB
TypeScript
88 lines
3.6 KiB
TypeScript
const colors = {
|
|
mauveDark: "#8b616d",
|
|
plum: "#66505f",
|
|
cream: "#f2e2d6",
|
|
creamLight: "#fbf6f1",
|
|
};
|
|
|
|
const emailFont = "'Antropos', Georgia, 'Times New Roman', serif";
|
|
|
|
export function escapeHtml(value: string): string {
|
|
return value
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """);
|
|
}
|
|
|
|
export function renderButton(label: string, href: string): string {
|
|
return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin:24px auto;">
|
|
<tr>
|
|
<td style="border-radius:999px;background:${colors.mauveDark};">
|
|
<a href="${href}" style="display:inline-block;padding:14px 32px;color:#ffffff;text-decoration:none;font-family:${emailFont};font-size:14px;font-weight:600;letter-spacing:0.02em;">
|
|
${escapeHtml(label)}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>`;
|
|
}
|
|
|
|
export function renderFactBox(rows: { label: string; value: string }[]): string {
|
|
const cells = rows
|
|
.map(
|
|
(row, i) => `<p style="margin:0 ${i === rows.length - 1 ? "0" : "0 12px"} 0;color:${colors.plum};font-family:${emailFont};font-size:14px;">
|
|
<strong>${escapeHtml(row.label)}:</strong><br />${escapeHtml(row.value)}
|
|
</p>`,
|
|
)
|
|
.join("\n");
|
|
|
|
return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${colors.cream};border-radius:16px;">
|
|
<tr><td style="padding:20px 24px;">${cells}</td></tr>
|
|
</table>`;
|
|
}
|
|
|
|
/** Shared table-based, inline-styled email shell - same design language across all ANOUMA emails. */
|
|
export function renderEmailShell(args: { preheader?: string; bodyHtml: string; footerText?: string }): string {
|
|
const { bodyHtml, footerText = "Räume für Verbindung - mit dir selbst, miteinander und mit der Natur." } = args;
|
|
|
|
return `<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<style>
|
|
@font-face { font-family: 'Antropos'; src: url('https://anouma.org/fonts/baar-antropos.ttf') format('truetype'); font-style: normal; font-weight: 100 900; }
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;padding:0;background:${colors.creamLight};font-family:${emailFont};">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${colors.creamLight};padding:32px 16px;font-family:${emailFont};">
|
|
<tr>
|
|
<td align="center">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:480px;background:#ffffff;border-radius:24px;overflow:hidden;font-family:${emailFont};">
|
|
<tr>
|
|
<td style="background:${colors.mauveDark};padding:28px 32px;text-align:center;font-family:${emailFont};">
|
|
<span style="color:#ffffff;font-family:${emailFont};font-size:22px;letter-spacing:0.12em;font-weight:600;">ANOUMA</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:32px;font-family:${emailFont};">
|
|
${bodyHtml}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:20px 32px;background:${colors.cream};text-align:center;font-family:${emailFont};">
|
|
<span style="color:${colors.plum};font-family:${emailFont};font-size:12px;">${escapeHtml(footerText)}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
|
|
export function paragraph(text: string, opts: { italic?: boolean; small?: boolean } = {}): string {
|
|
const size = opts.small ? "13px" : "16px";
|
|
const style = opts.italic ? "font-style:italic;" : "";
|
|
return `<p style="margin:0 0 20px;color:${colors.plum};font-family:${emailFont};font-size:${size};line-height:1.6;${style}">${escapeHtml(text)}</p>`;
|
|
}
|