feat: 添加并改用 commento 评论。

2022-10-07 22:04:38 +08:00 · 2022-10-07 22:04:38 +08:00 · ca5eb7cd5e
commit ca5eb7cd5e
parent eee38148ee
9 changed files with 175 additions and 11 deletions
--- a/.env.example
+++ b/.env.example
@ -6,6 +6,7 @@ NEXT_PUBLIC_UTTERANCES_REPO=
 NEXT_PUBLIC_DISQUS_SHORTNAME=
 NEXT_PUBLIC_CUSDIS_APPID=
 NEXT_PUBLIC_CUSDIS_HOST=
+NEXT_PUBLIC_COMMENTO_URL=


 MAILCHIMP_API_KEY=
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -2,6 +2,7 @@
  "cSpell.words": [
    "alpn",
    "blackhole",
+    "Commento",
    "Cusdis",
    "Disqus",
    "dokodemo",
--- a/components/comments/Commento.tsx
+++ b/components/comments/Commento.tsx
@ -0,0 +1,30 @@
+import React, { useMemo, useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+import { useTheme } from 'next-themes'
+import ReactCommento from './commento/ReactCommento'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+const Commento = ({ 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">
+      <ReactCommento url={siteMetadata.comment.commentoConfig.url} pageId={frontMatter.slug} />
+    </div>
+  )
+}
+
+export default Commento
--- a/components/comments/commento/ReactCommento.tsx
+++ b/components/comments/commento/ReactCommento.tsx
@ -0,0 +1,83 @@
+import { createRef } from 'preact'
+import React, { useLayoutEffect, useMemo, useRef } from 'react'
+
+interface DataAttributes {
+  [key: string]: string | boolean | undefined
+}
+
+const insertScript = (
+  src: string,
+  id: string,
+  dataAttributes: DataAttributes,
+  onload = () => {}
+) => {
+  const script = window.document.createElement('script')
+  script.async = true
+  script.src = src
+  script.id = id
+  console.log(document.getElementById(id))
+  if (document.getElementById(id)) {
+    return
+  }
+  script.addEventListener('load', onload, { capture: true, once: true })
+
+  Object.entries(dataAttributes).forEach(([key, value]) => {
+    if (value === undefined) {
+      return
+    }
+    script.setAttribute(`data-${key}`, value.toString())
+  })
+
+  document.body.appendChild(script)
+
+  return () => {
+    script.remove()
+  }
+}
+
+const ReactCommento = ({
+  url,
+  cssOverride,
+  autoInit,
+  noFonts,
+  hideDeleted,
+  pageId,
+}: {
+  url: string
+  cssOverride?: string
+  autoInit?: boolean
+  noFonts?: boolean
+  hideDeleted?: boolean
+  pageId?: string
+}) => {
+  const containerId = useMemo(() => `commento-${Math.random().toString().slice(2, 8)}`, [])
+  const container = createRef<HTMLDivElement>()
+  const initializing = useRef(false)
+
+  useLayoutEffect(() => {
+    if (!window) {
+      return
+    }
+
+    window['commento'] = container.current
+
+    const removeScript = insertScript(
+      url,
+      `${containerId}-script`,
+      {
+        'css-override': cssOverride,
+        'auto-init': autoInit,
+        'no-fonts': noFonts,
+        'hide-deleted': hideDeleted,
+        'page-id': pageId,
+        'id-root': containerId,
+      },
+      () => {
+        removeScript()
+      }
+    )
+  }, [autoInit, cssOverride, hideDeleted, noFonts, pageId, url, containerId, container])
+
+  return <div ref={container} id={containerId} />
+}
+export default ReactCommento
--- a/components/comments/index.tsx
+++ b/components/comments/index.tsx
@ -32,6 +32,12 @@ const CusdisComponent = dynamic(
  },
  { ssr: false }
 )
+const CommentoComponent = dynamic(
+  () => {
+    return import('@/components/comments/Commento')
+  },
+  { ssr: false }
+)

 const Comments = ({ frontMatter }: Props) => {
  let term
@ -63,6 +69,9 @@ const Comments = ({ frontMatter }: Props) => {
      {siteMetadata.comment && siteMetadata.comment.provider === 'cusdis' && (
        <CusdisComponent frontMatter={frontMatter} />
      )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'commento' && (
+        <CommentoComponent frontMatter={frontMatter} />
+      )}
    </div>
  )
 }
--- 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: 'cusdis', // supported providers: giscus, utterances, disqus
+    provider: 'commento', // supported providers: giscus, utterances, disqus
    giscusConfig: {
      // Visit the link below, and follow the steps in the 'configuration' section
      // https://giscus.app/
@ -82,6 +82,9 @@ const siteMetadata = {
      appId: process.env.NEXT_PUBLIC_CUSDIS_APPID,
      host: process.env.NEXT_PUBLIC_CUSDIS_HOST,
    },
+    commentoConfig: {
+      url: process.env.NEXT_PUBLIC_COMMENTO_URL,
+    },
  },
 }

--- a/next.config.js
+++ b/next.config.js
@ -10,7 +10,7 @@ const ContentSecurityPolicy = `
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
-  font-src 'self';
+  font-src 'self' comment.ivanli.cc;
  frame-src giscus.app comment.ivanli.cc
 `

--- a/package-lock.json
+++ b/package-lock.json
@ -23,6 +23,7 @@
        "postcss": "^8.4.17",
        "preact": "^10.11.1",
        "react": "18.2.0",
+        "react-commento": "^1.0.0",
        "react-cusdis": "^2.1.3",
        "react-dom": "18.2.0",
        "reading-time": "1.5.0",
@ -9928,7 +9929,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -10586,7 +10586,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "dependencies": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@ -10721,6 +10720,27 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-commento": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-commento/-/react-commento-1.0.0.tgz",
+      "integrity": "sha512-+SvEDi4drWpz/DHNzsIxfbmCm4o9XJ45/VUxC2nY+cZcd3+Ha7JwMAIl6k/aFiNW9LY7W+VMMadIWkV7Xlt1RQ==",
+      "dependencies": {
+        "react": "^16.13.1"
+      }
+    },
+    "node_modules/react-commento/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/react-cusdis": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/react-cusdis/-/react-cusdis-2.1.3.tgz",
@ -10745,8 +10765,7 @@
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/read-cache": {
      "version": "1.0.0",
@ -20307,8 +20326,7 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
    },
    "object-hash": {
      "version": "3.0.0",
@ -20737,7 +20755,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "requires": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@ -20829,6 +20846,26 @@
        "loose-envify": "^1.1.0"
      }
    },
+    "react-commento": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-commento/-/react-commento-1.0.0.tgz",
+      "integrity": "sha512-+SvEDi4drWpz/DHNzsIxfbmCm4o9XJ45/VUxC2nY+cZcd3+Ha7JwMAIl6k/aFiNW9LY7W+VMMadIWkV7Xlt1RQ==",
+      "requires": {
+        "react": "^16.13.1"
+      },
+      "dependencies": {
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
    "react-cusdis": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/react-cusdis/-/react-cusdis-2.1.3.tgz",
@ -20846,8 +20883,7 @@
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "read-cache": {
      "version": "1.0.0",
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
    "postcss": "^8.4.17",
    "preact": "^10.11.1",
    "react": "18.2.0",
+    "react-commento": "^1.0.0",
    "react-cusdis": "^2.1.3",
    "react-dom": "18.2.0",
    "reading-time": "1.5.0",