const Image = require("@11ty/eleventy-img");
const imagePath = "./collection";
const imageOutputPath = "./_site/img/";
const imageFormats = ["auto"];
const imageSizes = [650];

module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode(
    "image",
    async function (src, alt, sizes, classes = "") {
      let metadata = await Image(`${imagePath}/${src}`, {
        widths: imageSizes,
        formats: imageFormats,
        outputDir: imageOutputPath,
      });

      let imageAttributes = {
        alt,
        sizes,
        loading: "lazy",
        decoding: "async",
        class: classes,
      };

      // You bet we throw an error on a missing alt (alt="" works okay)
      return Image.generateHTML(metadata, imageAttributes);
    }
  );
};