[Web] Add ability to caption and resize figures

Index page: add a caption
Not found page: resize to 75% parent width

web/package.json

@@ -28,6 +28,7 @@
     "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-attrs": "^4.1.3",
     "@types/markdown-it-emoji": "^3.0.1",
     "@types/node": "~20.14.14",
     "@types/plotly.js": "^2.33.3",

web/src/main/pages/IndexPage.md

@@ -13,4 +13,4 @@ interested in the cross-connections between code, music, art, and life"
 
 Hello there! I am a seasoned software developer and composer in the Greater Boston area. I’m interested in the cross-connections between code, music, art, and life.
 
-![The way home](__ASSETS_BASE_URL/the-way-home.png)
+![The way home](__ASSETS_BASE_URL/the-way-home.png "Mt. Blanc peeks out from a layer of clouds.")

web/src/main/pages/NotFound.md

@@ -12,4 +12,4 @@
 
 The page you were looking for was not found. So, here’s Ronnie instead:
 
-![Ronnie](__ASSETS_BASE_URL/ronnie.png)
+![Ronnie](__ASSETS_BASE_URL/ronnie.png){.w75}

web/src/shared/assets/main.css

@@ -189,14 +189,20 @@ div#engrave-area {
 }
 
 figure {
-  margin: 2em 0;
+  margin: 2em auto;
 }
 
 figure > img {
   width: 100%;
   box-shadow: 0 0 8px var(--grey-darker);
 }
 
+figcaption {
+  text-align: center;
+  font-size: smaller;
+  font-style: italic;
+}
+
 div.layout-standard {
   max-width: 50em;
   min-height: calc(100vh - 2em);

web/src/shared/assets/utils.css

@@ -6,3 +6,42 @@
   text-align: right;
 }
 
+figure.w50 {
+  width: 50%;
+}
+
+figure.w55 {
+  width: 55%;
+}
+
+figure.w60 {
+  width: 60%;
+}
+
+figure.w65 {
+  width: 65%;
+}
+
+figure.w70 {
+  width: 70%;
+}
+
+figure.w75 {
+  width: 75%;
+}
+
+figure.w80 {
+  width: 80%;
+}
+
+figure.w85 {
+  width: 85%;
+}
+
+figure.w90 {
+  width: 90%;
+}
+
+figure.w95 {
+  width: 95%;
+}

web/vite.config.ts

@@ -16,6 +16,7 @@ import path from "node:path";
 
 // markdown-it plugins
 import { full as mdEmoji } from "markdown-it-emoji";
+import mdAttr from "markdown-it-attrs";
 import mdSub from "markdown-it-sub";
 import mdSup from "markdown-it-sup";
 import mdAnchor from "markdown-it-anchor";
@@ -56,6 +57,8 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
         markdownItSetup(md) {
           md.use(mdEmoji);
 
+          md.use(mdAttr);
+
           // enable subscripts using ~X~
           md.use(mdSub);
 
@@ -65,8 +68,8 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
           // automatically generate IDs for h3’s
           md.use(mdAnchor, { tabIndex: false, level: [3] });
 
-          // place images inside figures
-          md.use(mdImageFigures);
+          // place images inside figures, copying classes set via markdown-it-attrs to the figure
+          md.use(mdImageFigures, { figcaption: "title", copyAttrs: "class" });
         },
       }),