Nunjucks

Tulip template is primary using template language of Nunjucks, you can see mostly the files inside _includes folder where we developed the template there.

Filter

When we add Filter configuration inside .eleventy.js then we called the filters in nunjucks file.

module.exports = function(config) {
  // Return your Object options:

  // FILTERS
  config.addFilter('prettyDate', (date) => {
    return DateTime.fromISO(date.toISOString(), {zone: 'utc'})
    .toLocaleString(
        DateTime.DATE_MED,
      );
  });
};

Filters are used to transform, parsing or modify the raw contents.

Then we calling them in our blog nunjucks file

<div class="journal__card flow">
        <!--  -->
    <p class="post-author__card">Tulip Authors | {{param.date | prettyDate}}</p>
        <!--  -->
</div>

Nunjucks Shortcode

We use shortcode to shorten written some block for HTML. One of the examples that we use to call the block image

We write the image function first with calling Eleventy Plugin Image in separate, to make it clear in our eleventy config file

async function imageShortcode(src, alt, widths, cls, sizes) {
    let metadata =  {
      formats: ["avif", "webp"],
      widths: widths || [null],
      urlPath: "/images/",
      outputDir: "./dist/images/"
    };
  
    let stats = await Image(src, metadata);

    return Image.generateHTML(stats, {
        alt,
        loading: "lazy",
        decoding: "async",
        sizes: sizes || "(min-width: 22em) 30vw, 100vw",
        class: cls || "",
    })
  }

Then add our image config inside

module.exports = function(config) {
  // Return your Object options:

  config.addNunjucksAsyncShortcode("Img", imageShortcode);
};

After we added the shortcode, lets call from one of our nunjucks template

<div class="homepage">
    <!--  -->
    {% Img "https://mediacdn.hijau.xyz/hijau-cover-white.jpg", "Mangrove Dead Ship", [1080], "home-feature__img" %}
</div>

Reference:

1. A rich and powerful templating language for JavaScript, Nunjucks