feat: cleaning up newer posts using old shortcode

also adding markdown-it-attrs to add attrs to various markdown elements!

config/plugins/markdown.js

@@ -4,6 +4,7 @@ import markdownItPrism from "markdown-it-prism";
 import markdownItAbbr from "markdown-it-abbr";
 import markdownItAnchor from "markdown-it-anchor";
 import markdownItImplicitFigures from "markdown-it-image-figures";
+import markdownItAttrs from "markdown-it-attrs";
 
 const markdown = markdownIt({
   html: true,
@@ -19,7 +20,8 @@ const markdown = markdownIt({
   })
   .use(markdownItPrism, {
     defaultLanguage: "plaintext",
-  });
+  })
+  .use(markdownItAttrs);
 
 markdown.renderer.rules.footnote_block_open = (_tokens, _idx, options) => {
   return (

config/shortcodes/image.js

@@ -1,76 +0,0 @@
-import Image from "@11ty/eleventy-img";
-
-const stringifyAttributes = (attributeMap) => {
-  return Object.entries(attributeMap)
-    .map(([attribute, value]) => {
-      if (typeof value === "undefined") return "";
-      return `${attribute}="${value}"`;
-    })
-    .join(" ");
-};
-
-const imageShortcode = async (
-  src,
-  alt = "",
-  caption = "",
-  className = undefined,
-  placeholder = "",
-  widths = [400, 800, 1280],
-  formats = ["webp", "jpeg"],
-  sizes = "100vw",
-) => {
-  if (!src) {
-    return `<div class="image-placeholder">${placeholder}</div>`;
-  }
-
-  const metadata = await Image(src, {
-    widths: [...widths, null],
-    formats: [...formats, null],
-    outputDir: "dist/assets/images",
-    urlPath: "/assets/images",
-    sharpOptions: {
-      animated: true,
-    },
-    cacheOptions: {
-      duration: "7d",
-    },
-  });
-
-  const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
-
-  const imageSources = Object.values(metadata)
-    .map((imageFormat) => {
-      return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
-        .map((entry) => entry.srcset)
-        .join(", ")}" sizes="${sizes}">`;
-    })
-    .join("\n");
-
-  const imageAttributes = stringifyAttributes({
-    src: lowsrc.url,
-    width: lowsrc.width,
-    height: lowsrc.height,
-    alt,
-    loading: "lazy",
-    decoding: "async",
-  });
-
-  const imageElement = caption
-    ? `<figure class="[ flow flex-col items-center justify-center ${className ? ` ${className} ` : ""}]">
-				<picture class="flex items-center justify-center">
-					${imageSources}
-					<img
-					${imageAttributes}>
-				</picture>
-				<figcaption>${caption}</figcaption>
-			</figure>`
-    : `<picture class="[ flex-col items-center justify-center ${className ? ` ${className} ` : ""}]">
-				${imageSources}
-				<img
-				${imageAttributes}>
-			</picture>`;
-
-  return imageElement;
-};
-
-export default imageShortcode;

eleventy.config.js

@@ -84,6 +84,8 @@ export default function (eleventyConfig) {
       loading: "lazy",
       decoding: "async",
     },
+
+    failOnError: false,
   });
 
   // 	--------------------- Passthrough File Copy -----------------------

package-lock.json

@@ -23,6 +23,7 @@
         "markdown-it": "^14.0.0",
         "markdown-it-abbr": "^2.0.0",
         "markdown-it-anchor": "^8.6.7",
+        "markdown-it-attrs": "^4.3.1",
         "markdown-it-footnote": "^4.0.0",
         "markdown-it-image-figures": "^2.1.1",
         "markdown-it-prism": "^2.3.0",
@@ -2938,6 +2939,19 @@
         "markdown-it": "*"
       }
     },
+    "node_modules/markdown-it-attrs": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.3.1.tgz",
+      "integrity": "sha512-/ko6cba+H6gdZ0DOw7BbNMZtfuJTRp9g/IrGIuz8lYc/EfnmWRpaR3CFPnNbVz0LDvF8Gf1hFGPqrQqq7De0rg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "markdown-it": ">= 9.0.0"
+      }
+    },
     "node_modules/markdown-it-footnote": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
@@ -6920,6 +6934,13 @@
       "dev": true,
       "requires": {}
     },
+    "markdown-it-attrs": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.3.1.tgz",
+      "integrity": "sha512-/ko6cba+H6gdZ0DOw7BbNMZtfuJTRp9g/IrGIuz8lYc/EfnmWRpaR3CFPnNbVz0LDvF8Gf1hFGPqrQqq7De0rg==",
+      "dev": true,
+      "requires": {}
+    },
     "markdown-it-footnote": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "markdown-it": "^14.0.0",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-anchor": "^8.6.7",
+    "markdown-it-attrs": "^4.3.1",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-image-figures": "^2.1.1",
     "markdown-it-prism": "^2.3.0",

src/css/global/global-styles.css

@@ -134,7 +134,8 @@ pre {
   overflow-x: auto;
 }
 
-figure {
+figure,
+picture {
   display: flex;
   flex-direction: column;
   align-items: center;

src/css/utilities/image.css

@@ -1,13 +1,7 @@
 .image-shrink {
-  img,
+  max-width: 50%;
-  source {
-    max-width: 50%;
-  }
 }
 
 .image-tiny {
-  img,
+  max-width: 25%;
-  source {
-    max-width: 25%;
-  }
 }

src/posts/2024-11-21-weekly-notes-10.md

@@ -108,7 +108,7 @@ I can't pinpoint the origin of this phrase, but it goes something along the line
 
 I'm forcing myself to stop writing about this. I'm beginning to ramble. But know that I have hope - hope for the future and that things will get better. Even if things are rough, I want to keep getting up and trying again. Spit out a tooth and rise for another go.
 
-{% image "https://cdn.wonderfulfrog.com/images/hope-tweet.png", "Screenshot of a post that says: People speak of hope as if it is this delicate, ephemeral thing made of whispers and spider's webs. It's not. Hope has dirt on her face, blood on her knuckles, the grid of the cobblestones in her hair, and just spat out a tooth as she rises for another go.", "Hope is gritty" %}
+![Screenshot of a post that says: People speak of hope as if it is this delicate, ephemeral thing made of whispers and spider's webs. It's not. Hope has dirt on her face, blood on her knuckles, the grid of the cobblestones in her hair, and just spat out a tooth as she rises for another go.](https://cdn.wonderfulfrog.com/images/hope-tweet.png "Hope is gritty"){.image-shrink}
 
 ## Developing
 
@@ -124,17 +124,17 @@ To add onto the project spree - I also built a rudimentary invoicing system in E
 
 I'm continuing to play _World of Warcraft_ and having a great time. As I mentioned earlier, I've found a group of players to tackle the end-game content. We've managed to take down the entire Nerub-ar Palace raid on Normal, and we're working on the Heroic version (which is like Hard mode, with Mythic being Very Hard).
 
-{% image "https://cdn.wonderfulfrog.com/images/wow/dracthyr-warrior.png", "A humanoid looking dragon stands in the middle of the frame, looking toward the bottom right of the viewer. He has deep blue scales, that transition into light blue chitinous plates around the chest and stomach. On his waist and thighs are heavy plate tassets. He has folded bat-like wings. He wears heavy teal plate pauldrons on his shoulders.", "I do love being able to literally spread my wings and fly.", "image-shrink" %}
+![A humanoid looking dragon stands in the middle of the frame, looking toward the bottom right of the viewer. He has deep blue scales, that transition into light blue chitinous plates around the chest and stomach. On his waist and thighs are heavy plate tassets. He has folded bat-like wings. He wears heavy teal plate pauldrons on his shoulders.](https://cdn.wonderfulfrog.com/images/wow/dracthyr-warrior.png "I do love being able to literally spread my wings and fly."){.image-shrink}
 
 I've since made (another) Warrior, because I can't stop making them. I love playing Warriors. They're so straightforward in terms of class fantasy. I have big sword (or smaller sword and big shield). I hit things with pointy thing. I yell to make my allies feel stronger. Me good hitter.
 
-{% image "https://cdn.wonderfulfrog.com/images/wow/dark-iron-warrior.png", "Screenshot from World of Warcraft. A dwarf with dark slate-blue skin is centered, facing to the right of the viewer. He has glowing orange eyes, and a black hair beard that is singed and glowing a reddish orange along the bottom edges. He is wearing a set of leather gear.", "I have to get used to being a little smaller than before.", "image-shrink" %}
+![Screenshot from World of Warcraft. A dwarf with dark slate-blue skin is centered, facing to the right of the viewer. He has glowing orange eyes, and a black hair beard that is singed and glowing a reddish orange along the bottom edges. He is wearing a set of leather gear.](https://cdn.wonderfulfrog.com/images/wow/dark-iron-warrior.png "I have to get used to being a little smaller than before."){.image-shrink}
 
 I started with a Dracthyr, which are the dragon/human hybrid, but found that I missed being able to transmog (for non-WoW players, play dressup). Much like clothes, I like having the freedom to tweak my look. I've already made a Night Elf, I don't really like playing as Humans (boring, I already am one), and don't like many of the other Alliances races. I settled on a Dark Iron Dwarf, since they have a gruff and funny voice.
 
 ## Reading
 
-{% image "https://cdn.wonderfulfrog.com/images/the-crystal-shard-cover.jpg", "The cover features a green crystal with various character's reflections. A hand is reaching toward the crystal from the bottom right.", "", "image-shrink" %}
+![The cover features a green crystal with various character's reflections. A hand is reaching toward the crystal from the bottom right.](https://cdn.wonderfulfrog.com/images/the-crystal-shard-cover.jpg){.image-shrink}
 
 I finished the first three Drizzt books and I've jumped onto the next trilogy, starting with _The Crystal Shard_!
 
@@ -142,19 +142,19 @@ I finished the first three Drizzt books and I've jumped onto the next trilogy, s
 
 I've seen a few movies I'd like to mention!
 
-{% image "https://cdn.wonderfulfrog.com/images/your-monster-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/your-monster-poster.jpg){.image-shrink}
 
 The first one is [Your Monster](https://letterboxd.com/film/your-monster-2024/) which is all about reconnecting with your childhood monster in a closet. It's a charming movie that had me smiling throughout. So fun! A perfect pairing to [Lisa Frankenstein](https://letterboxd.com/film/lisa-frankenstein/), if you wanted to do a home movie double-header.
 
-{% image "https://cdn.wonderfulfrog.com/images/dracula-a-d-1972-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/dracula-a-d-1972-poster.jpg){.image-shrink}
 
 For Halloween we watched [Dracula](https://letterboxd.com/film/dracula/) with Bela Lugosi, which holds up remarkably well for a movie made almost 100 years ago! After that was [Dracula A.D. 1972](https://letterboxd.com/film/dracula-ad-1972/) which features Christopher Lee as Dracula and Peter Cushing as van Helsing. It features a contemporary setting which is unusual for most Dracula movies. I wouldn't call it an especially good movie, but it was quite entertaining. I have a soft spot for both actors, so being able to see them together was a treat. The soundtrack wasn't half bad either, all things considered. The tie-in with Stoneground was amusing (and I know you'll be surprised to learn they didn't last long after this movie was released). All in all a very spoooooky Halloween night for us.
 
-{% image "https://cdn.wonderfulfrog.com/images/tetris-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/tetris-poster.jpg){.image-shrink}
 
 Next up is [Tetris](https://letterboxd.com/film/tetris/)! This one was near and dear to me as I spent the better part of my early childhood absolutely hooked to my Game Boy and Tetris (at least until Pokémon came out). This movie represents a _somewhat_ historically accurate retelling with some fun flourishes to make it prime movie material. If you're like me and have a love of all things Tetris (or maybe Game Boys), then you'll have a great time with this one.
 
-{% image "https://cdn.wonderfulfrog.com/images/flow-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/flow-poster.jpg){.image-shrink}
 
 Most recently is [Flow](https://letterboxd.com/film/flow-2024/) which was an incredible journey. The filmmakers are masters at playing with your emotions, employing every "animals in a movie" trick to incredible results. You'd be overjoyed one moment, and wailing in sadness the next. It's honestly a master craft of emotional manipulation (and I mean that positively). I loved watching this and experiencing the story unfold. I loved the characters and world. It was so engrossing!
 
@@ -177,5 +177,7 @@ Whatever comes my way, I know that I have my family and my friends with me. That
 Until next time! 👋
 
 [^1]: I've seen this song-and-dance enough times to know that even if they say they'll still maintain Arc, they will drop it faster than you can say "profit" once their next product takes off, or whatever it happens to be that makes them infinite money.
+
 [^2]: Yes, there are a contingency of Republican voters who _are_ all of the above, but they are certainly a vocal minority.
+
 [^3]: I got the phrase from [this New York Times article](https://www.nytimes.com/2011/05/01/magazine/mag-01Riff-t.html) (sorry, in my defence it was before 2016). To me the term "cultural vegetables" represent pieces of media that we don't necessarily enjoy all that much (or maybe you do), but are part of an important cultural moment that defined a genre, movement, or what-have-you. See also "seminal work".

src/posts/2025-01-02-watching-in-2024.md

@@ -13,7 +13,7 @@ Looking back at my [Letterboxd](https://letterboxd.com/wonderfulfrog/), I watche
 
 I saw plenty of great movies this year, but there were a few I think that rose above the rest!
 
-{% image "https://cdn.wonderfulfrog.com/images/movies/anatomy-of-a-fall-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/movies/anatomy-of-a-fall-poster.jpg){.image-shrink}
 
 ### Anatomy of a Fall
 
@@ -21,19 +21,19 @@ I never thought I'd be so enthralled by a courtroom drama (but then again I do l
 
 I want to go into more detail but wouldn't dare accidentally spoil something. I highly encourage anyone who enjoys a drama to watch this. There isn't a wasted moment.
 
-{% image "https://cdn.wonderfulfrog.com/images/movies/the-wild-robot-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/movies/the-wild-robot-poster.jpg){.image-shrink}
 
 ### The Wild Robot
 
 An absolutely stunningly beautiful film. A heartwarming story. Everything about this movie made me so happy and joyful.
 
-{% image "https://cdn.wonderfulfrog.com/images/movies/sugarcane-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/movies/sugarcane-poster.jpg){.image-shrink}
 
 ### Sugarcane
 
 [I wrote about this movie](/posts/sugarcane/) a few months ago. It's had a lasting impression. Please watch it, if you can. Especially if you're Canadian.
 
-{% image "https://cdn.wonderfulfrog.com/images/movies/perfect-days-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/movies/perfect-days-poster.jpg){.image-shrink}
 
 ### Perfect Days
 
@@ -45,13 +45,13 @@ As far as movies go that I saw in 2024, this one was my favourite.
 
 Not a lot of new TV this year! We kept with the classics. We watched the entirety of _Frasier_, and our other favourites. That said, there were two notable shows that we watched!
 
-{% image "https://cdn.wonderfulfrog.com/images/tv/strange-new-worlds-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/tv/strange-new-worlds-poster.jpg){.image-shrink}
 
 ### Star Trek: Strange New Worlds
 
 I didn't have a lot of hope for the future of Star Trek after watching a few episodes of Picard (I'm certain the show has its fans, it's just not for me), but seeing Strange New Worlds reignited my hope for more Star Trek. This show just _gets it right_, and I love the entire cast. My favourites are Dr. M'Benga and Christine Chapel, but I think everyone on the show is great! I was so excited to see courtroom episodes again.
 
-{% image "https://cdn.wonderfulfrog.com/images/tv/lower-decks-poster.jpg", "", "", "image-shrink" %}
+![](https://cdn.wonderfulfrog.com/images/tv/lower-decks-poster.jpg){.image-shrink}
 
 ### Star Trek: Lower Decks