diff --git a/apps/blog/src/features/shared/helpers/markdown.ts b/apps/blog/src/features/shared/helpers/markdown.ts index b45c1af6..f8a70712 100644 --- a/apps/blog/src/features/shared/helpers/markdown.ts +++ b/apps/blog/src/features/shared/helpers/markdown.ts @@ -12,6 +12,7 @@ const markdownToHtml = async (mdText: string) => { .use(remarkRehype, { allowDangerousHtml: true, handlers: { + // https://github.com/syntax-tree/mdast#nodes link(h, node, parent) { const parsedNode = h( node, @@ -21,6 +22,24 @@ const markdownToHtml = async (mdText: string) => { ); return parsedNode; }, + image(h, node, parent) { + const parsedNode = h( + node, + 'div', + { + class: 'img-wrap', + }, + [ + { + type: 'element', + tagName: 'img', + properties: { src: node.url, alt: node.alt }, + children: [], + }, + ], + ); + return parsedNode; + }, }, }) .use(rehypeSlug) diff --git a/apps/blog/src/features/styles/markdown/index.scss b/apps/blog/src/features/styles/markdown/index.scss index 8798b449..373f13cf 100644 --- a/apps/blog/src/features/styles/markdown/index.scss +++ b/apps/blog/src/features/styles/markdown/index.scss @@ -115,13 +115,21 @@ @apply text-xl mt-6 leading-snug; } - img { + .cover { + width: 100%; + height: 600px; + background-color: transparent; + object-fit: contain; + } + + .img-wrap { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; margin-top: 1%; margin-bottom: 1%; min-height: 200px; - background-color: #656d76; - animation: skeleton-loading 1s linear infinite alternate; - object-fit: contain; @include mobile { min-height: 100px; @@ -130,14 +138,15 @@ @include i-mac { max-width: 1200px; } - } - .cover { - width: 100%; - height: 600px; - animation: none; - background-color: transparent; - object-fit: contain; + img { + width: 70%; + object-fit: contain; + + @include mobile { + width: 100%; + } + } } }