Skip to content

feat: modernize email templates with Svelte 5 + Tailwind + Storybook #2258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
niemyjski wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat: modernize email templates with Svelte 5 + Tailwind + Storybook #2258

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7cb4e37
feat: modernize email templates with better-svelte-email
niemyjski May 27, 2026
f5274b7
feat: modernize email templates with Svelte 5, Tailwind, Storybook
niemyjski May 27, 2026
b5cd6e6
fix: correct Storybook rendering bugs and text formatting issues
niemyjski May 27, 2026
a41329a
Merge remote-tracking branch 'origin/main' into niemyjski/email-templ…
niemyjski May 28, 2026
704e19d
fix(email-templates): address PR feedback and staff engineer review
niemyjski May 28, 2026
aa81fbf
fix: address all PR review feedback
niemyjski May 30, 2026
e33b7b5
fix: correct Fields sample data format in Storybook preview
niemyjski May 30, 2026
3781e02
test: add body content assertions to all mailer tests and cover IsReg…
niemyjski May 30, 2026
422608f
docs: add before/after email template comparison screenshots from Mai…
niemyjski May 30, 2026
72fbeb9
refactor: replace raw HTML stats table with Row/Column components in …
niemyjski May 30, 2026
6a49a24
chore: remove nodemailer test dependency, add .gstack to .gitignore
niemyjski May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,4 @@ debug-storybook.log
.devcontainer/devcontainer-lock.json

*.lscache
.gstack/
Comment thread
niemyjski marked this conversation as resolved.
20 changes: 20 additions & 0 deletions src/Exceptionless.AppHost/Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,26 @@
})
.WithParentRelationship(api);
#pragma warning restore ASPIREBROWSERLOGS001

builder.AddJavaScriptApp("Storybook", "../Exceptionless.Web/ClientApp", "storybook")
.WithHttpEndpoint(port: 6006, targetPort: 6006, name: "http", isProxied: false)
.WithUrlForEndpoint("http", u =>
{
u.DisplayText = "Component Library";
u.DisplayOrder = 200;
})
.WithHttpHealthCheck("/")
.WithParentRelationship(api);

builder.AddJavaScriptApp("EmailStorybook", "../Exceptionless.EmailTemplates", "storybook")
.WithHttpEndpoint(port: 6008, targetPort: 6008, name: "http", isProxied: false)
.WithUrlForEndpoint("http", u =>
{
u.DisplayText = "Email Templates";
u.DisplayOrder = 300;
})
.WithHttpHealthCheck("/")
.WithParentRelationship(api);
}

await builder.Build().RunAsync();
6 changes: 4 additions & 2 deletions src/Exceptionless.Core/Mail/Templates/event-notice.html
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/Exceptionless.Core/Mail/Templates/organization-added.html
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/Exceptionless.Core/Mail/Templates/organization-invited.html
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/Exceptionless.Core/Mail/Templates/organization-notice.html
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/Exceptionless.Core/Mail/Templates/organization-payment-failed.html
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions src/Exceptionless.Core/Mail/Templates/project-daily-summary.html
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/Exceptionless.Core/Mail/Templates/user-email-verify.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="background:#f7f7f7!important"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><title>{{Subject}}</title><style>@media only screen{html{min-height:100%;background:#f7f7f7}}@media only screen and (max-width:596px){table.body img{width:auto;height:auto}table.body center{min-width:0!important}table.body .container{width:95%!important}table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px!important;padding-right:16px!important}th.small-3{display:inline-block!important;width:25%!important}th.small-4{display:inline-block!important;width:33.33333%!important}th.small-12{display:inline-block!important;width:100%!important}table.menu{width:100%!important}table.menu td,table.menu th{width:auto!important;display:inline-block!important}table.menu.vertical td,table.menu.vertical th{display:block!important}table.menu[align=center]{width:auto!important}}</style></head><body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;background:#f7f7f7!important;box-sizing:border-box;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"><span class="preheader" style="color:#f7f7f7;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden"></span><table class="body" style="Margin:0;background:#f7f7f7!important;border-collapse:collapse;border-spacing:0;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><center data-parsed style="min-width:580px;width:100%"><table align="center" class="wrapper header float-center" style="Margin:0 auto;background:#2c2c2c;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><td class="wrapper-inner" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:8px 15px;text-align:left;vertical-align:top;word-wrap:break-word"><table align="center" class="container" style="Margin:0 auto;background:0 0;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;text-align:inherit;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><img src="https://be.exceptionless.io/img/exceptionless-logo.png" alt="Exceptionless" style="-ms-interpolation-mode:bicubic;clear:both;display:block;margin-left:15px;max-width:100%;outline:0;text-decoration:none;width:auto"></td></tr></tbody></table></td></tr></table><table align="center" class="container float-center" style="Margin:0 auto;background:#f7f7f7;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><table class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td height="5px" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:5px;font-weight:400;hyphens:auto;line-height:5px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">&#xA0;</td></tr></tbody></table><table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:16px;text-align:left;width:564px"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><th style="Margin:0;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left"><h1 style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:34px;font-weight:400;line-height:1.3;margin:0;margin-bottom:5px;margin-top:0;padding:0;text-align:left;word-wrap:normal">Hello {{UserFullName}},</h1><p class="lead" style="Margin:0;Margin-bottom:10px;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:1.6;margin:0;margin-bottom:10px;padding:0;text-align:left">We're ready to activate your account. All we need to do is make sure this is your email address.</p><center data-parsed style="min-width:532px;width:100%"><table class="button button radius float-center" style="Margin:0 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:0 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto"><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#5E9A00;border:none;border-collapse:collapse!important;border-radius:3px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><a href="{{BaseUrl}}/account/verify?token={{UserVerifyEmailAddressToken}}" style="Margin:0;border:0 solid #5E9A00;border-radius:3px;color:#fefefe;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;line-height:1.3;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">Verify Address </a></td></tr></table></td></tr></table></center><table class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical-align:top"><td height="5px" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:5px;font-weight:400;hyphens:auto;line-height:5px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">&#xA0;</td></tr></tbody></table><p style="Margin:0;Margin-bottom:10px;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left">If you didn't create an Exceptionless account, just delete this email and everything will go back to the way it was.</p></th><th class="expander" style="Margin:0;color:#2c2c2c;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th></tr></table></th></tr></tbody></table></td></tr></tbody></table><script type="application/ld+json" align="center" class="float-center">{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html id="__better-svelte-email" lang="en" dir="ltr"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="x-apple-disable-message-reformatting"><meta http-equiv="x-ua-compatible" content="IE=edge"></head><body><table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tbody><tr><td style="background-color:rgb(247, 247, 247);font-family:Helvetica,Arial,sans-serif"><table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="background-color:rgb(44, 44, 44);width:100%;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px"><tbody><tr><td><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:37.5em;max-width:580px;margin-left:auto;margin-right:auto"><tbody><tr style="width: 100%;"><td><img alt="Exceptionless" src="https://be.exceptionless.io/img/exceptionless-logo.png" width="266" height="50" style="display:block;outline:none;border:none;text-decoration:none;display:block;margin-left:16px"></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:37.5em;max-width:580px;margin-left:auto;margin-right:auto;background-color:rgb(247, 247, 247)"><tbody><tr style="width: 100%;"><td><table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px"><tbody><tr><td><h1 style="font-size:34px;font-weight:400;color:rgb(44, 44, 44);line-height:1.3;margin-top:0px;margin-bottom:5px">Hello {{UserFullName}},</h1><p style="font-size:14px;line-height:24px;margin:16px 0;font-size:20px;line-height:1.6;color:rgb(44, 44, 44)">We're ready to activate your account. All we need to do is make sure this is your email address.</p><table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="text-align:center"><tbody><tr><td><a href="{{BaseUrl}}/account/verify?token={{UserVerifyEmailAddressToken}}" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;background-color:rgb(94, 154, 0);color:rgb(254, 254, 254);font-weight:700;font-size:16px;line-height:1.5;border-radius:3px;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px;text-decoration-line:none;display:inline-block"><span></span><span style="max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px">Verify Address</span><span style="display: none;"></span></a></td></tr></tbody></table><p style="font-size:14px;line-height:24px;margin:16px 0;font-size:16px;line-height:1.5;color:rgb(44, 44, 44);line-height:1.3">If you didn't create an Exceptionless account, just delete this email and everything will go back to the way it was.</p></td></tr></tbody></table></td></tr></tbody></table><div style="display:none;white-space:nowrap;font:15px courier;line-height:0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div></td></tr></tbody></table> <script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"description": "{{Subject}}",
Expand All @@ -14,4 +15,5 @@
"url": "https://exceptionless.com",
"logo": "https://be.exceptionless.io/img/exceptionless-48.png"
}
}</script></center></td></tr></table><!-- prevent Gmail on iOS font size manipulation --><div style="display:none;white-space:nowrap;font:15px courier;line-height:0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div></body></html>
}
</script></body></html>
Loading