feat(plugin): add twikoo comment plugin support

virtualansh · Jul 30, 2023 · 39ccaf8 · 39ccaf8
1 parent 9959065
commit 39ccaf8
Show file tree

Hide file tree

Showing 13 changed files with 413 additions and 89 deletions.
diff --git a/_config.yml b/_config.yml
@@ -105,9 +105,9 @@ gitalk:
   autoExpand: true
   clientID: ''
   clientSecret: ''
-  repo: 'dev-blog-comments'
-  owner: 'TriDiamond'
-  admin: ['TriDiamond']
+  repo: '' ## dev-blo-comments
+  owner: '' ## owner name
+  admin: [''] ## ['admin_name']
   id: uid
   language: en
   distractionFreeMode: true
@@ -127,9 +127,18 @@ valine:
   avatarForce: false
   meta: ['nick', 'mail']
   requiredFields: []
-  admin: 'TriDiamond'
+  admin: '' # admin username
   recentComment: true
 
+# Twikoo comment plugin
+# see https://twikoo.js.org/quick-start.html
+twikoo:
+  enable: false
+  recentComment: true
+  envId: xxxxxxxxxxxxxxx # 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+  # region: ap-guangzhou # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+  lang: 'en' # 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+
 # Enable Busuanzi statistic plugin
 # see http://ibruce.info/2015/04/04/busuanzi/
 busuanzi:

diff --git a/release.config.js b/release.config.js
@@ -1,11 +1,5 @@
 module.exports = {
-  branches: [
-    'main',
-    {
-      name: 'beta',
-      prerelease: true
-    }
-  ],
+  branches: ['main'],
   plugins: [
     '@semantic-release/commit-analyzer',
     '@semantic-release/release-notes-generator',

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -5,27 +5,18 @@
     <SubTitle :title="'titles.comment'" />
     <div id="gitalk-container"></div>
     <div id="vcomments"></div>
+    <div id="tcomment"></div>
   </div>
 </template>
 
 <script lang="ts">
-/**
- * Gitalk and Valine is imported through CDN
- * need to dereferencing these library globals
- *
- * Gitalk version 1.6
- * Valine version 1.4.14
- *
- * Check the usage of these version before
- * using these global variables.
- */
-declare const Gitalk: any
-declare const Valine: any
-
 import { useAppStore } from '@/stores/app'
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { usePostStore } from '@/stores/post'
+import { twikooInit } from '@/utils/comments/twikoo-api'
+import { githubInit } from '@/utils/comments/github-api'
+import { valineInit } from '@/utils/comments/valine-api'
 
 export default defineComponent({
   name: 'ObComment',
@@ -91,36 +82,49 @@ export default defineComponent({
             ? 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'
             : appStore.themeConfig.plugins.gitalk.proxy
 
-        const gitalk = new Gitalk({
-          clientID: appStore.themeConfig.plugins.gitalk.clientID,
-          clientSecret: appStore.themeConfig.plugins.gitalk.clientSecret,
-          repo: appStore.themeConfig.plugins.gitalk.repo, // The repository of store comments,
-          owner: appStore.themeConfig.plugins.gitalk.owner,
-          admin: appStore.themeConfig.plugins.gitalk.admin,
-          id: uid, // Ensure uniqueness and length less than 50
-          language: appStore.themeConfig.plugins.gitalk.language,
-          distractionFreeMode: true, // Facebook-like distraction free mode
-          title: title,
-          body: body,
-          proxy: proxy
-        })
+        const { clientID, clientSecret, repo, owner, admin, language } =
+          appStore.themeConfig.plugins.gitalk
 
-        gitalk.render('gitalk-container')
+        githubInit({
+          clientID,
+          clientSecret,
+          repo,
+          owner,
+          admin,
+          language,
+          uid,
+          title,
+          body,
+          proxy
+        })
       } else if (appStore.themeConfig.plugins.valine.enable) {
-        new Valine({
-          el: '#vcomments',
-          appId: appStore.themeConfig.plugins.valine.app_id,
-          appKey: appStore.themeConfig.plugins.valine.app_key,
-          avatar: appStore.themeConfig.plugins.valine.avatar,
-          placeholder: appStore.themeConfig.plugins.valine.placeholder,
-          visitor: appStore.themeConfig.plugins.valine.visitor,
-          lang: appStore.themeConfig.plugins.valine.lang,
-          meta: appStore.themeConfig.plugins.valine.meta ?? [],
-          requiredFields:
-            appStore.themeConfig.plugins.valine.requiredFields ?? [],
-          avatarForce: appStore.themeConfig.plugins.valine.avatarForce,
+        const {
+          app_id,
+          app_key,
+          avatar,
+          placeholder,
+          visitor,
+          lang,
+          meta,
+          requiredFields,
+          avatarForce
+        } = appStore.themeConfig.plugins.valine
+
+        valineInit({
+          appId: app_id,
+          appKey: app_key,
+          avatar,
+          placeholder,
+          visitor,
+          lang,
+          meta,
+          requiredFields,
+          avatarForce,
           path: window.location.pathname // Make sure updating pathname
         })
+      } else if (appStore.themeConfig.plugins.twikoo.enable) {
+        const { envId, region, lang } = appStore.themeConfig.plugins.twikoo
+        twikooInit({ envId, region, lang, path: window.location.pathname })
       }
     }
 
@@ -328,4 +332,64 @@ export default defineComponent({
     }
   }
 }
+
+#twikoo {
+  .tk-comments {
+    @apply pt-2;
+  }
+
+  .tk-input {
+    @apply bg-ob-deep-900;
+  }
+
+  .tk-meta-input input {
+    @apply bg-ob-deep-900;
+  }
+
+  .el-input__inner:focus,
+  .el-textarea__inner:focus {
+    border-color: var(--text-accent);
+  }
+
+  .el-button--primary {
+    background: var(--main-gradient);
+    border: none;
+    color: #fff;
+    &:hover {
+      color: #fff;
+      opacity: 0.5;
+    }
+  }
+
+  .tk-icon.__comments {
+    color: var(--text-accent);
+  }
+
+  .tk-action-icon {
+    color: var(--text-accent);
+  }
+
+  .tk-comment {
+    @apply px-4 pt-6 pb-6 bg-ob-deep-900 mb-2 rounded-lg;
+    transition: var(--trans-ease);
+    &:hover {
+      box-shadow: var(--accent-shadow);
+    }
+  }
+
+  .tk-avatar {
+    border: 2px solid var(--text-accent);
+  }
+
+  .tk-nick {
+    color: var(--text-accent);
+    font-weight: 700;
+  }
+
+  .tk-comments-count {
+    > span:first-of-type {
+      color: var(--text-accent);
+    }
+  }
+}
 </style>
diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
@@ -82,10 +82,11 @@
 import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { RecentComment } from '@/utils'
-import { GithubComments } from '@/utils/github-api'
-import { LeanCloudComments } from '@/utils/leancloud-api'
+import { GithubComments } from '@/utils/comments/github-api'
+import { LeanCloudComments } from '@/utils/comments/leancloud-api'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
+import { TwikooComments } from '@/utils/comments/twikoo-api'
 
 export default defineComponent({
   name: 'ObRecentComment',
@@ -127,14 +128,27 @@ export default defineComponent({
         leadCloudComments.getRecentComments(7).then(response => {
           recentComments.value = response
         })
+      } else if (
+        appStore.themeConfig.plugins.twikoo.enable &&
+        appStore.themeConfig.plugins.twikoo.recentComment
+      ) {
+        const twikooComments = new TwikooComments({
+          envId: appStore.themeConfig.plugins.twikoo.envId,
+          lang: appStore.themeConfig.plugins.twikoo.lang
+        })
+
+        twikooComments.getRecentComments(7).then(res => {
+          recentComments.value = res
+        })
       }
     }
 
     /** Wait for config is ready */
     watch(
       () => appStore.configReady,
       (newValue, oldValue) => {
-        if (!oldValue && newValue) {
+        if (!!oldValue && newValue) {
+          recentComments.value = []
           initRecentComment()
         }
       }

diff --git a/src/models/ThemeConfig.class.ts b/src/models/ThemeConfig.class.ts
@@ -452,10 +452,21 @@ interface PluginsData {
     admin: string
     recentComment: boolean
   }
+
+  twikoo: {
+    enable: boolean
+    envId: string
+    recentComment: boolean
+    region?: string
+    lang: string
+  }
+
   recent_comments: boolean
+
   busuanzi: {
     enable: boolean
   }
+
   copy_protection: {
     enable: boolean
     author: {
@@ -471,6 +482,7 @@ interface PluginsData {
       en: string
     }
   }
+
   aurora_bot: {
     enable: boolean
     locale: string
@@ -508,6 +520,13 @@ export class Plugins implements PluginsData {
     admin: '',
     recentComment: false
   }
+  twikoo = {
+    enable: false,
+    envId: '',
+    region: undefined,
+    recentComment: false,
+    lang: ''
+  }
   recent_comments = false
   busuanzi = {
     enable: true

diff --git a/src/utils/github-api.ts → src/utils/comments/github-api.ts b/src/utils/github-api.ts → src/utils/comments/github-api.ts
@@ -3,6 +3,8 @@
  * @author TriDiamond <code.tridiamond@gmail.com>
  */
 
+declare const Gitalk: any
+
 import request from '@/utils/external-request'
 import { AxiosResponse } from 'axios'
 import { formatTime, filterHTMLContent, RecentComment } from '@/utils'
@@ -41,6 +43,48 @@ interface GithubCommentsInterface {
   comments: GithubComment[]
 }
 
+interface GitHubInitConfig {
+  clientID: string
+  clientSecret: string
+  repo: string
+  owner: string
+  admin: string[]
+  language: string
+  uid: string
+  title: string
+  body: string
+  proxy: string
+}
+
+export const githubInit = ({
+  clientID,
+  clientSecret,
+  repo,
+  owner,
+  admin,
+  language,
+  uid,
+  title,
+  body,
+  proxy
+}: GitHubInitConfig) => {
+  const gitalk = new Gitalk({
+    clientID,
+    clientSecret,
+    repo, // The repository of store comments,
+    owner,
+    admin,
+    language,
+    id: uid, // Ensure uniqueness and length less than 50
+    distractionFreeMode: true, // Facebook-like distraction free mode
+    title: title,
+    body: body,
+    proxy: proxy
+  })
+
+  gitalk.render('gitalk-container')
+}
+
 export class GithubComments implements GithubCommentsInterface {
   commentUrlCount = 0
   configs = {