const Image = require("@11ty/eleventy-img");
const pluginIcons = require('eleventy-plugin-icons');

module.exports = eleventyConfig => {
    eleventyConfig.setUseGitIgnore(false);

    eleventyConfig.addWatchTarget('./src/assets');

    eleventyConfig.addFilter("padNumber", (number, targetSize = 3) => {
      return number.toString().padStart(targetSize, '0')
    })
    eleventyConfig.addFilter("capitalize", (string) => {
      return string.charAt(0).toUpperCase() + string.slice(1)
    })

    eleventyConfig.addFilter("find", (collection = [], id = "") => {
      return collection.find(item => item.id === id);
    });

    eleventyConfig.addShortcode("image", async function (src, alt, css="") {
      let metadata = await Image(src, {
        formats: ["png"],
        outputDir: "src/assets/img",
        filenameFormat: function (hash, src, width, format, options) {
          return `${hash}.${format}`;
        }
      });
  
      let imageAttributes = {
        class: css,
        alt,
        loading: "lazy",
        decoding: "async",
      };
  
      return Image.generateHTML(metadata, imageAttributes);
    });
 
    eleventyConfig.addPassthroughCopy({ "src/assets/favicon": "/" });
    eleventyConfig.addPassthroughCopy({ "src/assets/img": "/img" });

    eleventyConfig.addPassthroughCopy({ "src/assets/bulbasaur.png": "/bulbasaur.png" });
    eleventyConfig.addPassthroughCopy({ "src/assets/ivysaur.png": "/ivysaur.png" });
    eleventyConfig.addPassthroughCopy({ "src/assets/venusaur.png": "/venusaur.png" });

    eleventyConfig.addPlugin(pluginIcons, {
      sources: [{ name: 'remix', path: 'node_modules/remixicon/icons', default: true }],
    });

    return {
      markdownTemplateEngine: 'liquid',
      dataTemplateEngine: 'liquid',
      htmlTemplateEngine: 'liquid',
      dir: {
        input: 'src',
        output: 'dist',
        includes: '_includes',
        layouts: '_layouts'
      }
    };
  };