Skip to content

Commit

Permalink
feat: add empty display for recent comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@bennyxguo
bennyxguo committed Aug 2, 2023
1 parent bd69479 commit c4dde9b
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 73 deletions.
8 changes: 8 additions & 0 deletions src/components/Comment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,5 +477,13 @@ export default defineComponent({
.wl-card .wl-quote {
border-inline-start: none;
}
.wl-header-item {
@apply items-center;
}
.wl-header input {
@apply p-2 m-2;
}
}
</style>
183 changes: 124 additions & 59 deletions src/components/Sidebar/src/RecentComment.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<div class="sidebar-box">
<div v-if="!!enabledCommentPlugin" class="sidebar-box">
<SubTitle :title="'titles.recent_comment'" icon="quote" />
<ul>
<template v-if="comments.length > 0">
<template v-if="isLoading === false">
<li
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-if="comments.length > 0"
v-for="comment in comments"
:key="comment.id"
>
Expand Down Expand Up @@ -35,6 +36,19 @@
</div>
</div>
</li>

<div
v-else
class="flex flex-row justify-center items-center text-ob-dim"
>
<SvgIcon
class="mr-2"
icon-class="warning"
svgType="stroke"
stroke="var(--text-dim)"
/>
{{ t('settings.empty-recent-comments') }}
</div>
</template>
<template v-else>
<li
Expand Down Expand Up @@ -81,8 +95,9 @@
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
import { computed, defineComponent, ref, watch } from 'vue'
import { SubTitle } from '@/components/Title'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { RecentComment } from '@/utils'
import { GithubComments } from '@/utils/comments/github-api'
import { LeanCloudComments } from '@/utils/comments/leancloud-api'
Expand All @@ -93,90 +108,140 @@ import { WalineComments } from '@/utils/comments/waline-api'
export default defineComponent({
name: 'ObRecentComment',
components: { SubTitle },
components: { SubTitle, SvgIcon },
setup() {
const appStore = useAppStore()
const { t } = useI18n()
let recentComments = ref<RecentComment[]>([])
let loading = ref<boolean>(true)
const initRecentComment = () => {
if (!appStore.configReady) return
const enabledCommentPlugin = computed<string | undefined>(() => {
if (
appStore.themeConfig.plugins.gitalk.enable &&
appStore.themeConfig.plugins.gitalk.recentComment
!!appStore.themeConfig.plugins.gitalk.enable &&
!!appStore.themeConfig.plugins.gitalk.recentComment
) {
const githubComments = new GithubComments({
repo: appStore.themeConfig.plugins.gitalk.repo,
clientId: appStore.themeConfig.plugins.gitalk.clientID,
clientSecret: appStore.themeConfig.plugins.gitalk.clientSecret,
owner: appStore.themeConfig.plugins.gitalk.owner,
admin: appStore.themeConfig.plugins.gitalk.admin[0]
})
githubComments.getComments().then(response => {
recentComments.value = response
})
} else if (
appStore.themeConfig.plugins.valine.enable &&
appStore.themeConfig.plugins.valine.recentComment
return 'gitalk'
}
if (
!!appStore.themeConfig.plugins.valine.enable &&
!!appStore.themeConfig.plugins.valine.recentComment
) {
const leadCloudComments = new LeanCloudComments({
appId: appStore.themeConfig.plugins.valine.app_id,
appKey: appStore.themeConfig.plugins.valine.app_key,
avatar: appStore.themeConfig.plugins.valine.avatar,
admin: appStore.themeConfig.plugins.valine.admin,
lang: appStore.themeConfig.plugins.valine.lang
})
leadCloudComments
.getRecentComments(7)
.then(res => (recentComments.value = res))
} else if (
appStore.themeConfig.plugins.twikoo.enable &&
appStore.themeConfig.plugins.twikoo.recentComment
return 'valine'
}
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))
} else if (
appStore.themeConfig.plugins.waline.enable &&
appStore.themeConfig.plugins.waline.recentComment
return 'twikoo'
}
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))
return 'waline'
}
return undefined
})
const initRecentComment = () => {
if (!appStore.configReady || enabledCommentPlugin.value === undefined) {
loading.value = false
return
}
switch (enabledCommentPlugin.value) {
case 'gitalk':
const githubComments = new GithubComments({
repo: appStore.themeConfig.plugins.gitalk.repo,
clientId: appStore.themeConfig.plugins.gitalk.clientID,
clientSecret: appStore.themeConfig.plugins.gitalk.clientSecret,
owner: appStore.themeConfig.plugins.gitalk.owner,
admin: appStore.themeConfig.plugins.gitalk.admin[0]
})
githubComments.getComments().then(response => {
recentComments.value = response
})
break
case 'valine':
const leadCloudComments = new LeanCloudComments({
appId: appStore.themeConfig.plugins.valine.app_id,
appKey: appStore.themeConfig.plugins.valine.app_key,
avatar: appStore.themeConfig.plugins.valine.avatar,
admin: appStore.themeConfig.plugins.valine.admin,
lang: appStore.themeConfig.plugins.valine.lang
})
leadCloudComments.getRecentComments(7).then(res => {
recentComments.value = res
loading.value = false
})
break
case 'twikoo':
const twikooComments = new TwikooComments({
envId: appStore.themeConfig.plugins.twikoo.envId,
lang: appStore.themeConfig.plugins.twikoo.lang
})
twikooComments.getRecentComments(7).then(res => {
recentComments.value = res
loading.value = false
})
break
case 'waline':
const walineComments = new WalineComments({
serverURL:
'https://' + appStore.themeConfig.plugins.waline.serverURL,
lang: appStore.locale ?? 'en'
})
walineComments.getRecentComments(7).then(res => {
recentComments.value = res
loading.value = false
})
break
default:
loading.value = false
}
}
/** Wait for config is ready */
watch(
() => appStore.configReady,
(newValue, oldValue) => {
if (!!oldValue && newValue) {
recentComments.value = []
if (!oldValue && newValue) {
initRecentComment()
}
}
)
onBeforeMount(initRecentComment)
return {
isLoading: computed(() => loading.value),
comments: computed(() => {
return recentComments.value
}),
isConfigReady: computed(() => appStore.configReady),
initRecentComment,
enabledCommentPlugin,
t
}
},
mounted() {
if (this.isConfigReady) {
this.initRecentComment()
}
}
})
</script>
Expand Down
1 change: 1 addition & 0 deletions src/locales/languages/cn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
"default-category": "文章",
"default-tag": "未分类",
"empty-tag": "目前没有标签",
"empty-recent-comments": "目前没有最新评论",
"pinned": "置顶",
"featured": "推荐"
}
Expand Down
3 changes: 2 additions & 1 deletion src/locales/languages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@
"tips-open-search": "Open search",
"default-category": "Article",
"default-tag": "unsorted",
"empty-tag": "Current no tags were found.",
"empty-tag": "No tags right now.",
"empty-recent-comments": "No recent comments right now.",
"pinned": "Pinned",
"featured": "Featured"
}
Expand Down
14 changes: 1 addition & 13 deletions src/views/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
<div>
<Sidebar>
<Profile author="blog-author" />
<RecentComment v-if="recentCommentEnable" />
<RecentComment />
<TagBox />
</Sidebar>
</div>
Expand Down Expand Up @@ -226,18 +226,6 @@ export default defineComponent({
}
return categoryStore.categories
}),
recentCommentEnable: computed(() => {
return (
(!!appStore.themeConfig.plugins.gitalk.enable &&
!!appStore.themeConfig.plugins.gitalk.recentComment) ||
(!!appStore.themeConfig.plugins.valine.enable &&
!!appStore.themeConfig.plugins.valine.recentComment) ||
(!!appStore.themeConfig.plugins.twikoo.enable &&
!!appStore.themeConfig.plugins.twikoo.recentComment) ||
(!!appStore.themeConfig.plugins.waline.enable &&
!!appStore.themeConfig.plugins.waline.recentComment)
)
}),
expanderClass,
tabClass,
expandHandler,
Expand Down

0 comments on commit c4dde9b

Please sign in to comment.