kunstmaan / orbit

Build mails with ease

Orbit

What

Speed up e-mail development with SCSS, integrated litmus testing, file hosting, translations and whatnot. Inspired by foundation-emails-template

Configure

Create a config.json file in the root of your project based on this template:

{
    "projectName": "projectName",
    "ftp": {
        "host": "host.be",
        "user": "userName",
        "pass": "1234",
        "dest": "/path/on/server",
        "baseUrl": "http://host.be/projectName/"
    },
    "litmus": {
      "username": "[email protected]",
      "password": "1234",
      "url": "https://test.litmus.com",
      "applications": ["ol2003","ol2007","ol2010","ol2011","ol2013","chromegmailnew","chromeyahoo","appmail9","iphone5s","ipad","android4","androidgmailapp"]
    },
    "mail": {
      "to": [
        "[email protected]"
      ],
      "from": "Company name <[email protected]",
      "smtp": {
        "auth": {
          "user": "[email protected]",
          "pass": "12345678"
        },
        "host": "smtp.domain.com",
        "secureConnection": true,
        "port": 465
      }
    }
  }

Available commands

npm run start

• Compiles SCSS
• Builds templates
• Minifies images
• Starts local development server
• Runs watchers on SCSS and templates
• Sets the image basepath to a local directory

npm run build

• Compiles SCSS
• Builds templates
• Inlines css in html
• Minifies images

By default the build task builds all translations, you can build a specific mail by running this task with a language flag, i.e.: npm run build -- --lang nl

npm run zip

• Same as the build task but also creates a zip package of the html and images

npm run test

• Compiles SCSS
• Builds templates
• Minifies images
• Uploads images to specified ftp server
• Sets the image base path to the specified ftp server
• Sends a test of all mails to litmus

Again you can test a specific version by adding a language flag npm run test -- --lang nl

npm run mail

• builds the mail
• sends a test to a specified address in config.json

By default the mail task sends a test mail of all .html files in the dist folder, you can send a specific mail by running this task with a language flag, i.e.: npm run mail -- --lang nl

Layout

Orbit has the twigjs templating language built in, also the Inky templating language is available, more info: here

Contributing

We love contributions! You can take a look at our Contribution Guide to get you started. If you're submitting a pull request, please follow the guidelines in the Submitting pull requests documentation.

orbit's Issues

Remove default word-wrap en hyphen properties on td's

included in the _normalize.scss file of foundation-emails

[RFC] Rename the twig asset function

If I remember correctly we decided to name this function 'asset' to make it consistent with the Symfony asset function.

This one does not act like the Symfony one at all though. It fetches files from the img/language folder.

I would rename this to something that resembles that:

{{image("funky-stuff.jpg")}}

[Feature] Rebuild the templates when a translation file changes

It looks like templates aren't being rebuilt when the translations change. I have to restart the watcher. Would be cool if this was included in the buildOnChange task.

[RFC] Add an option to the asset function to not use the language

At the moment the asset function is hardcoded to look for files relative to the img/language folder. Sometimes an image is shared across languages, so it would be nice if it could just look relative to img folder.

A simple boolean flag might be enough:

{{asset('whodis.png', false)}}

I'm not sure what would make the most sense as the default.

[RFC] Make it possible to retrieve configuration values in template files

At the moment there is no easy way to add reusable configuration (for example urls) that is independent of the language.

For now I added a config property to the translations, but I don't like that this needs to be duplicated.

A {{config('some.data')}} function maybe?

Should this be overridable per language?