blog/captions.patch
2026-01-23 15:19:35 -08:00

89 lines
2.5 KiB
Diff

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