You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/Core/MailTemplates/Mjml/README.md
+14-11Lines changed: 14 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# MJML email templating
2
2
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.
4
4
5
5
MJML stands for MailJet Markup Language.
6
6
7
7
## Implementation considerations
8
8
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}}`.
10
10
11
11
There is no change on how we interact with our view models.
12
12
@@ -21,19 +21,19 @@ There is no change to how we create the `txt.hbs`. MJML does not impact how we c
21
21
```shell
22
22
npm ci
23
23
24
-
# Build *.html, output is the ./out directory
24
+
# Build *.html to ./out directory
25
25
npm run build
26
26
27
27
# To build on changes to *.mjml and *.js files, new files will not be tracked, you will need to run again
28
28
npm run build:watch
29
29
30
-
# Build *.html.hbs once, output is the ./out directory
30
+
# Build *.html.hbs to ./out directory
31
31
npm run build:hbs
32
32
33
-
# Build *.html.hbs in a minified ./out directory
33
+
# Build minified *.html.hbs to ./out directory
34
34
npm run build:minify
35
35
36
-
# apply prettier formatting to all files
36
+
# apply prettier formatting
37
37
npm run prettier
38
38
```
39
39
@@ -45,21 +45,24 @@ When using MJML templating you can use the above [commands](#building-mjml-files
45
45
46
46
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.
47
47
48
-
### Possible process
48
+
### Recommended development
49
49
50
-
#### Initial email development might look something like:
50
+
#### Mjml email template development
51
51
52
-
1. create `cool-email.mjml`
52
+
1. create `cool-email.mjml` in appropriate team directory
53
53
2. run `npm run build:watch`
54
54
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
56
56
57
57
#### Testing with `IMailService`
58
58
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.
60
60
61
61
1. run `npm run build:minify`
62
62
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.
Copy file name to clipboardExpand all lines: src/Core/MailTemplates/README.md
+3-2Lines changed: 3 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,8 +9,9 @@ We use MJML to generate the HTML that our mail services use to send emails to us
9
9
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.
10
10
11
11
### 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`.
14
15
-**Output**: Cross-client compatible HTML with embedded CSS for maximum email client support
15
16
-**Template Engine**: Enhanced with Handlebars syntax for dynamic content injection
0 commit comments