mail.md

Mail

Explanation

A templating system was needed for the app. In order to make it easy to use and also responsive, two libraries has been used :

• Handlebars
• MJML

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 developers to easily 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: