Replace plugin rehype-figure with rehype-title-figure to add prop…

…er support for Alt text from markdown besides caption text

package.json

@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "rehype-class-names": "^2.0.0",
-    "rehype-figure": "^1.0.1",
     "rehype-plugin-image-native-lazy-loading": "^1.2.0",
     "rehype-rewrite": "^4.0.2",
+    "rehype-title-figure": "^0.1.2",
     "svelte-icons-pack": "^3.1.3"
   }
 }

svelte.config.js

@@ -2,19 +2,15 @@ import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 import { mdsvex } from "mdsvex";
 import { visit } from "unist-util-visit";
-import figures from "rehype-figure";
+import rehypeTitleFigure from 'rehype-title-figure'
 import classNames from "rehype-class-names";
-//import lazyLoadPlugin from "rehype-plugin-image-native-lazy-loading";
 
 const classNamesOptions = {
   h2: "section",
   h3: "subsection",
   h4: "subsubsection",
   a: "link",
-};
-
-const figuresOptions = {
-  className: "figure text-center",
+  figure: "figure"
 };
 
 const blogImages = () => {
@@ -36,10 +32,9 @@ const blogImages = () => {
 const mdsvexOptions = {
   extensions: [".md"],
   rehypePlugins: [
-    [figures, figuresOptions],
+    [rehypeTitleFigure],
     [classNames, classNamesOptions],
     blogImages,
-    //lazyLoadPlugin,
   ],
   layout: {
     blog: "src/lib/blocks/Post.svelte",

tailwind.config.js

@@ -34,12 +34,14 @@ export default {
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              "& img": {
-                boxShadow:
-                  "rgba(0, 0, 0, 0.04) 0px 0.5em 2em 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
-                borderRadius: "0.6em",
-              },
             },
+            img: {
+              boxShadow:
+                "rgba(0, 0, 0, 0.04) 0px 0.5em 2em 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
+              borderRadius: "0.6em",
+              marginLeft: "auto",
+              marginRight: "auto"
+            }
           },
         },
         md: {