Integrate Gitalk as comment plugin for documents and blogs (#83)

* feat(gitalk): added gitalk to store users' comments

* fix(gitalk): fixed wrong confugration for gitalk

* chore(clientID): replace client id with that of ob organization

* chore(CI): added ci workflow for building website

Author: powerfooI

.github/workflows/build-website.yml

@@ -0,0 +1,24 @@
+name: Build the website
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build-website:
+    name: Build the website
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: yarn
+          cache-dependency-path: './yarn.lock'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build website
+        run: yarn build

package.json

@@ -20,6 +20,8 @@
     "@mdx-js/react": "^3.0.0",
     "bootstrap": "^5.3.3",
     "clsx": "^2.0.0",
+    "gitalk": "^1.8.0",
+    "js-md5": "^0.8.3",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-bootstrap": "^2.10.2",

src/theme/DocPaginator/index.tsx

@@ -0,0 +1,33 @@
+import 'gitalk/dist/gitalk.css';
+
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import DocPaginator from '@theme-original/DocPaginator';
+import type DocPaginatorType from '@theme/DocPaginator';
+import GitalkComponent from 'gitalk/dist/gitalk-component';
+import React from 'react';
+import type { WrapperProps } from '@docusaurus/types';
+import {md5} from 'js-md5';
+
+type Props = WrapperProps<typeof DocPaginatorType>;
+
+export default function DocPaginatorWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <DocPaginator {...props} />
+      <BrowserOnly fallback={<div>Loading...</div>}>
+        {() => (
+          <GitalkComponent
+            options={{
+              clientID: 'Ov23lilna50sUJEsRr3R',
+              clientSecret: '1355fdc76c695064a8d8e4938e984e1a7b31edda',
+              owner: 'oceanbase',
+              repo: 'oceanbase.github.io',
+              admin: ['powerfooI', 'Teingi', 'liboyang0730', 'hnwyllmm'],
+              id: md5(location.pathname),
+            }}
+          />
+        )}
+      </BrowserOnly>
+    </>
+  );
+}