eleventy.config.js

import fs from "node:fs";
import { fileURLToPath } from "node:url";
import path from "node:path";
import { DateTime } from "luxon";
import memoize from "memoize";
import numeral from "numeral";
import markdownIt from "markdown-it";
import markdownItToc from "markdown-it-table-of-contents";
import { encode } from "html-entities";
import { YoutubeTranscript } from "youtube-transcript";
import { AssetCache } from "@11ty/eleventy-fetch";

import { RenderPlugin, IdAttributePlugin } from "@11ty/eleventy";
import { feedPlugin } from "@11ty/eleventy-plugin-rss";
import pluginWebc from "@11ty/eleventy-plugin-webc";
import fontAwesomePlugin from "@11ty/font-awesome";

import siteData from "./_data/site.json" with { type: "json" };
import pluginImage, { opengraphImageHtml, screenshotImageHtmlFullUrl, getFilteredImageColors } from "./_11ty/imagePlugin.js";

import pluginSyntaxHighlight from "./_11ty/syntaxHighlightPlugin.js";
import pluginSass from "./_11ty/sassPlugin.js";
import pluginImageAvatar, { getIndieAvatarUrl } from "./_11ty/imageAvatarPlugin.js";
import pluginWebmentions from "./_11ty/webmentionsPlugin.js";
import pluginAnalytics from "./_11ty/analyticsPlugin.js";
import { leftpad, getEndDateFromWeekNumber, getWeekOfYear } from "./_11ty/util.js";

const JS_ENABLED = true;

function resolveModule(name) {
	return fileURLToPath(import.meta.resolve(name));
}

function getPosts(collectionApi) {
	return collectionApi.getFilteredByGlob("./_posts/**/*.{md,html}").reverse().filter(function(item) {
		return !!item.data.permalink;
	});
}

function hasTag(post, tag) {
	return post?.data?.tags?.includes(tag);
}

function hasCategory(post, category) {
	return post?.data?.categories?.includes(category);
}

function isWriting(item) {
	if(!item.inputPath.match(/\/_posts\//)) {
		return false;
	}

	if(hasTag(item, "writing")) {
		return true;
	}

	if(hasTag(item, "speaking") || hasCategory(item, "presentations")) {
		return false;
	}

	return true;
}

function isSpeaking(item) {
	return "categories" in item.data &&
		(item.data.categories || []).indexOf("presentations") > -1 || hasTag(item, "speaking");
}

export default async function(eleventyConfig) {
	const slugify = eleventyConfig.getFilter("slugify");
	eleventyConfig.addGlobalData("JS_ENABLED", () => JS_ENABLED);
	eleventyConfig.addGlobalData("currentDate", () => new Date());

	eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
		if (data.draft) {
			if(data.draft === "ignore") {
				return false;
			}
      data.title = `${data.title} (Draft)`;
    }

		// Drafts are *ignored* during a full build (included when --serve or --watch)
		// if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") {
		if(data.draft) {
			return false;
		}
	});

	// More in .eleventyignore
	if(!process.env.PRODUCTION_BUILD) {
		eleventyConfig.ignores.add("./follow/*");
		eleventyConfig.ignores.add("./web/opengraph-images.liquid");
	}

	eleventyConfig.setUseGitIgnore(false);
	eleventyConfig.setDataDeepMerge(true);
	eleventyConfig.setQuietMode(true);

	eleventyConfig.setLiquidOptions({
		jsTruthy: true
	});

	eleventyConfig.setServerOptions({
		domDiff: false,
		// showVersion: true,
	});

	/* PLUGINS */
	eleventyConfig.addPlugin(pluginSass);
	eleventyConfig.addPlugin(pluginSyntaxHighlight);
	eleventyConfig.addPlugin(pluginImage);
	eleventyConfig.addPlugin(pluginImageAvatar);
	eleventyConfig.addPlugin(IdAttributePlugin);

	eleventyConfig.addPlugin(feedPlugin, {
		outputPath: "/web/feed/atom.xml",
		collection: {
			name: "feedPosts",
			limit: 10,
		},
		metadata: {
			language: "en",
			title: siteData.name,
			subtitle: siteData.description,
			base: siteData.url,
			author: {
				name: siteData.name,
			}
		}
	});
	eleventyConfig.addPlugin(pluginWebc, {
		components: [
			"_components/**/*.webc",
			// "npm:@11ty/eleventy-plugin-syntaxhighlight/*.webc",
		],
	});

	eleventyConfig.addPlugin(pluginWebmentions);

	// TODO the `{% renderFile "./static/initial.scss" %}` call to scss is *expensive* and isn’t cached (but only on a full build)
	eleventyConfig.addPlugin(RenderPlugin, {
		accessGlobalData: true,
	});
	eleventyConfig.addPlugin(pluginAnalytics);
	eleventyConfig.addPlugin(fontAwesomePlugin, {
		transform: false,
		shortcode: "icon",
		defaultAttributes: {
			class: "z-icon",
			width: "20",
			height: "20",
		}
	});

	/* COPY */
	eleventyConfig.setServerPassthroughCopyBehavior("passthrough");

	eleventyConfig
		.addPassthroughCopy({
			// WebC assets
			"_components/*.{css,js}": `static/`,

			// CSS/JS
			"static/fonts": "static/fonts",
			"static/js": "static/js",
			"static/*.{css,js}": "static/",

			// External modules
			"node_modules/speedlify-score/speedlify-score.{css,js}": `static/`,
			"node_modules/lite-youtube-embed/src/lite-yt-embed.{css,js}": `static/`,
			"node_modules/infinity-burger/infinity-burger.{css,js}": `static/`,
			"node_modules/artificial-chart/artificial-chart.{css,js}": `static/`,
			[resolveModule("@zachleat/details-utils")]: `static/details-utils.js`,
			[resolveModule("@zachleat/table-saw")]: `static/table-saw.js`,
			[resolveModule("@zachleat/browser-window")]: `static/browser-window.js`,
			[resolveModule("@zachleat/squirminal")]: `static/squirminal.js`,
			[resolveModule("@zachleat/pagefind-search")]: `static/pagefind-search.js`,
			[resolveModule("@zachleat/snow-fall")]: `static/snow-fall.js`,
			[resolveModule("@zachleat/carouscroll")]: `static/carouscroll.js`,
			[resolveModule("@zachleat/heading-anchors")]: `static/heading-anchors.js`,
			[resolveModule("@zachleat/line-numbers")]: `static/line-numbers.js`,
		})
		.addPassthroughCopy("humans.txt")
		.addPassthroughCopy("resume/index.css")
		.addPassthroughCopy("img/")
		.addPassthroughCopy("web/img")
		.addPassthroughCopy("web/wp-content")
		.addPassthroughCopy("og/*.{jpeg,png}")
		.addPassthroughCopy("og/sources/")
		// For images that should _not_ be optimized via Eleventy Image (see 2021-01-30-fluid-images post)
		.addPassthroughCopy("_posts/**/_ignored_*.*", {
			mode: "html-relative"
		})

	// Production only passthrough copy
	if(process.env.PRODUCTION_BUILD) {
		eleventyConfig
			.addPassthroughCopy("presentations/")
			.addPassthroughCopy("keybase.txt")
			.addPassthroughCopy("_redirects")
			.addPassthroughCopy("demos/")
			.addPassthroughCopy("resume/resume.pdf")
			.addPassthroughCopy("archive/")
			.addPassthroughCopy("web-fonts/foitfout/")
			.addPassthroughCopy("test/")
			.addPassthroughCopy("alarmd/");
	}

	/* LAYOUTS */
	eleventyConfig.addLayoutAlias("default", "layouts/default.liquid");
	eleventyConfig.addLayoutAlias("post", "layouts/post.liquid");

	/* FILTERS */
	eleventyConfig.addFilter("tweetbackUrl", async (url) => {
		const { transform } = await import("@tweetback/canonical");
		return transform(url);
	});

	eleventyConfig.addFilter("archiveUrl", (url, targetYear) => {
		if(!targetYear) {
			targetYear = (new Date).getFullYear();
		}
		return `https://web.archive.org/web/${targetYear || 2023}0000000000*/${url}`;
	});

	eleventyConfig.addFilter("leftpad", leftpad);

	eleventyConfig.addFilter("truncate", (str, len = 280) => { // tweet sized default
		let suffix = str.length > len ? `… <span class="tag-inline">Truncated</span>` : "";
		return str.substr(0, len) + suffix;
	});

	eleventyConfig.addLiquidFilter("numberString", function(num) {
		let strs = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
		if( num < strs.length ) {
			return strs[num];
		}
		return num;
	});

	// Count total number of items that have speaking metadata set
	eleventyConfig.addLiquidFilter("getSpeakingCount", function(allCollection, propName, propValueMatch) {
		let count = 0;
		for(let item of allCollection) {
			if(item.data.metadata && item.data.metadata.speaking && item.data.metadata.speaking[propName] && (!propValueMatch || item.data.metadata.speaking[propName] === propValueMatch)) {
				count++;
			}
		}
		return count;
	});

	// Count unique number of items for a speaking metadata property
	eleventyConfig.addLiquidFilter("getSpeakingUniqueCount", function(allCollection, propName) {
		let count = new Set();
		for(let item of allCollection) {
			if(item.data.metadata && item.data.metadata.speaking && item.data.metadata.speaking[propName]) {
				count.add(item.data.metadata.speaking[propName]);
			}
		}
		return count.size;
	});

	eleventyConfig.addLiquidFilter("renderNumber", function renderNumber(num, format = "0,0") {
		return numeral(parseInt(num, 10)).format(format);
	});

	eleventyConfig.addLiquidFilter("round", function(num, digits = 2) {
		return parseFloat(num).toFixed(digits);
	});

	eleventyConfig.addLiquidFilter("medialengthCleanup", str => {
		let split = str.split(" ");
		return `${split[0]}<span aria-hidden="true">m</span><span class="sr-only"> minutes</span>`;
	});

	eleventyConfig.addLiquidFilter("encodeUriComponent", str => {
		return encodeURIComponent(str);
	});

	eleventyConfig.addLiquidFilter("htmlEntities", memoize(str => {
		return encode(str);
	}));

	eleventyConfig.addLiquidFilter("absoluteUrl", (url, base) => {
		if( !base ) {
			base = siteData.url;
		}
		try {
			return (new URL(url, base)).toString();
			} catch(e) {
			console.log(`Trying to convert ${url} to be an absolute url with base ${base} and failed.`);
			return url;
		}
	});

	eleventyConfig.addFilter("timePosted", (startDate, endDate = Date.now()) => {
		if(typeof startDate === "string") {
			startDate = Date.parse(startDate);
		}
		if(typeof endDate === "string") {
			endDate = Date.parse(endDate);
		}
		let numDays = ((endDate - startDate) / (1000 * 60 * 60 * 24));
		let prefix = "";
		if(numDays < 0) {
			prefix = "in ";
			numDays = Math.abs(numDays);
		}

		let daysPosted = Math.round( parseFloat( numDays ) );
		let yearsPosted = parseFloat( (numDays / 365).toFixed(1) );

		if( daysPosted < 365 ) {
			return prefix + daysPosted + " day" + (daysPosted !== 1 ? "s" : "");
		} else {
			return prefix + yearsPosted + " year" + (yearsPosted !== 1 ? "s" : "");
		}
	});

	eleventyConfig.addFilter("readableDate", (dateObj, formatOverride) => {
		return DateTime.fromJSDate(dateObj).toFormat(formatOverride || "LLLL dd, yyyy");
	});

		eleventyConfig.addFilter("dateToISO", (dateObj) => {
		return dateObj.toISOString()
	});

	eleventyConfig.addLiquidFilter("readableDateFromISO", (dateStr, formatStr = "dd LLL yyyy 'at' hh:mma") => {
		return DateTime.fromISO(dateStr).toFormat(formatStr);
	});

	eleventyConfig.addLiquidFilter("getPostCountForYear", (posts, year) => {
		return posts.filter(function(post) {
			return post.data.page.date.getFullYear() === parseInt(year, 10);
		}).length;
	});

	//<img src="https://v1.sparkline.11ty.dev/400/100/1,4,10,3,2,40,5,6,20,40,5,1,10,100,5,90/red/" width="400" height="100">
	eleventyConfig.addLiquidFilter("getYearlyPostCount", (posts, startYear = 2007) => {
		let counts = {};
		for(let year = startYear; year <= (new Date()).getFullYear(); year++) {
			counts[year] = 0;
		}
		posts.forEach(function(post) {
			counts[post.data.page.date.getFullYear()]++;
		});
		return Object.values(counts).join(",");
	});

	eleventyConfig.addLiquidFilter("getWeeklyPostCountForYear", (posts, year) => {
		let counts = {};
		for(let week = 0; week < 52; week++) {
			if(getEndDateFromWeekNumber(year, week).getTime() > Date.now()) {
				continue;
			}
			counts[week] = 0;
		}
		posts.forEach(function(post) {
			let d = post.data.page.date;
			if(d.getFullYear() !== parseInt(year, 10)) {
				return;
			}
			let weekNo = getWeekOfYear(d);
			if(weekNo in counts) {
				counts[weekNo]++;
			}
		});

		return Object.values(counts).join(",");
	});

	eleventyConfig.addLiquidFilter("getMonthlyPostCount", (posts, startYear = 2007) => {
		let counts = {};
		for(let year = startYear; year <= (new Date()).getFullYear(); year++) {
			for(let month = 0; month < 12; month++) {
				if((new Date(year, month, 1)).getTime() > Date.now()) {
					continue;
				}
				counts[`${year}-${month}`] = 0;
			}
		}
		posts.forEach(function(post) {
			let d = post.data.page.date;
			counts[`${d.getFullYear()}-${d.getMonth()}`]++;
		});
		return Object.values(counts).join(",");
	});

	eleventyConfig.addLiquidFilter("hostnameFromUrl", (url) => {
		let urlObject = new URL(url);
		return urlObject.hostname;
	});

	eleventyConfig.addLiquidFilter("emoji", function(content) {
		return `<span aria-hidden="true" class="emoji">${content}</span>`;
	});

	// Get the first `n` elements of a collection.
	eleventyConfig.addFilter("head", (array, n) => {
		if( n < 0 ) {
			return array.slice(n);
		}
		return array.slice(0, n);
	});

	eleventyConfig.addFilter("localUrl", (absoluteUrl) => {
		return absoluteUrl.replace("https://www.zachleat.com", "");
	});

	eleventyConfig.addFilter("nameToFlag", (countryName = "") => {
		let flag = {
			"germany": "🇩🇪",
			"us": "🇺🇸",
			"usa": "🇺🇸",
			"netherlands": "🇳🇱",
			"canada": "🇨🇦",
			"spain": "🇪🇸",
			"belarus": "🇧🇾",
			"united kingdom": "🇬🇧",
			"nigeria": "🇳🇬",
			"romania": "🇷🇴",
		}[countryName.toLowerCase()] || "";

		return `<span role="img" aria-label="${countryName}">${flag}</span>`;
	});

	eleventyConfig.addJavaScriptFunction("fetchYoutubeTranscript", async (videoId) => {
		let asset = new AssetCache(`youtube_transcript_${videoId}`, "./_11ty/transcripts/", {
			filenameFormat: function(key, hash) {
				return `youtube-${videoId}`;
			}
		});
		if(asset.isCacheValid("*")) {
			return asset.getCachedValue();
		}

		// Remote call
		let transcript = await YoutubeTranscript.fetchTranscript(videoId);
		await asset.save(transcript, "json");
		return transcript;
	});
	/* END FILTERS */

	/* SHORTCODES */
	eleventyConfig.addLiquidShortcode("originalPostEmbed", async function(url, skipIcon = false, mode = "screenshot") {
		// if(url.startsWith("https://www.youtube.com/") || url.startsWith("https://youtube.com/")) {
		if(url.startsWith("https://www.youtube.com/") || url.startsWith("https://youtube.com/") || url.startsWith("https://github.com/")) {
			mode = "opengraph";
		}

		let imageHtml = "";
		if(mode === "screenshot") {
			imageHtml = screenshotImageHtmlFullUrl(url);
		} else if(mode === "opengraph") {
			imageHtml = opengraphImageHtml(url);
		}

		let theme = "dark";
		let styles = [];
		if(!skipIcon && !url.includes("youtube.com")) {
			let avatarUrl = getIndieAvatarUrl(url);
			let colors = await getFilteredImageColors(avatarUrl);
			if(colors.length > 0) {
				styles.push(`--bw-background: ${colors.at(0).background}`);
				theme = colors.at(0).mode;
			}
		}

		return `${JS_ENABLED ? `<script type="module" src="/static/browser-window.js"></script>` : ""}
<div><browser-window mode="${theme}"${skipIcon ? "" : " icon"} url="${url}" shadow flush style="${styles.join(";")}"><a href="${url}" class="favicon-optout">${imageHtml}</a></browser-window></div>`;
	});

	/* COLLECTIONS */
	eleventyConfig.addFilter("isPost", function(inputPath) {
		return inputPath.startsWith("./_posts/") && (inputPath.endsWith(".md") || inputPath.endsWith(".html"));
	});

	eleventyConfig.addCollection("posts", function(collection) {
		return getPosts(collection);
	});

	eleventyConfig.addCollection("activePosts", function(collection) {
		return getPosts(collection).filter(function(item) {
			return !item.data.deprecated;
		});
	});

	eleventyConfig.addCollection("pinnedPosts", function(collection) {
		return getPosts(collection).filter(({data}) => data.pinned === true)
	});

	eleventyConfig.addCollection("homepageNewestPosts", function(collection) {
		return getPosts(collection)
			.filter(({data}) => data.showOnHomePage === true)
			.sort((a, b) => {
				if(a.data.pinned && b.data.pinned) {
					return 0;
				}
				if(a.data.pinned) {
					return -1;
				}
				if(b.data.pinned) {
					return 1;
				}
				return 0;
			})
	});

	eleventyConfig.addCollection("feedPosts", function(collection) {
		return getPosts(collection).reverse().filter(function(item) {
			return !item.data.tags || !item.data.deprecated;
		});
	});

	eleventyConfig.addLiquidFilter("getFilterCategories", function(collectionItem) {
		let categories = [];
		if(isSpeaking(collectionItem)) {
			categories.push("speaking");
		}
		if(isWriting(collectionItem)) {
			categories.push("writing");
		}
		if(hasTag(collectionItem, "font-loading") || hasCategory(collectionItem, "font-loading")) {
			categories.push("web-fonts");
		}

		let tags = [
			"eleventy",
			"project",
			"web-components",
			"jamstack",
		];
		for(let tag of tags) {
			if(hasTag(collectionItem, tag)) {
				categories.push(tag);
			}
		}
		return categories.join(" ");
	});

	eleventyConfig.addCollection("writing", function(collection) {
		return collection.getSortedByDate().reverse().filter(item => {
			return isWriting(item);
		});
	});
	eleventyConfig.addCollection("latestPosts", function(collection) {
		let posts = collection.getSortedByDate().reverse();
		let items = [];
		for( let item of posts ) {
			if( !!item.inputPath.match(/\/_posts\//)) {
				items.push( item );
				if( items.length >= 5 ) {
					return items;
				}
			}
		}
	});

	// font-loading category mapped to collection
	eleventyConfig.addCollection("font-loading", function(collection) {
		return collection.getAllSorted().filter(function(item) {
			return "categories" in item.data && item.data.categories && item.data.categories.indexOf("font-loading") > -1 || hasTag(item, "font-loading");
		}).reverse();
	});

	// presentations category mapped to collection
	eleventyConfig.addCollection("presentations", function(collection) {
		return collection.getAllSorted().filter(function(item) {
			return isSpeaking(item);
		}).reverse();
	});

	/* Markdown */
	eleventyConfig.amendLibrary("md", (mdLib) => {
		mdLib.use(markdownItToc, {
			includeLevel: [2, 3, 4],
			// slug filter removed in Eleventy v4
			slugify: (str) => slugify(str),
			format: (heading) => heading,
			transformLink: function(link) {
				if(typeof link === "string") {
					// remove backticks from markdown code
					return link.replace(/\%60/g, "");
				}
				return link;
			}
		})
	});

	let md = markdownIt({
		html: true,
		breaks: true,
		linkify: true,
	});

	eleventyConfig.addPairedShortcode("markdown", function(content, inline = false) {
		if(inline) {
			return md.renderInline(content);
		}
		return md.render(content);
	});

	eleventyConfig.addLiquidFilter("includes", function(arr = [], value) {
		return arr.includes(value);
	});

	eleventyConfig.addLiquidFilter("removeNewlines", function(str) {
		return str.replace(/\n/g, "");
	});

	// TODO this could be a webc component
	eleventyConfig.addShortcode("slides", async function (prefix, indeces, alts, links) {
		let [indexStart, indexEnd] = indeces.split("-");
		indexStart = parseInt(indexStart, 10);
		indexEnd = parseInt(indexEnd, 10) || indexStart; // "33" becomes "33-33"
		let isSingleSlide = indexStart === indexEnd;
		let id = `carouscroll-id-${slugify(this.page.url + "__" + indeces)}`;

		let html = [];
		if(JS_ENABLED) {
			html.push(`<script type="module" src="/static/browser-window.js"></script>`);
		}
		html.push(`<div><browser-window shadow flush><is-land on:idle on:visible>`);
		if(JS_ENABLED) {
			html.push(`<template data-island><script type="module" src="/static/carouscroll.js"></script></template>`);
		}
		html.push(`<carou-scroll tabindex="0" id="${id}" class="carouscroll${isSingleSlide ? " carouscroll-single" : ""}"${isSingleSlide ? " disabled" : ""}>`);

		for(let j=indexStart, k=indexEnd; j <= k; j++) {
			let slidePath = path.join(".", `${prefix}${leftpad(j, 3)}.jpeg`);
			if(fs.existsSync(slidePath)) {
				if(links && links[j]) {
					html.push(`<a href="${links[j]}">`)
				}
				let alt = alts[j] ? alts[j] : `Slide ${j}`;

				html.push(`<img src="/${slidePath}" alt="${alt}" eleventy:widths="600,1000" sizes="(min-width: 106.25em) 82.75em, (min-width: 61.25em) calc(91.43vw - 13.25em), 100vw">`);

				if(links && links[j]) {
					html.push(`</a>`)
				}
			}
		}

		html.push(`</carou-scroll>`);

		if(!isSingleSlide) {
			html.push(`<div class="carouscroll-meta">`);
			html.push(`<button type="button" disabled data-carousel-previous="${id}">&lt; Previous</button>`);
			html.push(`<output data-carousel-output="${id}"></output>`);
			html.push(`<button type="button" disabled data-carousel-next="${id}">Next &gt;</button>`);
			html.push(`</div>`);
		}

		html.push(`</browser-window></is-land></div>`);

		return html.join("");
	});

	// Remove after https://github.com/11ty/eleventy/issues/3668
	const TIME_ZONE = "America/Chicago";
	eleventyConfig.addDateParsing(function(dateValue) {
		let localDate;
		if(dateValue instanceof Date) { // override YAML dates
			localDate = DateTime.fromJSDate(dateValue, { zone: "utc" }).setZone(TIME_ZONE, { keepLocalTime: true });
		} else if(typeof dateValue === "string") { // override String dates
			localDate = DateTime.fromISO(dateValue, { zone: TIME_ZONE });
		} else {
			let filepathRegex = this.page.inputPath.match(/(\d{4}-\d{2}-\d{2})/);
			if (filepathRegex !== null) {
				localDate = DateTime.fromISO(filepathRegex[1], { zone: TIME_ZONE });
			}
		}

		if (localDate?.isValid) {
			return localDate;
		}
	});
};

export const config = {
	templateFormats: [
		"liquid",
		"md",
		"njk",
		"html",
		"11ty.js",
	],
	htmlTemplateEngine: "liquid",
	markdownTemplateEngine: "liquid",

	// disables pkg. imported in global data
	keys: {
		package: false,
	}
};