feat: add comments section

src/components/Comments.astro

@@ -0,0 +1,48 @@
+---
+import {siteConfig} from "../config";
+const method = siteConfig.comments.type
+const ArtalkConfig = siteConfig.comments.artalk
+const giscusConfig = siteConfig.comments.giscus
+interface Props {
+    path?: string;
+}
+
+const { 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 === 'giscus' && (
+    <script
+      src="https://giscus.app/client.js"
+      data-repo={giscusConfig.repo}
+      data-repo-id={giscusConfig.repoId}
+      data-category={giscusConfig.category}
+      data-category-id={giscusConfig.categoryId}
+      data-mapping={giscusConfig.mapping}
+      data-strict={giscusConfig.strict}
+      data-reactions-enabled={giscusConfig.reactionsEnabled}
+      data-emit-metadata={giscusConfig.emitMetadata}
+      data-input-position={giscusConfig.inputPosition}
+      data-theme={giscusConfig.theme}
+      data-lang={giscusConfig.lang}
+      crossorigin="anonymous"
+      async
+    ></script>
+)}