✨ image support (#92)

Add 11ty image processing capabilities to the site.

Closes #85

* add 11ty image
* add outdent package
* add plugin code to 11ty config

Author: benkutil

.eleventy.js

@@ -1,21 +1,101 @@
 require('dotenv').config();
 const Webmentions = require("eleventy-plugin-webmentions");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
+const Image = require("@11ty/eleventy-img");
 const htmlmin = require("html-minifier");
+const outdent = require("outdent");
 
-module.exports = function(eleventyConfig) {
+/** Maps a config of attribute-value pairs to an HTML string
+ * representing those same attribute-value pairs.
+ */
+const stringifyAttributes = (attributeMap) => {
+    return Object.entries(attributeMap)
+        .map(([attribute, value]) => {
+            if (typeof value === 'undefined') return '';
+            return `${attribute}="${value}"`;
+        })
+        .join(' ');
+};
+
+// shortcode for using 11ty's Image plugin
+// from https://www.aleksandrhovhannisyan.com/blog/eleventy-image-plugin/
+const imageShortcode = async (
+    src,
+    alt,
+    className = undefined,
+    widths = [400, 800, 1280],
+    formats = ['webp', 'jpeg'],
+    sizes = '100vw'
+) => {
+    const imageMetadata = await Image(src, {
+        widths: [...widths, null],
+        formats: [...formats, null],
+        outputDir: '_site/media/images',
+        urlPath: '/media/images',
+    });
+    const sourceHtmlString = Object.values(imageMetadata)
+        // Map each format to the source HTML markup
+        .map((images) => {
+            // The first entry is representative of all the others
+            // since they each have the same shape
+            const { sourceType } = images[0];
+
+            // Use our util from earlier to make our lives easier
+            const sourceAttributes = stringifyAttributes({
+                type: sourceType,
+                // srcset needs to be a comma-separated attribute
+                srcset: images.map((image) => image.srcset).join(', '),
+                sizes,
+            });
+
+            // Return one <source> per format
+            return `<source ${sourceAttributes}>`;
+        })
+        .join('\n');
+
+    const getLargestImage = (format) => {
+        const images = imageMetadata[format];
+        return images[images.length - 1];
+    }
+
+    const largestUnoptimizedImg = getLargestImage(formats[0]);
+    const imgAttributes = stringifyAttributes({
+        src: largestUnoptimizedImg.url,
+        width: largestUnoptimizedImg.width,
+        height: largestUnoptimizedImg.height,
+        alt,
+        loading: 'lazy',
+        decoding: 'async',
+    });
+    const imgHtmlString = `<img ${imgAttributes}>`;
+
+    const pictureAttributes = stringifyAttributes({
+        class: className,
+    });
+    const picture = `<picture ${pictureAttributes}>
+    ${sourceHtmlString}
+    ${imgHtmlString}
+  </picture>`;
+
+    return outdent`${picture}`;
+};
+
+module.exports = function (eleventyConfig) {
     // 11ty plugins
     eleventyConfig.addPlugin(pluginRss);
     eleventyConfig.addPlugin(Webmentions, {
         domain: "benkutil.com",
         token: process.env.WEBMENTIONS_TOKEN
-      });
-    
+    });
+
+    // 11ty shortcodes
+    eleventyConfig.addShortcode('image', imageShortcode);
+
     // run these configs in production only
-    if (process.env.ELEVENTY_ENV === 'production' ) {
-        eleventyConfig.addTransform("htmlmin",  function(content,  outputPath) {
+    if (process.env.ELEVENTY_ENV === 'production') {
+        eleventyConfig.addTransform("htmlmin", function (content, outputPath) {
             // find html files
-            if(outputPath && outputPath.endsWith(".html")) {
+            if (outputPath && outputPath.endsWith(".html")) {
                 // configure html-minify
                 let minified = htmlmin.minify(content, {
                     useShortDoctype: true,
@@ -25,10 +105,10 @@ module.exports = function(eleventyConfig) {
                 });
                 return minified;
             }
-            
+
             return content;
         });
-    
+
     }
 
     // Directory changes

package.json

@@ -21,9 +21,11 @@
   "homepage": "https://github.com/benkutil/benkutil.github.io#readme",
   "devDependencies": {
     "@11ty/eleventy": "^2.0.0-beta.3",
+    "@11ty/eleventy-img": "^3.0.0",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "eleventy-plugin-webmentions": "^2.0.0",
-    "html-minifier": "^4.0.0"
+    "html-minifier": "^4.0.0",
+    "outdent": "^0.8.0"
   },
   "dependencies": {
     "@11ty/eleventy-upgrade-help": "^2.0.5",