fix: markdown style for the About page

src/components/misc/Markdown.astro

@@ -0,0 +1,100 @@
+---
+interface Props {
+    class: string;
+}
+const className = Astro.props.class;
+---
+<div class=`prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md ${className}`>
+    <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
+    <!--<div class="max-w-none custom-md">-->
+    <slot />
+</div>
+
+<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>

src/content/posts/markdown.md

@@ -155,7 +155,7 @@ Here's a "line block":
 
 and images can be specified like so:
 
-![example image](/images/demo-banner.jpg "An exemplary image")
+![example image](../../assets/images/demo-banner.png "An exemplary image")
 
 Inline math equations go in like so: $\omega = d\phi / dt$. Display
 math should get its own line and be put in in double-dollarsigns:

src/content/spec/about.md

@@ -1,2 +1,7 @@
-## About
+# About
-This is the about page.
+This is the demo site for [Fuwari](https://github.com/saicaca/fuwari).
+
+> ### Sources of images used in this site
+> - [Unsplash](https://unsplash.com/)
+> - [星と少女](https://www.pixiv.net/artworks/108916539) by [Stella](https://www.pixiv.net/users/93273965)
+> - [Rabbit - v1.4 Showcase](https://civitai.com/posts/586908) by [Rabbit_YourMajesty](https://civitai.com/user/Rabbit_YourMajesty)

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
+            <Markdown class="mb-6">
-            ">
-            <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
-            <!--<div class="max-w-none custom-md">-->
                 <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>
+</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>