Eleventy Shortcodes

I'm still amazed at the speed at which you can put together something using 11ty. Its rather un-opinionated as to the level of abstractions you want which makes it so easy to build with because I find myself reaching for patterns and code which I've been practicing from the beginning of my career (maybe even a little before that).

Natively nesting CSS is a god send. Its easy to structure and for once, I am getting to place all my styles in one spot. No using the cascade instead of fighting against it and scoping each component styles. I will need to inline my critical path css and minify the rest at some point, but thats an exploration for another day.

Thanks to Stephanie Eckles post, I was able to create a custom shortcode needed for my footer.

You can register one in your .eleventy.js file as follows:

eleventyConfig.addShortcode(
    "identifier",
    () => `what ever computed value you would like to return`,
);

then use it like:

{% identifier %}

For me, this looked like:

eleventyConfig.addShortcode("year",
    () => `${new Date().getFullYear()}`
);