From 7acab7ed8bf1109c9be984c6f91f4f34d1440515 Mon Sep 17 00:00:00 2001
From: Keith Irwin <git@ki9.us>
Date: Tue, 17 Oct 2023 23:35:54 -0600
Subject: [PATCH] feat: :zap: Responsive images

---
 eleventy.config.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/eleventy.config.js b/eleventy.config.js
index 739ac5b..873506f 100644
--- a/eleventy.config.js
+++ b/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)
   })