If placeholder keys are used rather than text, the template is easier to use as-is

[iambumblehead]

For example, the footer part of the template looks like this...

<td>
  Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.
 </td>

If this were changed to use a key for regexp-replace

<td>__template_footer_text__</td>

then we could do something like this...

const inputTpl = fs.readFileSync( './path/to/template.html' ), { encoding: 'utf8' });
const input = inputTpl.replace(
  /__template_footer_text__/, 
  'Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.' );

console.log({ myCustomEmail: input });

It would also be awesome if this template could be packaged to npm, so that it could be included as a dependency for C# and javascript applications.

Thank you!

[leemunroe]

Thanks! I see what you mean. For less technical folk I think it is important to call out the anchor needs inline styling too, and in general this might overcomplicate the template.

That said, I love the npm idea. I've never published to npm before, how would that work? Do you have a good reference tutorial or something to point me in the right direction?

[iambumblehead]

suggestion: a template-html could be used to generate the example version pre-filled with content and both the template and the example could be included in the project.

re npm, I don't have a good reference. To use it though I think these are the things you would need to do,

1. get an npm user account
2. install node.js and it will come with npm
3. add a package.json file to the root of your project. perhaps copy-paste an existing package.json and update the values to match your own. The only required fields are 'name' and 'version' https://docs.npmjs.com/creating-a-package-json-file,
4. open a shell at the root of your project and enter 'npm publish' and npm will take care of the rest and your package will appear on npm's public package listing (it might prompt you for a login)

[iambumblehead]

another idea, if you want to make as few changes to the existing project as possible...

add a 'publish' script for npm that reads the current html files to create template files only included in the npm-published package. Pass the html into https://www.npmjs.com/package/xmldom and replace the text nodes replaced with template keys before saving the result as a new file.

[iambumblehead]

an index script could be used to simplify things for npm users, so that something like this might be possible for package users,

import emailTpl from 'responsive-html-email-template';

export default emailTpl({
  preheader: 'This is preheader text. Some clients will show this text as a preview.',
  buttonbackgroundcolor: '#3498db',
  buttonbefore: '<p>Hi there,</p><p>Sometimes you just want to send a simple HTML email.</p>',
  buttonlabel: 'Call To Action',
  buttonhref: 'http://htmlemail.io',
  buttonafter: '<p>This is a really simple email template.</p><p>Good luck! Hope it works.</p>'
})

[webketje]

Long-time passive starrer of this repo here, I like the idea.
You could use a simple templating library to generate the HTML, like Handlebars.js or Lodash.template.
To init an npm project you simply do npm init in the repo root.

In the JS integration example given by @iambumblehead, the placeholders are only of utility to users who want the exact HTML template as-is. I think a lot of people (including me) used this template as a starting point and replaced most of the body content. If placeholders are added they should be of more general utility, e.g. preheader, title, PoweredBy, and a single contents field for everything inside this <td>. Adding specific content placeholders like buttonlabel only works if your contents field takes an array of "content block" (e.g. Button) objects, separated in output in a grid/row system. That in turn, requires you to set up a comprehensive 'content block' library that is perhaps outside the scope of this repo.

[webketje]

Well a forker of this repo already put the template on NPM 5 years ago: https://www.npmjs.com/package/responsive-html-email-template. So if you want to go through with it, you will need to contact him and ask for NPM pkg ownership transfer or use an NPM scope, e.g. @htmlemail/responsive-html-email-template

[iambumblehead]

@webketje its interesting to consider these questions: would it be possible to make a generally useful npm package for this? what would the interface for such a package look like?

Here's an idea... what do you guys think?

The package could compose email from a markdown string that includes some variables at the top. Something like this,

## preheader - start the fun!

Hi there,

Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.

<!-- button -->
[Email Call To Action][0]

This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.

Good luck! Hope it works.

-----------------------
Company Inc, 3 Abbey Road, San Francisco CA 94102 
Don't like these emails? [Unsubscribe.][1]

-----------------------
Powered by [HTML Email.][2]

[0]: http://mylink.com
[1]: http://mylink.com
[2]: http://mylink.com

The markdown could passed into an interface with options like this...

const email = emailCreate( markdown, {
  buttonBackgroundColor: #faa
} )

This would be a bit more flexible and would allow one to compose things in a slightly different way.

[leemunroe]

I do like the idea of having a simple npm placeholder solution. How would this compare to this Grunt workflow? Which I think accomplishes the functionality you want, albeit using Grunt.

[iambumblehead]

The grunt-email-workflow provides many features, however my own situation requires one thing: stringy html, populated with custom copy text and links. No integrations or build tooling.

[webketje]

This would be a bit more flexible and would allow one to compose things in a slightly different way.

Though the markdown may be useful for some, it will not be for others and will add additional dependencies to this package.
I stick to the point of using a single contents field. Anyone could still create a simple markdown-body flow on top of that:

// Node.js env
const contents = require('fs').readFileSync('./src/contents.md', { encoding: 'utf-8' });
const md = require('markdown-it')();
const email = emailCreate({ contents: md.render(contents) });

What would be of more value (on NPM) is including a script to re-inline the CSS after changes

[iambumblehead]

@webketje I like your idea to use a single contents field. emailCreate would need to intelligently apply the necessary styles to the content string.

The concept of this package may just be impractical with no single solution for all. Copying the template file here and directly editing the html and copy text may actually be the "simplest" overall approach.