From bb77d083cd7c9556613ba55d603b6617bf77416b Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 20 Aug 2021 15:29:55 +0200
Subject: [PATCH] feat: add mail templating doc
---
README.md | 1 +
docs/ecolyo/application/mail.md | 72 +++++++++++++++++++++++++++++++++
mkdocs.yml | 1 +
3 files changed, 74 insertions(+)
create mode 100644 docs/ecolyo/application/mail.md
diff --git a/README.md b/README.md
index c0304eb..8deb2af 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,7 @@ nav:
- Services: ecolyo/application/services.md
- Gitflow: ecolyo/application/gitflow.md
- Deploy: ecolyo/application/deploy.md
+ - Mail: ecolyo/application/mail.md
- Services:
- Description: ecolyo/services/index.md
- Monthly report notification: ecolyo/services/monthly_report_notification.md
diff --git a/docs/ecolyo/application/mail.md b/docs/ecolyo/application/mail.md
new file mode 100644
index 0000000..482d0ae
--- /dev/null
+++ b/docs/ecolyo/application/mail.md
@@ -0,0 +1,72 @@
+## Explenation
+
+A templating system was needed for the app. In order to make it easy to use and also responsive, two libs has been used :
+- [Handelbars](https://handlebarsjs.com/)
+- [MJML](https://mjml.io/)
+
+Handlebars is used as a semantic template motor. It allow us to split email template in order to reuse some parts (header, footer ...)
+
+Mjml is a lib providing a syntax allowing developpers to easly build responsive templates.
+
+## Usage
+
+### Scaffolding
+
+Mails templates can be found inside `src/notifications`. All reusable parts can be found in `base` folder.
+
+All stylesheet must be include inside `style.hbs`.
+
+### Create your template
+Simply create your template file : `template.hbs` inside the notifications folder.
+
+```
+<mj-hero background-color="radial-gradient(96.2% 96.2% at 50% 3.8%, #343641 0%, #1B1C22 100%)" padding="17px">
+ <mj-text align="center" color="white" padding-top="20px" font-size="24px" font-family="Lato" font-weight="normal">
+ <img style="vertical-align: middle; margin-right: 12px" src="https://ecolyo.com/assets/ecolyo-icon.svg" alt="Ecolyo"/>
+ {{title}}
+ </mj-text>
+</mj-hero>
+```
+
+### How to use it ?
+
+#### Inside a cozy service
+
+1) Import the mjml lib in order to compile the template.
+
+```
+import mjml2html from 'mjml'
+```
+
+2) Link all the info mandatory to render your email :
+```
+ const template = monthlyReportTemplate({
+ title: 'Du nouveau dans votre espace Ecolyo !',
+ })
+```
+
+3) Build the email and send it:
+```
+ const mailData = {
+ mode: 'noreply',
+ subject: '[Ecolyo] - Votre bilan mensuel',
+ parts: [
+ {
+ type: 'text/html',
+ body: mjml2html(template).html,
+ },
+ ],
+ }
+ mailService.SendMail(client, mailData)
+```
+
+#### Inside the app
+It's very similar to service usage, but because we use react, the app rendering is done in the user browser. That's why wy need to change the import for mjml lib into :
+
+```
+const mjml2html = require('mjml-browser')
+```
+
+
+### Usefull links
+- [Mjml live editor](https://mjml.io/try-it-live/bohYnxKkCq-)
diff --git a/mkdocs.yml b/mkdocs.yml
index fd7524a..a9f1ce3 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -51,6 +51,7 @@ nav:
- Scaffolding: ecolyo/application/scaffolding.md
- Gitflow: ecolyo/application/gitflow.md
- Deploy: ecolyo/application/deploy.md
+ - Mail: ecolyo/application/mail.md
- Services:
- Description: ecolyo/services/index.md
- Monthly report notification: ecolyo/services/monthly_report_notification.md
--
GitLab