feat: 添加 cusdis 评论。

.env.example

@@ -4,6 +4,8 @@ NEXT_PUBLIC_GISCUS_CATEGORY=
 NEXT_PUBLIC_GISCUS_CATEGORY_ID=
 NEXT_PUBLIC_UTTERANCES_REPO=
 NEXT_PUBLIC_DISQUS_SHORTNAME=
+NEXT_PUBLIC_CUSDIS_APPID=
+NEXT_PUBLIC_CUSDIS_HOST=
 
 
 MAILCHIMP_API_KEY=
@@ -15,8 +17,8 @@ BUTTONDOWN_API_KEY=
 
 CONVERTKIT_API_URL=https://api.convertkit.com/v3/
 CONVERTKIT_API_KEY=
-// curl https://api.convertkit.com/v3/forms?api_key=<your_public_api_key> to get your form ID 
-CONVERTKIT_FORM_ID= 
+// curl https://api.convertkit.com/v3/forms?api_key=<your_public_api_key> to get your form ID
+CONVERTKIT_FORM_ID=
 
 KLAVIYO_API_KEY=
 KLAVIYO_LIST_ID=

.gitignore

@@ -35,4 +35,5 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
-secrets.txt
+secrets.txt
+.env

.vscode/settings.json

@@ -2,8 +2,11 @@
   "cSpell.words": [
     "alpn",
     "blackhole",
+    "Cusdis",
+    "Disqus",
     "dokodemo",
     "fullchain",
+    "Giscus",
     "lastmod",
     "outbounds",
     "rprx",

components/comments/Cusdis.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo, useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+import { ReactCusdis } from 'react-cusdis'
+import { useTheme } from 'next-themes'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+const Cusdis = ({ frontMatter }: Props) => {
+  const { resolvedTheme } = useTheme()
+  const commentsTheme = useMemo(() => {
+    switch (resolvedTheme) {
+      case 'light':
+      case 'dark':
+        return resolvedTheme
+      default:
+        return 'auto'
+    }
+  }, [resolvedTheme])
+  return (
+    <div className="my-2">
+      <ReactCusdis
+        key={commentsTheme}
+        lang={siteMetadata.language?.toLocaleLowerCase()}
+        attrs={{
+          appId: siteMetadata.comment.cusdisConfig.appId,
+          host: siteMetadata.comment.cusdisConfig.host,
+          pageId: frontMatter.slug,
+          pageUrl: window.location.href,
+          pageTitle: frontMatter.title,
+          theme: commentsTheme,
+        }}
+      />
+    </div>
+  )
+}
+
+export default Cusdis

components/comments/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import siteMetadata from '@/data/siteMetadata'
 import dynamic from 'next/dynamic'
 import { PostFrontMatter } from 'types/PostFrontMatter'
@@ -24,6 +26,12 @@ const DisqusComponent = dynamic(
   },
   { ssr: false }
 )
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/comments/Cusdis')
+  },
+  { ssr: false }
+)
 
 const Comments = ({ frontMatter }: Props) => {
   let term
@@ -52,6 +60,9 @@ const Comments = ({ frontMatter }: Props) => {
       {siteMetadata.comment && siteMetadata.comment.provider === 'disqus' && (
         <DisqusComponent frontMatter={frontMatter} />
       )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'cusdis' && (
+        <CusdisComponent frontMatter={frontMatter} />
+      )}
     </div>
   )
 }

data/siteMetadata.js

@@ -40,7 +40,7 @@ const siteMetadata = {
     // content security policy in the `next.config.js` file.
     // Select a provider and use the environment variables associated to it
     // https://vercel.com/docs/environment-variables
-    provider: '', // supported providers: giscus, utterances, disqus
+    provider: 'cusdis', // supported providers: giscus, utterances, disqus
     giscusConfig: {
       // Visit the link below, and follow the steps in the 'configuration' section
       // https://giscus.app/
@@ -78,6 +78,10 @@ const siteMetadata = {
       // https://help.disqus.com/en/articles/1717111-what-s-a-shortname
       shortname: process.env.NEXT_PUBLIC_DISQUS_SHORTNAME,
     },
+    cusdisConfig: {
+      appId: process.env.NEXT_PUBLIC_CUSDIS_APPID,
+      host: process.env.NEXT_PUBLIC_CUSDIS_HOST,
+    },
   },
 }
 

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "baseUrl": ".",
     "paths": {
       "@/components/*": ["components/*"],

next.config.js

@@ -5,13 +5,13 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 // You might need to insert additional domains in script-src if you are using external services
 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app;
-  style-src 'self' 'unsafe-inline';
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app comment.ivanli.cc;
+  style-src 'self' 'unsafe-inline' comment.ivanli.cc;
   img-src * blob: data:;
   media-src 'none';
   connect-src *;
   font-src 'self';
-  frame-src giscus.app
+  frame-src giscus.app comment.ivanli.cc
 `
 
 const securityHeaders = [

package.json

@@ -27,6 +27,7 @@
     "postcss": "^8.4.17",
     "preact": "^10.11.1",
     "react": "18.2.0",
+    "react-cusdis": "^2.1.3",
     "react-dom": "18.2.0",
     "reading-time": "1.5.0",
     "rehype-autolink-headings": "^6.1.1",