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: 4 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-06-22T18:00:42.735Z (6 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`.