feat: comment (#41)

docusaurus.config.js

@@ -53,6 +53,7 @@ const config = {
         explicitSearchResultPath: true
       },
     ],
+    '@docusaurus/theme-mermaid',
   ],
 
   presets: [
@@ -173,7 +174,6 @@ const config = {
   markdown: {
     mermaid: true,
   },
-  themes:['@docusaurus/theme-mermaid'],
 };
 
 export default config;

package-lock.json

@@ -12,6 +12,7 @@
         "@docusaurus/preset-classic": "3.8.1",
         "@docusaurus/theme-mermaid": "^3.8.1",
         "@easyops-cn/docusaurus-search-local": "^0.52.1",
+        "@giscus/react": "^3.1.0",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
         "prism-react-renderer": "^2.3.0",
@@ -4395,6 +4396,18 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@giscus/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@giscus/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-0TCO2TvL43+oOdyVVGHDItwxD1UMKP2ZYpT6gXmhFOqfAJtZxTzJ9hkn34iAF/b6YzyJ4Um89QIt9z/ajmAEeg==",
+      "dependencies": {
+        "giscus": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18 || ^19",
+        "react-dom": "^16 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -4522,6 +4535,21 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.4.0.tgz",
+      "integrity": "sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.1.tgz",
+      "integrity": "sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.4.0"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.1.tgz",
@@ -5640,8 +5668,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "license": "MIT",
+      "license": "MIT"
-      "optional": true
     },
     "node_modules/@types/unist": {
       "version": "3.0.3",
@@ -9684,6 +9711,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/giscus": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.6.0.tgz",
+      "integrity": "sha512-Zrsi8r4t1LVW950keaWcsURuZUQwUaMKjvJgTCY125vkW6OiEBkatE7ScJDbpqKHdZwb///7FVC21SE3iFK3PQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lit": "^3.2.1"
+      }
+    },
     "node_modules/github-slugger": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
@@ -11283,6 +11319,37 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/lit": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz",
+      "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.1.tgz",
+      "integrity": "sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.4.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.1.tgz",
+      "integrity": "sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "3.8.1",
     "@docusaurus/theme-mermaid": "^3.8.1",
     "@easyops-cn/docusaurus-search-local": "^0.52.1",
+    "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",

src/theme/DocItem/Layout/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import ContentVisibility from '@theme/ContentVisibility';
+import styles from './styles.module.css';
+import Giscus from '@giscus/react';
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+    const { frontMatter, toc } = useDoc();
+    const windowSize = useWindowSize();
+    const hidden = frontMatter.hide_table_of_contents;
+    const canRender = !hidden && toc.length > 0;
+    const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+    const desktop =
+        canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+            <DocItemTOCDesktop />
+        ) : undefined;
+    return {
+        hidden,
+        mobile,
+        desktop,
+    };
+}
+export default function DocItemLayout({ children }) {
+    const docTOC = useDocTOC();
+    const { metadata } = useDoc();
+    const { hide_comment: hideComment } = metadata.frontMatter;
+    return (
+        <div className="row">
+            <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+                <ContentVisibility metadata={metadata} />
+                <DocVersionBanner />
+                <div className={styles.docItemContainer}>
+                    <article>
+                        <DocBreadcrumbs />
+                        <DocVersionBadge />
+                        {docTOC.mobile}
+                        <DocItemContent>{children}</DocItemContent>
+                        <DocItemFooter />
+                    </article>
+                    <DocItemPaginator />
+                </div>
+                {!hideComment && <div className={styles.commentsContainer}>
+                    <Giscus
+                        id="comments"
+                        repo="betterecnu/sharedcourses"
+                        repoId='R_kgDOMR1oyA'
+                        category='General'
+                        categoryId='DIC_kwDOMR1oyM4CvymM'
+                        mapping="pathname"
+                        term="Welcome to discuss!"
+                        reactionsEnabled='1'
+                        emitMetadata='0'
+                        inputPosition='top'
+                        theme='preferred_color_scheme'
+                        lang='zh-CN'
+                    />
+                </div>}
+            </div>
+            {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+        </div>
+    );
+}

src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,16 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+.commentsContainer {
+  margin-top: 3rem;
+  max-height: 640px;
+  overflow-y: scroll;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}