maro/anouma
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve email branding and SMTP envelope
CI / test (push) Canceled after 0s
Details
Release / promote-and-deploy (push) Canceled after 0s
Details
CI / build-image (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
maro
2026-09-18 12:51:40 +02:00
parent ad353190f3
commit 7edeafe7c3
10 changed files with 67 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/email/layout.ts
+18 -11
View File
@@ -5,6 +5,8 @@ const colors = {
creamLight: "#fbf6f1",
};
const emailFont = "'Antropos', Georgia, 'Times New Roman', serif";
export function escapeHtml(value: string): string {
return value
.replace(/&/g, "&")
@@ -17,7 +19,7 @@ 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-size:14px;font-weight:600;letter-spacing:0.02em;">
<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>
@@ -28,7 +30,7 @@ export function renderButton(label: string, href: string): string {
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-size:14px;">
(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>`,
)
@@ -45,24 +47,29 @@ export function renderEmailShell(args: { preheader?: string; bodyHtml: string; f
return `<!doctype html>
<html lang="de">
<body style="margin:0;padding:0;background:${colors.creamLight};font-family:Georgia,'Times New Roman',serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${colors.creamLight};padding:32px 16px;">
<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;">
<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;">
<span style="color:#ffffff;font-size:22px;letter-spacing:0.12em;font-weight:600;">ANOUMA</span>
<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;">
<td style="padding:32px;font-family:${emailFont};">
${bodyHtml}
</td>
</tr>
<tr>
<td style="padding:20px 32px;background:${colors.cream};text-align:center;">
<span style="color:${colors.plum};font-size:12px;">${escapeHtml(footerText)}</span>
<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>
@@ -76,5 +83,5 @@ export function renderEmailShell(args: { preheader?: string; bodyHtml: string; f
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-size:${size};line-height:1.6;${style}">${escapeHtml(text)}</p>`;
return `<p style="margin:0 0 20px;color:${colors.plum};font-family:${emailFont};font-size:${size};line-height:1.6;${style}">${escapeHtml(text)}</p>`;
}