Upgrading to Eleventy 1.0.1

With Eleventy 3.0 on the horizon I decided to finally see what the upgrade process is like by taking my site from 0.12 to 1.0. Eleventy has a handy eleventy-upgrade-help plugin which made this relatively painless. I only ran into a few small issues which I’m noting here.¹

Image/Video Passthrough Copy #

I previously had image/video types in a templateFormats block, like so:

templateFormats: [
	"md",
	"njk",
	"html",
	"liquid",
	"jpg",
	"jpeg",
	"gif",
	"png",
	"mp4"
],

This caused the build to break. So I’ve moved those into a passthrough glob, as suggested in this Github issue:

eleventyConfig.addPassthroughCopy(
  path.join('{reading,posts,watching}/**/*.{jpg,jpeg,png,gif,mp4}')
);

Markdown Paired Shortcode #

I had previously used a paired shortcode to return inline Markdown, which I use for post titles/descriptions in front matter that need some styling on render, as in this post. The shortcode looked like this:

eleventyConfig.addPairedShortcode(
	"markdown",
	(data) => {
		if (data) {
			return markdownLibrary.renderInline(data);
		} else {
			return "";
		}
	}
);

and in my Nunjucks templates I would do something like:

<p>{% markdown %}{{ post.data.description }}{% endmarkdown %}</p>

When running a build Eleventy would throw an error—my guess is that the paired shortcode is more expensive, resource-wise, than a filter. So I’m doing this instead:

eleventyConfig.addFilter("markdownInline", function (data) {
	if (data) {
		return markdownLibrary.renderInline(data);
	}
	else {
		return "";
	}
});

and in my template I have:

<p>{{ post.data.description | markdownInline | safe }}</p>

Images Responsiver #

I use Nicolas Hoizey’s Images Responsiver plugin for post images and galleries.². I have some hook overrides and had to modify how I retrieved CSS class names from an element’s classList.

For some reason this was returning undefined:

link.setAttribute("data-size", figure.classList[0]);

so I switched to this:

link.setAttribute("data-size", ...figure.classList);

Not sure why, either. Printing out the element said the classList was a DOMTokenList but it wasn’t behaving like one.

V2/V3? #

I’m on the fence on whether to do an in-place upgrade to V2 or V3 (when it’s released)—I’m working off a fork of Eleventy Base Blog and I’ve modified it so much that it feels like a fresh start might be worth it.

---

1. Mostly for my future self’s sake. ↩︎

2. I’ve written about my specific configuration here and here ↩︎