Skip to content

Commit

Permalink
feat: add waline comment plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
bennyxguo committed Aug 2, 2023
1 parent 8b38e2f commit 6f34372
Show file tree
Hide file tree
Showing 7 changed files with 265 additions and 17 deletions.
14 changes: 13 additions & 1 deletion _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ valine:
lang: en
avatarForce: false
meta: ['nick', 'mail']
requiredFields: []
requiredFields: ['nick', 'mail']
admin: '' # admin username
recentComment: true

Expand All @@ -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:
Expand Down
88 changes: 87 additions & 1 deletion src/components/Comment.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<div id="gitalk-container"></div>
<div id="vcomments"></div>
<div id="tcomment"></div>
<div id="waline"></div>
</div>
</template>

Expand All @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
})
}
}
Expand All @@ -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)
})
Expand Down Expand Up @@ -378,7 +418,7 @@ export default defineComponent({
}
.tk-avatar {
border: 2px solid var(--text-accent);
border: none;
}
.tk-nick {
Expand All @@ -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>
41 changes: 28 additions & 13 deletions src/components/Sidebar/src/RecentComment.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand All @@ -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))
}
}
Expand Down
23 changes: 22 additions & 1 deletion src/models/ThemeConfig.class.ts
Original file line number Diff line number Diff line change
Expand Up @@ -424,7 +424,7 @@ export class SiteMeta {

type MetaAttributes = 'nick' | 'mail' | 'link'

interface PluginsData {
export interface PluginsData {
gitalk: {
enable: boolean
autoExpand: boolean
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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
Expand Down
108 changes: 108 additions & 0 deletions src/utils/comments/waline-api.ts
Original file line number Diff line number Diff line change
@@ -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]}`
}
}
4 changes: 3 additions & 1 deletion src/views/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 6f34372

Please sign in to comment.