hirsun-vuepress-theme-hope-plus
Version:
A light vuepress theme with tons of features and typewriter effect
136 lines • 6.19 kB
JavaScript
import { usePageFrontmatter, useSiteLocaleData, withBase, } from "@vuepress/client";
import { isString } from "@vuepress/shared";
import { computed, defineComponent, h, shallowRef } from "vue";
import DropTransition from "@theme-hope/components/transitions/DropTransition";
import TypeWriter from "./TypeWriter.js";
import { SlideDownIcon } from "./icons/icons.js";
import defaultHeroBgImagePath from "../assets/hero.jpg";
import "../styles/blog-hero.scss";
import "../styles/type-writer.scss";
export default defineComponent({
name: "BlogHero",
slots: Object,
setup(_props, { slots }) {
const frontmatter = usePageFrontmatter();
const siteLocale = useSiteLocaleData();
const hero = shallowRef();
const isFullScreen = computed(() => frontmatter.value.heroFullScreen ?? false);
const heroInfo = computed(() => {
const { heroText, heroTexts, heroImage, heroImageDark, heroAlt, heroImageStyle, tagline, } = frontmatter.value;
return {
text: heroText ?? siteLocale.value.title ?? "Hello",
texts: heroTexts || [],
image: heroImage ? withBase(heroImage) : null,
imageDark: heroImageDark ? withBase(heroImageDark) : null,
heroStyle: heroImageStyle,
alt: heroAlt || heroText || "hero image",
tagline: tagline ?? "",
isFullScreen: isFullScreen.value,
};
});
const bgInfo = computed(() => {
const { bgImage, bgImageDark, bgImageStyle } = frontmatter.value;
return {
image: isString(bgImage)
? withBase(bgImage)
: bgImage === false
? null
: defaultHeroBgImagePath,
imageDark: isString(bgImageDark) ? withBase(bgImageDark) : null,
bgStyle: bgImageStyle,
isFullScreen: isFullScreen.value,
};
});
return () => frontmatter.value.hero === false
? null
: h("div", {
ref: hero,
class: [
"vp-blog-hero",
{
fullscreen: isFullScreen.value,
"no-bg": !bgInfo.value.image,
},
],
}, [
slots.heroBg?.(bgInfo.value) || [
bgInfo.value.image
? h("div", {
class: [
"vp-blog-mask",
{ light: bgInfo.value.imageDark },
],
style: [
{
background: `url(${bgInfo.value.image}) center/cover no-repeat`,
},
bgInfo.value.bgStyle,
],
})
: null,
bgInfo.value.imageDark
? h("div", {
class: "vp-blog-mask dark",
style: [
{
background: `url(${bgInfo.value.imageDark}) center/cover no-repeat`,
},
bgInfo.value.bgStyle,
],
})
: null,
],
slots.heroInfo?.(heroInfo.value) || [
h(DropTransition, { appear: true, type: "group", delay: 0.04 }, () => [
heroInfo.value.image
? h("img", {
key: "light",
class: [
"vp-blog-hero-image",
{ light: heroInfo.value.imageDark },
],
style: heroInfo.value.heroStyle,
src: heroInfo.value.image,
alt: heroInfo.value.alt,
})
: null,
heroInfo.value.imageDark
? h("img", {
key: "dark",
class: "vp-blog-hero-image dark",
style: heroInfo.value.heroStyle,
src: heroInfo.value.imageDark,
alt: heroInfo.value.alt,
})
: null,
]),
h(DropTransition, { appear: true, delay: 0.08 }, () => heroInfo.value.text
? heroInfo.value.texts && heroInfo.value.texts.length > 0
? h("h1", {
class: "vp-blog-hero-title typewriter-container",
}, h(TypeWriter, { texts: heroInfo.value.texts }))
: h("h1", { class: "vp-blog-hero-title" }, heroInfo.value.text)
: null),
h(DropTransition, { appear: true, delay: 0.12 }, () => heroInfo.value.tagline
? h("p", {
class: "vp-blog-hero-description",
innerHTML: heroInfo.value.tagline,
})
: null),
],
heroInfo.value.isFullScreen
? h("button", {
type: "button",
class: "slide-down-button",
onClick: () => {
window.scrollTo({
top: hero.value.clientHeight,
behavior: "smooth",
});
},
}, [h(SlideDownIcon), h(SlideDownIcon)])
: null,
]);
},
});
//# sourceMappingURL=BlogHero.js.map