fix: markdown style for the About page

src/pages/about.astro

@@ -5,6 +5,7 @@ import MainGridLayout from "../layouts/MainGridLayout.astro";
 import { getEntry } from 'astro:content'
 import {i18n} from "../i18n/translation";
 import I18nKey from "../i18n/i18nKey";
+import Markdown from "../components/misc/Markdown.astro";
 
 const aboutPost = await getEntry('spec', 'about')
 
@@ -14,9 +15,9 @@ const { Content } = await aboutPost.render()
 <MainGridLayout title={i18n(I18nKey.about)}>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-[120px]">
         <div class="card-base z-10 px-9 py-6 relative w-full ">
-            <div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">
+            <Markdown class="mt-2">
                 <Content />
-            </div>
+            </Markdown>
         </div>
     </div>
 </MainGridLayout>

src/pages/posts/[slug].astro

@@ -10,6 +10,7 @@ import I18nKey from "../../i18n/i18nKey";
 import {getPostUrlBySlug} from "../../utils/url-utils";
 import License from "../../components/misc/License.astro";
 import {licenseConfig} from "../../config";
+import Markdown from "../../components/misc/Markdown.astro";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection('posts');
@@ -74,12 +75,9 @@ const { remarkPluginFrontmatter } = await entry.render();
 
             {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
 
-            <div class="mb-6 prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md
-            ">
-            <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
-            <!--<div class="max-w-none custom-md">-->
+            <Markdown class="mb-6">
                 <Content />
-            </div>
+            </Markdown>
 
             {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl"></License>}
 
@@ -106,94 +104,4 @@ const { remarkPluginFrontmatter } = await entry.render();
         </a>
     </div>
 
-</MainGridLayout>
-
-<style lang="stylus" is:global>
-.custom-md
-  a
-    position: relative
-    background: none
-    margin: -4px
-    padding: 4px
-    border-radius: 6px
-    color: var(--primary)
-    text-decoration-line: none;
-    /*&:after*/
-    /*  content: ''*/
-    /*  position: absolute*/
-    /*  left: 2px*/
-    /*  right: 2px*/
-    /*  bottom: 4px*/
-    /*  height: 6px*/
-    /*  border-radius: 3px*/
-    /*  background: var(--link-hover)*/
-    /*  transition: background 0.15s ease-in-out;*/
-    /*  z-index: -1;*/
-    &:hover
-      background: var(--link-hover)
-    &:active
-      background: var(--link-active)
-      /*&:after*/
-      /*  background: var(--link-active)*/
-  code
-    font-family: monospace
-    background: var(--inline-code-bg)
-    color: var(--inline-code-color)
-    padding: 2px 4px
-    border-radius: 4px
-    overflow: hidden
-    &:before
-        content: none
-    &:after
-        content: none
-  pre
-    background: var(--codeblock-bg) !important
-    border-radius: 12px
-    padding-left: 20px
-    padding-right: 20px
-    code
-      padding: 0
-      background: none
-      ::selection
-        background: var(--codeblock-selection)
-      span.br::selection
-          background: var(--codeblock-selection)
-  ul
-    li
-      &::marker
-        color: var(--primary)
-  ol
-    li
-      &::marker
-        color: var(--primary)
-  blockquote
-    font-style: normal
-    border-left-color: rgba(0,0,0,0)
-    position: relative;
-    &:before
-      content: ''
-      position: absolute
-      left: -0.25rem
-      display: block
-      transition: background 0.15s ease-in-out;
-      background: var(--btn-regular-bg)
-      height: 100%
-      width: 0.25rem
-      border-radius: 1rem
-    p
-      &:before
-        content: none
-      &:after
-        content: none
-  img
-    border-radius: 12px
-  hr
-    border-color: var(--line-divider)
-    border-style: dashed
-  iframe
-    border-radius: 12px
-    margin-left: auto
-    margin-right: auto
-    max-width: 100%
-
-</style>
+</MainGridLayout>