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',
},

permalink

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
---

permalink must be a file path, and can be used only in the Template's Front Matter. Using a directory path will result in a build error.

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'],
  // ...
},

Remember, Maizzle will copy these folders over to the destination.path directory, with everything inside them.

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.

While you can use any file extension for your Templates, njk is recommended, as it clearly shows that Nunjucks templating is being used.

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

No effect in Front Matter

Since Tailwind CSS is compiled only once, before Templates are built, using build.tailwind.config in Front Matter will have no effect.

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.