{"id":13430208,"url":"https://github.com/groupon/gleemail","last_synced_at":"2025-05-08T21:38:16.882Z","repository":{"id":20977575,"uuid":"24266616","full_name":"groupon/gleemail","owner":"groupon","description":"Making email template development fun! Sort of!","archived":false,"fork":false,"pushed_at":"2015-06-19T12:58:12.000Z","size":854,"stargazers_count":292,"open_issues_count":4,"forks_count":24,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-13T20:07:41.046Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/groupon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-20T15:41:26.000Z","updated_at":"2024-11-04T21:09:21.000Z","dependencies_parsed_at":"2022-07-30T03:07:54.943Z","dependency_job_id":null,"html_url":"https://github.com/groupon/gleemail","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/groupon%2Fgleemail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/groupon%2Fgleemail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/groupon%2Fgleemail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/groupon%2Fgleemail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/groupon","download_url":"https://codeload.github.com/groupon/gleemail/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830912,"owners_count":20354848,"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-07-31T02:00:51.076Z","updated_at":"2025-03-16T05:30:37.866Z","avatar_url":"https://github.com/groupon.png","language":"CoffeeScript","funding_links":[],"categories":["CoffeeScript"],"sub_categories":[],"readme":"# Gleemail\n\n*Remember when developing HTML emails used to be fun?* **Nope, neither do I.**\n\nGleemail is an attempt to change that. It's a local development environment for creating HTML emails that removes a lot of the headaches.\n\n![Gleemail Screenshot](docs/images/screenshot.jpg)\n\n## Features\n\n* Build email templates with [Mustache](http://mustache.github.io/).\n* Write CSS using [Stylus](http://learnboost.github.io/stylus/).\n* Custom Gleemail HTML tags cleanly render into unsightly nested table structures.\n* Automatically inlines CSS styles for you.\n* Export templates to other templating engines (MailChimp, Eloqua, FreeMarker, etc.)\n* Share Mustache and Stylus partials between email templates.\n* Live browser preview refreshes whenever you save changes to files.\n* View both HTML and text previews of an email in the browser.\n* Automatically upload images to S3, automatically reference them in test emails.\n* One-click test email delivery.\n* One-click project creation in Litmus and Eloqua.\n* Automatically render templates with dummy data from a JSON file.\n* CLI for rendering templates from the command line.\n\n[Demo Presentation](https://vimeo.com/108481023)\n\n## Getting Started\n\nInstall Node.js, then install the `gleemail` npm package globally:\n\n```shell\nnpm install -g gleemail\n```\n\nCreate a new project directory:\n\n```shell\ngleemail project my-project-dir-name\n```\n\nEdit `config.json` with your email, [S3](http://aws.amazon.com/s3) and [Litmus](https://litmus.com) credentials, then start the server:\n\n```shell\ncd ./my-project-dir-name\ngleemail start\n```\n\nNow you should be able to visit http://localhost:4433 *in Chrome* and you will be able to see the example email template.\nUse the UI to bootstrap your own templates, and the changes you make will be immediately displayed in the browser.\n\n## Rendering from the Command Line\n\nTo programmatically render templates in a script or from the command line, use the `gleemail render` command:\n\n```shell\ncd /path/to/project\n\n# Render the HTML version with the first dummy data to stdout\ngleemail render your-template-name \u003e my-email.html\n\n# Render using the third piece of dummy data\ngleemail render your-template-name -i 2 \u003e my-email.html\n\n# Render the text version, use -o to specify output instead of stdout\ngleemail render your-template-name -t text -o my-email.txt\n\n# Render as a Mailchimp template\ngleemail render your-template-name -r mailchimp \u003e my-email.html\n```\n\nTo view all the available rendering options, use `gleemail help render`.\n\n## Gleemail Markup\n\nFor all of these transformer \"macro tags\", any regular attributes (`id`, `class`, etc) that are placed on the macro element will be transferred to the generated element.\n\n### `\u003cgm-box\u003e`\n\nThis gives you a box model for padding around a piece of content using table cells.\n\n```html\n\u003cgm-box padding=\"10px 20px\" class=\"some-class\"\u003e\n  \u003cstrong\u003eHello World\u003c/strong\u003e\n\u003c/gm-box\u003e\n\n\u003c!-- becomes --\u003e\n\n\u003ctable class=\"some-class\" style=\"width: 100%; border: none; border-collapse: collapse;\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" height=\"10\" width=\"20\"\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" height=\"10\"\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" height=\"10\" width=\"20\"\u003e\u0026nbsp;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" width=\"20\"\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd style=\"border: none; border-collapse: collapse;\"\u003e\n      \u003cstrong\u003eHello World\u003c/strong\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" width=\"20\"\u003e\u0026nbsp;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" height=\"10\" width=\"20\"\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" height=\"10\"\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd style=\"line-height: 0; border: none; border-collapse: collapse;\" height=\"10\" width=\"20\"\u003e\u0026nbsp;\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### `\u003cgm-stack\u003e`\n\nThis gives you a vertical stack of elements. Each child of the `\u003cgm-stack\u003e` is assumed to be its own row.\n\n```html\n\u003cgm-stack class=\"some-class\"\u003e\n  \u003cp\u003eHello\u003c/p\u003e\n  \u003cp\u003eWorld\u003c/p\u003e\n  \u003cp\u003e!!!\u003c/p\u003e\n\u003c/gm-stack\u003e\n\n\u003c!-- becomes --\u003e\n\n\u003ctable class=\"some-class\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd style=\"border: none; border-collapse: collapse;\"\u003e\n      \u003cp\u003eHello\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd style=\"border: none; border-collapse: collapse;\"\u003e\n      \u003cp\u003eWorld\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd style=\"border: none; border-collapse: collapse;\"\u003e\n      \u003cp\u003e!!!\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### `\u003cgm-row\u003e` with `\u003cgm-col\u003e`\n\nUsing `\u003cgm-row\u003e` with nested `\u003cgm-col\u003e` elements gives you horizontally aligned content.\nAttributes placed on the `\u003cgm-col\u003e` elements are transferred to the generated `\u003ctd\u003e`s.\n\n```html\n\u003cgm-row class=\"some-class\"\u003e\n  \u003cgm-col width=\"100\"\u003eHello\u003c/gm-col\u003e\n  \u003cgm-col width=\"200\"\u003eWorld\u003c/gm-col\u003e\n  \u003cgm-col width=\"300\"\u003e!!!\u003c/gm-col\u003e\n\u003c/gm-row\u003e\n\n\u003c!-- becomes --\u003e\n\n\u003ctable class=\"some-class\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"\u003e\n  \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctd width=\"100\" style=\"border: none; border-collapse: collapse;\"\u003e\n      Hello\n    \u003c/td\u003e\n    \u003ctd width=\"200\" style=\"border: none; border-collapse: collapse;\"\u003e\n      World\n    \u003c/td\u003e\n    \u003ctd width=\"300\" style=\"border: none; border-collapse: collapse;\"\u003e\n      !!!\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### `gm-centered` Attribute\n\nThis attribute can be added to any tag to wrap its contents in a centered table.\nThis is primarily useful on the `\u003cbody\u003e` element.\n\n```html\n\u003cbody gm-centered\u003e\n  \u003cp\u003eMy body\u003c/p\u003e\n\u003c/body\u003e\n\n\u003c!-- becomes --\u003e\n\n\u003cbody\u003e\n  \u003ctable style=\"width: 100%;\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"\u003e\n    \u003ctr style=\"border: none; border-collapse: collapse;\"\u003e\n      \u003ctd align=\"center\" style=\"border: none; border-collapse: collapse;\"\u003e\n        \u003cp\u003eMy body\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/body\u003e\n```\n\n### Creating Custom Transformer Macros\n\nTo write your own macros, add a `hooks.js` or `hooks.coffee` file to your project directory.\nIt should export a function that take a `hooks` object, which has a number of methods on it including `addTransformer()`.\nTransformer functions can be synchronous or asynchronous, and this is determined by the presence of a second argument in the function signature.\n\nFor example:\n\n```javascript\n// This is hooks.js\n\nmodule.exports = function(hooks) {\n  // Simple, synchronous macro\n  // Turns:\n  // \u003cgm-green\u003eThis is green!\u003c/gm-green\u003e\n  // into:\n  // \u003cspan style='color: green;'\u003eThis is green!\u003c/span\u003e\n  hooks.addTransformer(function($) {\n    $(\"gm-green\").each(function() {\n      greenTag = $(this);\n      span = $(\"\u003cspan style='color: green;'\u003e\u003c/span\u003e\");\n      span.append(greenTag.contents());\n      greenTag.after(span);\n      greenTag.remove();\n    });\n  });\n\n  // Asynchronous macro, requires passing $ back in the callback\n  // Turns:\n  // \u003cgm-file path=\"/path/to/file.txt\"\u003e\u003c/gm-file\u003e\n  // Into:\n  // \u003cpre\u003eContents of file...\u003c/pre\u003e\n  hooks.addTransformer(function($, cb) {\n    fileTag = $(\"gm-file\").eq(0); // for simplicity, let's say there's just one\n    pre = $(\"\u003cpre\u003e\u003c/pre\u003e\");\n    filePath = fileTag.attr(\"path\");\n    require(\"fs\").readFile(filePath, function(err, buffer) {\n      if (err) return cb(err);\n      pre.html(buffer.toString());\n      fileTag.after(pre);\n      fileTag.remove();\n      cb(null, $);\n    });\n  });\n});\n```\n\n# Development\n\nPlease refer to `CONTRIBUTING.md` for contribution guidelines, any help is greatly appreciated!\n\nAfter cloning the repository, do a setup and run the tests:\n\n```shell\nmake setup\nmake test\n```\n\nThe easiest way to use the `gleemail` command during development is to use the `npm link` command.\nThis makes your local executable available as if you had installed it globally from npm:\n\n```shell\nnpm link .\n```\n\nTo make development easier, you can use these commands to auto-load changes in client and server code:\n\n```shell\n# In gleemail dir\nmake dev\n# In project dir\ngleemail dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgroupon%2Fgleemail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgroupon%2Fgleemail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgroupon%2Fgleemail/lists"}