feat: eleventy transform for images

src/posts/2023/2023-in-review.html

@@ -14,8 +14,8 @@ tags: ['books', 'music', 'development', 'Eleventy']
   <li><a href="https://www.last.fm/user/coryd_">I listened to a bunch of music</a></li>
   <li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
 </ul>
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true, imageMaxWidth: 320 %}
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8, imageMaxWidth: 320 %}
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true %}
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8 %}
 
 <p><strong><a href="https://coryd.dev">I wrote some things:</a></strong></p>
 <ul>

src/posts/2023/client-side-webmentions-in-nextjs.md

@@ -196,9 +196,5 @@ const Webmentions = dynamic(() => import('@/components/webmentions/WebmentionsCo
 export default Webmentions
 ```
 
-The final display looks like this:
-
-<img src="https://files.coryd.dev/v/NG8lHj24OsJilx7QuxWO+" alt="Example webmentions" style="width:100%;height:auto;margin:.5em 0" />
-
 [^1]: For my purposes, social media is GitHub, Mastodon and Medium. I've used the rest at various points and no longer have an interest in them for myriad reasons.
 [^2]: I've discussed this all a bit more in [this post](https://coryd.dev/blog/simple-api-fetch-hooks-with-swr).

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

@@ -204,8 +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.
 
-{% capture fallbackIcon %}{% tablericon "photo" "Albums and artists" %}{% endcapture %}
-{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'image__banner', 'lazy', 'banner', fallbackIcon %}
+<img src="https://cdn.coryd.dev/blog/albums-artists.jpg" alt="Albums and artists" class="image__banner" />
 
 [^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/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md

@@ -10,8 +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.
 
-{% capture fallbackIcon %}{% tablericon "photo" "A diagram of my Fastmail workflow" %}{% endcapture %}
-{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'image__banner', 'eager', 'banner', fallbackIcon %}
+<img src="https://cdn.coryd.dev/blog/fastmail-workflow.jpg" alt="A diagram of my Fastmail workflow" class="image__banner" loading="eager" />
 
 ## Alias-specific rules
 

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

@@ -65,7 +65,6 @@ Rendering the output is as simple as:
 
 {% endraw %}
 Leaving us with:
-{% capture fallbackIcon %}{% tablericon "photo" "Albums I'm looking forward to" %}{% endcapture %}
-{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'image__banner', 'eager', 'banner', fallbackIcon %}
+<img src="https://cdn.coryd.dev/blog/album-releases.jpg" alt="Albums I'm looking forward to" class="image__banner" />
 
 [^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', 'image__banner' %}
+<img src="https://cdn.coryd.dev/blog/grouped-tv.jpg" alt="Grouped TV episodes" class="image__banner" loading="eager" />
 
 {% raw %}
 

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

@@ -168,7 +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.
 
-{% capture fallbackIcon %}{% tablericon "photo" "Now playing" %}{% endcapture %}
-{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'image__banner', 'lazy', 'banner', fallbackIcon %}
+<img src="https://cdn.coryd.dev/blog/now-playing.jpg" alt="Now playing" class="image__banner" />
 
 [^1]: Plus explicit conditions matching David Bowie and Minor Threat.

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

@@ -138,6 +138,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', 'image__banner' %}
+<img src="https://cdn.coryd.dev/blog/page-speed.jpg" alt="Pagespeed scores for coryd.dev/now" class="image__banner" />
 
 [^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,8 +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.
 
-{% capture fallbackIcon %}{% tablericon "photo" "Charlie Day standing in front of charts" %}{% endcapture %}
-{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of charts', 'image__banner', 'lazy', 'banner', fallbackIcon %}
+<img src="https://cdn.coryd.dev/blog/charlie.jpg" alt="Charlie Day standing in front of charts" class="image__banner" />
 
 "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.