feat(markdown): Add image default flex-center

1ilsang · Nov 26, 2023 · 23a99bf · 23a99bf
1 parent 5f1b76d
commit 23a99bf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git 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
@@ -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%;
+      }
+    }
   }
 }