feat: add giscus (unfinished)

src/components/Comment.astro

@@ -0,0 +1,35 @@
+---
+import {giscusConfig, siteConfig} from "../config";
+interface Props {
+    postId: string;
+}
+const { postId } = Astro.props;
+
+const config = giscusConfig
+
+const discussionTitle = `giscus - ${postId}`
+---
+
+{config.enable && <div class="card-base p-6">
+    <div class="giscus"></div>
+</div>}
+
+<script is:inline
+        src="https://giscus.app/client.js"
+        data-repo={config.repo}
+        data-repo-id={config.repoId}
+        data-category={config.category}
+        data-category-id={config.categoryId}
+        data-mapping="specific"
+        data-term={discussionTitle}
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="preferred_color_scheme"
+        data-lang={siteConfig.lang}
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script>
+

src/config.ts

@@ -1,4 +1,5 @@
 import type {
+  GiscusConfig,
   LicenseConfig,
   NavBarConfig,
   ProfileConfig,
@@ -58,3 +59,11 @@ export const licenseConfig: LicenseConfig = {
   name: 'CC BY-NC-SA 4.0',
   url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
 }
+
+export const giscusConfig: GiscusConfig = {
+    enable: true,
+    repo: 'saicaca/f-giscus',
+    repoId: 'R_kgDOLUcjpw',
+    category: 'Announcements',
+    categoryId: 'DIC_kwDOLUcjp84CdVSH',
+}

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

@@ -11,6 +11,7 @@ import License from "@components/misc/License.astro";
 import {licenseConfig} from "src/config";
 import Markdown from "@components/misc/Markdown.astro";
 import path from "path";
+import Comment from "@components/Comment.astro";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection('posts', ({ data }) => {
@@ -109,6 +110,9 @@ const { remarkPluginFrontmatter } = await entry.render();
         </a>
     </div>
 
+    <!-- Comment -->
+    <Comment postId={entry.slug}></Comment>
+
 </MainGridLayout>
 
 <style is:global>

src/types/config.ts

@@ -43,3 +43,11 @@ export type LicenseConfig = {
   name: string
   url: string
 }
+
+export type GiscusConfig = {
+    enable: boolean
+    repo: string
+    repoId: string
+    category: string
+    categoryId: string
+}