vuepress-theme-hope
Version:
A light vuepress theme with tons of features
38 lines • 1.98 kB
JavaScript
import { computed, defineComponent, h } from "vue";
import { useFrontmatter } from "vuepress/client";
import MarkdownContent from "@theme-hope/components/base/MarkdownContent";
import ArticleList from "@theme-hope/components/blog/ArticleList";
import BlogHero from "@theme-hope/components/blog/BlogHero";
import InfoPanel from "@theme-hope/components/blog/InfoPanel";
import ProjectPanel from "@theme-hope/components/blog/ProjectPanel";
import DropTransition from "@theme-hope/components/transitions/DropTransition";
import { useArticles } from "@theme-hope/composables/blog/useArticles";
import "../../styles/blog/blog-home.scss";
export default defineComponent({
name: "BlogHome",
slots: Object,
setup(_props, { slots }) {
const articles = useArticles();
const frontmatter = useFrontmatter();
const projects = computed(() => frontmatter.value.projects ?? []);
return () => h("div", { class: "vp-page vp-blog-home" }, [
slots.heroBefore?.(),
h(BlogHero, {}, slots),
slots.heroAfter?.(),
h("div", { class: "blog-page-wrapper" }, [
h("main", { id: "main-content", class: "vp-blog-main" }, [
slots.articlesBefore?.() ??
(projects.value.length > 0
? h(DropTransition, { appear: true, delay: 0.16 }, () => h(ProjectPanel, { items: projects.value }))
: null),
h(DropTransition, { appear: true, delay: 0.24 }, () => h(ArticleList, { items: articles.value.items }, slots)),
slots.articlesAfter?.(),
]),
h(DropTransition, { appear: true, delay: 0.16 }, () => h(InfoPanel, { key: "blog" }, slots)),
]),
slots.content?.() ??
h(DropTransition, { appear: true, delay: 0.28 }, () => h(MarkdownContent, {}, slots)),
]);
},
});
//# sourceMappingURL=BlogHome.js.map