feat(gitalk): add gitalk component for doc post commenting

docs/.vitepress/theme/components/layout/Comment.vue

@@ -0,0 +1,80 @@
+<template>
+    <div id="comment-container"></div>
+  </template>
+  
+  <script lang="ts" setup>
+    import { reactive, toRefs, onMounted } from 'vue';
+    import { useData } from 'vitepress';
+    import md5 from 'blueimp-md5';
+    import $ from 'jquery';
+    import { Message } from '@arco-design/web-vue';
+    import '@arco-design/web-vue/es/message/style/css.js';
+    import Gitalk from 'gitalk';
+    import '../../styles/component/gitalk.scss';
+  
+    // 定义属性
+    const props = defineProps({
+      commentConfig: Object,
+    });
+  
+    const data = reactive({
+      type: props.commentConfig?.type ?? 'gitalk',
+    })
+    const { type } = toRefs(data);
+  
+    // 初始化评论组件配置
+    const { page } = useData();
+    let gitalk;
+    if (type.value && type.value == 'gitalk') {
+      gitalk = new Gitalk({
+        clientID: '938407aebb84fc7e93d9',
+        clientSecret: '7e18d4f1b541dde0a35725b19141341b308ea3d4',
+        repo: 'toshiki-notebook',
+        owner: 'andatoshiki',
+        admin: ['andatoshiki'],
+        id: md5(page.value.relativePath),
+        language: 'en-US',
+        distractionFreeMode: false,
+        // 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
+        proxy: 'https://vercel.andatoshiki.top/github_access_token',
+      });
+    }
+  
+    // 渲染评论组件
+    onMounted(() => {
+      if (type.value && type.value == 'gitalk') {
+        gitalk.render('comment-container')
+  
+        // 如果点赞，先判断有没有登录
+        let $gc = $('#comment-container');
+        $gc.on('click', '.gt-comment-like', function () {
+          if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
+            Message.warning({
+              content: 'Please login before you like',
+              closable: true
+            })
+  
+            return false
+          }
+          return true
+        })
+        // 提交评论后输入框高度没有重置bug
+        $gc.on('click', '.gt-header-controls .gt-btn-public', function () {
+          let $gt = $('.gt-header-textarea')
+          $gt.css('height', '72px')
+        })
+        // 点击预览时，隐藏评论按钮
+        $gc.on('click', '.gt-header-controls .gt-btn-preview', function () {
+          let pl = $('.gt-header-controls .gt-btn-public');
+          if (pl.hasClass('hide')) {
+            pl.removeClass('hide')
+          } else {
+            // 隐藏
+            pl.addClass('hide')
+          }
+        })
+      }
+    })
+  </script>
+  
+  <style scoped></style>

docs/.vitepress/theme/index.ts

@@ -20,6 +20,10 @@ import CustomLayout from './CustomLayout.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
 // @ts-ignore
 import Copyright from './components/Copyright.vue'
+// @ts-ignore
+import Comment from './components/layout/Comment.vue'
+
+// import CodeTitle from './components/CodeTitle.vue'
 
 if (typeof window !== 'undefined') {
     // unregister PWA service
@@ -61,6 +65,7 @@ export default {
             // aside buttom slots for sponsor
             'aside-bottom': () => h(AsideSponsors),
             'doc-footer-before': () => h(Copyright),
+            'doc-after': () => h(Comment)
         })
     },
 
@@ -78,7 +83,8 @@ export default {
 
     enhanceApp(ctx) {
         // custom component tag/slot
-        // ctx.app.component('Link', CardLink)
+        // ctx.app.component('CardLink', CardLink)
+        // ctx.app.component('DPlayer', vue3videoPlay)
 
         // external plugin for vitepress hack performance
         vitepressNprogress(ctx) // nprogress plugin for vitepress

package.json

@@ -27,20 +27,24 @@
   "devDependencies": {
     "@andatoshiki/markdown-it-image-caption": "0.0.2",
     "@andatoshiki/vitepress-plugin-nprogress": "^0.0.1",
+    "@arco-design/web-vue": "^2.46.0",
     "@luckrya/markdown-it-link-to-card": "^0.3.3",
     "@mdit-vue/shared": "^0.12.0",
     "@types/node": "^18.14.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "artplayer": "^4.6.2",
+    "blueimp-md5": "^2.19.0",
     "conventional-changelog-cli": "^2.2.2",
     "dplayer": "^1.27.1",
     "feed": "^4.2.2",
     "flv.js": "^1.6.2",
     "fs": "^0.0.1-security",
     "fs-extra": "^11.1.1",
+    "gitalk": "^1.8.0",
     "gray-matter": "^4.0.3",
     "hls.js": "^1.3.5",
     "husky": "^8.0.3",
+    "jquery": "^3.7.0",
     "lint-staged": "^13.2.0",
     "markdown-it-link-preview": "^1.1.3",
     "markdown-it-table-captions": "^1.0.4",