add image support: eleventy-img plugin, hero images, responsive picture elements

.eleventy.js

@@ -1,5 +1,60 @@
+const Image = require("@11ty/eleventy-img");
+const path = require("path");
+
+function imageShortcode(src, alt, sizes = "100vw") {
+  const inputPath = path.join("img", src);
+  const options = {
+    widths: [480, 800, 1200],
+    formats: ["avif", "webp", "jpeg"],
+    outputDir: "_site/img",
+    urlPath: "/img/",
+    filenameFormat: function (id, src, width, format) {
+      const name = path.basename(src, path.extname(src));
+      return `${name}-${width}.${format}`;
+    },
+  };
+
+  Image(inputPath, options);
+  const metadata = Image.statsSync(inputPath, options);
+
+  return Image.generateHTML(metadata, {
+    alt,
+    sizes,
+    loading: "lazy",
+    decoding: "async",
+  });
+}
+
+function heroImageShortcode(src, alt) {
+  const inputPath = path.join("img", src);
+  const options = {
+    widths: [800, 1200, 1600],
+    formats: ["avif", "webp", "jpeg"],
+    outputDir: "_site/img",
+    urlPath: "/img/",
+    filenameFormat: function (id, src, width, format) {
+      const name = path.basename(src, path.extname(src));
+      return `${name}-${width}.${format}`;
+    },
+  };
+
+  Image(inputPath, options);
+  const metadata = Image.statsSync(inputPath, options);
+
+  return Image.generateHTML(metadata, {
+    alt,
+    sizes: "(max-width: 960px) 100vw, 960px",
+    loading: "eager",
+    decoding: "async",
+  });
+}
+
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addPassthroughCopy("img");
+
+  eleventyConfig.addShortcode("image", imageShortcode);
+  eleventyConfig.addShortcode("heroImage", heroImageShortcode);
 
   eleventyConfig.addCollection("columns", function (collectionApi) {
     return collectionApi