Build Paths

This is where you define source and destination paths and files for Maizzle to use.

Let's first take a look at all the options:

// config.js
module.exports = {
  build: {
    destination: {
      path: 'build_local',
      extension: 'html',
    },
    templates: {
      source: 'src/templates',
      filetypes: 'html|njk|nunjucks',
    },
    tailwind: {
      css: 'src/assets/css/main.css',
      config: 'tailwind.config.js',
    },
    assets: {
      source: 'src/assets/images',
      destination: 'images',
    },
  },
  // ...
}

destination

This allows you to customize the output path and file extension.

path

Directory path where Maizzle should output the compiled emails. A Jigsaw-inspired build_${env} naming pattern is used by default.

destination: {
  path: 'build_local',
},

You can override destination.path for each Template, with the permalink FM key:

---
permalink: path/to/file.html
---

{% block template %}
  <!-- ... -->
{% endblock %}

You can use both relative and absolute file paths.

---
# Relative - output one level above project directory
permalink: ../newsletter.html
---
---
# Absolute - output at a specific system location
permalink: C:/Users/Cosmin/Newsletter/2019/12/index.html
---

extension

Define the file extension (without the dot) to be used for all templates that are output. Useful if you need to pass the file to other frameworks or templating languages.

For example, let's output Laravel Blade files:

destination: {
  extension: 'blade.php',
},

templates

Options to define your Template's source directories and file extensions to look for.

templates: {
  source: 'src/templates',
  filetypes: 'html|njk|nunjucks',
},

source

Define the path to your Templates. This is where Maizzle looks for templates to compile. It's also used by postcss-purgecss when scanning for selectors.

It can be a string:

templates: {
  source: 'src/templates',
  // ...
},

Or an array of strings:

templates: {
  source: ['src/templates', '/path/to/more/templates'],
  // ...
},

filetypes

Define what file extensions you use for your Templates.

Maizzle will only look for files ending in these extensions, when searching your build.templates.source directory for Templates to build.

templates: {
  filetypes: ['html', 'njk', 'nunjucks'], // or 'html|njk|nunjucks'
},

This means you can keep other files alongside your Templates, and Maizzle will simply copy them over to the build destination directory - it will not try to parse them.

You can define filetypes as an array, or as a pipe-delimited list of strings.

tailwind

Paths for Tailwind CSS.

build : {
  tailwind: {
    css: 'src/assets/css/main.css',
    config: 'tailwind.config.js',
  },
},

css

Paths to your main CSS file, that will be compiled with Tailwind CSS.

config

Path to the Tailwind CSS config file to use.

You can use this to specify a Tailwind config file for any build scenario.

For example, you might want to use a separate Tailwind config, where you:

  • define fewer theming options (faster CSS compilation)
  • disable !important (like in ⚡4email templates)
  • use different Tailwind plugins

assets

Source and destination directories for your asset files.

At build time, assets.destination will be created relative to build.destination, and everything inside assets.source will be copied into it:

assets: {
  source: 'src/assets/images',
  destination: 'images',
},

You can use it to store any global email assets, not just images.

Nunjucks

You can configure the Nunjucks environment by adding a nunjucks object.

Currently, Maizzle only supports customizing the path and tags for Nunjucks:

// config.js
module.exports = {
  build: {
    // ..
    nunjucks: {
      path: '/Code/emails/project-name',
      tags: {
        blockStart: '<%',
        blockEnd: '%>',
        variableStart: '[[',
        variableEnd: ']]',
        commentStart: '<#',
        commentEnd: '#>'
      }
    },
  },
}

path

Use the path key to define a base path for Nunjucks to use - extends, includes, components will all be referenced relative to it.

tags

Customize the default syntax for Nunjucks blocks, variables, and comments.