Use in Node.js

You can use Maizzle in your Node.js app, to compile a string to an HTML email.

Usage

First, require() the framework in your application:

const Maizzle = require('@maizzle/framework')

Then, call the render() method, passing it a string and an options object:

const html = Maizzle.render(`html string`, options)

Of course, your html string can use Front Matter and Nunjucks templating, so you can extend Layouts, include Partials, or use Components.

See Nunjucks section below.

options is an object with the following structure:

{
  tailwind: {
    config: {},
    css: '',
    compiled: '',
  },
  maizzle: {
    config: {},
  },
  afterConfig() {},
  beforeRender() {},
  afterRender() {},
  afterTransformers() {},
  afterBuild() {},
}

`tailwind`

Option	Required	Type	Default	Description
`config`	Yes	Object	`null`	A Tailwind CSS config object.
`css`	No	String	@tailwind components; @tailwind utilities;	A string with CSS in PostCSS syntax. Gets compiled with Tailwind CSS. To use Tailwind, you should at least use @tailwind utilities
`compiled`	No	String	''	A CSS string to use as-is. If provided, will override `css`. This will not be compiled with Tailwind, resulting in faster render time.

`maizzle`

Option	Required	Type	Default	Description
`config`	Yes	Object	`null`	A complete Maizzle config object.

Besides tailwind and maizzle, as you can see you can also pass certain functions to the options object. These are lifecycle hooks, also called Events in Maizzle.

The other options listed above, like afterConfig() {}, are Events.

Example

const Maizzle = require('@maizzle/framework')

let str = `---
title: Using Maizzle on the server
---

{% extends "src/layouts/default.njk" %}

{% block template %}
<table>
  <tr>
    <td class="button">
      <a href="https://maizzle.com">Confirm email address</a>
    </td>
  </tr>
</table>
{% endblock %}`

Maizzle.render(
  str,
  {
    tailwind: {
      config: require('./tailwind.config'),
      css: `
        @tailwind utilities;
        .button { @apply rounded text-center bg-blue-500 text-white; }
        .button:hover { @apply bg-blue-700; }
        .button a { @apply inline-block py-16 px-24 text-sm font-semibold no-underline text-white; }
      `,
    },
    maizzle: {
      config: require('./config'),
    }
  }
).then(html => console.log(html))

Nunjucks

You can use Nunjucks templating to extend a Layout or include Partials or Components when using Maizzle in Node.js.

Paths to Layouts or any includes in your string to be rendered must be relative to the location where you execute the script.

Env Config

You must provide the render() method with a full Maizzle config object.

This means that if you want to use the default config.production.js that Maizzle comes with (which only contains options that need to be different from the base config), you need to first merge it with the base config.js and provide that in the options object of the render() method.

We can do this with the deepmerge package.

This is also what Maizzle does internally when you run maizzle build [env].

1. First, make sure to install the package in your project:

npm i deepmerge

2. Next, create a merged Maizzle config in your script, and pass it to render():

const deepmerge = require('deepmerge')
const Maizzle = require('@maizzle/framework')
// create a full config for production
const maizzleConfig = deepmerge(require('./config'), require('./config.production'))

let str = `---
title: Using Maizzle on the server
---

{% extends "src/layouts/default.njk" %}

{% block template %}
<table>
  <tr>
    <td class="rounded text-center bg-blue-500 hover-bg-blue-700 text-white">
      <a href="https://maizzle.com" class="inline-block py-16 px-24 text-sm font-semibold no-underline text-white">Confirm email address</a>
    </td>
  </tr>
</table>
{% endblock %}`

Maizzle.render(
  str,
  {
    tailwind: {
      config: require('./tailwind.config'),
    },
    maizzle: {
      config: maizzleConfig,
    }
  }
).then(html => console.log(html))