Scaffold basic workshop frontend.

components/comments/index.js

@@ -0,0 +1,54 @@
+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 }) => {
+  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 (
+    <>
+      {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} />
+      )}
+    </>
+  )
+}
+
+export default Comments