Add image optimization for generation

5 files changed, 31 insertions, 10 deletions

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/static/images/favicon-70x70.png b/src/images/favicon-70x70.png
index 4d68d0f..4d68d0f 100644
--- a/src/static/images/favicon-70x70.png
+++ b/src/images/favicon-70x70.png
diff --git a/src/static/images/main.png b/src/images/main.png
index 324fab3..324fab3 100644
--- a/src/static/images/main.png
+++ b/src/images/main.png
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/main.webp b/src/static/images/main.webp
deleted file mode 100644
index 92bad48..0000000
--- a/src/static/images/main.webp
+++ /dev/null