补充 Artalk 和博客文章页

src/components/Artalk.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  // https://artalk.js.org/zh/develop/import-framework
+
+  import Artalk from 'artalk'
+  import { onMount, onDestroy } from 'svelte'
+
+  import 'artalk/Artalk.css'
+
+  let el: HTMLElement
+  let artalk: Artalk
+
+  onMount(() => {
+    artalk = Artalk.init({
+      el: el,
+      pageKey: location.pathname,
+      pageTitle: document.title,
+      server: 'https://artalk.sv.passthem.top',
+      site: '小帕的小窝',
+      darkMode: 'auto',
+    })
+
+    onDestroy(() => {
+      if (artalk) {
+        artalk.destroy()
+      }
+    })
+  })
+</script>
+
+<div class="comment" bind:this={el}></div>

src/components/MarkdocRenderer.tsx

@@ -28,7 +28,7 @@ export const MarkdocTreeRender: React.FC<{
   tree: RenderableTreeNode
 }> = ({ tree }) => {
   return (
-    <div className="markdoc-container">
+    <div className="markdoc-container prose">
       {Markdoc.renderers.react(tree, React, { components: { CodeBlock } })}
     </div>
   )