How to add custom Nunjucks Filters

[andriusdj]

Hello,

Sorry in advanced for my noobishness in this...

I have made a custom Nunjucks Filter but I can't find a way to add it to the Unibit dependency Nunjucks in order to extend it as it was described in Nunjucks documentation..

Could somebody help me to navigate through this?

The custom filter I made is in the file located at /index.js has the following:

var nunjucks = require('nunjucks');
var env = new nunjucks.Environment();
var crypto = require('crypto');

env.addFilter('md5', function(str) {
    return crypto.createHash('md5').update(str).digest("hex");
});

But it is not being picked up by anything..

What i need is the following to work:

{% hash = some_variable | md5 %}

Regards

[smnh]

Hi, @andriusdj

Currently Unibit doesn't support adding custom filters. And although it is fairly easy to add custom filters to Unibit itself, as your example shows. The main concept behind Unibit is that themes written on Unibit are convertable to other static site generators (SSG) by Stackbit: https://docs.stackbit.com/unibit/

Therefore, before adding a new filter to Unibit, one make ensure that this filter is also supported by every SSGs currently supported by Stackbit. Currently these are "Gatsby", "Hugo" and "Jekyll".

If an SSGs does not support a specific filter out of the box, but can be added using its own plugin system. Then, that filter needs to be created for that SSG first. And only then Stackbit's Unibit to SSG conversion process could be updated to incorporate that custom filter into the generated site. This "site conversion process" is not public, and therefore require Stackbit team to do some extra work to allow that filter to be converted properly to other SSGs.

Some SSGs like Hugo for example do not have a simple way to add new custom filters. The only way to add new filters in Hugo is by submitting a request to Hugo community to add that filter natively.

Luckily, md5 function is supported by Hugo out of the box: https://gohugo.io/functions/md5/.
Gatsby, as being React based SSG, can also support md5 easily, for example by using npm md5 package supported both on server and client side.
The problematic SSG in this case is Jekyll, I couldn't find any md5 filter there - https://jekyllrb.com/docs/liquid/filters/. It means that this filter either need to be created or find an existing one.