Blowing templates in the wind

I felt the aches and the limits of templating languages since my very first website made with Jekyll. At the time, I was super scared of any sort of language beyond Liquid, and this is how I got comfortable, but also stuck, with it. What if I want to do something that is not possible to do in Liquid, or if it requires a ton of syntax, while a couple of lines of JavaScript would achieve the same result?

As soon as I found out about Vento, I realized that it was the breath of fresh air I was looking for. I decided to switch: both my gut feeling and all the information I could find convinced me it was the right choice.

As I transition to using Vento as the main (and only) templating language, I am annotating and documenting what I learn here.

Introductory resources

I will not go through what other knowledgeable people explained already. Here are the very insightful resources I used to wrap my head around how Vento works, and how to switch to it from Liquid.

• Vento: My Favourite Template Language for Eleventy | Helen Chong, Web Developer
• From Nunjucks to Vento in Eleventy: a migration guide (kinda) | chriskirknielsen

Replacing Liquid filters

Unfortunately, all the language-specific information I could find is about switching from to Vento from Nunjucks. Nevertheless, I have always used Liquid, and I got used to its logic and syntax. I had to recreate some Liquid filters in the

strip_html

To recreate LiquidJS’ strip_html filter, I followed this code snippet from CSS-Tricks to make a filter out of a regex that strips away HTML tags.

eleventyConfig.addFilter('strip_html', (str) => {
	return str.replace(/(<([^>]+)>)/gi, '');
});

date_to_xmlschema

To recreate LiquidJS’ date_to_xmlschema, I took advantage of the Date.prototype.toISOString() JavaScript method. Therefore, I didn’t even need to create a custom filter.

{{ somedatevariable |> toISOString() }}