unprompted/.eleventy.js

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
      .getFilteredByGlob("columns/**/*.md")
      .sort((a, b) => b.date - a.date);
  });

  eleventyConfig.addFilter("year", function (date) {
    return new Date(date).getFullYear();
  });

  eleventyConfig.addFilter("isoDate", function (date) {
    return new Date(date).toISOString().split("T")[0];
  });

  eleventyConfig.addFilter("readableDate", function (date) {
    return new Date(date).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  });

  return {
    dir: {
      input: ".",
      includes: "_includes",
      output: "_site",
    },
    markdownTemplateEngine: "njk",
    htmlTemplateEngine: "njk",
  };
};