vuepress-theme-hope
Version:
A light vuepress theme with tons of features
52 lines • 2.2 kB
JavaScript
import { computed, defineComponent, h } from "vue";
import { RouteLink, useRouteLocale, useSiteLocaleData, withBase, } from "vuepress/client";
import { useThemeLocaleData } from "@theme-hope/composables/index";
import "../styles/navbar-brand.scss";
export default defineComponent({
name: "NavbarBrand",
setup() {
const routeLocale = useRouteLocale();
const siteLocale = useSiteLocaleData();
const themeLocale = useThemeLocaleData();
const siteBrandLink = computed(() => themeLocale.value.home ?? routeLocale.value);
const siteTitle = computed(() => siteLocale.value.title);
const siteBrandTitle = computed(() => themeLocale.value.navbarTitle ?? siteTitle.value);
const siteBrandLogo = computed(() => themeLocale.value.logo ? withBase(themeLocale.value.logo) : null);
const siteBrandLogoDark = computed(() => themeLocale.value.logoDark ? withBase(themeLocale.value.logoDark) : null);
return () => h(RouteLink, {
to: siteBrandLink.value,
class: "vp-brand",
"aria-label": themeLocale.value.routeLocales.home,
}, () => [
siteBrandLogo.value
? h("img", {
class: [
"vp-nav-logo",
{ light: Boolean(siteBrandLogoDark.value) },
],
src: siteBrandLogo.value,
alt: "",
})
: null,
siteBrandLogoDark.value
? h("img", {
class: ["vp-nav-logo dark"],
src: siteBrandLogoDark.value,
alt: "",
})
: null,
siteBrandTitle.value
? h("span", {
class: [
"vp-site-name",
{
"hide-in-pad": siteBrandLogo.value &&
(themeLocale.value.hideSiteNameOnMobile ?? true),
},
],
}, siteBrandTitle.value)
: null,
]);
},
});
//# sourceMappingURL=NavbarBrand.js.map