From 55c7b018d0baca142e11e1c11ed9a8c3a0e4c577 Mon Sep 17 00:00:00 2001
From: tlyong1992 <tlyong1992@hotmail.com>
Date: Fri, 27 May 2022 15:56:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B0=81=E8=A3=85=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Comment.js         | 45 +++++++++++++----------------------
 components/CusdisComponent.js | 22 +++++++++++++++++
 components/Gitalk.js          | 15 +++++++++---
 components/WalineComponent.js |  4 +++-
 4 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 components/CusdisComponent.js

diff --git a/components/Comment.js b/components/Comment.js
index c75ff12f..4bae2665 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -1,10 +1,21 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
 import Tabs from '@/components/Tabs'
-import { ReactCusdis } from 'react-cusdis'
 import { useGlobal } from '@/lib/global'
-import { WalineComponent } from './WalineComponent'
+
+const WalineComponent = dynamic(
+  () => {
+    return import('@/components/WalineComponent')
+  },
+  { ssr: false }
+)
+
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/CusdisComponent')
+  },
+  { ssr: false }
+)
 
 const GitalkComponent = dynamic(
   () => {
@@ -33,9 +44,7 @@ const Comment = ({ frontMatter }) => {
   if (!frontMatter) {
     return <>Loading...</>
   }
-  const router = useRouter()
-  const { locale, isDarkMode } = useGlobal()
-  // const theme = isDarkMode ? 'dark' : 'light'
+  const { isDarkMode } = useGlobal()
 
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
@@ -56,16 +65,7 @@ const Comment = ({ frontMatter }) => {
         )}
 
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <ReactCusdis
-            lang={locale.LOCALE.toLowerCase()}
-            attrs={{
-              host: BLOG.COMMENT_CUSDIS_HOST,
-              appId: BLOG.COMMENT_CUSDIS_APP_ID,
-              pageId: frontMatter.id,
-              pageTitle: frontMatter.title,
-              pageUrl: BLOG.LINK + router.asPath
-            }}
-          />
+          <CusdisComponent frontMatter={frontMatter}/>
         </div>)}
 
         {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
@@ -73,18 +73,7 @@ const Comment = ({ frontMatter }) => {
         </div>)}
 
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-          <GitalkComponent
-            options={{
-              id: frontMatter.id,
-              title: frontMatter.title,
-              clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-              clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-              repo: BLOG.COMMENT_GITALK_REPO,
-              owner: BLOG.COMMENT_GITALK_OWNER,
-              admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-              distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
-            }}
-          />
+          <GitalkComponent frontMatter={frontMatter}/>
         </div>)}
       </Tabs>
     </div>
diff --git a/components/CusdisComponent.js b/components/CusdisComponent.js
new file mode 100644
index 00000000..f1fce6ef
--- /dev/null
+++ b/components/CusdisComponent.js
@@ -0,0 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import { ReactCusdis } from 'react-cusdis'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+
+const CusdisComponent = ({ frontMatter }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+
+  return <ReactCusdis
+    lang={locale.LOCALE.toLowerCase()}
+    attrs={{
+      host: BLOG.COMMENT_CUSDIS_HOST,
+      appId: BLOG.COMMENT_CUSDIS_APP_ID,
+      pageId: frontMatter.id,
+      pageTitle: frontMatter.title,
+      pageUrl: BLOG.LINK + router.asPath
+    }}
+  />
+}
+
+export default CusdisComponent
diff --git a/components/Gitalk.js b/components/Gitalk.js
index 2edc44bd..66b30174 100644
--- a/components/Gitalk.js
+++ b/components/Gitalk.js
@@ -1,9 +1,18 @@
 import 'gitalk/dist/gitalk.css'
-
+import BLOG from '@/blog.config'
 import GitalkComponent from 'gitalk/dist/gitalk-component'
 
-const Gitalk = props => {
-  return <GitalkComponent {...props} />
+const Gitalk = ({ frontMatter }) => {
+  return <GitalkComponent options={{
+    id: frontMatter.id,
+    title: frontMatter.title,
+    clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+    clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+    repo: BLOG.COMMENT_GITALK_REPO,
+    owner: BLOG.COMMENT_GITALK_OWNER,
+    admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+    distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
+  }} />
 }
 
 export default Gitalk
diff --git a/components/WalineComponent.js b/components/WalineComponent.js
index 567dd1d9..80741b15 100644
--- a/components/WalineComponent.js
+++ b/components/WalineComponent.js
@@ -8,7 +8,7 @@ import { useRouter } from 'next/router'
  * @param {*} props
  * @returns
  */
-export const WalineComponent = (props) => {
+const WalineComponent = (props) => {
   const walineInstanceRef = React.useRef(null)
   const containerRef = React.createRef()
   const router = useRouter()
@@ -32,3 +32,5 @@ export const WalineComponent = (props) => {
 
   return <div ref={containerRef} />
 }
+
+export default WalineComponent