Skip to content

Commit 33251e0

Browse files
docs: updated based on feedback
1 parent 115ca4b commit 33251e0

File tree

2 files changed

+17
-13
lines changed

2 files changed

+17
-13
lines changed

src/Core/MailTemplates/Mjml/README.md

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# MJML email templating
22

3-
This directory contains MJML templates for emails. MJML is a markup language designed to reduce the pain of coding responsive email templates. There are DRY features within the library which will improve code quality.
3+
This directory contains MJML templates for emails. MJML is a markup language designed to reduce the pain of coding responsive email templates. Component based development features in MJML improve code quality and reusability.
44

55
MJML stands for MailJet Markup Language.
66

77
## Implementation considerations
88

9-
These `MJML` templates are compiled into HTML which will then be further consumed by our HandleBars mail service. We can continue to use this service to assign values from our View Models. This leverages the existing infrastructure. It also means we can continue to use the double brace (`{{}}`) syntax within MJML since Handlebars can be used to assign values to those `{{variables}}`.
9+
These `MJML` templates are compiled into HTML which will then be further consumed by our Handlebars mail service. We can continue to use this service to assign values from our View Models. This leverages the existing infrastructure. It also means we can continue to use the double brace (`{{}}`) syntax within MJML since Handlebars can be used to assign values to those `{{variables}}`.
1010

1111
There is no change on how we interact with our view models.
1212

@@ -21,19 +21,19 @@ There is no change to how we create the `txt.hbs`. MJML does not impact how we c
2121
```shell
2222
npm ci
2323

24-
# Build *.html, output is the ./out directory
24+
# Build *.html to ./out directory
2525
npm run build
2626

2727
# To build on changes to *.mjml and *.js files, new files will not be tracked, you will need to run again
2828
npm run build:watch
2929

30-
# Build *.html.hbs once, output is the ./out directory
30+
# Build *.html.hbs to ./out directory
3131
npm run build:hbs
3232

33-
# Build *.html.hbs in a minified ./out directory
33+
# Build minified *.html.hbs to ./out directory
3434
npm run build:minify
3535

36-
# apply prettier formatting to all files
36+
# apply prettier formatting
3737
npm run prettier
3838
```
3939

@@ -45,21 +45,24 @@ When using MJML templating you can use the above [commands](#building-mjml-files
4545

4646
Not all MJML tags have the same attributes, it is highly recommended to review the documentation on the official MJML website to understand the usages of each of the tags.
4747

48-
### Possible process
48+
### Recommended development
4949

50-
#### Initial email development might look something like:
50+
#### Mjml email template development
5151

52-
1. create `cool-email.mjml`
52+
1. create `cool-email.mjml` in appropriate team directory
5353
2. run `npm run build:watch`
5454
3. view compiled `HTML` output in a web browser
55-
4. iterate -> while `build:watch`'ing you should be able to refresh the browser page after the mjml re-compile to see the changes
55+
4. iterate -> while `build:watch`'ing you should be able to refresh the browser page after the mjml/js re-compile to see the changes
5656

5757
#### Testing with `IMailService`
5858

59-
After the email is developed from the [initial step](#initial-email-development-might-look-something-like) you'll probably want to make sure the email `{{variables}}` are populated properly by running it through an `IMailService`.
59+
After the email is developed from the [initial step](#mjml-email-template-development) make sure the email `{{variables}}` are populated properly by running it through an `IMailService` implementation.
6060

6161
1. run `npm run build:minify`
6262
2. copy built `*.html.hbs` files from the build directory to a location the mail service can consume them
63+
3. run code that will send the email
64+
65+
The minified `html.hbs` artifacts are deliverables and must be placed into the correct `src/Core/MailTemplates/Handlebars/` directories in order to be used by `IMailService` implementations.
6366

6467
### Custom tags
6568

src/Core/MailTemplates/README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ We use MJML to generate the HTML that our mail services use to send emails to us
99
These are the compiled HTML email templates that serve as the foundation for all HTML emails sent by the Bitwarden platform. They are generated from MJML source files and enhanced with Handlebars templating capabilities.
1010

1111
### Generation Process
12-
- **Source**: Built from `*.mjml` files in the `./mjml` directory using the MJML build pipeline
13-
- **Build Tool**: Generated via PowerShell build script (`build.ps1`) or npm scripts
12+
- **Source**: Built from `*.mjml` files in the `./mjml` directory.
13+
- The MJML source acts as a toolkit for developers to generate HTML. It is the developers responsibility to generate the HTML and then ensure it is accessible to `IMailService` implementations.
14+
- **Build Tool**: Generated via node build scripts: `npm run build`.
1415
- **Output**: Cross-client compatible HTML with embedded CSS for maximum email client support
1516
- **Template Engine**: Enhanced with Handlebars syntax for dynamic content injection
1617

0 commit comments

Comments
 (0)