From eee38148ee3010290610307d0801821a2f05630e Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Fri, 7 Oct 2022 17:12:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20cusdis=20=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example                   |   6 +++--
 .gitignore                     |   3 ++-
 .vscode/settings.json          |   3 +++
 components/comments/Cusdis.tsx |  41 +++++++++++++++++++++++++++++++++
 components/comments/index.tsx  |  11 +++++++++
 data/siteMetadata.js           |   6 ++++-
 jsconfig.json                  |   1 +
 next.config.js                 |   6 ++---
 package-lock.json              | Bin 950752 -> 912189 bytes
 package.json                   |   1 +
 10 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 components/comments/Cusdis.tsx

diff --git a/.env.example b/.env.example
index ecf12d0..97ce54d 100644
--- a/.env.example
+++ b/.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=
diff --git a/.gitignore b/.gitignore
index 76bad3b..79018e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,5 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
-secrets.txt
\ No newline at end of file
+secrets.txt
+.env
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 662a3ed..bb6031b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,8 +2,11 @@
   "cSpell.words": [
     "alpn",
     "blackhole",
+    "Cusdis",
+    "Disqus",
     "dokodemo",
     "fullchain",
+    "Giscus",
     "lastmod",
     "outbounds",
     "rprx",
diff --git a/components/comments/Cusdis.tsx b/components/comments/Cusdis.tsx
new file mode 100644
index 0000000..0d68207
--- /dev/null
+++ b/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
diff --git a/components/comments/index.tsx b/components/comments/index.tsx
index 89188ff..9e30231 100644
--- a/components/comments/index.tsx
+++ b/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>
   )
 }
diff --git a/data/siteMetadata.js b/data/siteMetadata.js
index 5b8566b..6a7eb5e 100644
--- a/data/siteMetadata.js
+++ b/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,
+    },
   },
 }
 
diff --git a/jsconfig.json b/jsconfig.json
index a01d7de..5d0cbf8 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "baseUrl": ".",
     "paths": {
       "@/components/*": ["components/*"],
diff --git a/next.config.js b/next.config.js
index 2dc87ed..225c42a 100644
--- a/next.config.js
+++ b/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 = [
diff --git a/package-lock.json b/package-lock.json
index 937cf4bcc2244fa27c91326b0ab8971f11d54295..b56132e62cbf0026703630f6573c589addcd78cb 100644
GIT binary patch
delta 1166
zcmd6l`%l|t6vp$u{a*UM-;0G7SYd;P5m+~AOJOS+E(4ZbrBE1cxl9)5m^zq{mbu_A
zb|6s~fex}B!w+I+;u41mTVjr6Zf0ucbZ#y))5KpSSwc+4BnE9T!^KV_ZvF-Sa+33T
zo}8Q~=S=r+y!5?i@>gmK9g6IGF_OE{mfPZX6gi5a`<iI&U!b@^$>LVfR~uFI=d(-#
zx6TnAp4vtfXsIF^zEQx^$jGrQcxO;naI=>fS|NIY2;dNm85lcH<~%qeQ?mg*D(ws4
zY>2w8ICh-=b^`2o=_;7HEo^{;9o&N7Qo|h??<$7&aXd3&aP3B&2$Ke!7ljkU_;5@Z
zD#FDZ!k_b)|G79eiX{!w15tRiITW3v*7#XPfUkd4IK(~{)<CpHlB`RyoQ2MCduynt
zaH%a!CWMqpn%B7BzpJLg-{@&A?sXUKuYRSoF6iG~A9gl*Bkc!jD;k44gZm=Yhbn!(
zrX6kmaOKM#?atEehf8Xz)_Xg{Jui3;R2?o2)K^C$4X$8i!+K|TxGP+{X;bd#sjCI>
z?p{d|JPwxwx~_>fNE@YjXm63OPhh_)#|m((M;_UUu0A=L`q(Mi?Z@7q<y!IdPev1L
zZXy|A`-toC@ELgx47KVv!51=Q#XCg}qHX#D_}nxFI-5xr)+FTZ>gxf~hyjt6=PVy9
z%?_?^ro(U@vq1R>VGxTZOY?hDMtp!gyNs?pX<G^7>r~4>4l7L5vQPhZU~<s&WZ9e=
zA0-01>RIuV%z_{K+3Lp_M1w37Z9!K0AIRg+F%x=+i1S}T#gj2&O7>rBE6~}@cBF%&
zSdekJhkdseyFX!m3dv8JfeV+J8B4CP%Q8%_qZ+1t#iC_+QRI1M%*^ChLooe?nge@!
zIfJ!Mnd8&P`F;8rJer^!ZaQTP#2(Q5@d2)*_!?i7!2Sa>!`U7~QaDdGVC*fPUGYc;
z{SKGl;B}sXb2s?5>}7^~XSsbPjx*)eE$FRQE>d*WDg7O|<ufJUj;CjpRa1ETeN{<?
zfnN+MC`_q|8ZaeP9kZEsQb8qMOZlIEGO{e~k3o!npylM?+uvw!TG2D3&E;UZtk+3+
zD^;KJ;P@`RkK>tuepG<6glxup^YRJ;zCFftm~7)B*i2NwBW-$=gR@JQVDOS+#Il$4
OL2c=H_m1eli+=%15tRl2

delta 20194
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

diff --git a/package.json b/package.json
index daa77e1..dabc5c0 100644
--- a/package.json
+++ b/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",