fix: broken images in posts, switch to eleventy-img html transform

config/11ty/shortcodes.js

@@ -1,76 +1,4 @@
-import path from 'node:path';
-import image from '@11ty/eleventy-img';
-import dimensions from 'image-size';
-// biome-ignore lint/suspicious/noShadowRestrictedNames: Eh escape sounds better.
-import escape from 'lodash.escape';
-
-const IMAGE_OPTIMIZATION =
-	process.env.IMAGE_OPTIMIZATION === '0' ||
-	process.env.IMAGE_OPTIMIZATION === 'false'
-		? false
-		: true;
-
-const stringifyAttributes = (attrs) =>
-	Object.entries(attrs)
-		.map(([attr, value]) => {
-			if (value === undefined || value === '') return '';
-			return `${attr}="${value}"`;
-		})
-		.join(' ');
-
-const insertImage = async function (source, alt) {
-	if (!source) throw new Error('Missing source for image shortcode');
-	if (!alt) throw new Error('Missing alt for image shortcode');
-
-	source = path.join('images', `${this.page.fileSlug}/${source}`);
-
-	const { width } = dimensions(source);
-
-	const data = await image(source, {
-		widths: IMAGE_OPTIMIZATION
-			? [640, 750, 828, 1080, 1200, 1920, 2048, 3840, width]
-					.filter((a) => a <= width)
-					.sort((a, b) => a - b)
-			: [width],
-		formats: IMAGE_OPTIMIZATION ? ['avif', 'webp', 'png'] : ['png'],
-		outputDir: 'dist/assets/images/',
-		urlPath: '/assets/images/',
-	});
-
-	const base = data['png'].at(-1);
-	const sizes = '(min-width: 80ch) 80ch, 100vw';
-
-	const sources = Object.values(data)
-		.map((formatEntries) => {
-			const { sourceType } = formatEntries[0];
-			const srcset = formatEntries.map((image) => image.srcset).join(', ');
-
-			return `<source ${stringifyAttributes({
-				type: sourceType,
-				srcset,
-				sizes,
-			})}>`;
-		})
-		.join('\n');
-
-	return `
-<picture>
-	${sources}
-	<img ${stringifyAttributes({
-		height: base.height,
-		width: base.width,
-		src: base.url,
-		alt: escape(alt),
-		loading: 'lazy',
-		decoding: 'async',
-		sizes,
-	})}>
-</picture>
-`;
-};
-
 export const shortcodes = (eleventyConfig) => {
-	eleventyConfig.addNunjucksAsyncShortcode('image', insertImage);
 	eleventyConfig.addShortcode('log', (...args) => {
 		console.log(...args);
 		return '';

eleventy.config.js

@@ -7,10 +7,10 @@ import pluginAutoCacheBuster from 'eleventy-auto-cache-buster';
 import pluginIcons from 'eleventy-plugin-icons';
 import pluginValidate from 'eleventy-plugin-validate';
 
-import { VentoPlugin } from 'eleventy-plugin-vento';
+import { VentoPlugin as pluginVento } from 'eleventy-plugin-vento';
+import { eleventyImageTransformPlugin as pluginImageTransform } from '@11ty/eleventy-img';
 
 import markdownLibrary from './config/markdown/core.js';
-
 import {
 	processCss,
 	processSass,
@@ -25,7 +25,6 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 
 import colors from 'picocolors';
 import site from './site.config.js';
-
 import eleventy from '11ty.ts';
 
 export default eleventy(function (eleventyConfig) {
@@ -80,7 +79,20 @@ export default eleventy(function (eleventyConfig) {
 			},
 		],
 	});
-	eleventyConfig.addPlugin(VentoPlugin);
+	eleventyConfig.addPlugin(pluginVento);
+	eleventyConfig.addPlugin(pluginImageTransform, {
+		widths: [640, 750, 828, 1080, 1200, 1920, 2048, 3840, 'auto'],
+		formats: ['avif', 'webp', 'png'],
+		outputDir: 'dist/assets/images/',
+		urlPath: '/assets/images/',
+		htmlOptions: {
+			imgAttributes: {
+				loading: 'lazy',
+				decoding: 'async',
+			},
+			pictureAttributes: {},
+		},
+	});
 
 	/* Passthrough Copy */
 	eleventyConfig.addPassthroughCopy({ 'public/': '.' });

package.json

@@ -15,7 +15,7 @@
 		"11ty.ts": "^0.0.5",
 		"@11ty/eleventy": "3.0.0",
 		"@11ty/eleventy-fetch": "^5.0.1",
-		"@11ty/eleventy-img": "^5.0.0",
+		"@11ty/eleventy-img": "^6.0.1",
 		"@aloskutov/eleventy-plugin-external-links": "^2.1.1",
 		"@catppuccin/palette": "^1.7.1",
 		"@ryanccn/eleventy-plugin-rss": "github:uncenter/ryanccn-eleventy-plugin-rss",
@@ -29,10 +29,8 @@
 		"eleventy-plugin-validate": "^0.1.3",
 		"eleventy-plugin-vento": "^4.0.1",
 		"html-minifier": "^4.0.0",
-		"image-size": "^1.2.0",
 		"lightningcss": "^1.28.2",
 		"linkedom": "^0.18.6",
-		"lodash.escape": "^4.0.1",
 		"lucide-static": "^0.469.0",
 		"luxon": "^3.4.4",
 		"markdown-it": "^14.1.0",