From a4f07dbb641d655d65128acd6ff2330b1068ec62 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Fri, 31 Jan 2025 14:36:15 +0100
Subject: [PATCH] feat(nx-dev): show alt text as label below markdown images

---
 nx-dev/nx-dev/styles/main.css                   |  2 +-
 nx-dev/ui-markdoc/src/lib/nodes/image.schema.ts | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/nx-dev/nx-dev/styles/main.css b/nx-dev/nx-dev/styles/main.css
index 4aef6bd97ac673..58a47913378fe8 100644
--- a/nx-dev/nx-dev/styles/main.css
+++ b/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;
 }
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/image.schema.ts b/nx-dev/ui-markdoc/src/lib/nodes/image.schema.ts
index 80373050af2501..8d7343d9df0ea6 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/image.schema.ts
+++ b/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]
+      ),
+    ]);
   },
 });