Initial commit

components/comments/Disqus.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const Disqus = ({ frontMatter }) => {
+  const [enableLoadComments, setEnabledLoadComments] = useState(true)
+
+  const COMMENTS_ID = 'disqus_thread'
+
+  function LoadComments() {
+    setEnabledLoadComments(false)
+
+    window.disqus_config = function () {
+      this.page.url = window.location.href
+      this.page.identifier = frontMatter.slug
+    }
+    if (window.DISQUS === undefined) {
+      const script = document.createElement('script')
+      script.src = 'https://' + siteMetadata.comment.disqusConfig.shortname + '.disqus.com/embed.js'
+      script.setAttribute('data-timestamp', +new Date())
+      script.setAttribute('crossorigin', 'anonymous')
+      script.async = true
+      document.body.appendChild(script)
+    } else {
+      window.DISQUS.reset({ reload: true })
+    }
+  }
+
+  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="disqus-frame" id={COMMENTS_ID} />
+    </div>
+  )
+}
+
+export default Disqus

components/comments/Giscus.js

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTheme } from 'next-themes'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const Giscus = () => {
+  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 {
+      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-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-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])
+
+  // 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

components/comments/Utterances.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTheme } from 'next-themes'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const Utterances = () => {
+  const [enableLoadComments, setEnabledLoadComments] = useState(true)
+  const { theme, resolvedTheme } = useTheme()
+  const commentsTheme =
+    theme === 'dark' || resolvedTheme === 'dark'
+      ? siteMetadata.comment.utterancesConfig.darkTheme
+      : siteMetadata.comment.utterancesConfig.theme
+
+  const COMMENTS_ID = 'comments-container'
+
+  const LoadComments = useCallback(() => {
+    setEnabledLoadComments(false)
+    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('label', siteMetadata.comment.utterancesConfig.label)
+    script.setAttribute('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])
+
+  // Reload on theme change
+  useEffect(() => {
+    const iframe = document.querySelector('iframe.utterances-frame')
+    if (!iframe) return
+    LoadComments()
+  }, [LoadComments])
+
+  // Added `relative` to fix a weird bug with `utterances-frame` position
+  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="utterances-frame relative" id={COMMENTS_ID} />
+    </div>
+  )
+}
+
+export default Utterances

components/comments/index.js

@@ -0,0 +1,39 @@
+import siteMetadata from '@/data/siteMetadata'
+import dynamic from 'next/dynamic'
+
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/comments/Utterances')
+  },
+  { ssr: false }
+)
+const GiscusComponent = dynamic(
+  () => {
+    return import('@/components/comments/Giscus')
+  },
+  { ssr: false }
+)
+const DisqusComponent = dynamic(
+  () => {
+    return import('@/components/comments/Disqus')
+  },
+  { ssr: false }
+)
+
+const Comments = ({ frontMatter }) => {
+  const comment = siteMetadata?.comment
+  if (!comment || Object.keys(comment).length === 0) return <></>
+  return (
+    <div id="comment">
+      {siteMetadata.comment && siteMetadata.comment.provider === 'giscus' && <GiscusComponent />}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'utterances' && (
+        <UtterancesComponent />
+      )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
+        <DisqusComponent frontMatter={frontMatter} />
+      )}
+    </div>
+  )
+}
+
+export default Comments