refactor: 改用 TypeScript。close #1.

components/comments/Disqus.tsx

@@ -1,8 +1,13 @@
 import React, { useState } from 'react'
 
 import siteMetadata from '@/data/siteMetadata'
+import { PostFrontMatter } from 'types/PostFrontMatter'
 
-const Disqus = ({ frontMatter }) => {
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+const Disqus = ({ frontMatter }: Props) => {
   const [enableLoadComments, setEnabledLoadComments] = useState(true)
 
   const COMMENTS_ID = 'disqus_thread'
@@ -10,18 +15,22 @@ const Disqus = ({ frontMatter }) => {
   function LoadComments() {
     setEnabledLoadComments(false)
 
+    // @ts-ignore
     window.disqus_config = function () {
       this.page.url = window.location.href
       this.page.identifier = frontMatter.slug
     }
+    // @ts-ignore
     if (window.DISQUS === undefined) {
       const script = document.createElement('script')
       script.src = 'https://' + siteMetadata.comment.disqusConfig.shortname + '.disqus.com/embed.js'
+      // @ts-ignore
       script.setAttribute('data-timestamp', +new Date())
       script.setAttribute('crossorigin', 'anonymous')
       script.async = true
       document.body.appendChild(script)
     } else {
+      // @ts-ignore
       window.DISQUS.reset({ reload: true })
     }
   }

components/comments/Giscus.tsx

@@ -3,7 +3,11 @@ import { useTheme } from 'next-themes'
 
 import siteMetadata from '@/data/siteMetadata'
 
-const Giscus = () => {
+interface Props {
+  mapping: string
+}
+
+const Giscus = ({ mapping }: Props) => {
   const [enableLoadComments, setEnabledLoadComments] = useState(true)
   const { theme, resolvedTheme } = useTheme()
   const commentsTheme =
@@ -17,30 +21,15 @@ const Giscus = () => {
 
   const LoadComments = useCallback(() => {
     setEnabledLoadComments(false)
-
-    const {
-      repo,
-      repositoryId,
-      category,
-      categoryId,
-      mapping,
-      reactions,
-      metadata,
-      inputPosition,
-      lang,
-    } = siteMetadata?.comment?.giscusConfig
-
     const script = document.createElement('script')
     script.src = 'https://giscus.app/client.js'
-    script.setAttribute('data-repo', repo)
-    script.setAttribute('data-repo-id', repositoryId)
-    script.setAttribute('data-category', category)
-    script.setAttribute('data-category-id', categoryId)
+    script.setAttribute('data-repo', siteMetadata.comment.giscusConfig.repo)
+    script.setAttribute('data-repo-id', siteMetadata.comment.giscusConfig.repositoryId)
+    script.setAttribute('data-category', siteMetadata.comment.giscusConfig.category)
+    script.setAttribute('data-category-id', siteMetadata.comment.giscusConfig.categoryId)
     script.setAttribute('data-mapping', mapping)
-    script.setAttribute('data-reactions-enabled', reactions)
-    script.setAttribute('data-emit-metadata', metadata)
-    script.setAttribute('data-input-position', inputPosition)
-    script.setAttribute('data-lang', lang)
+    script.setAttribute('data-reactions-enabled', siteMetadata.comment.giscusConfig.reactions)
+    script.setAttribute('data-emit-metadata', siteMetadata.comment.giscusConfig.metadata)
     script.setAttribute('data-theme', commentsTheme)
     script.setAttribute('crossorigin', 'anonymous')
     script.async = true
@@ -52,7 +41,7 @@ const Giscus = () => {
       const comments = document.getElementById(COMMENTS_ID)
       if (comments) comments.innerHTML = ''
     }
-  }, [commentsTheme])
+  }, [commentsTheme, mapping])
 
   // Reload on theme change
   useEffect(() => {

components/comments/Utterances.tsx

@@ -3,7 +3,11 @@ import { useTheme } from 'next-themes'
 
 import siteMetadata from '@/data/siteMetadata'
 
-const Utterances = () => {
+interface Props {
+  issueTerm: string
+}
+
+const Utterances = ({ issueTerm }: Props) => {
   const [enableLoadComments, setEnabledLoadComments] = useState(true)
   const { theme, resolvedTheme } = useTheme()
   const commentsTheme =
@@ -18,7 +22,7 @@ const Utterances = () => {
     const script = document.createElement('script')
     script.src = 'https://utteranc.es/client.js'
     script.setAttribute('repo', siteMetadata.comment.utterancesConfig.repo)
-    script.setAttribute('issue-term', siteMetadata.comment.utterancesConfig.issueTerm)
+    script.setAttribute('issue-term', issueTerm)
     script.setAttribute('label', siteMetadata.comment.utterancesConfig.label)
     script.setAttribute('theme', commentsTheme)
     script.setAttribute('crossorigin', 'anonymous')
@@ -31,7 +35,7 @@ const Utterances = () => {
       const comments = document.getElementById(COMMENTS_ID)
       if (comments) comments.innerHTML = ''
     }
-  }, [commentsTheme])
+  }, [commentsTheme, issueTerm])
 
   // Reload on theme change
   useEffect(() => {

components/comments/index.tsx

@@ -1,5 +1,10 @@
 import siteMetadata from '@/data/siteMetadata'
 import dynamic from 'next/dynamic'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
 
 const UtterancesComponent = dynamic(
   () => {
@@ -20,14 +25,29 @@ const DisqusComponent = dynamic(
   { ssr: false }
 )
 
-const Comments = ({ frontMatter }) => {
-  const comment = siteMetadata?.comment
-  if (!comment || Object.keys(comment).length === 0) return <></>
+const Comments = ({ frontMatter }: Props) => {
+  let term
+  switch (
+    siteMetadata.comment.giscusConfig.mapping ||
+    siteMetadata.comment.utterancesConfig.issueTerm
+  ) {
+    case 'pathname':
+      term = frontMatter.slug
+      break
+    case 'url':
+      term = window.location.href
+      break
+    case 'title':
+      term = frontMatter.title
+      break
+  }
   return (
     <div id="comment">
-      {siteMetadata.comment && siteMetadata.comment.provider === 'giscus' && <GiscusComponent />}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'giscus' && (
+        <GiscusComponent mapping={term} />
+      )}
       {siteMetadata.comment && siteMetadata.comment.provider === 'utterances' && (
-        <UtterancesComponent />
+        <UtterancesComponent issueTerm={term} />
       )}
       {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
         <DisqusComponent frontMatter={frontMatter} />