How to use mjml - 10 common examples

builder.build = (filePath, outputDir, extension) => {
  // No-op if filePath is not a file
  if (!fs.statSync(filePath).isFile()) {
    return;
  }

  const filename = getTemplateFilename(filePath).replace('.mjml', extension);

  try {
    const outputPath = path.join(process.cwd(), outputDir);
    mkdir(outputPath);

    const startTime = Date.now();
    const data = fs.readFileSync(`${filePath}`, 'utf8');
    const rendered = mjml2html(data);

    fs.writeFileSync(`${outputPath}/${filename}`, rendered.html);

    const endTime = Date.now();
    const totalTime = endTime - startTime;
    console.log(`Rendered ${filename} in ${totalTime}ms`); // eslint-disable-line
  } catch (error) {
    console.error(`Unable to render ${filename}`);
    console.error(error.message);
  }
};

const fs = require("fs");
const path = require("path");
const url = require("url");
const ejs = require("ejs");
const { mjml2html } = require('mjml'); // tslint:disable-line
const config_1 = require("../config");
const lodash_1 = require("lodash");
const BaseViewSet_1 = require("./BaseViewSet");
const ProjectInvite_1 = require("../models/ProjectInvite");
const ValidationError_1 = require("../errors/ValidationError");
const middleware_1 = require("../authentication/jwt/middleware");
const middleware_2 = require("../authorization/middleware");
const objection_1 = require("objection");
const validate_1 = require("../utils/validate");
const sendMail = config_1.default.MAIL_BACKEND.sendMail;
const projectInviteHTML = mjml2html(fs.readFileSync(path.resolve(__dirname, '../../templates/mail/project-invite.mjml'), 'utf8')).html;
const projectInviteTXT = fs.readFileSync(path.resolve(__dirname, '../../templates/mail/project-invite.txt'), 'utf8');
const createConstraints = {
    name: {
        presence: true,
        length: {
            maximum: 128
        }
    },
    email: {
        presence: true,
        email: true
    }
};
const acceptConstraints = {
    token: {
        presence: true

import url = require('url');
import * as ejs from 'ejs';
import { cloneDeep } from 'lodash';
const { mjml2html } = require('mjml'); // tslint:disable-line
import { transaction } from 'objection';
import User from '../models/User';
import Project from '../models/Project';
import ProjectInvite, { IInvitePayload } from '../models/ProjectInvite';
import BaseViewSet from './BaseViewSet';
import ValidationError from '../errors/ValidationError';
import NotFoundError from '../errors/NotFoundError';
import config from '../config';
import { requireAuthentication } from '../authentication/jwt/middleware';
import validate from '../utils/validate';

const signUpHTML = mjml2html(
  fs.readFileSync(
    path.resolve(__dirname, '../../templates/mail/sign-up-verify.mjml'), 'utf8'
  )
).html;
const signUpTXT = fs.readFileSync(
  path.resolve(__dirname, '../../templates/mail/sign-up-verify.txt'), 'utf8'
);
const requestPasswordResetHTML = mjml2html(
  fs.readFileSync(
    path.resolve(__dirname, '../../templates/mail/request-password-reset.mjml'), 'utf8'
  )
).html;
const requestPasswordResetTXT = fs.readFileSync(
  path.resolve(__dirname, '../../templates/mail/request-password-reset.txt'), 'utf8'
);

.then(function (response) {
        emailTemplateHtml = response.data
        processLog = _.chain(processLog).orderBy(['lastModified'], ['asc']).findLast((f) => { return f.jobId === job.data.jobId }).value()
        for (var i = 0; i < runningProcess.inputProperty[0].entityschema.entity.length; i++) {
          let element = runningProcess.inputProperty[0].entityschema.entity[i].name
            // element = element.toLowerCase()
          let index = emailTemplateHtml.search('"' + element + '"')
            // element = _.capitalize(element)
          emailTemplateHtml = emailTemplateHtml.substr(0, index + element.length + 3) + processLog.input[0][element] + emailTemplateHtml.substr(index + element.length + 3)
        }
        emailTemplateHtml = mjml2html(emailTemplateHtml)
      })
      .catch(function (error) {

import fs = require('fs');
import path = require('path');
import url = require('url');
import * as ejs from 'ejs';
const { mjml2html } = require('mjml'); // tslint:disable-line
import config from '../config';
import { cloneDeep } from 'lodash';
import BaseViewSet from './BaseViewSet';
import ProjectInvite from '../models/ProjectInvite';
import ValidationError from '../errors/ValidationError';
import { requireAuthentication } from '../authentication/jwt/middleware';
import { requirePermission } from '../authorization/middleware';
import { transaction } from 'objection';
import validate from '../utils/validate';

const projectInviteHTML = mjml2html(
  fs.readFileSync(
    path.resolve(__dirname, '../../templates/mail/project-invite.mjml'), 'utf8'
  )
).html;
const projectInviteTXT = fs.readFileSync(
  path.resolve(__dirname, '../../templates/mail/project-invite.txt'), 'utf8'
);

const createConstraints = {
  name: {
    presence: true,
    length: {
      maximum: 128
    }
  },
  email: {

.then(employeeInfo => {
      // Send the employees pin number
      const confirmationEmail = {
        to: email,
        from: 'support@maincourse.app',
        subject: 'Welcome to Main Course!',
        text: 'Thank you for signing up for Main Course',
        html: mjml2html(`
      
      
    
  
    

      

        Main Course POS

      

    
    

      

.then(adminInfo => {
      // Send a confirmation email
      if (process.env.NODE_ENV !== 'test') {
        const confirmationEmail = {
          to: email,
          from: 'support@maincourse.app',
          subject: 'Welcome to Main Course!',
          text: 'Thank you for signing up for Main Course',
          html: mjml2html(`
        
        
      
    
      

        

        Main Course POS

        

      
      

        

// TODO temporary fix, remove when mjml is updated
    return (
      
        {content}
      
    )
  }
}

Title.tagName = tagName
Title.defaultMJMLDefinition = defaultMJMLDefinition
Title.endingTag = endingTag
Title.columnElement = columnElement

registerMJElement(Title)
export default Title

it('should render a mjml chart', () => {
      expect(
        mjml2html(`
          
            
              
            
          `).html
      ).to.contain(
        ''
      );
    });

import { MJMLColumnElement, elements, registerElement } from 'mjml'
import merge from 'lodash/merge'
import React, { Component } from 'react'

/*
 * Wrap your dependencies here.
 */
const { text: MjText } = elements

const NAME = 'mock'

@MJMLColumnElement({
  tagName: 'mj-mock',
  content: ' ',

  /*
   * These are your default css attributes
   */
  attributes: {
    'color': '#424242',
    'font-family': 'Helvetica',
    'margin-top': '10px'
  }
})
class Mock extends Component {

  /*
   * Build your styling here