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;