Merge pull request #441 from timlrx/fix/comments-mapping

fix: mapping property in comments

Author: timlrx

components/comments/Giscus.js

@@ -3,7 +3,7 @@ import { useTheme } from 'next-themes'
 
 import siteMetadata from '@/data/siteMetadata'
 
-const Giscus = ({ mapping }) => {
+const Giscus = () => {
   const [enableLoadComments, setEnabledLoadComments] = useState(true)
   const { theme, resolvedTheme } = useTheme()
   const commentsTheme =
@@ -18,8 +18,17 @@ const Giscus = ({ mapping }) => {
   const LoadComments = useCallback(() => {
     setEnabledLoadComments(false)
 
-    const { repo, repositoryId, category, categoryId, reactions, metadata, inputPosition, lang } =
-      siteMetadata?.comment?.giscusConfig
+    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'
@@ -43,7 +52,7 @@ const Giscus = ({ mapping }) => {
       const comments = document.getElementById(COMMENTS_ID)
       if (comments) comments.innerHTML = ''
     }
-  }, [commentsTheme, mapping])
+  }, [commentsTheme])
 
   // Reload on theme change
   useEffect(() => {

components/comments/Utterances.js

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

components/comments/index.js

@@ -24,27 +24,11 @@ const Comments = ({ frontMatter }) => {
   let term
   const comment = siteMetadata?.comment
   if (!comment || Object.keys(comment).length === 0) return <></>
-  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 mapping={term} />
-      )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'giscus' && <GiscusComponent />}
       {siteMetadata.comment && siteMetadata.comment.provider === 'utterances' && (
-        <UtterancesComponent issueTerm={term} />
+        <UtterancesComponent />
       )}
       {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
         <DisqusComponent frontMatter={frontMatter} />