fix: style email with inline styles

This commit is contained in:
ThatOneCalculator 2023-04-26 20:21:30 -07:00
parent 4ae131cc09
commit 7d48709b40

View file

@ -33,66 +33,6 @@ export async function sendEmail(
} as any);
try {
// TODO: htmlサニタイズ
const style = `
<style>
html {
background: #191724;
}
body {
padding: 16px;
margin: 0;
font-family: sans-serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #31748f;
}
a:hover {
text-decoration: underline;
}
main {
max-width: 500px;
margin: 0 auto;
background: #1f1d2e;
color: #e0def4;
}
main > header {
padding: 32px;
background: #31748f;
display: flex;
}
main > header > img {
max-width: 128px;
max-height: 72px;
vertical-align: bottom;
margin-right: 16px;
}
main > article {
padding: 32px;
}
main > article > h1 {
margin: 0 0 1em 0;
}
main > footer {
padding: 32px;
border-top: solid 1px #26233a;
}
nav {
box-sizing: border-box;
max-width: 500px;
margin: 16px auto 0 auto;
padding: 0 32px;
}
nav > a {
color: #6e6a86;
}
</style>`
const info = await transporter.sendMail({
from: meta.email!,
to: to,
@ -103,25 +43,23 @@ export async function sendEmail(
<head>
<meta charset="utf-8">
<title>${subject}</title>
${style}
</head>
<body>
${style}
<main>
<header>
<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" height="100"/>
<h1>${meta.name}</h1>
<body style="background: #191724; padding: 16px; margin: 0; font-family: sans-serif; font-size: 14px;">
<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4;">
<header style="padding: 32px; background: #31748f; display: flex;">
<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-right: 16px;"/>
<h1 style="margin: 0 0 1em 0;">${meta.name}</h1>
</header>
<article>
<article style="padding: 32px;">
<h1>${subject}</h1>
<div>${html}</div>
</article>
<footer>
<a href="${emailSettingUrl}">${"Email setting"}</a>
<footer style="padding: 32px; border-top: solid 1px #26233a;">
<a href="${emailSettingUrl}" style="color: #31748f !important;">${"Email setting"}</a>
</footer>
</main>
<nav>
<a href="${config.url}">${config.host}</a>
<nav style="box-sizing: border-box; max-width: 500px; margin: 16px auto 0 auto; padding: 0 32px;">
<a href="${config.url}" style="color: #6e6a86 !important;">${config.host}</a>
</nav>
</body>
</html>`,