test: add giscus comment

src/components/Comments/Giscus.astro

@@ -2,93 +2,89 @@
 import { defaultLocale, themeConfig } from '@/config'
 import { giscusLocaleMap } from '@/i18n/config'
 
-// Get the language code of Giscus
-function getGiscusLang(currentPath: string, defaultLocale: string): string {
-  // Extract language code from path
-  const pathLang = Object.keys(giscusLocaleMap).find(code =>
-    currentPath.startsWith(`/${code}/`),
-  )
-  // Return found path language or default language
-  const lang = pathLang || defaultLocale
-  return giscusLocaleMap[lang as keyof typeof giscusLocaleMap]
-}
-
-const giscusLang = getGiscusLang(Astro.url.pathname, defaultLocale)
 const {
-  repo = "",
-  repoID = "",
-  category = "",
-  categoryID = "",
-  mapping = "pathname",
-  inputPosition = "top",
-  loading = "lazy",
-} = themeConfig.comment?.giscus ?? {};
+  repo = '',
+  repoID = '',
+  category = '',
+  categoryID = '',
+  mapping = 'pathname',
+  strict = '0',
+  reactionsEnabled = '1',
+  emitMetadata = '0',
+  inputPosition = 'bottom',
+} = themeConfig.comment?.giscus ?? {}
+
+const siteUrl = themeConfig.site.url
+const shouldRender = Boolean(repo && repoID && categoryID)
 ---
 
-<div class="giscus mt-16" id="giscus-container"></div>
+{shouldRender && (
+  <div
+    id="giscus"
+    class="giscus mt-16"
+  ></div>
 
-<script
-  is:inline
-  define:vars={{
-    repo,
-    repoID,
-    category,
-    categoryID,
-    mapping,
-    inputPosition,
-    giscusLang,
-    loading,
-  }}
->
-  const host = window.location.origin;
+  <script
+    is:inline
+    define:vars={{
+      repo,
+      repoID,
+      category,
+      categoryID,
+      mapping,
+      strict,
+      reactionsEnabled,
+      emitMetadata,
+      inputPosition,
+      giscusLocaleMap,
+      defaultLocale,
+      siteUrl,
+    }}
+  >
+  function setupGiscus() {
+    const giscusContainer = document.getElementById('giscus')
+    if (!giscusContainer)
+      return
 
-  function loadGiscus() {
-    const existingScript = document.querySelector("script[src*='giscus.app']");
-    if (existingScript) {
-      existingScript.remove();
+    giscusContainer.innerHTML = ''
+
+    const currentPath = window.location.pathname
+    const pathLang = Object.keys(giscusLocaleMap).find(code =>
+      currentPath.startsWith(`/${code}/`),
+    )
+    const lang = pathLang || defaultLocale
+    const currentGiscusLang = giscusLocaleMap[lang]
+
+    const script = document.createElement('script')
+    script.src = 'https://giscus.app/client.js'
+    script.crossOrigin = 'anonymous'
+    script.async = true
+
+    // Set up basic attributes
+    const dataAttributes = {
+      repo,
+      repoId: repoID,
+      categoryId: categoryID,
+      mapping,
+      strict,
+      reactionsEnabled,
+      emitMetadata,
+      inputPosition,
+      theme: `${siteUrl}/vendors/giscus/theme.css`,
+      lang: currentGiscusLang,
     }
-    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", giscusLang);
-    script.setAttribute("data-loading", loading);
-    script.crossOrigin = "anonymous";
-    script.async = true;
-    giscusContainer.appendChild(script);
+
+    // Add category conditionally
+    if (category)
+      dataAttributes.category = category
+
+    // Apply all attributes
+    Object.assign(script.dataset, dataAttributes)
+
+    giscusContainer.appendChild(script)
   }
 
-  function changeGiscusTheme() {
-    const iframe = document.querySelector("iframe.giscus-frame");
-    if (!iframe || iframe.classList.contains("giscus-frame--loading")) {
-      // 脚本未加载场景
-      loadGiscus();
-      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>
+  setupGiscus()
+  document.addEventListener('astro:page-load', setupGiscus)
+  </script>
+)}

src/components/Comments/Waline.astro

@@ -2,7 +2,14 @@
 import { defaultLocale, themeConfig } from '@/config'
 import { walineLocaleMap } from '@/i18n/config'
 
-const { waline: { serverURL = '', emoji = [], search = false, imageUploader = false } = {} } = themeConfig.comment ?? {}
+const {
+  waline: {
+    serverURL = '',
+    emoji = [],
+    search = false,
+    imageUploader = false,
+  } = {},
+} = themeConfig.comment ?? {}
 ---
 
 <div
@@ -25,7 +32,7 @@ const { waline: { serverURL = '', emoji = [], search = false, imageUploader = fa
 >
 import { init } from '/vendors/waline/waline.js'
 
-function initWaline() {
+function setupWaline() {
   const currentPath = window.location.pathname
   const pathLang = Object.keys(walineLocaleMap).find(code =>
     currentPath.startsWith(`/${code}/`),
@@ -50,8 +57,8 @@ function initWaline() {
   })
 }
 
-initWaline()
-document.addEventListener('astro:page-load', initWaline)
+setupWaline()
+document.addEventListener('astro:page-load', setupWaline)
 </script>
 
 <!-- Custom CSS Styles >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->

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'
@@ -12,8 +12,8 @@ const enableComments = themeConfig.comment?.enabled ?? false
 // const showDisqus = enableComments && disqusShortname.trim() !== ''
 
 // Giscus
-// const giscusRepo = themeConfig.comment?.giscus?.repo || ''
-// const showGiscus = enableComments && giscusRepo.trim() !== ''
+const giscusRepo = themeConfig.comment?.giscus?.repo || ''
+const showGiscus = enableComments && giscusRepo.trim() !== ''
 
 // Twikoo
 // const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
@@ -25,6 +25,6 @@ const showWaline = enableComments && walineURL.trim() !== ''
 ---
 
 <!-- {showDisqus && <Disqus />} -->
-<!-- {showGiscus && <Giscus />} -->
+{showGiscus && <Giscus />}
 <!-- {showTwikoo && <Twikoo />} -->
 {showWaline && <Waline />}

src/config.ts

@@ -75,7 +75,7 @@ export const themeConfig: ThemeConfig = {
     // https://waline.js.org/en/
     waline: {
       // server url
-      serverURL: 'https://retypeset-comment.radishzz.cc',
+      serverURL: '',
       // emoji url
       emoji: [
         'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji',

src/i18n/config.ts

@@ -36,7 +36,7 @@ export const giscusLocaleMap: Record<string, string> = {
   'en': 'en',
   'es': 'es',
   'fr': 'fr',
-  'ja': 'jp',
+  'ja': 'ja',
   'ko': 'ko',
   'pl': 'pl',
   'pt': 'pt',