commit e7d320accd3ee12c92902bcbc37bc925b074a2c4
Author: Yash-Garg <me@yashgarg.dev>
Date:   Tue Aug 27 23:25:01 2024 +0530

    feat: add image captions

diff --git a/package.json b/package.json
index 5823535..d181904 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-citation": "^2.1.1",
+    "rehype-image-caption": "^2.0.6",
     "rehype-katex": "^7.0.1",
     "rehype-mathjax": "^6.0.0",
     "rehype-pretty-code": "^0.13.2",
@@ -109,4 +110,4 @@
     "tsx": "^4.17.0",
     "typescript": "^5.5.4"
   }
-}
+}
\ No newline at end of file
diff --git a/quartz.config.ts b/quartz.config.ts
index b6abbb2..391574c 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -71,6 +71,7 @@ const config: QuartzConfig = {
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
       Plugin.Latex({ renderEngine: "katex" }),
+      Plugin.FigureCaptions(),
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [
diff --git a/quartz/plugins/transformers/captions.ts b/quartz/plugins/transformers/captions.ts
new file mode 100644
index 0000000..6d10e8e
--- /dev/null
+++ b/quartz/plugins/transformers/captions.ts
@@ -0,0 +1,11 @@
+import rehypeImageCaption from "rehype-image-caption";
+import { QuartzTransformerPlugin } from "../types";
+
+export const FigureCaptions: QuartzTransformerPlugin = () => {
+    return {
+        name: "FigureCaptions",
+        htmlPlugins() {
+            return [[rehypeImageCaption]]
+        },
+    }
+}
\ No newline at end of file
diff --git a/quartz/plugins/transformers/index.ts b/quartz/plugins/transformers/index.ts
index 7908c86..7eb7431 100644
--- a/quartz/plugins/transformers/index.ts
+++ b/quartz/plugins/transformers/index.ts
@@ -10,3 +10,4 @@ export { OxHugoFlavouredMarkdown } from "./oxhugofm"
 export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
+export { FigureCaptions } from "./captions"
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index b0c09dc..279e531 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,3 +1,18 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+// Styling for Figures
+figure {
+    margin: 0;
+}
+
+figcaption {
+    text-align: center;
+    margin-top: .35em;
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+
+figure>img {
+    margin: 0;
+}
\ No newline at end of file