add cache-buster to asset urls

11ty/data/socials.ts

@@ -18,14 +18,13 @@ const data = [
 		name: "Mastodon",
 		url: "https://hachyderm.io/@haliphax",
 		icon: "message-circle",
-		attributes: {
-			rel: "me",
-		},
+		attributes: { rel: "me" },
 	},
 	{
-		name: "Instagram",
-		url: "https://www.instagram.com/haliphax",
-		icon: "instagram",
+		name: "Bookwyrm",
+		url: "https://bookwyrm.social/user/haliphax",
+		icon: "book",
+		attributes: { rel: "me" },
 	},
 	{
 		name: "Ko-fi",

11ty/events/iconPurge.ts

@@ -32,7 +32,8 @@ const getHtmlFiles = async (dir: string): Promise<string[]> =>
 const iconPurge = (cfg: UserConfig) => {
 	cfg.on("eleventy.after", async ({ dir }: { dir: EleventyDir }) => {
 		const files = await getHtmlFiles(dir.output);
-		const iconRegex = /<use href="\/img\/feather-sprite\.svg#([^"]+)"/gi;
+		const iconRegex =
+			/<use href="\/img\/feather-sprite\.svg\?_=[^#]+#([^"]+)"/gi;
 		const iconsUsed = new Map<string, boolean>();
 
 		// find icons used in each file
@@ -42,24 +43,24 @@ const iconPurge = (cfg: UserConfig) => {
 
 			do {
 				match = iconRegex.exec(content);
-
-				if (match !== null) {
-					iconsUsed.set(match[1], true);
-				}
+				if (match !== null) iconsUsed.set(match[1], true);
 			} while (match);
 		}
 
 		const svg = await parse(
 			await readFile(`${dir.output}/img/feather-sprite.svg`, fileOpts),
 		);
 		const defs = svg.children[0];
+		const newDefs = [];
 
 		// loop through icons, removing unused
 		for (let i = 0; i < defs.children.length; i++) {
 			const icon = defs.children[i];
-			if (!iconsUsed.has(icon.attributes["id"])) delete defs.children[i];
+			if (iconsUsed.has(icon.attributes["id"])) newDefs.push(icon);
 		}
 
+		defs.children = newDefs;
+
 		await writeFile(
 			`${dir.output}/img/feather-sprite.svg`,
 			stringify(svg),

11ty/functions/getHashRef.ts

@@ -2,9 +2,13 @@ import cp from "child_process";
 import { promisify } from "util";
 
 const exec = promisify(cp.exec);
+let hashref: string | null = null;
 
 /** get hash ref of the most recent commit in the repository */
-const getHashRef = async () =>
-	(await exec("git rev-parse --short HEAD")).stdout;
+const getHashRef = async () => {
+	if (!hashref)
+		hashref = (await exec("git rev-parse --short HEAD")).stdout.trim();
+	return hashref;
+};
 
 export = getHashRef;

11ty/functions/renderArchivedNotice.ts

@@ -1,14 +1,14 @@
 import renderIcon from "./renderIcon";
 
-const renderArchivedNotice = (tags: string[]) => {
+const renderArchivedNotice = async (tags: string[]) => {
 	if (!tags.includes("archived")) {
 		return "";
 	}
 
 	return /*html*/ `
 		<div class="archived-notice alert alert-primary mb-10" role="contentinfo">
 			<small>
-				${renderIcon("alert-triangle")}
+				${await renderIcon("alert-triangle")}
 				This content has been <strong>archived</strong>. Its subject matter is
 				no longer relevant. This URL will remain active indefinitely, but the
 				content will not otherwise be listed on the site.

11ty/functions/renderCollection.ts

@@ -5,45 +5,48 @@ import getDescription from "./getDescription";
 import renderIcon from "./renderIcon";
 import renderTags from "./renderTags";
 
-const renderCollection = (
+const renderCollection = async (
 	items: any[],
 	limit: number | undefined = undefined,
 	jumboFirst = false,
 ) => /*html*/ `
 	<ul class="list-unstyled row d-flex flex-row">
-		${Array.from(items)
-			.filter((p) => p.data.tags?.includes("archived") === false)
-			.reverse()
-			.slice(0, limit)
-			.map((p, i) => {
-				const cutoff = jumboFirst && i === 0 ? jumboBlurbLength : blurbLength;
-				const slug = slugify(p.url);
-				const content = md.render(
-					p.template.frontMatter.excerpt || p.template.frontMatter.content,
-				);
-				const summary = getDescription(content, cutoff);
-				const classes = [];
-				const jumbo = i === 0 && jumboFirst;
+		${(
+			await Promise.all(
+				Array.from(items)
+					.filter((p) => p.data.tags?.includes("archived") === false)
+					.reverse()
+					.slice(0, limit)
+					.map(async (p, i) => {
+						const cutoff =
+							jumboFirst && i === 0 ? jumboBlurbLength : blurbLength;
+						const slug = slugify(p.url);
+						const content = md.render(
+							p.template.frontMatter.excerpt || p.template.frontMatter.content,
+						);
+						const summary = getDescription(content, cutoff);
+						const classes = [];
+						const jumbo = i === 0 && jumboFirst;
 
-				if (!jumbo) {
-					classes.push("col-md-6");
-				}
+						if (!jumbo) {
+							classes.push("col-md-6");
+						}
 
-				return /*html*/ `
+						return /*html*/ `
 					<li class="col-12 ${classes.join(" ")} d-flex">
 						<div class="card m-5 p-20 w-full ${jumbo ? "border" : ""}">
 							<h3 class="card-title mb-0">
 								${p.data.title}
 							</h3>
-							${renderTags(p.data.tags, true)}
+							${await renderTags(p.data.tags, true)}
 							<hr />
 							<article aria-labelledby="${slug}">
 								<p class="text-muted pb-20">${summary}</p>
 							</article>
 							<div class="text-right position-absolute bottom-0 right-0 mr-10 mb-10">
 								<a href="${p.url}" id="${slug}"
 									class="btn btn-secondary d-inline-block">
-									${renderIcon("bookmark")}
+									${await renderIcon("bookmark")}
 									<span>
 										Read more
 										<span class="sr-only">- ${p.data.title}</span>
@@ -53,8 +56,9 @@ const renderCollection = (
 						</div>
 					</li>
 					`;
-			})
-			.join("")}
+					}),
+			)
+		).join("")}
 	</ul>
 	`;
 

11ty/functions/renderGitHubLink.ts

@@ -1,6 +1,6 @@
 import renderIcon from "./renderIcon";
 
-function renderGitHubLink(data: any) {
+async function renderGitHubLink(data: any) {
 	const encodedPath = encodeURIComponent(
 		[data.misc.githubRoot, data.page.inputPath.substring(1)].join(""),
 	);
@@ -9,7 +9,7 @@ function renderGitHubLink(data: any) {
 	return /*html*/ `
 			<small>
 				<a href="${githubLink}" class="no-external">
-					${renderIcon("edit")}
+					${await renderIcon("edit")}
 					Suggest a change
 				</a>
 			</small>

11ty/functions/renderIcon.ts

@@ -1,11 +1,13 @@
-const renderIcon = (icon: string, classes?: string) => /*html*/ `
+import getHashRef from "./getHashRef";
+
+const renderIcon = async (icon: string, classes?: string) => /*html*/ `
 	<svg
 		class="feather ${classes ?? ""}"
 		aria-hidden="true"
 		height="24"
 		width="24"
 	>
-		<use href="/img/feather-sprite.svg#${icon}" />
+		<use href="/img/feather-sprite.svg?_=${await getHashRef()}#${icon}" />
 	</svg>
 	`;
 

11ty/functions/renderReadingTime.ts

@@ -15,7 +15,7 @@ const renderReadingTime = async (data: any) => {
 
 	return /*html*/ `
 		<small class="text-muted flex-fill ai-center">
-			${renderIcon("clock")}
+			${await renderIcon("clock")}
 			Reading time: ${readTime} minute${readTime !== 1 ? "s" : ""}
 		</small>
 		`;

11ty/functions/renderTags.ts

@@ -1,13 +1,13 @@
 import ignoreTags from "../data/ignoreTags";
 import renderIcon from "./renderIcon";
 
-const renderTags = (tags: string[], inline = false) => {
+const renderTags = async (tags: string[], inline = false) => {
 	const filtered = tags.filter((t) => ignoreTags.indexOf(t) < 0);
 
 	return inline
 		? /*html*/ `
 			<span role="contentinfo">
-				${renderIcon("tag", "text-secondary mr-5")}
+				${await renderIcon("tag", "text-secondary mr-5")}
 				<span class="sr-only">Tags:</span>
 				<ul class="list-unstyled d-inline mb-5">
 				${filtered
@@ -31,20 +31,22 @@ const renderTags = (tags: string[], inline = false) => {
 						? /*html*/ `<span class="sr-only">None.</span>`
 						: /*html*/ `
 						<ul class="list-unstyled d-inline-block mb-10">
-							${filtered
-								.map(
-									(t) => /*html*/ `
+							${(
+								await Promise.all(
+									filtered.map(
+										async (t) => /*html*/ `
 									<li class="d-inline-block mr-1">
 										<a href="/tags/${t}/"
 											class="badge badge-secondary">
-											${renderIcon("tag")}
+											${await renderIcon("tag")}
 											${t}
 										</a>
 										&nbsp;
 									</li>
 									`,
+									),
 								)
-								.join("")}
+							).join("")}
 						</ul>`
 				}
 			</span>

11ty/layouts/base.11ty.ts

@@ -5,7 +5,7 @@ import renderIcon from "../functions/renderIcon";
 
 export = class Base {
 	/** generate sidebar link for given object */
-	generateSidebarLink(opts: any) {
+	async generateSidebarLink(opts: any) {
 		let attrs = "";
 
 		if (opts.hasOwnProperty("attributes")) {
@@ -17,7 +17,7 @@ export = class Base {
 		return /*html*/ `
 			<li class="d-block">
 				<a href="${opts.url}" class="sidebar-link" ${attrs}>
-					<span>${renderIcon(opts.icon)} ${opts.name}</span>
+					<span>${await renderIcon(opts.icon)} ${opts.name}</span>
 				</a>
 			</li>
 			`;
@@ -67,7 +67,7 @@ export = class Base {
 					I'm streaming on Twitch <em><strong>right now</strong></em>.	You should stop by.
 					<a href="https://www.twitch.tv/${process.env.TWITCH_USERNAME}"
 						class="btn btn-sm btn-primary ml-10 no-external">
-						${renderIcon("twitch")}
+						${await renderIcon("twitch")}
 						Let's go!
 					</a>
 				</div>
@@ -102,16 +102,16 @@ export = class Base {
 			</head>
 			<body class="dark-mode mh-full h-full">
 				<a class="btn btn-primary" id="skip-nav" href="#main-content">
-					${renderIcon("fast-forward")}
+					${await renderIcon("fast-forward")}
 					Skip to main content
 				</a>
 				<div class="page-wrapper with-sidebar"
 					data-sidebar-type="overlayed-sm-and-down">
 					<template type="text/html" id="tp-btn-sidebar-toggle">
 						<button id="btn-sidebar-toggle" type="button"
 							class="btn btn-action position-absolute t-0 l-0 m-5">
-							<span class="icon-sidebar-o">${renderIcon("menu")}</span>
-							<span class="icon-sidebar-x">${renderIcon("x")}</span>
+							<span class="icon-sidebar-o">${await renderIcon("menu")}</span>
+							<span class="icon-sidebar-x">${await renderIcon("x")}</span>
 							<span class="sr-only">Toggle sidebar menu</span>
 						</button>
 					</template>
@@ -121,12 +121,18 @@ export = class Base {
 								<h5 class="sidebar-title">${data.strings.siteMenuHeader}</h5>
 								<div class="sidebar-divider"></div>
 								<ul class="list-unstyled d-flex flex-column mb-20">
-									${data.links.map(this.generateSidebarLink.bind(this)).join("")}
+									${(await Promise.all(data.links.map(this.generateSidebarLink.bind(this)))).join(
+										"",
+									)}
 								</ul>
 								<h5 class="sidebar-title">${data.strings.socialMenuHeader}</h5>
 								<div class="sidebar-divider"></div>
 								<ul class="list-unstyled d-flex flex-column">
-									${data.socials.map(this.generateSidebarLink.bind(this)).join("")}
+									${(
+										await Promise.all(
+											data.socials.map(this.generateSidebarLink.bind(this)),
+										)
+									).join("")}
 								</ul>
 							</nav>
 						</div>

11ty/layouts/page.11ty.ts

@@ -19,7 +19,7 @@ export = class Post {
 		return /*html*/ `
 			<div class="mb-10 d-flex flex-row flex-grow-1">
 				${await renderReadingTime(data)}
-				${renderGitHubLink(data)}
+				${await renderGitHubLink(data)}
 			</div>
 			<div class="card border mx-0 pb-0 pt-5 mt-0 mb-0">
 				${data.content}

11ty/layouts/post.11ty.ts

@@ -29,17 +29,17 @@ export = class Post {
 		const posted = data.page.date.toISOString().replace(/T.*$/, "");
 
 		return /*html*/ `
-			${renderArchivedNotice(data.tags)}
-			${renderTags(data.tags)}
+			${await renderArchivedNotice(data.tags)}
+			${await renderTags(data.tags)}
 			<div class="mb-10 d-flex flex-row flex-grow-1">
 				${await renderReadingTime(data)}
-				${renderGitHubLink(data)}
+				${await renderGitHubLink(data)}
 			</div>
 			<div class="card border mx-0 pb-0 pt-5 mt-0 mb-0">
 				${data.content}
 			</div>
 			<p class="text-muted" role="contentinfo">
-				${renderIcon("calendar")}
+				${await renderIcon("calendar")}
 				Posted: <time datetime="${posted}">${posted}</time>
 			</p>
 			`;