vuepress-theme-hope
Version:
A light vuepress theme with tons of features
55 lines • 2.4 kB
JavaScript
import { hasGlobalComponent, isNumber } from "@vuepress/helper/client";
import { useElementHover, watchImmediate } from "@vueuse/core";
import { computed, defineComponent, h, onMounted, ref, resolveComponent, } from "vue";
import { Content, usePageFrontmatter } from "vuepress/client";
import { useThemeData, useThemeLocaleData, } from "@theme-hope/composables/index";
import "../styles/markdown-content.scss";
export default defineComponent({
name: "MarkdownContent",
props: {
/** whether use customized layout */
custom: Boolean,
},
slots: Object,
setup(props, { slots }) {
const frontmatter = usePageFrontmatter();
const theme = useThemeData();
const themeLocale = useThemeLocaleData();
const contentElement = ref();
const isHovered = useElementHover(contentElement, {
delayEnter: isNumber(theme.value.focus) ? theme.value.focus : 1500,
delayLeave: 0,
});
const enableFocus = computed(() => Boolean(theme.value.focus ?? theme.value.pure) && isHovered.value);
const showChangelog = computed(() => frontmatter.value.changelog ??
((themeLocale.value.changelog ?? false) && !frontmatter.value.home));
const showContributors = computed(() => frontmatter.value.contributors ??
((themeLocale.value.contributors ?? true) && !frontmatter.value.home));
onMounted(() => {
const html = document.documentElement;
watchImmediate(enableFocus, (value) => {
if (value) {
html.classList.add("is-focusing");
}
else {
html.classList.remove("is-focusing");
}
});
});
return () => h("div", { class: { custom: props.custom }, "vp-content": "" }, [
slots.before?.(),
h(Content, {
ref: contentElement,
id: "markdown-content",
}),
slots.after?.(),
showChangelog.value && hasGlobalComponent("GitChangelog")
? h(resolveComponent("GitChangelog"))
: null,
showContributors.value && hasGlobalComponent("GitContributors")
? h(resolveComponent("GitContributors"))
: null,
]);
},
});
//# sourceMappingURL=MarkdownContent.js.map