initial commit

components/comments/Giscus.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTheme } from 'next-themes'
+
+import siteMetadata from '@/data/siteMetadata'
+
+interface Props {
+  mapping: string
+}
+
+const Giscus = ({ mapping }: Props) => {
+  const [enableLoadComments, setEnabledLoadComments] = useState(true)
+  const { theme, resolvedTheme } = useTheme()
+  const commentsTheme =
+    siteMetadata.comment.giscusConfig.themeURL === ''
+      ? theme === 'dark' || resolvedTheme === 'dark'
+        ? siteMetadata.comment.giscusConfig.darkTheme
+        : siteMetadata.comment.giscusConfig.theme
+      : siteMetadata.comment.giscusConfig.themeURL
+
+  const COMMENTS_ID = 'comments-container'
+
+  const LoadComments = useCallback(() => {
+    setEnabledLoadComments(false)
+    const script = document.createElement('script')
+    script.src = 'https://giscus.app/client.js'
+    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', 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
+
+    const comments = document.getElementById(COMMENTS_ID)
+    if (comments) comments.appendChild(script)
+
+    return () => {
+      const comments = document.getElementById(COMMENTS_ID)
+      if (comments) comments.innerHTML = ''
+    }
+  }, [commentsTheme, mapping])
+
+  // Reload on theme change
+  useEffect(() => {
+    const iframe = document.querySelector('iframe.giscus-frame')
+    if (!iframe) return
+    LoadComments()
+  }, [LoadComments])
+
+  return (
+    <div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
+      {enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
+      <div className="giscus" id={COMMENTS_ID} />
+    </div>
+  )
+}
+
+export default Giscus