fix: properly handles classes on markdown images

src/components/MarkdownImage.astro

@@ -1,26 +1,28 @@
 ---
 import type { ImageMetadata } from "astro";
+import type { HTMLAttributes } from "astro/types";
 import md from "markdown-it";
 import type { Props as ImageProps } from "./Image.astro";
 import Image from "./Image.astro";
 
-type Props = Omit<ImageProps, "src"> & {
+type Props = Omit<ImageProps, "src" | "slot"> & {
   src: Promise<{ default: ImageMetadata }>;
   caption?: string;
+  figureProps: HTMLAttributes<"figure">;
 };
 
-let { alt, caption } = Astro.props;
+let { alt, caption, src, figureProps, ...props } = Astro.props;
 
 if (caption) {
   caption = md({}).renderInline(caption);
 }
 
-const src = (await Astro.props.src).default;
+const resolvedSrc = (await src).default;
 ---
 
-<figure>
-  <a href={src.src}>
-    <Image src={src} alt={alt} />
+<figure {...figureProps ?? {}}>
+  <a href={resolvedSrc.src}>
+    <Image src={resolvedSrc} alt={alt} {...props} />
   </a>
   {caption && <figcaption set:html={caption} />}
 </figure>

src/content/wiki/computers/vscodepico8/vscodepico8.mdx

@@ -13,7 +13,7 @@ I like [PICO-8, the fantasy console by Lexaloffle](https://www.lexaloffle.com/pi
   src={import("./pico8.png")}
   alt="The PICO-8 code editor, its window is really small"
   caption="The PICO-8 window. It's small"
-  classes="pixelated"
+  class="pixelated"
 />
 
 However, I despise programming in its window, it's **really** small, promote bad code design due to its restrictions and well, overall isn't that comfortable. Over the years, I got really used to having my code on one screen and the result on the other but this unfortunately isn't possible with PICO-8. I think promoting faster iterations would be really beneficial since it's often used for fast prototyping or jams but hey, I'm not the devs 🤷‍♀️
@@ -124,7 +124,7 @@ Start-Process .\reload-pico8.exe
 
 And to reload PICO-8, this AHK script was used:
 
-```plaintext
+```
 if WinExist("ahk_exe pico8.exe")
     WinActivate ; use the window found above
     SendInput, ^{r}

src/content/wiki/floristry/flowerreadings/flowerreadings.mdx

@@ -20,7 +20,7 @@ These books are not designed to be read from cover to cover, instead they should
 <Image
   src={import("./flower-color-guide.png")}
   alt="Cover of Flower Color Guide"
-  classes="image-left"
+  figureProps={{ class: "image-left" }}
   caption="Flower Color Guide"
 />
 

src/content/wiki/linux/swedishkeyboard/swedishkeyboard.mdx

@@ -27,7 +27,7 @@ I use Wayland, but the process should be about the same on Xorg, first let's cre
 
 The final content will be the following (don't worry, we'll go through it!):
 
-```plaintext
+```
 default partial
 xkb_symbols "swe" {
     include "ca(fr)"

tailwind.config.cjs

@@ -3,7 +3,7 @@ const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{astro,js,ts,tsx,md}", "./content/**/*.mdx"],
+  content: ["./src/**/*.{astro,js,ts,tsx,md,mdx}"],
   corePlugins: {
     preflight: false,