Support separate alt text and captions in Markdown content (#14)

* Replace plugin `rehype-figure` with `rehype-title-figure` to add proper support for Alt text from markdown besides caption text
* Add proper alt text to affected main page images
* Fix a regression caused by the plugin affecting images in the front page
* Fix an issue that generated a build error when double quotes were used in the alt text of an image

---------

Co-authored-by: C.A.M. Gerlach <[email protected]>

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",
+    "remark-smartypants": "^3.0.2",
     "svelte-icons-pack": "^3.1.3"
   }
 }

src/app.css

@@ -25,6 +25,6 @@ a:not(.menu-link):not(.icon-link):not(.button):not(.post-link):not(.card-link):h
   }
 
   & figcaption {
-    @apply text-neutral-600 dark:text-neutral-300 text-[0.95rem] mt-3;
+    @apply text-neutral-600 dark:text-neutral-300 text-[0.95rem] mt-3 text-center;
   }
 }

src/lib/content/code-analysis.md

@@ -1 +1 @@
-![Get in-depth insight on issues and improvements with your code](/assets/media/code_analysis.webp)
+![Spyder Code Analysis pane showing the results for a file, including an overall score and a listing of errors, warnings, refactoring and convention issues; each has a name, code, line number and message](/assets/media/code_analysis.webp "Get in-depth insight on issues and improvements with your code")

src/lib/content/conda.md

@@ -1 +1 @@
-![Work with multiple environments at once](/assets/media/conda.webp)
+![Spyder Consoles menu with the "New console in environment" submenu selected, showing a listing of Conda environments by name, type and Python version](/assets/media/conda.webp "Work with multiple environments at once")

src/lib/content/developer-tools.md

@@ -1 +1 @@
-![Take advantage of real-time hints and help to improve your code](/assets/media/developer_tools.webp)
+![Spyder Editor pane, with several real-time code analysis warnings shown on different lines and the affected code underlined. A hovered-over warning is showing its associated message, while the Source menu is open to the left showing the "Underline errors and warnings" option enabled](/assets/media/developer_tools.webp "Take advantage of real-time hints and help to improve your code")

src/lib/content/matplotlib.md

@@ -1 +1 @@
-![Browse all your plots in a single place](/assets/media/matplotlib.webp)
+![Spyder plots pane displaying a 3D visualization in the main panel, with options above for saving, zooming or removing it, and a right panel with thumbnails of other previous plots](/assets/media/matplotlib.webp "Browse all your plots in a single place")

src/lib/content/numpy.md

@@ -1 +1 @@
-![Explore and edit multi-dimensional arrays](/assets/media/numpy.webp)
+![Spyder Variable Explorer pane displaying a three-dimensional NumPy in a "spreadsheet" style view, with cell colors forming a heatmap of values and options to adjust the axis and index of the array slice](/assets/media/numpy.webp "Explore and edit multi-dimensional arrays")

src/lib/content/pandas.md

@@ -1 +1 @@
-![Interact with the contents of your dataframes](/assets/media/pandas.webp)
+![Spyder Variable Explorer pane showing a pandas dataframe containing weather observations in a "spreadsheet" style view, with multi-level index columns, per-column heatmaps and toolbar options for displaying and editing the data](/assets/media/pandas.webp "Interact with the contents of your dataframes")

src/lib/content/projects.md

@@ -1 +1 @@
-![Easily switch between projects and browse their files](/assets/media/projects.webp)
+![Spyder Editor pane showing the Projects pane to its left, listing the files and directories of a project in a tree-style layout](/assets/media/projects.webp "Easily switch between projects and browse their files")

src/lib/content/search.md

@@ -1 +1 @@
-![Quickly find uses of a variable or word across files](/assets/media/search.webp)
+![Spyder Find pane, showing an example search for a method name, buttons toggling search options, an exclude field listing various file extensions, a dropdown for search location and a count and list of results per-file, including the file name and path and the line, column and context for each result](/assets/media/search.webp "Quickly find uses of a variable or word across files")

src/lib/content/sympy.md

@@ -1 +1 @@
-![View rich symbolic expressions rendered with LaTeX](/assets/media/sympy.webp)
+![Spyder's IPython Console pane, showing individual lines of code constructing SymPy expressions, and several complex symbolic formulas rendered inline in publication-style rich mathematical notation](/assets/media/sympy.webp "View rich symbolic expressions rendered with LaTeX")

svelte.config.js

@@ -2,19 +2,16 @@ 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 smartypants from "remark-smartypants";
 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 = () => {
@@ -32,14 +29,27 @@ const blogImages = () => {
   };
 };
 
+const escapeQuotes = () => {
+  return (tree) => {
+    visit(tree, 'image', (node) => {
+      if (node.alt) {
+        node.alt = node.alt.replace(/"/g, '"');
+      }
+    });
+  };
+}
+
 /** @type {import('mdsvex').MdsvexOptions} */
 const mdsvexOptions = {
   extensions: [".md"],
+  remarkPlugins: [
+    smartypants,
+    escapeQuotes
+  ],
   rehypePlugins: [
-    [figures, figuresOptions],
-    [classNames, classNamesOptions],
     blogImages,
-    //lazyLoadPlugin,
+    rehypeTitleFigure,
+    [classNames, classNamesOptions],
   ],
   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: {