From f7991a26d24b4d06fc45f4188cddea8f838f4928 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 29 Jun 2023 22:33:37 +0800 Subject: [PATCH 1/6] feat: support home page banner mask opacity --- packages/theme/src/client/components/Home.vue | 23 +++++++++++++++++-- packages/theme/src/shared/frontmatter.ts | 1 + 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/client/components/Home.vue b/packages/theme/src/client/components/Home.vue index 9fcfb90f..88d74ad6 100644 --- a/packages/theme/src/client/components/Home.vue +++ b/packages/theme/src/client/components/Home.vue @@ -3,14 +3,33 @@ import { usePageFrontmatter, withBase } from '@vuepress/client' import { computed } from 'vue' import type { PlumeThemeHomeFrontmatter } from '../../shared/index.js' // import { useThemeLocaleData } from '../composables/index.js' +import { useDarkMode } from '../composables/darkMode.js' import VButton from './VButton.vue' const matter = usePageFrontmatter() -// const theme = useThemeLocaleData() +const isDark = useDarkMode() + +const mask = computed(() => { + if (typeof matter.value.bannerMask !== 'object') { + return matter.value.bannerMask || 0 + } + return ( + (isDark.value + ? matter.value.bannerMask.dark + : matter.value.bannerMask.light) || 0 + ) +}) const homeStyle = computed(() => { return { - 'background-image': `url(${withBase(matter.value.banner || '')})`, + 'background-image': [ + mask.value + ? `linear-gradient(rgba(0, 0, 0, ${mask.value}), rgba(0, 0, 0, ${mask.value}))` + : '', + `url(${withBase(matter.value.banner || '')})`, + ] + .filter(Boolean) + .join(','), } }) diff --git a/packages/theme/src/shared/frontmatter.ts b/packages/theme/src/shared/frontmatter.ts index b50db42d..f39a80f0 100644 --- a/packages/theme/src/shared/frontmatter.ts +++ b/packages/theme/src/shared/frontmatter.ts @@ -1,6 +1,7 @@ export interface PlumeThemeHomeFrontmatter { home?: true banner?: string + bannerMask?: number | { light?: number; dark?: number } hero: { name: string tagline?: string From e40bf973e31a817f64996966e5f3847f62e774fa Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 29 Jun 2023 22:40:34 +0800 Subject: [PATCH 2/6] fix: navbar text --- packages/theme/src/client/components/Flyout/MenuGroup.vue | 2 +- packages/theme/src/client/components/Flyout/MenuLink.vue | 2 +- packages/theme/src/client/components/Nav/NavBarMenuLink.vue | 2 +- .../theme/src/client/components/Nav/NavScreenMenuGroup.vue | 6 +++++- .../src/client/components/Nav/NavScreenMenuGroupLink.vue | 2 +- .../theme/src/client/components/Nav/NavScreenMenuLink.vue | 2 +- 6 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/theme/src/client/components/Flyout/MenuGroup.vue b/packages/theme/src/client/components/Flyout/MenuGroup.vue index eca00e29..c6965300 100644 --- a/packages/theme/src/client/components/Flyout/MenuGroup.vue +++ b/packages/theme/src/client/components/Flyout/MenuGroup.vue @@ -12,7 +12,7 @@ defineProps<{