chore: refactor image setup

.eleventy.js

@@ -5,6 +5,7 @@ const pluginFilesMinifier = require('@sherby/eleventy-plugin-files-minifier')
 const schema = require('@quasibit/eleventy-plugin-schema')
 const { eleventyImagePlugin } = require('@11ty/eleventy-img')
 const pluginRss = require('@11ty/eleventy-plugin-rss')
+const outdent = require('outdent')
 const Image = require('@11ty/eleventy-img')
 const embedYouTube = require('eleventy-plugin-youtube-embed')
 const markdownIt = require('markdown-it')
@@ -22,6 +23,71 @@ const tagAliases = require('./src/_data/json/tag-aliases.json')
 // load .env
 require('dotenv-flow').config()
 
+const imageShortcode = async (
+  src,
+  alt,
+  className = undefined,
+  widths = [75, 150, 300, 600, 900, 1200],
+  formats = ['webp', 'jpeg'],
+  sizes = '100vw'
+) => {
+  const imageMetadata = await Image(src, {
+    widths: [...widths, null],
+    formats: [...formats, null],
+    outputDir: './_site/assets/img/cache/',
+    urlPath: '/assets/img/cache/',
+  })
+
+  const stringifyAttributes = (attributeMap) => {
+    return Object.entries(attributeMap)
+      .map(([attribute, value]) => {
+        if (typeof value === 'undefined') return ''
+        return `${attribute}="${value}"`
+      })
+      .join(' ')
+  }
+
+  const sourceHtmlString = Object.values(imageMetadata)
+    .map((images) => {
+      const { sourceType } = images[0]
+      const sourceAttributes = stringifyAttributes({
+        type: sourceType,
+        srcset: images.map((image) => image.srcset).join(', '),
+        sizes,
+      })
+
+      return `<source ${sourceAttributes}>`
+    })
+    .join('\n')
+
+  const getLargestImage = (format) => {
+    const images = imageMetadata[format]
+    return images[images.length - 1]
+  }
+
+  const largestUnoptimizedImg = getLargestImage(formats[0])
+  const imgAttributes = stringifyAttributes({
+    src: largestUnoptimizedImg.url,
+    width: largestUnoptimizedImg.width,
+    height: largestUnoptimizedImg.height,
+    alt,
+    loading: 'lazy',
+    decoding: 'async',
+  })
+
+  const imgHtmlString = `<img ${imgAttributes}>`
+  const pictureAttributes = stringifyAttributes({
+    class: className,
+  })
+
+  const picture = `<picture ${pictureAttributes}>
+    ${sourceHtmlString}
+    ${imgHtmlString}
+  </picture>`
+
+  return outdent`${picture}`
+}
+
 module.exports = function (eleventyConfig) {
   // plugins
   eleventyConfig.addPlugin(syntaxHighlight)
@@ -139,25 +205,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addLiquidFilter('absoluteUrl', pluginRss.absoluteUrl)
 
   // image shortcode
-  eleventyConfig.addShortcode('image', async function (src, alt, css, sizes, loading) {
+  eleventyConfig.addShortcode('image', imageShortcode)
-    if (!src) return
-    let metadata = await Image(src, {
-      widths: [75, 150, 300, 600, 900, 1200],
-      formats: ['webp'],
-      urlPath: '/assets/img/cache/',
-      outputDir: './_site/assets/img/cache/',
-    })
-
-    let imageAttributes = {
-      class: css,
-      alt,
-      sizes,
-      loading: loading || 'lazy',
-      decoding: 'async',
-    }
-
-    return Image.generateHTML(metadata, imageAttributes)
-  })
 
   eleventyConfig.on('eleventy.after', () => {
     execSync(`npx pagefind --site _site --glob "**/*.html"`, { encoding: 'utf-8' })

package-lock.json

@@ -47,6 +47,7 @@
         "markdown-it-footnote": "^3.0.3",
         "markdownlint-cli": "^0.37.0",
         "marked": "^9.1.2",
+        "outdent": "^0.8.0",
         "pagefind": "^1.0.3",
         "postcss": "^8.4.31",
         "prettier": "^3.0.3",
@@ -7833,6 +7834,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/outdent": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
+      "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==",
+      "dev": true
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",

package.json

@@ -56,6 +56,7 @@
     "markdown-it-footnote": "^3.0.3",
     "markdownlint-cli": "^0.37.0",
     "marked": "^9.1.2",
+    "outdent": "^0.8.0",
     "pagefind": "^1.0.3",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",

src/404.html

@@ -3,16 +3,25 @@ title: '404'
 layout: default
 permalink: 404.html
 ---
-{% image './src/assets/img/404.jpg', title, 'w-full rounded-lg', '1200px' %}
+
+{% image './src/assets/img/404.jpg', title, 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 <div class="text-center w-full">
-  <h2 class="m-0 text-4xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-6xl mb-4">{{ title }}</h2>
+  <h2
-  <h3 class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6">
+    class="m-0 text-4xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-6xl mb-4"
+  >
+    {{ title }}
+  </h2>
+  <h3
+    class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6"
+  >
     What kind of idiots do you have working here?
   </h3>
   <div class="flex justify-center">
-    <a href="/" class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:inline icon--bold font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-pink-500">
+    <a
-      {% tablericon "receipt-2" "Receipt" %}
+      href="/"
-      Skip out on the room service bill
+      class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:inline icon--bold font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-pink-500"
+    >
+      {% tablericon "receipt-2" "Receipt" %} Skip out on the room service bill
     </a>
   </div>
 </div>

src/_includes/now.liquid

@@ -3,12 +3,12 @@ layout: main
 ---
 {% render "partials/header.liquid", site: site, page: page, nav: nav %}
 {{ content }}
-{% render "partials/now/media-grid.liquid", data:music.artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
+{% render "partials/now/media-grid.liquid", data:music.artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8 %}
-{% render "partials/now/media-grid.liquid", data:music.albums, icon: "vinyl", title: "Albums", shape: "square", count: 8, loading: 'lazy' %}
+{% render "partials/now/media-grid.liquid", data:music.albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %}
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
-{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6, loading: 'lazy' %}
+{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %}
-{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, loading: 'lazy' %}
+{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
-{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6, loading: 'lazy' %}
+{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
 <p class="text-xs text-center pt-6">This is a
   <a href="https://nownownow.com/about">now page</a>, and if you have your own site,
   <a href="https://nownownow.com/about">you should make one too</a>.</p>

src/_includes/partials/author.liquid

@@ -1,7 +1,7 @@
 <div class="mt-12 py-8 border-t-2 flex flex-col md:flex-row justify-between items-center">
   <div class="flex flex-col mb-4 md:mb-0 md:flex-row items-center flex-1">
-    <div class="border border-teal-700 dark:border-teal-300 bg-white rounded-full overflow-hidden mb-4 md:mb-0 md:mr-4">
+    <div class="border border-teal-700 dark:border-teal-300 bg-white rounded-full overflow-hidden mb-4 md:mb-0 md:mr-4 [&>*]:h-20 [&>*]:w-20 flex flex-col items-center">
-      {% image './src/assets/img/avatar.webp', site.name, 'inline-block h-20 w-20', '80px' %}
+      {% image './src/assets/img/avatar.webp', site.name, 'inline-block' %}
     </div>
     <span class="text-lg font-medium">{{ site.name }}</span>
   </div>

src/_includes/partials/now/media-grid.liquid

@@ -8,7 +8,7 @@
     {% for item in media limit: count %}
       {% assign alt = item.alt | strip %}
       <a href="{{ item.url | stripUtm }}" title="{{ alt | escape }}">
-        <div class="relative block h-full"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
+        <div class="relative block h-full rounded-lg overflow-hidden"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
           <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300{% if item.title %} bg-cover-gradient{% endif %}"></div>
           <div class="absolute left-1 bottom-2 drop-shadow-md">
             {% if item.title %}
@@ -20,8 +20,7 @@
               </div>
             {% endif %}
           </div>
-          {%- capture size %}{% if shape == 'square' %}225px{% else %}180px{% endif %}{% endcapture -%}
+          {% image item.image, alt, 'rounded-lg w-full h-full [&>*]:h-full' %}
-          {% image item.image, alt, 'rounded-lg w-full h-full', size, loading %}
         </div>
       </a>
     {% endfor %}

src/_includes/partials/webmentions/comments.liquid

@@ -4,7 +4,9 @@
     {% for mention in mentions['in-reply-to'] %}
       <div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
         <a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
-          {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
+          <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500 rounded-full overflow-hidden">
+            {% image mention.author.photo, mention.author.name %}
+          </div>
           <div class="ml-3">
             <p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
             <p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>

src/_includes/partials/webmentions/interaction.liquid

@@ -12,7 +12,9 @@
       {% for mention in mentions[type] %}
         <li class="-ml-3 inline">
           <a href={{mention.url}}>
-            {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
+            <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 hover:border-pink-500 dark:hover:border-pink-500 rounded-full overflow-hidden">
+              {% image mention.author.photo, mention.author.name %}
+            </div>
           </a>
         </li>
       {% endfor %}

src/_includes/webrings/the-claw.liquid

@@ -1,6 +1,6 @@
 <div class="mb-4">
   <div class="w-full flex justify-center">
-    {% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring', '', '200px' %}
+    {% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring' %}
   </div>
   <h3 class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6 text-center">
     The Claw Webring

src/about.md

@@ -19,9 +19,9 @@ meta:
 ---
 
 <div class="flex items-center justify-center w-full not-prose mb-6">
-  <div class="border border-teal-700 dark:border-teal-300 bg-white rounded-full overflow-hidden p-4">
+  <div class="border border-teal-700 dark:border-teal-300 bg-white rounded-full overflow-hidden p-4 [&>*]:max-w-xs">
     {% capture about_alt %}{{ site.name }} - image by David Neal / @reverentgeek{% endcapture %}
-    {% image './src/assets/img/avatar.webp', about_alt, 'max-w-xs w-full h-auto', '600px', 'eager' %}
+    {% image './src/assets/img/avatar.webp', about_alt, 'w-full h-auto' %}
   </div>
 </div>
 <h1 class="text-xxl font-black -leading-tight tracking-normal dark:text-gray-200 md:text-3xl text-center">Hi, I'm Cory</h1>

src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md

@@ -169,7 +169,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
           </div>
           {%- capture artistImg %}{{ artist.name | artist }}{% endcapture -%}
           {%- capture artistName %}{{ artist.name | escape }}{% endcapture -%}
-          {% image artistImg, artistName, 'rounded-lg', '225px', 'eager' %}
+          {% image artistImg, artistName, 'rounded-lg' %}
         </div>
       </a>
     {% endfor %}
@@ -192,7 +192,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
             </div>
           </div>
           {%- capture albumName %}{{ album.name | escape }}{% endcapture -%}
-          {% image album.art, albumName, 'rounded-lg', '225px' %}
+          {% image album.art, albumName, 'rounded-lg' %}
         </div>
       </a>
     {% endfor %}
@@ -204,7 +204,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
 
 We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity.
 
-{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'w-full', '1200px' %}
+{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 [^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here.
 [^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file.

src/posts/2023/drying-up-now-page-templates-eleventy.md

@@ -7,6 +7,7 @@ tags:
   - development
   - JavaScript
 ---
+
 My now page consists of a number of similar sections — some bespoke text, a number of media grids and lists. The text is repeated once, the lists are easily templated out in [Liquid.js](https://liquidjs.com/) and the media grids are all quite similar. Given the prominence of the media grids on the page and the number of them I decided to consolidate them into a single template while also normalizing the data passed into them as best I could.<!-- excerpt -->
 
 If you want to skip all the reading, the diff for this [is here](https://github.com/cdransf/coryd.dev/commit/6dda493d7b6c0435bac8ee2a55179e9e1afb7acd). There were a few steps to take to get this done. First I went ahead and took an existing media template and went to work reconciling the slight differences between the artist, album, book, tv and movie displays as follows:
@@ -37,7 +38,7 @@ If you want to skip all the reading, the diff for this [is here](https://github.
             {% endif %}
           </div>
           {%- capture size %}{% if shape == 'square' %}225px{% else %}180px{% endif %}{% endcapture -%}
-          {% image item.image, alt, 'rounded-lg w-full h-full', size, loading %}
+          {% image item.image, alt, 'rounded-lg w-full h-full' %}
         </div>
       </a>
     {% endfor %}

src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md

@@ -10,7 +10,7 @@ I've been using Fastmail for years now and have explored a number of different a
 
 For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis.
 
-{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'w-full', '1200px', 'eager' %}
+{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 ## Alias-specific rules
 

src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md

@@ -65,6 +65,6 @@ Rendering the output is as simple as:
 
 {% endraw %}
 Leaving us with:
-{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'w-full', '1200px' %}
+{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 [^1]: At this point, a dev playground.

src/posts/2023/now-page-grouping-episodes-of-same-show.md

@@ -13,7 +13,7 @@ I made a minor update to how I'm normalizing TV data for display on my now page.
 
 By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show.
 
-{% image 'https://cdn.coryd.dev/blog/grouped-tv.jpg', 'Grouped TV episodes', 'w-full', '1200px' %}
+{% image 'https://cdn.coryd.dev/blog/grouped-tv.jpg', 'Grouped TV episodes', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 {% raw %}
 

src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md

@@ -168,6 +168,6 @@ Finally, if the page this all lives on is loaded by a client without JavaScript
 
 All of this, yields the single line at the bottom of this image — updated on each visit.
 
-{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'w-full', '1200px' %}
+{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 [^1]: Plus explicit conditions matching David Bowie and Minor Threat.

src/posts/2023/optimizing-for-performance-with-eleventy.md

@@ -132,7 +132,7 @@ This is most impactful on [my now page](https://coryd.dev/now) which is populate
 {% raw %}
 
 ```liquid
-{% image artistImg, artistName, 'rounded-lg', '225px', 'eager' %}
+{% image artistImg, artistName, 'rounded-lg' %}
 ```
 
 {% endraw %}
@@ -140,6 +140,6 @@ For this page in particular, the images that are rendered above the fold are set
 
 All of these boilerplate steps leave us with a quick to load, accessible and resilient site:
 
-{% image 'https://cdn.coryd.dev/blog/page-speed.jpg', 'Pagespeed scores for coryd.dev/now', 'w-full', '1200px' %}
+{% image 'https://cdn.coryd.dev/blog/page-speed.jpg', 'Pagespeed scores for coryd.dev/now', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 [^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines.

src/posts/2023/road-to-madness-apple-music-charts.md

@@ -133,7 +133,7 @@ _Cool_[^4]. GitHub triggers a rebuild of the site every hour, Netlify builds it,
 
 There are some significant issues with this approach: it doesn't capture listens to an album in a loop (like me playing the new Outer Heaven record today — hails 🤘). It can get wonky when my diff function hits a track order that elicits a false positive return value.
 
-{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of "charts"', 'w-full', '1200px' %}
+{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of charts', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 "But Cory there's last.fm." I hear this, I love last.fm, but I've got concerns about its age, ownership and maintenance. I don't want to be on the wrong end of a scream test when the wrong (right?) server rack gets decommissioned.
 

src/uses.md

@@ -26,7 +26,7 @@ meta:
 
 Software and services that I use for work and my own enjoyment.
 
-{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'w-full border border-purple-600 dark:border-purple-400  rounded-lg', '1200px' %}
+{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
 
 <h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">Computer setup</h3>