nodemailer-express-handlebars-plaintext-inline-ccs
v0.9.0
Published
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
Downloads
8
Maintainers
oskaraqpReadme
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-ccsUsage
//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: '[email protected]',
to: '[email protected]',
subject: 'Test',
template: 'email',
context: {
name: 'Name'
},
attachments: [
{
filename: 'logo.png',
path: './emailTemplates/logo.png',
cid: '[email protected]' // 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](https://www.npmjs.com/package/ html-to-text#options). 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 isfalseit 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 tofalseor whenopts.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 tofalse
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