Add captions plugin

2 files changed, 20 insertions, 0 deletions

diff --git a/src/build/to-html.mjs b/src/build/to-html.mjs
index 5c08242..322144f 100644
--- a/src/build/to-html.mjs
+++ b/src/build/to-html.mjs
@@ -5,6 +5,7 @@ import remarkToc from "remark-toc";
 import remarkDirective from "remark-directive";
 import remarkMath from "remark-math";
 import remarkFrontmatter from "remark-frontmatter";
+import remarkCaptions from "remark-captions";
 import remarkRehype from "remark-rehype";
 import rehypeSlug from "rehype-slug";
 import rehypePicture from "rehype-picture";
@@ -27,6 +28,18 @@ const autoLinkOption = {
 
 const pictureOptions = {
   png: { avif: "image/avif" },
+  jpg: { avif: "image/avif" },
+};
+
+const captionsOptions = {
+  external: {
+    table: "Table:",
+    code: "Code:",
+    math: "Equation:",
+  },
+  internal: {
+    image: "Caption:",
+  },
 };
 
 const generator = unified()
@@ -36,6 +49,7 @@ const generator = unified()
   .use(remarkMath)
   .use(remarkDirective)
   .use(remarkSpecialBox)
+  .use(remarkCaptions, captionsOptions)
   .use(remarkFrontmatter, { type: "toml", marker: "-" })
   .use(remarkRehype, { allowDangerousHtml: true })
   .use(rehypeRaw)
@@ -54,6 +68,7 @@ const generatorMd = unified()
   .use(remarkMath)
   .use(remarkDirective)
   .use(remarkSpecialBox)
+  .use(remarkCaptions, captionsOptions)
   .use(remarkFrontmatter, { type: "toml", marker: "-" });
 
 const generatorHTML = unified()
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index c05bbfa..3425ad0 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -324,6 +324,11 @@ article {
       }
     }
   }
+
+  figcaption {
+    text-align: center;
+    padding: 5px 0;
+  }
 }
 
 .keybs {