♻️ Add comment component.

Author: craigary

components/Comments.js

@@ -0,0 +1,64 @@
+import { fetchCusdisLang } from '@/lib/cusdisLang'
+import BLOG from '@/blog.config'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import 'gitalk/dist/gitalk.css'
+
+const GitalkComponent = dynamic(
+  () => {
+    return import('gitalk/dist/gitalk-component')
+  },
+  { ssr: false }
+)
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/Utterances')
+  },
+  { ssr: false }
+)
+const CusdisComponent = dynamic(
+  () => {
+    return import('react-cusdis').then(m => m.ReactCusdis)
+  },
+  { ssr: false }
+)
+
+const Comments = ({ frontMatter }) => {
+  const router = useRouter()
+  return (
+    <div>
+      {BLOG.comment && BLOG.comment.provider === 'gitalk' && (
+        <GitalkComponent
+          options={{
+            id: frontMatter.id,
+            title: frontMatter.title,
+            clientID: BLOG.comment.gitalkConfig.clientID,
+            clientSecret: BLOG.comment.gitalkConfig.clientSecret,
+            repo: BLOG.comment.gitalkConfig.repo,
+            owner: BLOG.comment.gitalkConfig.owner,
+            admin: BLOG.comment.gitalkConfig.admin,
+            distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
+          }}
+        />
+      )}
+      {BLOG.comment && BLOG.comment.provider === 'utterances' && (
+        <UtterancesComponent issueTerm={frontMatter.id} />
+      )}
+      {BLOG.comment && BLOG.comment.provider === 'cusdis' && (
+        <CusdisComponent
+        lang={fetchCusdisLang()}
+          attrs={{
+            host: BLOG.comment.cusdisConfig.host,
+            appId: BLOG.comment.cusdisConfig.appId,
+            pageId: frontMatter.id,
+            pageTitle: frontMatter.title,
+            pageUrl: BLOG.link + router.asPath,
+            theme: BLOG.appearance
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default Comments

layouts/layout.js

@@ -1,33 +1,12 @@
 import Image from 'next/image'
 import Container from '@/components/Container'
 import TagItem from '@/components/TagItem'
-import { useRouter } from 'next/router'
 import { NotionRenderer, Equation, Code, CollectionRow } from 'react-notion-x'
 import BLOG from '@/blog.config'
 import formatDate from '@/lib/formatDate'
-import { fetchCusdisLang } from '@/lib/cusdisLang'
-import dynamic from 'next/dynamic'
-import 'gitalk/dist/gitalk.css'
 import { useLocale } from '@/lib/locale'
-
-const GitalkComponent = dynamic(
-  () => {
-    return import('gitalk/dist/gitalk-component')
-  },
-  { ssr: false }
-)
-const UtterancesComponent = dynamic(
-  () => {
-    return import('@/components/Utterances')
-  },
-  { ssr: false }
-)
-const CusdisComponent = dynamic(
-  () => {
-    return import('react-cusdis').then(m => m.ReactCusdis)
-  },
-  { ssr: false }
-)
+import { useRouter } from 'next/router'
+import Comments from '@/components/Comments'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -101,49 +80,24 @@ const Layout = ({
         )}
       </article>
       <div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
-        <button
-          onClick={() => router.push(BLOG.path || '/')}
-          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
-        >
-          ← {locale.POST.BACK}
-        </button>
-        <button
-          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
-        >
-          ↑ {locale.POST.TOP}
-        </button>
+        <a>
+          <button
+            onClick={() => router.push(BLOG.path || '/')}
+            className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
+          >
+            ← {locale.POST.BACK}
+          </button>
+        </a>
+        <a>
+          <button
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
+          >
+            ↑ {locale.POST.TOP}
+          </button>
+        </a>
       </div>
-      {BLOG.comment && BLOG.comment.provider === 'gitalk' && (
-        <GitalkComponent
-          options={{
-            id: frontMatter.id,
-            title: frontMatter.title,
-            clientID: BLOG.comment.gitalkConfig.clientID,
-            clientSecret: BLOG.comment.gitalkConfig.clientSecret,
-            repo: BLOG.comment.gitalkConfig.repo,
-            owner: BLOG.comment.gitalkConfig.owner,
-            admin: BLOG.comment.gitalkConfig.admin,
-            distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
-          }}
-        />
-      )}
-      {BLOG.comment && BLOG.comment.provider === 'utterances' && (
-        <UtterancesComponent issueTerm={frontMatter.id} />
-      )}
-      {BLOG.comment && BLOG.comment.provider === 'cusdis' && (
-        <CusdisComponent
-          attrs={{
-            host: BLOG.comment.cusdisConfig.host,
-            appId: BLOG.comment.cusdisConfig.appId,
-            pageId: frontMatter.id,
-            pageTitle: frontMatter.title,
-            pageUrl: BLOG.link + router.asPath,
-            theme: BLOG.appearance
-          }}
-          lang={fetchCusdisLang()}
-        />
-      )}
+      <Comments frontMatter={frontMatter} />
     </Container>
   )
 }