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>
+)}

src/config.ts

@@ -1,4 +1,41 @@
 export const siteConfig = {
     title: '/var/log/mercury',
     description: 'A blog about software development, technology, and life.',
+    comments: {
+        type: 'artalk', // 'artalk','giscus','fediverse','hatsu'
+        artalk: {
+            instanceDomain: '', // the domain of your artalk instance
+        },
+        giscus: {
+            // get these params from giscus.app
+            repo:"[ENTER REPO HERE]",
+            repoId: "[ENTER REPO ID HERE]",
+            category:"[ENTER CATEGORY NAME HERE]",
+            categoryId:"[ENTER CATEGORY ID HERE]",
+            mapping:"pathname",
+            strict:"0",
+            reactionsEnabled:"1",
+            emitMetadata:"0",
+            inputPosition:"bottom",
+            theme:"preferred_color_scheme",
+            lang:"en"
+        },
+        // WIP
+        fediverse: {
+            // use Mastodon (compatible) api to search posts and parse replies
+            // it will search for the post's link by default
+            instanceDomain: '', // the domain of the fediverse instance to search posts from
+            useV2api: false, // use /api/v2/search instead of /api/v1/search to search on instance using newer version of mastodon
+            token: process.env.MASTODON_API_TOKEN, // the token to use to authenticate with the fediverse instance, usually a read:search-only token
+            // or use a reverse proxy api to return posts on instance, useful if you publish the site in SSG mode.
+            // the instanceDomain and token will be ignored if useReverseProxy is true and reverseProxyUrl is used.
+            useReverseProxy: false,
+            reverseProxyUrl: '', // the url of the reverse proxy, usually a cloudflare worker proxying the search api
+            accountId: '' // the account id to search posts from, can be got from api like: https://{instance}/api/v1/accounts/{username without domain part}
+        },
+        hatsu: {
+            // use hatsu.cli.rs to get replies from the fediverse
+            instanceDomain: '',
+        }
+    }
 }

src/pages/post/[...slug].astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
+import Comments from "../../components/Comments.astro";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('posts');
@@ -15,7 +16,7 @@ const { Content } = await entry.render();
 const slug = Astro.params.slug;
 ---
 
-<Layout 
+<Layout
   title={entry.data.title}
   path={`~/grassblock/micr0blog/blog/${slug}`}
 >
@@ -26,6 +27,9 @@ const slug = Astro.params.slug;
       </div>
 
     <div style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
+    <h2>Comments</h2>
+    <Comments path={`post/${slug}`} />
     <a href="/blog">&larr; Back to posts</a>
   </div>
+
 </Layout>