This repository contains the source code and tooling needed to build rich content emails that can be sent by the ClubHub service.
Add the club-hub-emails library via NPM
"club-hub-emails": "git+ssh://[email protected]:meshhq/club-hub-emails.git",
Import the library
import * as emails from from 'club-hub-emails'
Build an HTML email template.
const event = // Some event.
const club = // Some club.
const html = await CompileConfirmationEmail(event, club)
This project uses the Zurb Foundation for Emails tool chain for building rich, responsive emails. This repository itself was bootstrapped by using the Zurb cli command.
foundation new --framework emails
Install deps
make deps
Run the test suite
make test
Create prod build
make build
The email templates code and configuration live in the src/templates directory. This directory contains the following:
| Directory |
|---|
| assets |
| data |
| data-prod |
| helpers |
| layouts |
| pages |
| partials |
This project is outfitted with a sample sever that allows developers to view the HTML templates in the browser. To start the server, run the following:
make start
Once the server is started, a web page will appear which lists the individual templates contained in this project. The data that is used is contained in the data directory. Each email template should have a corresponding .json file for sample data.
The only thing needed to create a new template is to add a new file to the pages directory. See the existing template files for guidance.
The Foundation email framework uses handlebars to support dynamic templates. In order to build HTML files locally, we supply sample json object to the email templates. The json objects live in the data directory.
When it comes time to build production emails, we supply the same json object to the email templates, but instead of actual data, we provide additional handlebars tags. This allows us to build full email templates, complete with in-lined css, that still contain handlebars tags. This is a "hack" to make the Foundation emails truly dynamic at runtime. Our production json objects live in the data-prod directory.