Skip to content

dev: Adopt mjml 5 for email template generation #7979

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

Merged
nicholaspcr merged 1 commit into from
Jul 22, 2026
Merged

dev: Adopt mjml 5 for email template generation #7979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions pkg/email/templates/DEVELOPMENT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ Each of these email templates gets rendered together with the base template that

We use [MJML](https://mjml.io/) to generate the HTML base template `base.html.tmpl` from `base.mjml`. Do not edit `base.html.tmpl` directly. If you want to edit the HTML base template, edit the `.mjml` files and run `go generate ./pkg/email/templates` to update `base.html.tmpl`.

`base.mjml` composes the repo-local partials `_attributes.mjml`, `_header.mjml` and `_footer.mjml` via `mj-include`. MJML v5+ disables `mj-include` by default, so `generate.sh` passes `--config.allowIncludes true`. This is safe here because the included files are trusted and committed to this repository.

The HTML base template contains three blocks: **title**, **preview** and **body**. The **title** is typically not visible in emails, but would be visible if we start supporting "view this email online" functionality. The **preview** is a short text that many email clients render in the list view, next to the subject.

## Testing
Expand Down
8 changes: 1 addition & 7 deletions pkg/email/templates/base.html.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
display: block;
margin: 13px 0;
}

</style>
<!--[if mso]>
<noscript>
Expand All @@ -61,7 +60,6 @@
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>
<!--<![endif]-->
<style type="text/css">
Expand All @@ -71,14 +69,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -90,7 +86,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -100,13 +95,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">{{ block "preview" . }}{{ end }}</div>
<div aria-label="{{ block "title" . }}{{ end }}" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="{{ block "title" . }}{{ end }}" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
6 changes: 5 additions & 1 deletion pkg/email/templates/generate.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
#!/usr/bin/env bash

# MJML v5+ disables mj-include by default; our base template composes trusted,
# repo-local partials (_attributes/_header/_footer), so includes are enabled here.
for template in $(find . -name '*.mjml' -not -name '_*.mjml')
do
yarn run mjml $PWD/$template -o $PWD/${template%.mjml}.html.tmpl
yarn run mjml --config.allowIncludes true $PWD/$template -o $PWD/${template%.mjml}.html.tmpl
# mjml v5 omits the trailing newline; append one to keep a POSIX-clean file.
printf '\n' >> $PWD/${template%.mjml}.html.tmpl
done
8 changes: 1 addition & 7 deletions pkg/email/templates/testdata/api_key_changed.body.golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
display: block;
margin: 13px 0;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>

<style type="text/css">
Expand All @@ -58,14 +56,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -77,7 +73,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -87,13 +82,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">An API key of your application "foo-app" has been changed.</div>
<div aria-label="API Key Changed" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="API Key Changed" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
8 changes: 1 addition & 7 deletions pkg/email/templates/testdata/api_key_created.body.with_sender_ids.golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
display: block;
margin: 13px 0;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>

<style type="text/css">
Expand All @@ -58,14 +56,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -77,7 +73,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -87,13 +82,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">A new API key has just been created for your application "foo-app".</div>
<div aria-label="API Key Created" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="API Key Created" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
8 changes: 1 addition & 7 deletions pkg/email/templates/testdata/client_requested.body.golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
display: block;
margin: 13px 0;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>

<style type="text/css">
Expand All @@ -58,14 +56,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -77,7 +73,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -87,13 +82,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered OAuth client.</div>
<div aria-label="Client Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="Client Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
8 changes: 1 addition & 7 deletions pkg/email/templates/testdata/client_requested.body.with_api_key_id.golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
display: block;
margin: 13px 0;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>

<style type="text/css">
Expand All @@ -58,14 +56,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -77,7 +73,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -87,13 +82,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered OAuth client.</div>
<div aria-label="Client Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="Client Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
8 changes: 1 addition & 7 deletions pkg/email/templates/testdata/client_requested.body.with_api_key_name.golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
display: block;
margin: 13px 0;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>

<style type="text/css">
Expand All @@ -58,14 +56,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -77,7 +73,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -87,13 +82,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered OAuth client.</div>
<div aria-label="Client Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="Client Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
8 changes: 1 addition & 7 deletions pkg/email/templates/testdata/collaborator_changed.body.golden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
display: block;
margin: 13px 0;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);

</style>

<style type="text/css">
Expand All @@ -58,14 +56,12 @@
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
<style type="text/css">
@media only screen and (max-width:479px) {
Expand All @@ -77,7 +73,6 @@
width: auto !important;
}
}

</style>
<style type="text/css">
code {
Expand All @@ -87,13 +82,12 @@
background-color: #E7E7E7;
border-radius: 6px;
}

</style>
</head>

<body style="word-spacing:normal;background-color:#E7E7E7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">A collaborator of your application "foo-app" has been added or updated.</div>
<div aria-label="Collaborator Changed" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
<div aria-label="Collaborator Changed" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
Expand Down
Loading
Loading