initial commit

components/comments/Disqus.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+const Disqus = ({ frontMatter }: Props) => {
+  const [enableLoadComments, setEnabledLoadComments] = useState(true)
+
+  const COMMENTS_ID = 'disqus_thread'
+
+  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 })
+    }
+  }
+
+  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.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

components/comments/Utterances.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTheme } from 'next-themes'
+
+import siteMetadata from '@/data/siteMetadata'
+
+interface Props {
+  issueTerm: string
+}
+
+const Utterances = ({ issueTerm }: Props) => {
+  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', 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, issueTerm])
+
+  // 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.tsx

@@ -0,0 +1,59 @@
+import siteMetadata from '@/data/siteMetadata'
+import dynamic from 'next/dynamic'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+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 }: 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 mapping={term} />
+      )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'utterances' && (
+        <UtterancesComponent issueTerm={term} />
+      )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
+        <DisqusComponent frontMatter={frontMatter} />
+      )}
+    </div>
+  )
+}
+
+export default Comments