Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/contexte/cahouete
ARCHIVED - Writing email templates is now so much fun.
https://github.com/contexte/cahouete
email emailing gulp mjml nunjucks templates
Last synced: 3 months ago
JSON representation
ARCHIVED - Writing email templates is now so much fun.
- Host: GitHub
- URL: https://github.com/contexte/cahouete
- Owner: Contexte
- Archived: true
- Created: 2018-02-07T16:51:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-24T14:45:24.000Z (over 1 year ago)
- Last Synced: 2024-09-26T07:43:58.669Z (3 months ago)
- Topics: email, emailing, gulp, mjml, nunjucks, templates
- Language: JavaScript
- Homepage:
- Size: 222 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
⚠️ **THIS REPOSITORY IS NOT MAINTAINED ANYMORE** ⚠️
# Cahouète
> Writing email templates is now so much fun.
Based on:
- [mjml](https://mjml.io/)
- [nunjucks](https://mozilla.github.io/nunjucks/)
- [gulp](https://gulpjs.com/)
To correctly understand this framework, you should first know [mjml](https://mjml.io/getting-started/1) and [nunjucks](https://mozilla.github.io/nunjucks/templating.html).
The idea behind this framework is that even if mjml is an amazing one, it doesn't have macro/components feature and doesn't give you a structure for your files.
## Install
Download the [version wanted](https://github.com/contexte/cahouete/releases) and:
```shell
$ npm install
```
## Usage
### Development
```shell
$ npm run start
```
### Distribution
```shell
$ npm run build
```
## Docs
### Architecture
```
src/
├── components // where your components (or macro) are placed
│ └── Generic
│ ├── index.css
│ └── index.njk
├── fonts
│ └── open-sans.njk
├── layouts
│ ├── default.css
│ └── default.mjml.njk
├── pages // each folder is a page
│ └── Sample
│ ├── index.css
│ └── index.mjml.njk
└── styles // common styles
└── attributes.njk
```
Results are done in `/dist` and temporary files for debug (nunjucks compiled result in mjml templates) are in `__build__`.
### Components
If you want to make a component:
- create a folder into `/components`
- create two files called `index(.mjml).njk` and `index.css` // `.mjml` here is needed only to explain your component will also have mjml components, not only html
- add default `index.njk` code: two functions (style and render)
```html
{% macro style() %}
{% include "./index.css" %}
{% endmacro %}
{% macro
render(
prop=""
)
%}
{{ prop }}
{% endmacro %}
```
- Be sure to add it into the layout:
at the top of your layout:
```html
{% import componentsDir + "/:Component:/index.njk" as :Component: %}
```
and in ``:
```html
{{ Component.style() }}
```
### Styles
Styles are in `*.css` and code should be wrapped by:
```html
```
to be understood by mjml.
Default styles for mjml components are in `styles/attributes.njk`.