From 6f34372b10ebf4b8d8b4399d4a58441fc1712f86 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Wed, 2 Aug 2023 16:45:03 +0800
Subject: [PATCH] feat: add waline comment plugin

---
 _config.yml                                  |  14 ++-
 src/components/Comment.vue                   |  88 ++++++++++++++-
 src/components/Sidebar/src/RecentComment.vue |  41 ++++---
 src/models/ThemeConfig.class.ts              |  23 +++-
 src/utils/comments/waline-api.ts             | 108 +++++++++++++++++++
 src/views/Home.vue                           |   4 +-
 templates/index.html                         |   4 +
 7 files changed, 265 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/comments/waline-api.ts

diff --git a/_config.yml b/_config.yml
index 6bdffa7d..298999ff 100644
--- a/_config.yml
+++ b/_config.yml
@@ -126,7 +126,7 @@ valine:
   lang: en
   avatarForce: false
   meta: ['nick', 'mail']
-  requiredFields: []
+  requiredFields: ['nick', 'mail']
   admin: '' # admin username
   recentComment: true
 
@@ -139,6 +139,18 @@ twikoo:
   # 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
 
+# Waline comment plugin
+# see https://waline.js.org/guide/get-started/
+waline:
+  enable: false
+  recentComment: true
+  reaction: false
+  login: 'disable'
+  meta: ['nick', 'mail']
+  requiredMeta: ['nick', 'mail']
+  commentSorting: 'latest'
+  serverURL: '' # 填写服务端地址
+
 # Enable Busuanzi statistic plugin
 # see http://ibruce.info/2015/04/04/busuanzi/
 busuanzi:
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 05d92554..b51f345d 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -6,6 +6,7 @@
     <div id="gitalk-container"></div>
     <div id="vcomments"></div>
     <div id="tcomment"></div>
+    <div id="waline"></div>
   </div>
 </template>
 
@@ -17,6 +18,12 @@ 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'
+import { walineInit } from '@/utils/comments/waline-api'
+
+const languages: Record<string, string> = {
+  en: 'en',
+  cn: 'zh'
+}
 
 export default defineComponent({
   name: 'ObComment',
@@ -44,6 +51,7 @@ export default defineComponent({
     const postUid = toRefs(props).uid
     const appStore = useAppStore()
     const postStore = usePostStore()
+    let waline: any = undefined
 
     const enabledComment = (
       postTitle: string,
@@ -125,6 +133,25 @@ export default defineComponent({
       } else if (appStore.themeConfig.plugins.twikoo.enable) {
         const { envId, region, lang } = appStore.themeConfig.plugins.twikoo
         twikooInit({ envId, region, lang, path: window.location.pathname })
+      } else if (appStore.themeConfig.plugins.waline.enable) {
+        const {
+          serverURL,
+          login,
+          reaction,
+          meta,
+          requiredMeta,
+          commentSorting
+        } = appStore.themeConfig.plugins.waline
+
+        waline = walineInit({
+          serverURL,
+          lang: languages[appStore.locale ?? 'en'],
+          login,
+          reaction,
+          meta,
+          requiredMeta,
+          commentSorting
+        })
       }
     }
 
@@ -139,6 +166,19 @@ export default defineComponent({
       }
     )
 
+    /** Updating comments base on current locale */
+    watch(
+      () => appStore.locale,
+      (newLocale, oldLocale) => {
+        console.log(newLocale, oldLocale)
+        if (waline && newLocale !== undefined && newLocale !== oldLocale) {
+          waline.update({
+            lang: languages[newLocale]
+          })
+        }
+      }
+    )
+
     onMounted(() => {
       enabledComment(postTitle.value, postBody.value, postUid.value)
     })
@@ -378,7 +418,7 @@ export default defineComponent({
   }
 
   .tk-avatar {
-    border: 2px solid var(--text-accent);
+    border: none;
   }
 
   .tk-nick {
@@ -392,4 +432,50 @@ export default defineComponent({
     }
   }
 }
+
+#waline {
+  --waline-theme-color: var(--text-accent);
+  --waline-border: var(--background-secondary);
+  --waline-bgcolor: var(--background-primary);
+  --waline-bgcolor-light: var(--background-secondary);
+  --waline-badge-color: var(--text-accent);
+  --waline-disabled-bgcolor: var(--text-dim);
+  .wl-editor {
+    @apply p-2 box-border;
+  }
+
+  .wl-login-nick,
+  .wl-nick {
+    color: var(--text-sub-accent);
+  }
+
+  .wl-card {
+    @apply bg-ob-deep-900 p-4 rounded-lg;
+  }
+
+  .wl-num {
+    color: var(--text-accent);
+  }
+
+  .primary.wl-btn {
+    color: var(--text-bright);
+    border: none;
+    background: var(--main-gradient);
+    transition: var(--trans-ease);
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  .wl-card .wl-delete,
+  .wl-card .wl-like,
+  .wl-card .wl-reply,
+  .wl-card .wl-edit {
+    color: var(--text-dim);
+  }
+
+  .wl-card .wl-quote {
+    border-inline-start: none;
+  }
+}
 </style>
diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
index 3b396f90..5d77e297 100644
--- a/src/components/Sidebar/src/RecentComment.vue
+++ b/src/components/Sidebar/src/RecentComment.vue
@@ -4,17 +4,19 @@
     <ul>
       <template v-if="comments.length > 0">
         <li
-          class="bg-ob-deep-900 px-2 py-3 mb-1.5 rounded-lg flex flex-row justify-items-center items-center shadow-sm hover:shadow-ob transition-shadow"
+          class="bg-ob-deep-900 px-2 py-3 mb-1.5 rounded-lg flex flex-row justify-items-center items-stretch shadow-sm hover:shadow-ob transition-shadow"
           v-for="comment in comments"
           :key="comment.id"
         >
-          <img
-            class="col-span-1 mr-2 rounded-full p-1"
-            :src="comment.user.avatar_url"
-            alt="comment-avatar"
-            height="40"
-            width="40"
-          />
+          <div class="flex justify-start items-start">
+            <img
+              class="col-span-1 mr-2 rounded-full p-1"
+              :src="comment.user.avatar_url"
+              alt="comment-avatar"
+              height="40"
+              width="40"
+            />
+          </div>
           <div class="flex-1 text-xs">
             <div class="text-xs">
               <span class="text-ob pr-2">
@@ -87,6 +89,7 @@ import { LeanCloudComments } from '@/utils/comments/leancloud-api'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import { TwikooComments } from '@/utils/comments/twikoo-api'
+import { WalineComments } from '@/utils/comments/waline-api'
 
 export default defineComponent({
   name: 'ObRecentComment',
@@ -125,9 +128,9 @@ export default defineComponent({
           lang: appStore.themeConfig.plugins.valine.lang
         })
 
-        leadCloudComments.getRecentComments(7).then(response => {
-          recentComments.value = response
-        })
+        leadCloudComments
+          .getRecentComments(7)
+          .then(res => (recentComments.value = res))
       } else if (
         appStore.themeConfig.plugins.twikoo.enable &&
         appStore.themeConfig.plugins.twikoo.recentComment
@@ -137,9 +140,21 @@ export default defineComponent({
           lang: appStore.themeConfig.plugins.twikoo.lang
         })
 
-        twikooComments.getRecentComments(7).then(res => {
-          recentComments.value = res
+        twikooComments
+          .getRecentComments(7)
+          .then(res => (recentComments.value = res))
+      } else if (
+        appStore.themeConfig.plugins.waline.enable &&
+        appStore.themeConfig.plugins.waline.recentComment
+      ) {
+        const walineComments = new WalineComments({
+          serverURL: 'https://' + appStore.themeConfig.plugins.waline.serverURL,
+          lang: appStore.locale ?? 'en'
         })
+
+        walineComments
+          .getRecentComments(7)
+          .then(res => (recentComments.value = res))
       }
     }
 
diff --git a/src/models/ThemeConfig.class.ts b/src/models/ThemeConfig.class.ts
index 707f344e..1bfd6a1c 100644
--- a/src/models/ThemeConfig.class.ts
+++ b/src/models/ThemeConfig.class.ts
@@ -424,7 +424,7 @@ export class SiteMeta {
 
 type MetaAttributes = 'nick' | 'mail' | 'link'
 
-interface PluginsData {
+export interface PluginsData {
   gitalk: {
     enable: boolean
     autoExpand: boolean
@@ -461,6 +461,17 @@ interface PluginsData {
     lang: string
   }
 
+  waline: {
+    enable: boolean
+    recentComment: boolean
+    serverURL: string
+    reaction: boolean
+    login: string
+    meta: string[] | never[]
+    requiredMeta: string[] | never[]
+    commentSorting: string
+  }
+
   recent_comments: boolean
 
   busuanzi: {
@@ -527,6 +538,16 @@ export class Plugins implements PluginsData {
     recentComment: false,
     lang: ''
   }
+  waline = {
+    enable: false,
+    recentComment: false,
+    serverURL: '',
+    reaction: false,
+    login: 'disable',
+    meta: [],
+    requiredMeta: [],
+    commentSorting: 'latest'
+  }
   recent_comments = false
   busuanzi = {
     enable: true
diff --git a/src/utils/comments/waline-api.ts b/src/utils/comments/waline-api.ts
new file mode 100644
index 00000000..979d3c5d
--- /dev/null
+++ b/src/utils/comments/waline-api.ts
@@ -0,0 +1,108 @@
+declare const Waline: any
+
+import {
+  init,
+  RecentComments
+} from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'
+import { filterHTMLContent, formatCommentRelativeTime } from '..'
+import { PluginsData } from '@/models/ThemeConfig.class'
+
+type WalinePlugin = PluginsData['waline']
+interface WalineConfig extends WalinePlugin {
+  lang: string
+}
+
+interface WalineComment {
+  addr: string
+  avatar: string
+  browser: string
+  comment: string
+  insertedAt: string
+  ip: string
+  like: number
+  link: string
+  mail: string
+  nick: string
+  objectId: number
+  origin: string
+  os: string
+  pid: string | null
+  rid: string | null
+  status: string
+  sticky: boolean | null
+  time: number
+  url: string
+  user_id: number | null
+}
+
+export const walineInit = ({
+  serverURL,
+  lang = 'en',
+  reaction = false,
+  login = 'disable',
+  meta,
+  requiredMeta,
+  commentSorting
+}: Partial<WalineConfig>) => {
+  return init({
+    el: '#waline',
+    dark: 'body[class="theme-dark"]',
+    reaction,
+    serverURL,
+    lang,
+    login,
+    local: 'zh-CN',
+    meta,
+    requiredMeta,
+    commentSorting
+  })
+}
+
+export class WalineComments {
+  configs: Partial<WalineConfig> = {
+    serverURL: '',
+    lang: ''
+  }
+
+  constructor({ serverURL, lang }: WalineConfig) {
+    this.configs.serverURL = serverURL
+    this.configs.lang = lang
+  }
+
+  async getRecentComments(count: number) {
+    const { serverURL } = this.configs
+    const { comments }: { comments: WalineComment[] } = await RecentComments({
+      serverURL,
+      count
+    })
+    return comments.map((comment: WalineComment) => this.mapComment(comment))
+  }
+
+  mapComment(comment: WalineComment): RecentComments {
+    const createdAt = formatCommentRelativeTime(
+      this.convertDateFormat(comment.insertedAt),
+      this.configs.lang === 'cn' ? 'cn' : 'en'
+    )
+    return {
+      id: comment.objectId,
+      body: filterHTMLContent(comment.comment),
+      html_url: comment.url,
+      issue_url: '',
+      created_at: createdAt,
+      updated_at: '',
+      author_association: '',
+      user: {
+        id: comment.user_id,
+        login: comment.nick,
+        avatar_url: comment.avatar,
+        html_url: comment.link
+      },
+      is_admin: comment.user_id === 1
+    }
+  }
+
+  convertDateFormat(date: string) {
+    const dateObj = date.split(' ')
+    return `${dateObj[0]}T${dateObj[1]}`
+  }
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6231dc08..e2e14f9b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -233,7 +233,9 @@ export default defineComponent({
           (!!appStore.themeConfig.plugins.valine.enable &&
             !!appStore.themeConfig.plugins.valine.recentComment) ||
           (!!appStore.themeConfig.plugins.twikoo.enable &&
-            !!appStore.themeConfig.plugins.twikoo.recentComment)
+            !!appStore.themeConfig.plugins.twikoo.recentComment) ||
+          (!!appStore.themeConfig.plugins.waline.enable &&
+            !!appStore.themeConfig.plugins.waline.recentComment)
         )
       }),
       expanderClass,
diff --git a/templates/index.html b/templates/index.html
index dca1f56f..b3a0d6c4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -65,6 +65,10 @@
       rel="preload"
       src="https://cdn.jsdelivr.net/npm/twikoo@1.6.17/dist/twikoo.all.min.js"
     ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@waline/client@2.15.5/dist/waline.min.css"
+    />
   </head>
   <body id="body-container">
     <noscript>