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 ++++++++++++++++++++++++++++++------
 src/images/favicon-70x70.png        | Bin 0 -> 10940 bytes
 src/images/main.png                 | Bin 0 -> 724558 bytes
 src/pages/index.njk                 |   5 +----
 src/static/images/favicon-70x70.png | Bin 10940 -> 0 bytes
 src/static/images/main.png          | Bin 724558 -> 0 bytes
 src/static/images/main.webp         | Bin 256990 -> 0 bytes
 7 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 src/images/favicon-70x70.png
 create mode 100644 src/images/main.png
 delete mode 100644 src/static/images/favicon-70x70.png
 delete mode 100644 src/static/images/main.png
 delete mode 100644 src/static/images/main.webp

(limited to 'src')

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"],
diff --git a/src/images/favicon-70x70.png b/src/images/favicon-70x70.png
new file mode 100644
index 0000000..4d68d0f
Binary files /dev/null and b/src/images/favicon-70x70.png differ
diff --git a/src/images/main.png b/src/images/main.png
new file mode 100644
index 0000000..324fab3
Binary files /dev/null and b/src/images/main.png differ
diff --git a/src/pages/index.njk b/src/pages/index.njk
index d2c231e..ea7a9a2 100644
--- a/src/pages/index.njk
+++ b/src/pages/index.njk
@@ -1,10 +1,7 @@
 ---
 layout: layouts/page.njk
 ---
-<picture>
-  <source type="image/webp" srcSet="images/main.webp 650w" sizes="350px" height="350" width="350"/>
-  <img src="images/main.png" sizes="350px" height="350" width="350" alt="Picture of Kevin Hoerr"/>
-</picture>
+{% image "src/images/main.png", "Picture of Kevin Hoerr", "350px", "350" %}
 <section><h1>Hello!</h1></section>
 <section>
   <p>I&apos;m a computer science and math graduate from Millersville University. I work as a Solutions Architect and specialize in development operations and systems validation for web applications.</p>
diff --git a/src/static/images/favicon-70x70.png b/src/static/images/favicon-70x70.png
deleted file mode 100644
index 4d68d0f..0000000
Binary files a/src/static/images/favicon-70x70.png and /dev/null differ
diff --git a/src/static/images/main.png b/src/static/images/main.png
deleted file mode 100644
index 324fab3..0000000
Binary files a/src/static/images/main.png and /dev/null differ
diff --git a/src/static/images/main.webp b/src/static/images/main.webp
deleted file mode 100644
index 92bad48..0000000
Binary files a/src/static/images/main.webp and /dev/null differ
-- 
cgit