feat: implement giscus comment

src/components/Comments/Giscus.astro

@@ -0,0 +1,78 @@
+---
+import { themeConfig } from "@/config";
+
+const {
+  repo = "",
+  repoID = "",
+  category = "",
+  categoryID = "",
+  mapping = "pathname",
+  inputPosition = "top",
+  lang = "zh-CN",
+  loading = "lazy",
+} = themeConfig.comment?.giscus ?? {};
+---
+
+<div class="giscus mt-16" id="giscus-container"></div>
+
+<script
+  is:inline
+  define:vars={{
+    repo,
+    repoID,
+    category,
+    categoryID,
+    mapping,
+    inputPosition,
+    lang,
+    loading,
+  }}
+>
+  const host = window.location.origin;
+
+  function loadGiscus() {
+    const existingScript = document.querySelector("script[src*='giscus.app']");
+    if (existingScript) {
+      existingScript.remove();
+    }
+    const giscusContainer = document.getElementById("giscus-container");
+    if (giscusContainer) giscusContainer.innerHTML = "";
+    // 创建新脚本
+    const theme = document.documentElement.classList.contains("dark")
+      ? host + "/css/giscus_dark.css"
+      : host + "/css/giscus_light.css";
+    const script = document.createElement("script");
+    script.src = "https://giscus.app/client.js";
+    script.setAttribute("data-repo", repo);
+    script.setAttribute("data-repo-id", repoID);
+    script.setAttribute("data-category", category);
+    script.setAttribute("data-category-id", categoryID);
+    script.setAttribute("data-mapping", mapping);
+    script.setAttribute("data-strict", "0");
+    script.setAttribute("data-reactions-enabled", "1");
+    script.setAttribute("data-theme", theme);
+    script.setAttribute("data-emit-metadata", "0");
+    script.setAttribute("data-input-position", inputPosition);
+    script.setAttribute("data-lang", lang);
+    script.setAttribute("data-loading", loading);
+    script.crossOrigin = "anonymous";
+    script.async = true;
+    giscusContainer.appendChild(script);
+  }
+
+  function changeGiscusTheme() {
+    const iframe = document.querySelector("iframe.giscus-frame");
+    if (!iframe) return;
+    const theme = document.documentElement.classList.contains("dark")
+      ? host + "/css/giscus_dark.css"
+      : host + "/css/giscus_light.css";
+    iframe.contentWindow.postMessage(
+      { giscus: { setConfig: { theme } } },
+      "https://giscus.app",
+    );
+  }
+
+  document.addEventListener("DOMContentLoaded", loadGiscus);
+  document.addEventListener("theme-changed", changeGiscusTheme);
+  document.addEventListener("astro:page-load", loadGiscus);
+</script>

src/components/Comments/index.astro

@@ -1,6 +1,6 @@
 ---
 // import Disqus from '@/components/Comments/Disqus.astro'
-// import Giscus from '@/components/Comments/Giscus.astro'
+import Giscus from '@/components/Comments/Giscus.astro'
 // import Twikoo from '@/components/Comments/Twikoo.astro'
 import Waline from '@/components/Comments/Waline.astro'
 import { themeConfig } from '@/config'
@@ -9,22 +9,22 @@ const enableComments = themeConfig.comment?.enabled ?? false
 
 // Disqus
 // const disqusShortname = themeConfig.comment?.disqus?.shortname || ''
-// const showDisqus = enableComments && disqusShortname.trim() !== ''
+// const showDisqus = enableComments && themeConfig.comment.provider == 'disqus' && disqusShortname.trim() !== ''
 
-// Giscus
-// const giscusRepo = themeConfig.comment?.giscus?.repo || ''
-// const showGiscus = enableComments && giscusRepo.trim() !== ''
+Giscus
+const giscusRepo = themeConfig.comment?.giscus?.repo || ''
+const showGiscus = enableComments && themeConfig.comment.provider == 'giscus' && giscusRepo.trim() !== ''
 
 // Twikoo
 // const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
-// const showTwikoo = enableComments && twikooEnvId.trim() !== ''
+// const showTwikoo = enableComments && themeConfig.comment.provider == 'twikoo' && twikooEnvId.trim() !== ''
 
 // Waline
 const walineURL = themeConfig.comment?.waline?.serverURL || ''
-const showWaline = enableComments && walineURL.trim() !== ''
+const showWaline = enableComments && themeConfig.comment.provider == 'waline' && walineURL.trim() !== ''
 ---
 
 <!-- {showDisqus && <Disqus />} -->
-<!-- {showGiscus && <Giscus />} -->
+{showGiscus && <Giscus />}
 <!-- {showTwikoo && <Twikoo />} -->
 {showWaline && <Waline />}

src/config.ts

@@ -72,6 +72,7 @@ export const themeConfig: ThemeConfig = {
   comment: {
     // enable comment system
     enabled: true, // true, false
+    provider: 'giscus', // giscus, waline
     // waline comment system
     // https://waline.js.org/en/
     waline: {
@@ -89,6 +90,16 @@ export const themeConfig: ThemeConfig = {
       // bug: unable to hide image uploader icon
       imageUploader: false, // true, false
     },
+    giscus: {
+      repo: "senshinya/blog",
+      repoID: "R_kgDOLAV3QQ",
+      category: "Announcements",
+      categoryID: "DIC_kwDOLAV3Qc4CcKlC",
+      mapping: "pathname",
+      inputPosition: "top",
+      lang: "zh-CN",
+      loading: "lazy",
+    }
   },
   // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 

src/types/index.d.ts

@@ -39,11 +39,22 @@ export interface ThemeConfig {
 
   comment: {
     enabled: boolean
+    provider?: 'waline' | 'giscus'
     waline?: {
       serverURL?: string
       emoji?: string[]
       search?: boolean
       imageUploader?: boolean
+    },
+    giscus?: {
+      repo: string
+      repoID: string
+      category: string
+      categoryID: string
+      mapping: 'pathname' | 'url' | 'title'
+      inputPosition: 'top' | 'bottom'
+      lang: Exclude<typeof supportedLangs[number], 'zh-CN'>,
+      loading: 'lazy' | 'embed'
     }
   }