nodemailer-express-handlebars-plaintext-inline-ccs

    0.9.0 • Public • Published

    nodemailer-express-handlebars-plaintext-inline-ccs

    A plugin for nodemailer that uses express-handlebars view engine to generate emails, generates the plain text extracting the data from the HTML returned by the handlebars compiler and also injects the CSS inside <script> tags inside the HTML tags

    This package is inspired by nodemailer-express-handlebars

    This plugin works with nodemailer 6.x. It uses the next packages :

    • express-handlebars view engine to generate html emails.
    • html-to-text converter to generate text from the HTML returned by the view engine
    • juice converter to generate text from the HTML returned by the view engine

    Install from npm

    npm install nodemailer-express-handlebars-plaintext-inline-ccs

    Usage

    //reference the plugin
    var hbs = require('nodemailer-express-handlebars-plaintext-inline-ccs');
     
    const templatesFolder = './emailTemplates'
     
    const options = {
        templatesDir: templatesFolder,
        plaintextOptions: {
          uppercaseHeadings: false
        }
      }
     
    //attach the plugin to the nodemailer transporter
    transporter.use('compile', hbs(options));
    //send mail with options
    var mail = {
       from: 'from@domain.com',
       to: 'to@domain.com',
       subject: 'Test',
       template: 'email',
       context: {
           name: 'Name'
       },
       attachments: [
          {
            filename: 'logo.png',
            path: './emailTemplates/logo.png',
            cid: 'logo@domain.com' // same cid value as in the html img src
          }
       ]
    }
    transporter.sendMail(mail);

    Plugin Options

    The plugin expects the following options:

    • viewEngine (required) either the express-handlebars view engine instance or options for the view engine
    • templatesDir (required) provides the path to the directory where your views are
    • extName the extension of the views to use (defaults to .handlebars)
    • plainTextOptions options for configuring the html-to-text generator - the one that outputs the plain text, options for the html-to-text generator. By default plain text is generated, to disable set generatePlainText
    • juiceOptions options for configuring the juice generator - the one that injects our CSS into the HTML tags options for the juice generator

    Mail options

    Set the template and values properties on the mail object before calling sendMail

    • nodemailer-options see (https://nodemailer.com/message/) all options are supported and passed into nodemailer aditionally the plugin implements
    • template the name of the template file to use
    • context this will be passed to the view engine as the context as well as view engine options see here
    • useTemplate allows to disable the use of templates and handlebars (defaults to true), if it is false it uses the values of text and html passed
    • text The plaintext version of the message as an Unicode string, Buffer, Stream or an attachment-like object ({path: ‘/var/data/…'}) (defaults to ''), when useTemplate is set to false or when opts.plainTextOptions.generatePlainText = false
    • html The HTML version of the message as an Unicode string, Buffer, Stream or an attachment-like object ({path: ‘http://…'}) (defaults to ''), when useTemplate is set to false

    Handlerbars Template

    The CSS on this file will be converted and included inside the HTML tags ("<style>div{color:red;}</style><div/>" -> <div style="color: red;"></div>)

    <!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>nodemailer-express-handlebars-plaintext-inline-ccs</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                min-width: 100% !important;
                font-family: Arial, sans-serif;
            }
    
            .content {
                width: 100%;
                max-width: 600px;
            }
    
            .td-container {
                font-size: 0px;
                padding: 10px 25px 10px 25px;
                word-break: break-word;
            }
    
            .div-container {
                font-family: Arial, sans-serif;
                font-size: 13px;
                letter-spacing: normal;
                line-height: 1;
                text-align: left;
                color: #000000;
            }
    
            .sub-title {
                color: #5e6977;
                font-size: 15px;
                font-weight: 700;
                line-height: 22px;
            }
    
            p {
                margin: 10px 0;
            }
    
            .p-divider {
                border-top: solid 2px #E6E6E6;
                font-size: 1;
                margin: 0px auto;
                width: 100%;
            }
    
            a {
                color: #0069a6;
            }
    
            body[yahoo] .class-name {}
    
            @media only screen and (min-device-width: 601px) {
                .content {
                    width: 600px !important;
                }
            }
        </style>
    </head>
    
    <body bgcolor="#fff" yahoo>
        <table width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" role="presentation">
            <tr>
                <td>
                    <!--
                            Support for Outlook and Locus
                        -->
                    <!--[if (gte mso 9)|(IE)]>
                        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">
                            <tr>
                                <td>
                    <![endif]-->
                    <table class="content" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">
                        {{> page/header}} <!-- templates located at emailTemplates\page\header.handlebars -->
                        <tr>
                            <td class='td-container'>
                                <div class='div-container'>
                                    <p>
                                        <span class="sub-title">Name :</span> {{name}}
                                    </p>
                                </div>
                            </td>
                        </tr>
                        {{> page/signature}} <!-- templates located at emailTemplates\page\signature.handlebars -->
                    </table>
                    <!--[if (gte mso 9)|(IE)]>
                            </td>
                        </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
    </body>
    
    </html>
    

    License

    MIT

    Install

    npm i nodemailer-express-handlebars-plaintext-inline-ccs

    DownloadsWeekly Downloads

    1

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    117 kB

    Total Files

    7

    Last publish

    Collaborators

    • oskaraqp