feat(blog): add clickable images that link to full-size versions

Adds a rehype plugin that wraps markdown images in anchor tags pointing
to the original image. Images open in a new tab and have a subtle
zoom-in cursor and hover effect to indicate clickability.

Author: CalvinAllen

astro.config.mjs

@@ -2,6 +2,8 @@
 import { defineConfig } from 'astro/config';
 import tailwindcss from '@tailwindcss/vite';
 import sitemap from '@astrojs/sitemap';
+import rehypeImageLinks from './src/plugins/rehype-image-links.js';
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://www.codingwithcalvin.net',
@@ -14,6 +16,7 @@ export default defineConfig({
     shikiConfig: {
       theme: 'github-dark',
       wrap: true
-    }
+    },
+    rehypePlugins: [rehypeImageLinks]
   }
 });

src/plugins/rehype-image-links.js

@@ -0,0 +1,37 @@
+import { visit } from "unist-util-visit";
+
+/**
+ * Rehype plugin to wrap images in links to their full-size versions.
+ * Skips images that are already wrapped in links.
+ */
+export default function rehypeImageLinks() {
+  return (tree) => {
+    visit(tree, "element", (node, index, parent) => {
+      // Only process img elements
+      if (node.tagName !== "img") return;
+
+      // Skip if already wrapped in a link
+      if (parent?.tagName === "a") return;
+
+      // Skip if no src
+      const src = node.properties?.src;
+      if (!src) return;
+
+      // Create the wrapper anchor element
+      const wrapper = {
+        type: "element",
+        tagName: "a",
+        properties: {
+          href: src,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class: "image-link",
+        },
+        children: [node],
+      };
+
+      // Replace the img with the wrapped version
+      parent.children[index] = wrapper;
+    });
+  };
+}

src/styles/global.css

@@ -95,6 +95,25 @@ code {
   margin-bottom: 1.5em;
 }
 
+/* Clickable images */
+.prose a.image-link {
+  display: block;
+  text-decoration: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.prose a.image-link:hover {
+  text-decoration: none;
+  transform: scale(1.01);
+  box-shadow: 0 4px 20px rgba(51, 145, 203, 0.3);
+}
+
+.prose a.image-link img {
+  margin-top: 0;
+  margin-bottom: 0;
+  cursor: zoom-in;
+}
+
 .prose h2 {
   margin-top: 2em;
   margin-bottom: 1em;