From 4c3363158e589f48f0db12e90d50635f0d547b2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=A9=98?= <xiaoju@shazhou.work>
Date: Tue, 7 Apr 2026 04:14:52 +0000
Subject: [PATCH] feat: add Giscus comments to blog posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Giscus component with GitHub Discussions (General category)
- Auto theme sync (light/dark follows site)
- Lazy loading, Chinese locale
- Shows on all post pages after content

小橘 🍊（NEKO Team）
---
 src/components/misc/Comments.astro | 51 ++++++++++++++++++++++++++++++
 src/pages/posts/[...slug].astro    |  3 ++
 2 files changed, 54 insertions(+)
 create mode 100644 src/components/misc/Comments.astro

diff --git a/src/components/misc/Comments.astro b/src/components/misc/Comments.astro
new file mode 100644
index 0000000..51cdf5f
--- /dev/null
+++ b/src/components/misc/Comments.astro
@@ -0,0 +1,51 @@
+---
+// Giscus comments component — powered by GitHub Discussions
+// https://giscus.app
+---
+<div id="giscus-container" class="mt-6 mb-6 onload-animation">
+  <script
+    src="https://giscus.app/client.js"
+    data-repo="oc-xiaoju/oc-xiaoju.github.io"
+    data-repo-id="R_kgDOR325cw"
+    data-category="General"
+    data-category-id="DIC_kwDOR325c84C6RGY"
+    data-mapping="pathname"
+    data-strict="0"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="top"
+    data-theme="preferred_color_scheme"
+    data-lang="zh-CN"
+    data-loading="lazy"
+    crossorigin="anonymous"
+    async
+  ></script>
+</div>
+
+<script>
+  // Sync Giscus theme with site theme
+  function updateGiscusTheme() {
+    const isDark = document.documentElement.classList.contains('dark')
+    const theme = isDark ? 'dark' : 'light'
+    const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame')
+    if (iframe) {
+      iframe.contentWindow?.postMessage(
+        { giscus: { setConfig: { theme } } },
+        'https://giscus.app'
+      )
+    }
+  }
+
+  // Watch for theme changes
+  const observer = new MutationObserver(updateGiscusTheme)
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+
+  // Also update when giscus iframe loads
+  window.addEventListener('message', (event) => {
+    if (event.origin !== 'https://giscus.app') return
+    updateGiscusTheme()
+  })
+</script>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 2079efd..6b5b5c3 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,6 +1,7 @@
 ---
 import path from "node:path";
 import License from "@components/misc/License.astro";
+import Comments from "@components/misc/Comments.astro";
 import Markdown from "@components/misc/Markdown.astro";
 import I18nKey from "@i18n/i18nKey";
 import { i18n } from "@i18n/translation";
@@ -108,6 +109,8 @@ const jsonLd = {
 
             {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
 
+            <Comments />
+
         </div>
     </div>