Using addExtension for a new template engine! #3549

jido · 2024-11-20T22:30:14Z

jido
Nov 20, 2024

Just wanted to share that I could get this to work (mostly) so you can take inspiration.

First go in your Eleventy project folder and install the template engine. In my case it is Mistigri, which I developed previously:

npm install mistigri

Then edit your .eleventy.js file:

module.exports = function(eleventyConfig) {
  
  let mistigri = require("mistigri")
  
  let mistigriEngine = {
    compile: (inputContent) => {
      return async (data) => mistigri.prrcess(inputContent, data)
    }
  }
  
  eleventyConfig.addTemplateFormats("mi")
  eleventyConfig.addExtension("mi", mistigriEngine)
  
  return {
    dir: {
      input: "src",
      output: "public",
    }
  }
}

You can now start using it for your templates. For example I used base.mi as layout:

<html>
 <head>
  <title>{{ title }}</title>
  <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
  <h1>{{ title }}</h1>

  {{& content }} {{! expecting HTML content, disable escaping }}
 </body>
</html>

Now if you do Markdown templates, it is annoying that Liquid is used instead of your own template engine for the frontmatter. Specially in my case since the syntax is quite similar it felt confusing. Let us replace it:

module.exports = function(eleventyConfig) {
  
  let mistigri = require("mistigri")
  
  let mistigriEngine = {
    compile: (inputContent) => {
      return async (data) => mistigri.prrcess(inputContent, {
        ...data, 
        makeurl: ({from}) => eleventyConfig.getFilter("url")(from),
        makeslug: ({from}) => eleventyConfig.getFilter("slugify")(from),
      })
    }
  }
  
  eleventyConfig.addTemplateFormats("mi")
  eleventyConfig.addExtension("mi", mistigriEngine)
  
  return {
    markdownTemplateEngine: "mi",
    dir: {
      input: "src",
      output: "public",
    }
  }
}

I also added two filters to use in the templates.

Here is a sample index.md:

---
title: Home Page
layout: base.mi
---

That is my home page!

{{# collections.posts }}
* [{{ data.title }}]({{ makeurl from = url }})
{{/ collections.posts }}

---

Articles:
{{# collections.articles }}
* [{{ data.title }}]({{ makeurl from = url }})
{{/ collections.articles }}

---
{{> https://github.com/jido/mistigri.js/raw/refs/heads/master/Examples/included.mi }}

With blog posts in the blog folder and this blog/blog.json:

{
  "layout": "base.mi",
  "tags": "posts"
}

And this is articles.mi:

---
pagination:
  data: cms
  size: 1
  alias: article
  addAllPagesToCollections: true
layout: base.mi
tags: articles
templateEngineOverride: mi, md
permalink: "/articles/{{ makeslug from = article.title }}/"
eleventyComputed:
  title: "{{ article.title }}"
---

{{ article.body }}

You can see a use of makeslug for the permalink. The article data is returned by _data/cms.js.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using addExtension for a new template engine! #3549

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Using addExtension for a new template engine! #3549

jido Nov 20, 2024

Replies: 0 comments

jido
Nov 20, 2024