feat: ⚡ Responsive images

eleventy.config.js

@@ -2,12 +2,34 @@ const { DateTime } = require('luxon')
 const fs = require('fs')
 const markdownIt = require('markdown-it')
 const markdownItAnchor = require('markdown-it-anchor')
+const pluginImage = require('@11ty/eleventy-img')
+// Widths in pixels of responsive images to be generated
+const IMAGE_SIZES = [300, 600, 900, 1200]
 
 module.exports = function(eleventyConfig) {
 
   // https://www.11ty.dev/docs/data-deep-merge/
   eleventyConfig.setDataDeepMerge(true)
 
+  // https://www.11ty.dev/docs/plugins/image/#make-your-own-markup
+  eleventyConfig.addShortcode("image", async (src, alt) => {
+    const metadata = await pluginImage(`./_src${src}`, {
+      widths: [...IMAGE_SIZES, 'auto'],
+      formats: ['auto', 'webp', 'avif'],
+      // https://www.11ty.dev/docs/plugins/image/#custom-filenames
+      filenameFormat: (id, src, width, format) =>
+        `${path.basename(src,path.extname(src))}-${width}w.${format}`,
+      // https://alexpeterhall.com/blog/2021/04/05/responsive-images-eleventy/#eleventy-configuration
+      urlPath: path.dirname(src),
+      outputDir: `_site/${path.dirname(src)}`,
+    })
+		const lowsrc = metadata.webp[0]
+		const highsrc = metadata.webp[metadata.webp.length - 1]
+		return `<a href="${src}"><picture>\n${Object.values(metadata).map(imageFormat =>
+				`\t<source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${IMAGE_SIZES.reverse().reduce((str,size) => 
+					`(max-width:${size}px) ${size}px, ${str}`,'100vw')}">`).join("\n")}\n\t<img src="${lowsrc.url}" width="${highsrc.width}" height="${highsrc.height}" alt="${alt}" decoding="async">\n</picture></a>`
+	})
+
   eleventyConfig.addFilter('readableDate', dateObj => {
     return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('dd LLL yyyy')
   })
@@ -22,7 +44,6 @@ module.exports = function(eleventyConfig) {
     if( n < 0 ) {
       return array.slice(n)
     }
-
     return array.slice(0, n)
   })