Hello 11ty 3

• 26 April 2025
• update,
• programming,
• 11ty

Hello Eleventy 3!

I was putting off doing this updating since October when eleventy and the blog template updated. Good thing because quite a bit changed. The RSS feed is different, some css changed, and images are loaded completely differently now. Images in posts are no longer using short codes but are now hmtl <img> tags. This was the most annoying part of the upgrade because it completely changed how general images are loaded too.

To do the update, I copied over the new blog template files and let them overwrite my files. I then checked for differences in git and added back my css changes and eleventy.config.js changes. Having most of my settings in other configs likes eleventy.config.characters.js really helped with this update. Git says 71 files changed in all.

Regex is my Friend

Regex is my friend. Before the short codes were like this.

Before:

{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon", "", "", "image-sized-sm image-center" %}

Replace this by hand for every blog post is not something I wanted to do by hand, so with this little regex here, I was able to mass replace all of it.

Regex:

\{% image "([\w\d\s\/\\.\-]*)", "([\w\d\s\/\\.\-]*)", "([\w\d\s\/\\.\-]*)", "([\w\d\s\/\\.\-]*)", "([\w\d\s\/\\.\-]*)" %\}

Replacement:

<img src="$1"  alt="$2" class="$5" />

After:

<img src="./possum.png" alt="A possum parent and two possum kids hanging from the iconic red balloon" class="image-sized-sm image-center">

Regex is so powerful, I should learn more of it.

Image issues

Images are a little more strict now. Any instance of gets process unless I add eleventy:ignore to it like so.

<img eleventy:ignore src="/img/posts/top2018/delta.png" alt="deltarune" class="image-center" />

I had to reference the image plugin docs regularly to figure out how to keep my images in the public/img/ folder.

CommonJS to ESM

Scripts have been updated to export as modules. It was an easy enough change.

Before:

const charFoxis = require("./characters/foxis.js");

module.exports = {
	"characters": [
        charFoxis,
    ]
}

After:

import charFoxis from "./characters/foxis.js";

export default {
	"characters": [
        charFoxis,
    ]
}

• ← Previous
  Top Games 2024