chore(root): migrate comments to cusdis

.env.example

@@ -1,4 +1,4 @@
 CONTENTFUL_SPACE_ID = ''
 CONTENTFUL_ACCESS_KEY = ''
-NEXT_PUBLIC_DISQUS_SHORTNAME = ''
+NEXT_PUBLIC_CUSDIS_APPID = ''
 NEXT_PUBLIC_SITE_URL = ''

README.md

@@ -9,7 +9,7 @@ First, copy `.env.example` and paste as `.env.local`, fill all field:
 ```bash
 CONTENTFUL_SPACE_ID = ''
 CONTENTFUL_ACCESS_KEY = ''
-NEXT_PUBLIC_DISQUS_SHORTNAME = ''
+NEXT_PUBLIC_CUSDIS_APPID = ''
 NEXT_PUBLIC_SITE_URL = ''
 ```
 
@@ -23,7 +23,7 @@ Last, open [http://localhost:3000](http://localhost:3000) with your browser to s
 
 ## Credits
 
-Built with [Chakra UI](https://chakra-ui.com), [Contentful](https://contentful.com) and [Next.js](https://nextjs.org).
+Built with [Chakra UI](https://chakra-ui.com), [Contentful](https://contentful.com), [Cusdis](https://cusdis.com) and [Next.js](https://nextjs.org).
 
 ## License
 

components/blog/Comments.js

@@ -0,0 +1,19 @@
+import { ReactCusdis } from 'react-cusdis';
+
+const Disqus = ({ pageUrl, pageId, pageTitle }) => {
+  const appId = process.env.NEXT_PUBLIC_CUSDIS_APPID;
+
+  return (
+    <ReactCusdis
+      attrs={{
+        host: 'https://cusdis.com',
+        appId,
+        pageId,
+        pageTitle,
+        pageUrl,
+      }}
+    />
+  );
+};
+
+export default Disqus;

package.json

@@ -13,12 +13,12 @@
     "@emotion/styled": "11",
     "contentful": "^8.3.5",
     "date-fns": "^2.21.3",
-    "disqus-react": "^1.0.11",
     "framer-motion": "4.1.17",
     "next": "10.2.2",
     "next-seo": "^4.24.0",
     "nprogress": "^0.2.0",
     "react": "17.0.2",
+    "react-cusdis": "^2.1.3",
     "react-dom": "17.0.2",
     "react-icons": "^4.2.0",
     "react-markdown": "^6.0.2",

pages/blog/[slug].js

@@ -5,7 +5,7 @@ import { Badge, Box, Divider, Heading, HStack, Text } from '@chakra-ui/react';
 import { format } from 'date-fns';
 
 import MarkdownComponent from '../../components/blog/MarkdownComponent';
-import Disqus from '../../components/blog/Disqus';
+import Comments from '../../components/blog/Comments';
 
 const client = createClient({
   space: process.env.CONTENTFUL_SPACE_ID,
@@ -119,7 +119,7 @@ const DetailBlog = ({ blog }) => {
         <MarkdownComponent markdownContent={markdownContent} />
       </Box>
       <Divider my={4} />
-      <Disqus url={url} identifier={id} title={title} />
+      <Comments pageUrl={url} pageId={id} pageTitle={title} />
     </>
   );
 };

yarn.lock

@@ -1461,11 +1461,6 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-disqus-react@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/disqus-react/-/disqus-react-1.0.11.tgz#7949923320835310666cbfc77aae90577711434a"
-  integrity sha512-DZGc6kk16EGLAJtJAn+EdNHy44pBD0QJnuuOSyMf6qqsZrIYwkBFe72mdvRKfGYD1toR7bAvkRjmec/YQTrG+w==
-
 domain-browser@4.19.0:
   version "4.19.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1"
@@ -2785,6 +2780,11 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
+react-cusdis@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/react-cusdis/-/react-cusdis-2.1.3.tgz#95ed31822689f2621a2cc1d9a4c8d4ff64030686"
+  integrity sha512-fUJOAUY7a3y21fNzlRWUSTr/ZMsejQAYWIWdsNuBPPZHbUrBvke/8Gw4OL5Mlrth7jLw8VTNssX0WBX5/prorQ==
+
 react-dom@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"