feature: add image caption and image rounding

Author: hieuddo

package.json

@@ -26,15 +26,22 @@
     "reading-time": "^1.5.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
+    "rehype-parse": "^9.0.1",
+    "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
     "remark-html": "^16.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.4.0",
-    "turndown": "^7.2.2"
+    "turndown": "^7.2.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/hast": "^3.0.4",
     "@types/jsdom": "^27.0.0",
     "@types/node": "^20",
     "@types/react": "^19",

pnpm-lock.yaml

@@ -89,3 +89,22 @@ a:hover {
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
+
+/* Figure and figcaption styling */
+.prose figure.image-figure {
+  margin: 2rem 0;
+}
+
+.prose figure.image-figure img {
+  margin: 0;
+  border-radius: 0.5rem;
+}
+
+.prose figure.image-figure figcaption {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text-light);
+  text-align: center;
+  font-style: italic;
+}

src/app/globals.css

@@ -24,7 +24,7 @@ export function PostCard({ post }: PostCardProps) {
     <article className="group flex flex-col bg-white">
       <Link href={`/blog/${post.slug}`} className="mb-4 block">
         {post.featuredImage && (
-          <div className="relative aspect-video overflow-hidden">
+          <div className="relative aspect-video overflow-hidden rounded">
             <Image
               src={post.featuredImage}
               alt={post.title}

src/components/PostCard.tsx

@@ -4,6 +4,11 @@ import matter from 'gray-matter';
 import { remark } from 'remark';
 import html from 'remark-html';
 import gfm from 'remark-gfm';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+import rehypeFigure from './rehype-figure';
 
 const postsDirectory = path.join(process.cwd(), 'content', 'posts');
 
@@ -233,9 +238,12 @@ export function getAllPostSlugs(): string[] {
 }
 
 export async function markdownToHtml(markdown: string): Promise<string> {
-  const result = await remark()
+  const result = await unified()
+    .use(remarkParse)
     .use(gfm)
-    .use(html, { sanitize: false })
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeFigure)
+    .use(rehypeStringify, { allowDangerousHtml: true })
     .process(markdown);
   return result.toString();
 }

src/lib/markdown-posts.ts

@@ -0,0 +1,64 @@
+import { visit } from 'unist-util-visit';
+import type { Root, Element, Parent, ElementContent } from 'hast';
+
+/**
+ * Rehype plugin to wrap images in figure elements with figcaption
+ * Uses the image's alt text as the caption
+ */
+export default function rehypeFigure() {
+  return (tree: Root) => {
+    visit(tree, 'element', (node: Element, index, parent: Parent | undefined) => {
+      // Only process img elements
+      if (
+        node.tagName === 'img' &&
+        parent &&
+        index !== undefined
+      ) {
+        const parentElement = parent as Element;
+        const isInParagraph = parent.type === 'element' && parentElement.tagName === 'p';
+        const isInRoot = parent.type === 'root';
+
+        if (!isInParagraph && !isInRoot) {
+          return;
+        }
+
+        const alt = node.properties?.alt as string;
+
+        // Create figure element
+        const figure: Element = {
+          type: 'element',
+          tagName: 'figure',
+          properties: {
+            className: ['image-figure'],
+          },
+          children: [
+            {
+              ...node,
+              properties: {
+                ...node.properties,
+              },
+            },
+          ],
+        };
+
+        // Add figcaption if alt text exists
+        if (alt && alt.trim()) {
+          figure.children.push({
+            type: 'element',
+            tagName: 'figcaption',
+            properties: {},
+            children: [
+              {
+                type: 'text',
+                value: alt,
+              },
+            ],
+          });
+        }
+
+        // Replace the image with the figure
+        parent.children[index] = figure as ElementContent;
+      }
+    });
+  };
+}