Merge branch 'pengzhanbo:main' into main

2023-06-30 01:23:36 +08:00 · 2023-06-30 01:23:36 +08:00 · b132ecf8c9
commit b132ecf8c9
parent 03a1e00707 fb4e223f89
27 changed files with 1301 additions and 36 deletions
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-yarn commitlint --edit $1
+npx commitlint --edit $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-yarn lint-staged
+npx lint-staged
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vuepress-theme-plume",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "private": true,
  "keywords": [
    "vuepress",
--- a/packages/plugin-auto-frontmatter/package.json
+++ b/packages/plugin-auto-frontmatter/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-auto-frontmatter",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/plugin-baidu-tongji/package.json
+++ b/packages/plugin-baidu-tongji/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-baidu-tongji",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/plugin-blog-data/package.json
+++ b/packages/plugin-blog-data/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-blog-data",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/plugin-caniuse/package.json
+++ b/packages/plugin-caniuse/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-caniuse",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2, Support Can-I-Use feature",
  "keywords": [
    "VuePress",
--- a/packages/plugin-copy-code/package.json
+++ b/packages/plugin-copy-code/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-copy-code",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/plugin-iconify/package.json
+++ b/packages/plugin-iconify/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-iconify",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/plugin-iconify/src/client/components/Iconify.vue
+++ b/packages/plugin-iconify/src/client/components/Iconify.vue
@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon as OfflineIcon } from '@iconify/vue/offline'
+import { ClientOnly } from '@vuepress/client'
 import type { CSSProperties } from 'vue'
 import { computed, toRefs } from 'vue'
 import { useIconify } from '../composables/iconify.js'
@ -42,16 +43,18 @@ declare const __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__: string
 </script>

 <template>
-  <span v-if="!loaded" class="vp-iconify" :style="iconStyle"></span>
-  <OfflineIcon
-    v-else-if="icon"
-    :icon="icon"
-    class="vp-iconify"
-    :style="iconStyle"
-  />
-  <span v-else class="vp-iconify" :style="{ ...iconStyle, fontSize: size }">
-    {{ props.name }}
-  </span>
+  <ClientOnly>
+    <span v-if="!loaded" class="vp-iconify" :style="iconStyle"></span>
+    <OfflineIcon
+      v-else-if="icon"
+      :icon="icon"
+      class="vp-iconify"
+      :style="iconStyle"
+    />
+    <span v-else class="vp-iconify" :style="{ ...iconStyle, fontSize: size }">
+      {{ props.name }}
+    </span>
+  </ClientOnly>
 </template>
 <style scoped>
 .vp-iconify {
--- a/packages/plugin-iconify/src/client/composables/iconify.ts
+++ b/packages/plugin-iconify/src/client/composables/iconify.ts
@ -13,10 +13,14 @@ export const useIconify = (name: ComputedRef<string> | Ref<string>) => {
    if (icon.value) {
      return
    }
-    try {
-      loaded.value = false
-      iconCache.value[name.value] = await loadIcon(name.value)
-    } finally {
+    if (!__VUEPRESS_SSR__) {
+      try {
+        loaded.value = false
+        iconCache.value[name.value] = await loadIcon(name.value)
+      } finally {
+        loaded.value = true
+      }
+    } else {
      loaded.value = true
    }
  }
--- a/packages/plugin-iconify/src/shim.d.ts
+++ b/packages/plugin-iconify/src/shim.d.ts
@ -2,3 +2,5 @@ declare module '*.vue' {
  const comp: any
  export default comp
 }
+
+declare const __VUEPRESS_SSR__: boolean
--- a/packages/plugin-netlify-functions/package.json
+++ b/packages/plugin-netlify-functions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-netlify-functions",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2, Support Netlify Functions",
  "keywords": [
    "VuePress",
--- a/packages/plugin-notes-data/package.json
+++ b/packages/plugin-notes-data/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-notes-data",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/plugin-page-collection/package.json
+++ b/packages/plugin-page-collection/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-page-collection",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "private": true,
  "description": "The Plugin for VuePres 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
--- a/packages/plugin-windicss/package.json
+++ b/packages/plugin-windicss/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-plugin-windicss",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "The Plugin for VuePress 2",
  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
  "bugs": {
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vuepress-plume/vuepress-theme-plume",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
  "description": "A Blog Theme for VuePress 2.0",
  "keywords": [
    "VuePress",
--- a/packages/theme/src/client/components/Flyout/MenuGroup.vue
+++ b/packages/theme/src/client/components/Flyout/MenuGroup.vue
@ -12,7 +12,7 @@ defineProps<{
  <div class="menu-group">
    <p v-if="text" class="title">
      <Icon v-if="icon" :name="icon" />
-      <span>{{ text }}</span>
+      <span v-text="text"></span>
    </p>

    <template v-for="item in items">
--- a/packages/theme/src/client/components/Flyout/MenuLink.vue
+++ b/packages/theme/src/client/components/Flyout/MenuLink.vue
@ -23,7 +23,7 @@ const page = usePageData()
      :href="item.link"
    >
      <Icon v-if="item.icon" :name="item.icon" />
-      <i>{{ item.text }}</i>
+      <i v-text="item.text"></i>
    </AutoLink>
  </div>
 </template>
--- 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<PlumeThemeHomeFrontmatter>()
-// 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(','),
  }
 })

--- a/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
@ -25,7 +25,7 @@ const page = usePageData()
    :no-icon="true"
  >
    <Icon v-if="item.icon" :name="item.icon" />
-    <i>{{ item.text }}</i>
+    <i v-text="item.text"></i>
  </AutoLink>
 </template>

--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@ -31,7 +31,7 @@ function toggle() {
    >
      <span class="button-text">
        <Icon v-if="icon" :name="icon" />
-        {{ text }}
+        <i v-text="text"></i>
      </span>
      <IconPlus class="button-icon" />
    </button>
@ -106,6 +106,10 @@ function toggle() {
  color: var(--vp-c-brand);
 }

+.button-text i {
+  font-style: normal;
+}
+
 .button-icon {
  width: 14px;
  height: 14px;
--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
@ -18,7 +18,7 @@ const closeScreen = inject('close-screen') as () => void
    @click="closeScreen"
  >
    <Icon v-if="icon" :name="icon" />
-    <i>{{ text }}</i>
+    <i v-text="text"></i>
  </AutoLink>
 </template>

--- a/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
@ -14,7 +14,7 @@ const closeScreen = inject('close-screen') as () => void
 <template>
  <AutoLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
    <Icon v-if="icon" :name="icon" />
-    <i>{{ text }}</i>
+    <i v-text="text"></i>
  </AutoLink>
 </template>

--- a/packages/theme/src/client/composables/darkMode.ts
+++ b/packages/theme/src/client/composables/darkMode.ts
@ -23,5 +23,11 @@ export const useDarkMode = (): DarkModeRef => {
 */
 export const setupDarkMode = (): void => {
  const isDark = ref<boolean>(false)
+  if (
+    typeof document !== 'undefined' &&
+    document.documentElement.classList.contains('dark')
+  ) {
+    isDark.value = true
+  }
  provide(darkModeSymbol, isDark)
 }
--- 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