11ty images (#235)

* uses 11ty-image plugin for all images, not just svgicons

* bumped version and updated changelog

* Removed commented code

.eleventy.js

@@ -41,7 +41,7 @@ const getPlainText = content => {
   // Regex = htmlTags or htmlComments
   return html.replace(
     new RegExp(String.raw`${htmlTags}|${htmlComments}`, "gi"),
-    ""
+    "",
   )
 }
 const getReadTime = content => {
@@ -61,15 +61,28 @@ module.exports = function (eleventyConfig) {
   // js/image loading
   eleventyConfig.addPassthroughCopy(`./${config.dir.input}/global.js`)
   eleventyConfig.addPassthroughCopy(`./${config.dir.input}/static`)
-  eleventyConfig.addNunjucksAsyncShortcode("svgIcon", async filename => {
-    const metadata = await Image(
-      `./${config.dir.input}/_includes/assets/${filename}`,
-      {
-        formats: ["svg"],
-        dryRun: true,
-      }
-    )
-    return metadata.svg[0].buffer.toString()
+  eleventyConfig.addNunjucksAsyncShortcode("image", async (src, alt, sizes) => {
+    const metadata = await Image(`./${config.dir.input}/static/${src}`, {
+      outputDir: `./${config.dir.output}/static/`,
+      urlPath: "/static/",
+      formats: ["auto"],
+      widths: ["auto"],
+      dryRun: src.endsWith(".svg"),
+    })
+
+    const imageAttributes = {
+      alt,
+      sizes,
+      loading: "lazy",
+      decoding: "async",
+    }
+
+    if (metadata.svg) {
+      return metadata.svg[0].buffer.toString()
+    }
+
+    // You bet we throw an error on a missing alt (alt="" works okay)
+    return Image.generateHTML(metadata, imageAttributes)
   })
 
   // custom collections
@@ -81,7 +94,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addFilter("limit", (array, limit) => array.slice(0, limit))
   eleventyConfig.addFilter("timeToRead", getReadTime)
   eleventyConfig.addFilter("postDate", date =>
-    DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_MED)
+    DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_MED),
   )
   eleventyConfig.addFilter("exclude", (collection, stringToFilter) => {
     if (!stringToFilter) {
@@ -101,12 +114,13 @@ module.exports = function (eleventyConfig) {
   // When `permalink` is false, the file is not written to disk
   eleventyConfig.addGlobalData(
     "eleventyComputed.permalink",
-    () => data => shouldHide(data) ? false : data.permalink
+    () => data => (shouldHide(data) ? false : data.permalink),
   )
   // When `eleventyExcludeFromCollections` is true, the file is not included in any collections
   eleventyConfig.addGlobalData(
     "eleventyComputed.eleventyExcludeFromCollections",
-    () => data => shouldHide(data) ? true : data.eleventyExcludeFromCollections
+    () => data =>
+      shouldHide(data) ? true : data.eleventyExcludeFromCollections,
   )
   eleventyConfig.on("eleventy.before", ({ runMode }) => {
     // Set the environment variable

.nvmrc

@@ -1 +1 @@
-18.12
+18.17

CHANGELOG.md

@@ -9,8 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+---
+
+## 2.3.5 - 2024-05-11
+
+### Changed
+
 - dependency updates
 - updated [/now page](src/now.md)
+- switched to 11ty-image plugin for social icons and header avatar
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simpixelated.com",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "personal website and blog of Jordan Kohl (simpixelated)",
   "main": ".eleventy.js",
   "author": "Jordan Kohl",
@@ -19,14 +19,14 @@
   "keywords": [],
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@11ty/eleventy-img": "^3.1.8",
+    "@11ty/eleventy-img": "^4.0.2",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "husky": "^9.0.11",
     "path": "^0.12.7",
     "prettier": "^3.2.5",
-    "puppeteer": "^21.11.0",
-    "sass": "^1.74.1"
+    "puppeteer": "^22.8.0",
+    "sass": "^1.77.1"
   },
   "repository": {
     "type": "git",