File organisation in Eleventy: Filters

Filters are a handy feature in Eleventy that allows you to run functions on input from templates.

A filter is a function which can be used within templating syntax to transform data into a more presentable format. Filters are typically designed to be chained, so that the value returned from one filter is piped into the next filter.

They are used with a pipe character (|) from templates like in the documentation example:

 <h1>{{ name | makeUppercase }}</h1>

Here, name is a variable that contains some value and makeUppercase is a filter it is passed to.

To create a filter, you call addFilter method in your configuration:

export default function(eleventyConfig) {
	eleventyConfig.addFilter("makeUppercase", function(value) {
		return value.toUpperCase()
	}); 
});

When you have one or two filters, they live comfortably in the main function but due to their usefulness, I tend to accumulate a large collection over time. They are handy small utility functions so it’s easy to create one for any use case.

Here’s how I organise my filters:

I have a _11ty/ folder for all sorts of scripts that I use to run my Eleventy project. There, I create a filters.js file that contains all my filters and export them.

Here’s an example of a small project I started recently

function ongoing(isOngoing) {
  return isOngoing ? "ongoing" : "finished";
}

function finishedSeries(series) {
  return series.filter((serie) => !serie.ongoing).length || 0;
}

export default { ongoing, finishedSeries };

The function name matches the filter name exactly here so that I can in my config file then do this

import filters from './11ty/filters.js'

export default function(eleventyConfig) {
	Object.entries(filters).forEach(([name, callback]) => {
    eleventyConfig.addFilter(name, callback);
  });
});

This will go through all the filters and register them with the function name as filter name and the function callback as the function.

I don’t have to remember the syntax of addFilter anymore and I can keep all of my filters in one place. That’s handy when I need to debug a misbehaving filter or add a new filter. Everything is tidily in one place.