V3.1.0

eleventy.config.filters.js

@@ -4,7 +4,7 @@ module.exports = (eleventyConfig) => {
 	eleventyConfig.addFilter("localizedDate", (dateObj, lang, format) => {
 		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
 		return DateTime.fromJSDate(dateObj, { locale: lang || "en" }).toFormat(
-			format || "LLLL dd yyyy"
+			format || "LLLL dd yyyy",
 		);
 	});
 
@@ -17,7 +17,12 @@ module.exports = (eleventyConfig) => {
 		return values.slice().sort((a, b) => a.data.title.localeCompare(b.data.title));
 	});
 
-	eleventyConfig.addFilter("sortByMenuOrder", (values) => {
-		return values.slice().sort((a, b) => a.data.order - b.data.order);
+	eleventyConfig.addFilter("sortByOrder", (values) => {
+		return values.slice().sort((a, b) => {
+			if (a.data.order && b.data.order) {
+				return a.data.order - b.data.order;
+			}
+			return 0;
+		});
 	});
 };

eleventy.config.images.js

@@ -1,27 +1,71 @@
 const path = require("path");
 const eleventyImage = require("@11ty/eleventy-img");
+const markdownIt = require("markdown-it");
+const markdownItEleventyImg = require("markdown-it-eleventy-img");
 
 module.exports = (eleventyConfig) => {
+	const defaultImageWidths = [1210, 1044, 800, 400];
+	const defaultImageFormats = ["webp", "auto"];
+	const defaultImageSizes = "100vw";
+
 	// Eleventy Image shortcode
 	// https://www.11ty.dev/docs/plugins/image/
 	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
 		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
 		// Warning: Avif can be resource-intensive so take care!
-		let formats = ["webp", "auto"];
 		let metadata = await eleventyImage(src, {
-			widths: widths || [1210, 1044, 800, 400],
-			formats,
+			widths: widths || defaultImageWidths,
+			formats: defaultImageFormats,
 			urlPath: "/assets/img/",
 			outputDir: path.join(eleventyConfig.dir.output, "/assets/img/"),
+			filenameFormat: function (id, src, width, format, options) {
+				// id: hash of the original image
+				// src: original image path
+				// width: current width in px
+				// format: current file format
+				// options: set of options passed to the Image call
+				const filename = path.basename(src, path.extname(src));
+				return `${filename}_${width}.${format}`;
+			},
 		});
 
 		// TODO loading=eager and fetchpriority=high
 		let imageAttributes = {
 			alt,
-			sizes: sizes || "100vw",
+			sizes: sizes || defaultImageSizes,
 			loading: "lazy",
 			decoding: "async",
 		};
 		return eleventyImage.generateHTML(metadata, imageAttributes);
 	});
+
+	eleventyConfig.setLibrary(
+		"md",
+		markdownIt({ html: true, breaks: true }).use(markdownItEleventyImg, {
+			imgOptions: {
+				widths: defaultImageWidths,
+				formats: defaultImageFormats,
+				urlPath: "/assets/img/",
+				outputDir: path.join(eleventyConfig.dir.output, "/assets/img/"),
+				sharpOptions: {
+					animated: true,
+					limitInputPixels: false,
+				},
+				filenameFormat: function (id, src, width, format, options) {
+					// id: hash of the original image
+					// src: original image path
+					// width: current width in px
+					// format: current file format
+					// options: set of options passed to the Image call
+					const filename = path.basename(src, path.extname(src));
+					return `${filename}_${width}.${format}`;
+				},
+			},
+			globalAttributes: {
+				class: "markdown-img",
+				decoding: "async",
+				sizes: defaultImageSizes,
+			},
+		}),
+	);
 };

eleventy.config.js

@@ -50,7 +50,7 @@ module.exports = function (eleventyConfig) {
 
 		dir: {
 			input: "src/content", // default: "."
-			includes: "../assets/layouts", // default: "_includes"
+			includes: "../_templates", // default: "_includes"
 			data: "../_data", // default: "_data"
 			output: "public", // default: "_site
 		},

eleventy.config.markdown.js

@@ -1,31 +1,7 @@
-const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
-const markdownItEleventyImg = require("markdown-it-eleventy-img");
 const pluginTOC = require("eleventy-plugin-toc");
-const path = require("path");
 
 module.exports = function (eleventyConfig) {
-	eleventyConfig.setLibrary(
-		"md",
-		markdownIt({ html: true })
-			.use(markdownItAnchor)
-			.use(markdownItEleventyImg, {
-				imgOptions: {
-					widths: [1210, 1044, 800, 400],
-					urlPath: "/assets/img/",
-					outputDir: path.join(eleventyConfig.dir.output, "/assets/img/"),
-					formats: ["webp", "jpeg"],
-				},
-				globalAttributes: {
-					class: "markdown-img",
-					decoding: "async",
-					// If you use multiple widths,
-					// don't forget to add a `sizes` attribute.
-					sizes: "100vw",
-				},
-			})
-	);
-
 	eleventyConfig.addPlugin(pluginTOC, {
 		ul: true,
 		wrapperClass: "glossary-toc",