✨ Add Cusdis

blog.config.js

@@ -34,7 +34,7 @@ const BLOG = {
     }
   },
   comment: {
-    // support provider: gitalk, utterances
+    // support provider: gitalk, utterances, cusdis
     provider: '', // leave it empty if you don't need any comment plugin
     gitalkConfig: {
       repo: '', // The repository of store comments
@@ -46,6 +46,11 @@ const BLOG = {
     },
     utterancesConfig: {
       repo: ''
+    },
+    cusdisConfig: {
+      appId: '', // data-app-id
+      host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
     }
   }
 }

components/Cusdis.js

@@ -0,0 +1,30 @@
+import BLOG from '@/blog.config'
+import { useEffect } from 'react'
+const Cusdis = ({ id, url, title }) => {
+  useEffect(() => {
+    const script = document.createElement('script')
+    const anchor = document.getElementById('comments')
+    script.setAttribute(
+      'src',
+      BLOG.comment.cusdisConfig.scriptSrc ||
+        'https://cusdis.com/js/cusdis.es.js'
+    )
+    script.setAttribute('async', true)
+    script.setAttribute('defer', true)
+    anchor.appendChild(script)
+  })
+  return (
+    <div id="comments">
+      <div
+        id="cusdis_thread"
+        data-host={BLOG.comment.cusdisConfig.host || 'https://cusdis.com'}
+        data-app-id={BLOG.comment.cusdisConfig.appId}
+        data-page-id={id}
+        data-page-url={url}
+        data-page-title={title}
+      ></div>
+    </div>
+  )
+}
+
+export default Cusdis

components/Utterances.js

@@ -1,6 +1,6 @@
 import BLOG from '@/blog.config'
 import { useEffect } from 'react'
-const Utterances = ({ issueTerm }) => {
+const Utterances = ({ issueTerm, layout }) => {
   useEffect(() => {
     const theme =
       BLOG.appearance === 'auto'
@@ -20,7 +20,10 @@ const Utterances = ({ issueTerm }) => {
   })
   return (
     <>
-      <div id="comments" className="md:-ml-16">
+      <div
+        id="comments"
+        className={layout && layout === 'fullWidth' ? 'md:-ml-16' : ''}
+      >
         <div className="utterances-frame"></div>
       </div>
     </>

layouts/default.js

@@ -16,7 +16,13 @@ const GitalkComponent = dynamic(
 )
 const UtterancesComponent = dynamic(
   () => {
-    return import('../components/Utterances')
+    return import('@/components/Utterances')
+  },
+  { ssr: false }
+)
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/Cusdis')
   },
   { ssr: false }
 )
@@ -121,10 +127,16 @@ const DefaultLayout = ({ children, blockMap, frontMatter }) => {
           }}
         />
       )}
-
       {BLOG.comment && BLOG.comment.provider === 'utterances' && (
         <UtterancesComponent issueTerm={frontMatter.id} />
       )}
+      {BLOG.comment && BLOG.comment.provider === 'cusdis' && (
+        <CusdisComponent
+          id={frontMatter.id}
+          url={BLOG.link + router.asPath}
+          title={frontMatter.title}
+        />
+      )}
     </Container>
   )
 }

layouts/fullwidth.js

@@ -14,6 +14,18 @@ const GitalkComponent = dynamic(
   },
   { ssr: false }
 )
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/Utterances')
+  },
+  { ssr: false }
+)
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/Cusdis')
+  },
+  { ssr: false }
+)
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -116,6 +128,16 @@ const FullWidthLayout = ({ children, blockMap, frontMatter }) => {
           }}
         />
       )}
+      {BLOG.comment && BLOG.comment.provider === 'utterances' && (
+        <UtterancesComponent issueTerm={frontMatter.id} layout="fullWidth" />
+      )}
+      {BLOG.comment && BLOG.comment.provider === 'cusdis' && (
+        <CusdisComponent
+          id={frontMatter.id}
+          url={BLOG.link + router.asPath}
+          title={frontMatter.title}
+        />
+      )}
     </Container>
   )
 }