MJML-Haml allows you to render HTML e-mails from a MJML template.
An example layout might look like:
/ app/views/layouts/user_mailer.html.mjml
%mjml
%mj-body
%mj-container
%mj-section{ background: { color: '#222' }, padding: '10px' }
%mj-column{ width: '30%' }
%mj-image{ alt: 'fnix', href: root_url, src: image_url('my-logo.png') }
%mj-column{ width: '30%' }
%mj-column{ width: '40%' }
%mj-social{ 'base-url': '/images/mailer/', display: 'facebook:url google:url linkedin:url twitter:url',
'facebook-content': '', 'facebook-href': 'https://www.facebook.com/Fnix-804357709655741/',
'facebook-icon-color': 'transparent', 'google-content': '',
'google-href': 'https://plus.google.com/+FnixBr', 'google-icon-color': 'transparent', 'icon-size': '32px',
'linkedin-content': '', 'linkedin-href': 'https://www.linkedin.com/company/fnix',
'linkedin-icon-color': 'transparent', 'twitter-content': '', 'twitter-href': 'https://twitter.com/fnixbr',
'twitter-icon-color': 'transparent' }
%mj-section{ 'text-align': 'left' }
= yield
%mj-section{ 'background-color': '#E5E5E5', padding: '10px 0' }
%mj-text{ 'font-size': '11px', 'line-height': '15px' }
My awesome footerAnd the template for an action:
/ app/views/user_mailer/password.html.haml
%mj-text
%h2 Password
%mj-text
%p{style: 'text-align: justify;'}
== You sign up with #{provider_to_name @user.identities.first.try(:provider)}, so we generate a password for you:
%mj-button= @password
%mj-text
%p
== You need this password to change your #{link_to 'account', edit_user_registration_url} details. Do you want to
change this cryptic password, no problem::
%mj-button{ href: edit_user_registration_url } Change Password
Note that the layout is named .html.mjml and the template .html.haml. Why? mjml only output content that are wrapped
by:
<mjml>
<mj-body>
...
</mj-body>
</mjml>So, for the template we just want to use HAML and for the layout + template we use mjml + haml.
You write your mailer as usual:
# app/mailers/user_mailer.rb
class UserMailer < ActionMailer::Base
def password()
mail(to: 'test@example.com', subject: 'test')
end
endAdd it to your Gemfile.
gem 'mjml-haml'Run the following command to install it:
bundle installInstall the MJML parser (optional -g to install it globally):
npm install -g mjml@^2.0To deploy with Heroku you'll need to setup multiple buildpacks so that Heroku first builds Node for MJML and then the Ruby environment for your app.
Once you've installed the Heroku Toolbelt you can setup the buildpacks from the commandline:
$ heroku buildpacks:set heroku/ruby
And then add the Node buildpack to index 1 so it's run first:
$ heroku buildpacks:add --index 1 heroku/nodejs
Check that's all setup by running:
$ heroku buildpacks
Next you'll need to setup a package.json file in the root, something like this:
{
"name": "your-site",
"version": "1.0.0",
"description": "Now with MJML email templates!",
"main": "index.js",
"directories": {
"doc": "doc",
"test": "test"
},
"dependencies": {
"mjml": "^2.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/your-repo/your-site.git"
},
"keywords": [
"mailer"
],
"author": "Your Name",
"license": "ISC",
"bugs": {
"url": "https://github.com/fnix/mjml-haml/issues"
},
"homepage": "https://github.com/fnix/mjml-haml"
}Then $ git push heroku master and it should Just WorkTM.
If you discover any bugs, feel free to create an issue on GitHub. Please add as much information as possible to help us fixing the possible bug. We also encourage you to help even more by forking and sending us a pull request.
github.com/fnix/mjml-haml/issues
- Kadu Diógenes github.com/cerdiogenes
MIT License. Copyright 2016 Kadu Diógenes.
Lovingly built on github.com/sighmon/mjml-rails