feat(nx-dev): show alt text as label below markdown images

Author: juristr

nx-dev/nx-dev/styles/main.css

@@ -53,7 +53,7 @@ iframe[src*='youtube'] {
   aspect-ratio: 16 / 9;
 }
 .prose iframe,
-.prose img {
+.prose img:not(figure img) {
   display: block;
   margin: 2rem auto;
 }

nx-dev/ui-markdoc/src/lib/nodes/image.schema.ts

@@ -8,7 +8,7 @@ import {
 import { transformImagePath } from './helpers/transform-image-path';
 
 export const getImageSchema = (documentFilePath: string): Schema => ({
-  render: 'img',
+  render: 'figure',
   attributes: {
     src: { type: 'String', required: true },
     alt: { type: 'String', required: true },
@@ -17,11 +17,15 @@ export const getImageSchema = (documentFilePath: string): Schema => ({
     const attributes = node.transformAttributes(config);
     const children = node.transformChildren(config);
     const src = transformImagePath(documentFilePath)(attributes['src']);
+    const alt = attributes['alt'];
 
-    return new Tag(
-      this.render,
-      { ...attributes, src, loading: 'lazy' },
-      children
-    );
+    return new Tag(this.render, { className: 'not-prose my-8 text-center' }, [
+      new Tag('img', { src, alt, loading: 'lazy', className: 'mx-auto !my-0' }),
+      new Tag(
+        'figcaption',
+        { className: 'mt-2 text-sm text-slate-600 dark:text-slate-400' },
+        [alt]
+      ),
+    ]);
   },
 });