From c5010811f1d64b21b6a8403733df3f8f3f2b8242 Mon Sep 17 00:00:00 2001
From: Kevin J Hoerr <kjhoerr@protonmail.com>
Date: Sun, 24 Dec 2023 10:23:38 +0000
Subject: Add image optimization for generation

---
 src/config.ts | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

(limited to 'src/config.ts')

diff --git a/src/config.ts b/src/config.ts
index c9f5ba0..3a99491 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,24 +1,48 @@
 import { formatDate, getTimestamp } from "./util/timestamp";
 import BuildInfo from "../config.json";
+import Image from "@11ty/eleventy-img";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function (eleventyConfig: any) {
+export default function (config: any) {
   // passthrough static files to public
-  eleventyConfig.addPassthroughCopy({
+  config.addPassthroughCopy({
     "./src/static/": "/",
   });
 
   // hook in configured build time for GH action to update
-  eleventyConfig.addGlobalData("site", () => BuildInfo);
-  eleventyConfig.addGlobalData("buildTimeEncoded", () => {
+  config.addGlobalData("site", () => BuildInfo);
+  config.addGlobalData("buildTimeEncoded", () => {
     return getTimestamp(Number(BuildInfo.version));
   });
 
+  // images
+	config.addShortcode("image", async (src: string, alt: string, sizes: string, width: number, height: number | undefined) => {
+		let metadata = await Image(src, {
+			widths: [width, 550, "auto"],
+			formats: ["webp", "png"],
+      urlPath: "/images/",
+      outputDir: "./public/images/",
+		});
+
+		let url = metadata.png?.[0].url ?? "";
+
+		return `<picture>
+			${Object.values(metadata).map(imageFormat => {
+				return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${sizes}">`;
+			}).join("\n")}
+				<img
+					src="${url}"
+					width="${width}"
+					height="${height ?? width}"
+					alt="${alt}">
+			</picture>`;
+	});
+
   // add `date` filter
-  eleventyConfig.addFilter("formatDate", formatDate);
+  config.addFilter("formatDate", formatDate);
 
   // ensure eleventy marks this config as watched, since it's typescript
-  eleventyConfig.addWatchTarget("./src/config.ts");
+  config.addWatchTarget("./src/config.ts");
 
   return {
     templateFormats: ["njk", "html"],
-- 
cgit