Add Giscus comments integration for documentation pages

Integrate Giscus (GitHub Discussions-based comments) to enable community
discussions on documentation pages. The comment widget respects the site's
color mode and appears at the bottom of each doc page.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: trend-winter-wang

package-lock.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
+    "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",

package.json

@@ -0,0 +1,26 @@
+import React from 'react';
+import Giscus from '@giscus/react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function GiscusComments(): React.ReactElement {
+  const { colorMode } = useColorMode();
+
+  return (
+    <div style={{ marginTop: '2rem' }}>
+      <Giscus
+        repo="winterfx/system-design"
+        repoId="R_kgDOQ8MNJw"
+        category="Announcements"
+        categoryId="DIC_kwDOQ8MNJ84C1I4j"
+        mapping="pathname"
+        strict="0"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="bottom"
+        theme={colorMode === 'dark' ? 'dark' : 'light'}
+        lang="zh-CN"
+        loading="lazy"
+      />
+    </div>
+  );
+}

src/components/GiscusComments/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Footer from '@theme-original/DocItem/Footer';
+import type FooterType from '@theme/DocItem/Footer';
+import type { WrapperProps } from '@docusaurus/types';
+import GiscusComments from '@site/src/components/GiscusComments';
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): React.ReactElement {
+  return (
+    <>
+      <Footer {...props} />
+      <GiscusComments />
+    </>
+  );
+}