@starzkg/vuepress-plugin-page-info
Version:
A comment plugin for vuepress
90 lines (89 loc) • 3.95 kB
JavaScript
import { useLocaleConfig, useThemePluginConfig, } from '@starzkg/vuepress-shared/lib/esm/client';
import { usePageFrontmatter, usePageLang } from '@vuepress/client';
import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, watch, } from 'vue';
import { useRoute } from 'vue-router';
import { resolveEnablePageViews } from '../composables';
import { enableWaline, walineI18n, walineOption } from '../define';
import '../styles/waline.scss';
export default defineComponent({
name: 'Waline',
setup() {
const route = useRoute();
const frontmatter = usePageFrontmatter();
const lang = usePageLang();
const themePluginConfig = useThemePluginConfig('comment');
const walineLocale = useLocaleConfig(walineI18n);
let id;
let waline = null;
const enableComment = computed(() => {
if (!enableWaline)
return false;
const themeConfig = themePluginConfig.value.comment;
const pluginConfig = walineOption.comment !== false;
const pageConfig = frontmatter.value.comment;
return (
// Enable in page
Boolean(pageConfig) ||
// Enable in plugin and not disable in theme
(Boolean(pluginConfig) && pageConfig !== false) ||
// not disabled in anywhere
(themeConfig !== false &&
pluginConfig !== false &&
pageConfig !== false));
});
const enablePageViews = computed(() => resolveEnablePageViews(frontmatter.value));
const delayPromise = new Promise((resolve) => {
setTimeout(() => resolve(), walineOption.delay);
});
const updateWaline = () => {
const timeID = (id = new Date().getTime());
if (waline)
setTimeout(() => {
if (timeID === id)
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
waline.update({
lang: lang.value === 'zh-CN' ? 'zh-CN' : 'en',
locale: {
...walineLocale.value,
...(walineOption.locale || {}),
},
});
}, walineOption.delay);
else
Promise.all([import('@waline/client'), delayPromise]).then(([{ default: Waline }]) => {
if (timeID === id)
waline = Waline({
lang: lang.value === 'zh-CN' ? 'zh-CN' : 'en',
locale: {
...walineLocale.value,
...(walineOption.locale || {}),
},
emoji: [
'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
],
dark: 'body[data-theme="dark"]',
...walineOption,
el: '#waline-comment',
visitor: enablePageViews.value,
});
});
};
onMounted(() => {
if (enableWaline)
updateWaline();
});
onBeforeUnmount(() => {
if (waline)
waline.destroy();
});
watch(() => route.path, () =>
// Refresh comment when navigating to a new page
nextTick().then(() => updateWaline()));
return () => h('div', {
class: 'waline-wrapper',
style: { display: enableComment.value ? 'block' : 'none' },
innerHTML: '<div id="waline-comment" />',
});
},
});