src | ||
.babelrc | ||
.gitignore | ||
example.config.json | ||
gulpfile.babel.js | ||
LICENSE | ||
package.json | ||
README.md |
Email template for ReadLater
Foundation for Emails Template
π Table of Contents
π¦ Installation
To use this template, your computer needs Node.js 0.12 or greater. The template can be installed with the Foundation CLI, or downloaded and set up manually.
Using the CLI
Install the Foundation CLI with this command:
npm install foundation-cli --global
Then install this script
git clone ssh://gogs@git.shikiryu.com:2200/ReadLaterByEmail/email-template.git
cd email-template
npm install
π Usage
Run npm start
to kick off the build process. A new browser tab will open with a server pointing to your project files.
Run npm run build
to inline your CSS into your HTML along with the rest of the build process.
Run npm run litmus
to build as above, then submit to litmus for testing. AWS S3 Account details required (config.json)
Run npm run mail
to build as above, then send to specified email address for testing. SMTP server details required (config.json)
Run npm run zip
to build as above, then zip HTML and images for easy deployment to email marketing services.
Details on content
As this project is used to make email sent by a Laravel app, every dynamic element must be indicated in the front-matter as such :
---
TITLE: "{{ $link->title }}"
---
and it should be in the code as such
{{{ TITLE }}}
@if()
and all blades control structures can be used.
Speeding Up Your Build
If you create a lot of emails, your build can start to slow down, as each build rebuilds all of the emails in the
repository. A simple way to keep it fast is to archive emails you no longer need by moving the pages into src/pages/archive
.
You can also move images that are no longer needed into src/assets/img/archive
. The build will ignore pages and images that
are inside the archive folder.
Litmus Tests (config.json)
Testing in Litmus requires the images to be hosted publicly. The provided gulp task handles this by automating hosting to an AWS S3 account. Provide your Litmus and AWS S3 account details in the example.config.json
and then rename to config.json
. Litmus config, and aws.url
are required, however if you follow the aws-sdk suggestions you don't need to supply the AWS credentials into this JSON.
{
"aws": {
"region": "us-east-1",
"accessKeyId": "YOUR_ACCOUNT_KEY",
"secretAccessKey": "YOUR_ACCOUNT_SECRET",
"params": {
"Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"litmus": {
"username": "YOUR_LITMUS@EMAIL.com",
"password": "YOUR_ACCOUNT_PASSWORD",
"url": "https://YOUR_ACCOUNT.litmus.com",
"applications": ["ol2003","ol2007","ol2010","ol2011","ol2013","chromegmailnew","chromeyahoo","appmail9","iphone5s","ipad","android4","androidgmailapp"]
}
}
Manual email tests (config.json)
Similar to the Litmus tests, you can have the emails sent to a specified email address. Just like with the Litmus tests, you will need to provide AWS S3 account details in config.json
. You will also need to specify to details of an SMTP server. The email address to send to emails to can either by configured in the package.json
file or added as a parameter like so: npm run mail -- --to="example.com"
{
"aws": {
"region": "us-east-1",
"accessKeyId": "YOUR_ACCOUNT_KEY",
"secretAccessKey": "YOUR_ACCOUNT_SECRET",
"params": {
"Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"mail": {
"to": [
"example@domain.com"
],
"from": "Company name <info@company.com",
"smtp": {
"auth": {
"user": "example@domain.com",
"pass": "12345678"
},
"host": "smtp.domain.com",
"secureConnection": true,
"port": 465
}
}
}
For a full list of Litmus' supported test clients(applications) see their client list.
Caution: AWS Service Fees will result, however, are usually very low do to minimal traffic. Use at your own discretion.
π οΈ Support
Please open an issue for support.
π Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
π License
Creative Commons Attribution NonCommercial (CC-BY-NC) Β© Chouchen