feat: split artalk to local-provided standalone component

package.json

@@ -17,6 +17,7 @@
     "@astrojs/rss": "^4.0.1",
     "@astrojs/sitemap": "^3.3.1",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
+    "artalk": "^2.9.1",
     "astro": "^5.2.5",
     "ico-endec": "^0.1.6",
     "katex": "^0.16.22",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@fontsource-variable/jetbrains-mono':
         specifier: ^5.2.5
         version: 5.2.5
+      artalk:
+        specifier: ^2.9.1
+        version: 2.9.1(marked@14.1.4)
       astro:
         specifier: ^5.2.5
         version: 5.7.10(@azure/identity@4.9.1)(@types/node@22.15.3)(rollup@4.40.1)(typescript@5.8.3)(yaml@2.7.1)
@@ -1117,6 +1120,11 @@ packages:
   array-iterate@2.0.1:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
 
+  artalk@2.9.1:
+    resolution: {integrity: sha512-IFo9XqWDalsHy8BsmMA5SSB9bozBa/sBhTm/+O5KwA6DnC95lFKv7C6ScMx/Xa4ue5qSQ7VV5vxRgCh/raohkQ==}
+    peerDependencies:
+      marked: ^14.1.0
+
   as-table@1.0.55:
     resolution: {integrity: sha512-xvsWESUJn0JN421Xb9MQw6AsMHRCUknCe0Wjlxvjud80mU4E6hQf1A6NzQKcYNmYw62MfzEtXc+badstZP3JpQ==}
 
@@ -2092,6 +2100,11 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@14.1.4:
+    resolution: {integrity: sha512-vkVZ8ONmUdPnjCKc5uTRvmkRbx4EAi2OkTOXmfTDhZz3OFqMNBM1oTTWwTr4HY4uAEojhzPf+Fy8F1DWa3Sndg==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4309,6 +4322,10 @@ snapshots:
 
   array-iterate@2.0.1: {}
 
+  artalk@2.9.1(marked@14.1.4):
+    dependencies:
+      marked: 14.1.4
+
   as-table@1.0.55:
     dependencies:
       printable-characters: 1.0.42
@@ -5488,6 +5505,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked@14.1.4: {}
+
   math-intrinsics@1.1.0: {}
 
   md5@2.3.0:

src/components/Comments.astro

@@ -2,9 +2,10 @@
 import {siteConfig} from "../config";
 import FediverseComments from "./helper/comments/Fediverse.astro";
 import HatsuComments from "./helper/comments/Hatsu.astro";
+import Artalk from "./helper/comments/Artalk.astro";
 
 const method = siteConfig.comments.type
-const ArtalkConfig = siteConfig.comments.artalk
+
 const giscusConfig = siteConfig.comments.giscus
 const FediverseConfig = siteConfig.comments.fediverse
 interface Props {
@@ -13,25 +14,7 @@ interface Props {
 
 let { path='/' } = Astro.props;
 ---
-{method === 'artalk' &&
-    <div>
-        <!-- CSS -->
-        <link href={`https://${ArtalkConfig.instanceDomain}/dist/Artalk.css`} rel="stylesheet">
-
-        <!-- JS -->
-        <script src={`https://${ArtalkConfig.instanceDomain}/dist/Artalk.js`}></script>
-
-        <!-- Artalk -->
-        <div id="Comments"></div>
-        <script define:vars={{ instanceDomain: ArtalkConfig.instanceDomain, pagePath: path }}>
-                Artalk.init({
-                    el: '#Comments',
-                    pageKey: pagePath, // Using the passed variable
-                    server: `https://${instanceDomain}`, // Using the passed variable
-                })
-        </script>
-    </div>
-}
+{method === 'artalk' && <Artalk path={path} />}
 {method === 'giscus' && (
     <script
       src="https://giscus.app/client.js"

src/components/helper/comments/Artalk.astro

@@ -0,0 +1,22 @@
+---
+import {siteConfig} from "../../../config";
+import 'artalk/Artalk.css';
+const ArtalkInstanceDomain = siteConfig.comments.artalk.instanceDomain
+
+const { path } = Astro.props;
+---
+<div>
+    <!-- Artalk -->
+    <div id="comments" data-path={path} data-server={ArtalkInstanceDomain}></div>
+    <script>
+        import Artalk from "artalk";
+        const atkElement = document.querySelector('#comments');
+        Artalk.init({
+            el: '#comments',
+            pageKey: atkElement?.getAttribute('data-path') || window.location.pathname,
+            server: `https://${atkElement?.getAttribute('data-server')}`,
+            darkMode: "auto",
+            versionCheck: false
+        });
+    </script>
+</div>