feat: ✨ add figcaption support

eleventy.config.js

@@ -20,6 +20,7 @@ import markdownItCallouts from 'markdown-it-obsidian-callouts';
 import markdownItCollapsible from 'markdown-it-collapsible';
 import markdownItDeflist from 'markdown-it-deflist';
 import markdownItFootnote from 'markdown-it-footnote';
+import markdownItImageFigures from 'markdown-it-image-figures';
 
 export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('./src/css/prism.css');
@@ -109,6 +110,7 @@ export default async function (eleventyConfig) {
       .use(markdownItCollapsible)
       .use(markdownItDeflist)
       .use(markdownItFootnote)
+      .use(markdownItImageFigures, { figcaption: true })
   );
 
   eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);

package-lock.json

@@ -29,6 +29,7 @@
         "markdown-it-collapsible": "^2.0.2",
         "markdown-it-deflist": "^3.0.0",
         "markdown-it-footnote": "^4.0.0",
+        "markdown-it-image-figures": "^2.1.1",
         "markdown-it-obsidian-callouts": "^0.3.1",
         "simple-icons": "^13.19.0",
         "tailwindcss": "^3.4.15",
@@ -5414,6 +5415,18 @@
       "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==",
       "license": "MIT"
     },
+    "node_modules/markdown-it-image-figures": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
+      "integrity": "sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "markdown-it": "*"
+      }
+    },
     "node_modules/markdown-it-obsidian-callouts": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/markdown-it-obsidian-callouts/-/markdown-it-obsidian-callouts-0.3.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "markdown-it-collapsible": "^2.0.2",
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
+    "markdown-it-image-figures": "^2.1.1",
     "markdown-it-obsidian-callouts": "^0.3.1",
     "simple-icons": "^13.19.0",
     "tailwindcss": "^3.4.15",

src/layouts/blogpost.njk

@@ -31,7 +31,7 @@ layout: base.njk
     </div>
   </header>
 
-  <section class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-blockquote:relative prose-blockquote:border-none prose-blockquote:px-6 prose-blockquote:py-10 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-inherit before:prose-blockquote:absolute before:prose-blockquote:left-0 before:prose-blockquote:right-0 before:prose-blockquote:top-8 before:prose-blockquote:-z-10 before:prose-blockquote:text-center before:prose-blockquote:text-8xl before:prose-blockquote:leading-[0] before:prose-blockquote:text-sky-600 before:prose-blockquote:content-[open-quote] after:prose-blockquote:absolute after:prose-blockquote:-bottom-5 after:prose-blockquote:left-0 after:prose-blockquote:right-0 after:prose-blockquote:-z-10 after:prose-blockquote:text-center after:prose-blockquote:text-8xl after:prose-blockquote:leading-[0] after:prose-blockquote:text-sky-600 after:prose-blockquote:content-[close-quote] before:prose-p:prose-blockquote:content-none after:prose-p:prose-blockquote:content-none first:prose-p:prose-blockquote:mt-0 last:prose-p:prose-blockquote:mb-0 prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl md:px-safe-offset-6 md:prose-blockquote:px-16 md:prose-blockquote:py-3 md:prose-blockquote:text-left md:before:prose-blockquote:top-0 md:before:prose-blockquote:text-left md:before:prose-blockquote:text-9xl md:after:prose-blockquote:-bottom-16 md:after:prose-blockquote:text-right md:after:prose-blockquote:text-9xl">
+  <section class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-blockquote:relative prose-blockquote:border-none prose-blockquote:px-6 prose-blockquote:py-10 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-inherit before:prose-blockquote:absolute before:prose-blockquote:left-0 before:prose-blockquote:right-0 before:prose-blockquote:top-8 before:prose-blockquote:-z-10 before:prose-blockquote:text-center before:prose-blockquote:text-8xl before:prose-blockquote:leading-[0] before:prose-blockquote:text-sky-600 before:prose-blockquote:content-[open-quote] after:prose-blockquote:absolute after:prose-blockquote:-bottom-5 after:prose-blockquote:left-0 after:prose-blockquote:right-0 after:prose-blockquote:-z-10 after:prose-blockquote:text-center after:prose-blockquote:text-8xl after:prose-blockquote:leading-[0] after:prose-blockquote:text-sky-600 after:prose-blockquote:content-[close-quote] before:prose-p:prose-blockquote:content-none after:prose-p:prose-blockquote:content-none first:prose-p:prose-blockquote:mt-0 last:prose-p:prose-blockquote:mb-0 prose-figcaption:text-center prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl md:px-safe-offset-6 md:prose-blockquote:px-16 md:prose-blockquote:py-3 md:prose-blockquote:text-left md:before:prose-blockquote:top-0 md:before:prose-blockquote:text-left md:before:prose-blockquote:text-9xl md:after:prose-blockquote:-bottom-16 md:after:prose-blockquote:text-right md:after:prose-blockquote:text-9xl">
     {{ content | safe }}
   </section>
 </article>