miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Juri 2025-01-31 14:36:15 +01:00 committed by Juri Strumpflohner
parent 999dcfbb0f
commit a4f07dbb64
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nx-dev/nx-dev/styles/main.css
View File

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

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

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