{"id":18712101,"url":"https://github.com/fnix/mjml-haml","last_synced_at":"2025-04-12T12:31:24.369Z","repository":{"id":56884037,"uuid":"65841725","full_name":"fnix/mjml-haml","owner":"fnix","description":"Use haml with mjml","archived":false,"fork":false,"pushed_at":"2016-09-21T00:17:18.000Z","size":125,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T20:54:23.038Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://mjml.io","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fnix.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-16T17:54:52.000Z","updated_at":"2022-07-09T22:14:17.000Z","dependencies_parsed_at":"2022-08-20T23:40:07.634Z","dependency_job_id":null,"html_url":"https://github.com/fnix/mjml-haml","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnix%2Fmjml-haml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnix%2Fmjml-haml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnix%2Fmjml-haml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnix%2Fmjml-haml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fnix","download_url":"https://codeload.github.com/fnix/mjml-haml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248566500,"owners_count":21125678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T12:40:50.560Z","updated_at":"2025-04-12T12:31:23.481Z","avatar_url":"https://github.com/fnix.png","language":"Ruby","funding_links":[],"categories":["Ruby"],"sub_categories":[],"readme":"# MJML-Haml\n\n[![Build Status](https://api.travis-ci.org/fnix/mjml-haml.svg?branch=master)](http://travis-ci.org/fnix/mjml-haml) [![Gem Version](https://badge.fury.io/rb/mjml-haml.svg)](https://badge.fury.io/rb/mjml-haml)\n\n**MJML-Haml** allows you to render HTML e-mails from a [MJML](https://mjml.io) template.\n\nAn example layout might look like:\n\n```haml\n/ app/views/layouts/user_mailer.html.mjml\n%mjml\n  %mj-body\n    %mj-container\n      %mj-section{ background: { color: '#222' }, padding: '10px' }\n        %mj-column{ width: '30%' }\n          %mj-image{ alt: 'fnix', href: root_url, src: image_url('my-logo.png') }\n        %mj-column{ width: '30%' }\n        %mj-column{ width: '40%' }\n          %mj-social{ 'base-url': '/images/mailer/', display: 'facebook:url google:url linkedin:url twitter:url',\n            'facebook-content': '', 'facebook-href': 'https://www.facebook.com/Fnix-804357709655741/',\n            'facebook-icon-color': 'transparent', 'google-content': '',\n            'google-href': 'https://plus.google.com/+FnixBr', 'google-icon-color': 'transparent', 'icon-size': '32px',\n            'linkedin-content': '', 'linkedin-href': 'https://www.linkedin.com/company/fnix',\n            'linkedin-icon-color': 'transparent', 'twitter-content': '', 'twitter-href': 'https://twitter.com/fnixbr',\n            'twitter-icon-color': 'transparent' }\n      %mj-section{ 'text-align': 'left' }\n        = yield\n      %mj-section{ 'background-color': '#E5E5E5', padding: '10px 0' }\n        %mj-text{ 'font-size': '11px', 'line-height': '15px' }\n          My awesome footer\n```\n\nAnd the template for an action:\n\n```haml\n/ app/views/user_mailer/password.html.haml\n%mj-text\n  %h2 Password\n%mj-text\n  %p{style: 'text-align: justify;'}\n    == You sign up with #{provider_to_name @user.identities.first.try(:provider)}, so we generate a password for you:\n%mj-button= @password\n%mj-text\n  %p\n    == You need this password to change your #{link_to 'account', edit_user_registration_url} details. Do you want to\n    change this cryptic password, no problem::\n%mj-button{ href: edit_user_registration_url } Change Password\n\n```\n\nNote that the layout is named `.html.mjml` and the template `.html.haml`. Why? mjml only output content that are wrapped\nby:\n\n```html\n\u003cmjml\u003e\n  \u003cmj-body\u003e\n    ...\n  \u003c/mj-body\u003e\n\u003c/mjml\u003e\n```\n\nSo, for the template we just want to use HAML and for the layout + template we use mjml + haml.\n\nYou write your mailer as usual:\n\n```ruby\n# app/mailers/user_mailer.rb\nclass UserMailer \u003c ActionMailer::Base\n  def password()\n    mail(to: 'test@example.com', subject: 'test')\n  end\nend\n```\n\n## Installation\n\nAdd it to your Gemfile.\n\n```ruby\ngem 'mjml-haml'\n```\n\nRun the following command to install it:\n\n```console\nbundle install\n```\n\nInstall the MJML parser (optional -g to install it globally):\n\n```console\nnpm install -g mjml@^2.0\n```\n## Deploying with Heroku\n\nTo deploy with [Heroku](https://heroku.com) you'll need to setup [multiple buildpacks](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app) so that Heroku first builds Node for MJML and then the Ruby environment for your app.\n\nOnce you've installed the [Heroku Toolbelt](https://toolbelt.heroku.com/) you can setup the buildpacks from the commandline:\n\n`$ heroku buildpacks:set heroku/ruby`\n\nAnd then add the Node buildpack to index 1 so it's run first:\n\n`$ heroku buildpacks:add --index 1 heroku/nodejs`\n\nCheck that's all setup by running:\n\n`$ heroku buildpacks`\n\nNext you'll need to setup a `package.json` file in the root, something like this:\n\n```json\n{\n  \"name\": \"your-site\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Now with MJML email templates!\",\n  \"main\": \"index.js\",\n  \"directories\": {\n    \"doc\": \"doc\",\n    \"test\": \"test\"\n  },\n  \"dependencies\": {\n    \"mjml\": \"^2.0\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/your-repo/your-site.git\"\n  },\n  \"keywords\": [\n    \"mailer\"\n  ],\n  \"author\": \"Your Name\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/fnix/mjml-haml/issues\"\n  },\n  \"homepage\": \"https://github.com/fnix/mjml-haml\"\n}\n```\n\nThen `$ git push heroku master` and it should Just WorkTM.\n\n## Bug reports\n\nIf 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.\n\n[github.com/fnix/mjml-haml/issues](https://github.com/fnix/mjml-haml/issues)\n\n## Maintainers\n\n* Kadu Diógenes [github.com/cerdiogenes](https://github.com/cerdiogenes)\n\n## License\n\nMIT License. Copyright 2016 Kadu Diógenes.\n\nLovingly built on [github.com/sighmon/mjml-rails](https://github.com/sighmon/mjml-rails)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffnix%2Fmjml-haml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffnix%2Fmjml-haml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffnix%2Fmjml-haml/lists"}