siblinghood/eleventy.config.js

import { HtmlBasePlugin } from "@11ty/eleventy";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import eleventyNavigationPlugin from "@11ty/eleventy-navigation";

import { attrs } from "@mdit/plugin-attrs";
import { markdownitLinkAttributes } from 'markdown-it-link-attributes';
import markdownitIdAttributes from "markdown-it-anchor";

import path from "node:path";

import pluginFilters from "./_config/filters.js";

export default async function (eleventyConfig) {
	/* Markdown HTML attribute parsing */
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(attrs));

	/* Markdown apply target="_blank" to all external links */
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitLinkAttributes, {
    matcher(href) {
      return href.match(/^https?:\/\//);
    },
    attrs: {
      target: "_blank",
      rel: "external",
    },
  }));

	/* Markdown apply ID attributes to headers */
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(markdownitIdAttributes, {
		level: [2, 3, 4],
		tabIndex: false,
	}));

	/* Bundles */
	/* CSS */
	eleventyConfig.addBundle("css", {
		toFileDirectory: "dist",
		bundleHtmlContentFromSelector: "style",
	});

	/* Javascript */
	eleventyConfig.addBundle("js", {
		toFileDirectory: "dist",
		bundleHtmlContentFromSelector: "script",
	});

	/* Passthroughs */
	eleventyConfig.addPassthroughCopy("./favicon.ico");

	/* HTML base */
	eleventyConfig.addPlugin(HtmlBasePlugin);

	/* Images */
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		// output image formats
		formats: ["auto"],

		// output image widths
		widths: ["auto"],

		// optional, attributes assigned on <img> nodes override these values
		htmlOptions: {
			imgAttributes: {
				loading: "lazy",
				decoding: "async",
			},
		},
		filenameFormat: function (hash, src, width, format, options) {
			var dirname = path.dirname(src);
			dirname = dirname.split("/img/");
			if (dirname.length > 1)	return `${dirname[1]}-${path.basename(src)}`;
			return path.basename(src);
		},
	});

	eleventyConfig.addPlugin(eleventyNavigationPlugin);

	/* All filters from _config/filters.js */
	eleventyConfig.addPlugin(pluginFilters);

	/* Shortcodes */
	eleventyConfig.addShortcode("currentBuildDate", () => {
		return new Date().toISOString();
	});

	/* Watch when serving */
	eleventyConfig.addWatchTarget("css");
	eleventyConfig.addWatchTarget("js");
}

export const config = {
	dir: {
		input: "src",
		includes: "../_includes",
		layouts: "../_includes/layouts",
		data: "../_data",
	},
	markdownTemplateEngine: "njk",
	htmlTemplateEngine: "njk",
	templateFormats: ["html", "md", "njk"],
};