mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
feat: upgrade to vuepress rc12
This commit is contained in:
pengzhanbo
parent
de404b24db
commit
021f46ef3f
@ -9,11 +9,11 @@
|
||||
"docs:serve": "anywhere -s -h localhost -d .vuepress/dist"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/json": "^2.2.211",
|
||||
"@vuepress/bundler-vite": "2.0.0-rc.11",
|
||||
"@iconify/json": "^2.2.214",
|
||||
"@vuepress/bundler-vite": "2.0.0-rc.12",
|
||||
"anywhere": "^1.6.0",
|
||||
"chart.js": "^4.4.3",
|
||||
"echarts": "^5.5.0",
|
||||
|
||||
@ -54,18 +54,13 @@
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"eslint": "^9.3.0",
|
||||
"husky": "^9.0.11",
|
||||
"lint-staged": "^15.2.2",
|
||||
"lint-staged": "^15.2.5",
|
||||
"rimraf": "^5.0.7",
|
||||
"stylelint": "^16.5.0",
|
||||
"stylelint": "^16.6.0",
|
||||
"tsconfig-vuepress": "^4.5.0",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.11"
|
||||
},
|
||||
"pnpm": {
|
||||
"patchedDependencies": {
|
||||
"@vuepress/markdown@2.0.0-rc.11": "patches/@vuepress__markdown@2.0.0-rc.11.patch"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*": "eslint --fix"
|
||||
},
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pengzhanbo/utils": "^1.1.2",
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "6.6.1",
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "@vuepress-plume/plugin-caniuse",
|
||||
"type": "module",
|
||||
"version": "1.0.0-rc.56",
|
||||
"private": "true",
|
||||
"description": "The Plugin for VuePres 2, Support Can-I-Use feature",
|
||||
"author": "pengzhanbo <volodymyr@foxmail.com>",
|
||||
"license": "MIT",
|
||||
@ -43,7 +44,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"markdown-it-container": "^4.0.0"
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.27"
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuepress-plume/plugin-content-update": "workspace:*",
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/vue": "^4.1.2",
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@iconify/json": "^2",
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@iconify/json": {
|
||||
@ -47,18 +47,18 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/utils": "^2.1.23",
|
||||
"@vuepress/helper": "2.0.0-rc.30",
|
||||
"@vuepress/helper": "2.0.0-rc.31",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"local-pkg": "^0.5.0",
|
||||
"markdown-it-container": "^4.0.0",
|
||||
"nanoid": "^5.0.7",
|
||||
"shiki": "^1.6.0",
|
||||
"tm-grammars": "^1.12.1",
|
||||
"tm-grammars": "^1.12.4",
|
||||
"tm-themes": "^1.4.3",
|
||||
"vue": "^3.4.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "^2.2.211",
|
||||
"@iconify/json": "^2.2.214",
|
||||
"@types/markdown-it": "^14.1.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -29,18 +29,24 @@ export function createIconCSSWriter(app: App, opt?: boolean | IconsOptions) {
|
||||
const isInstalled = isPackageExists('@iconify/json')
|
||||
|
||||
const write = (content: string) => app.writeTemp('internal/md-power/icons.css', content)
|
||||
let timer: NodeJS.Timeout | null = null
|
||||
|
||||
const options = resolveOption(opt)
|
||||
const prefix = options.prefix
|
||||
const defaultContent = getDefaultContent(options)
|
||||
|
||||
async function writeCss() {
|
||||
let css = defaultContent
|
||||
if (timer)
|
||||
clearTimeout(timer)
|
||||
|
||||
for (const [, { content, className }] of cache)
|
||||
css += `.${className} {\n --svg: ${content};\n}\n`
|
||||
timer = setTimeout(async () => {
|
||||
let css = defaultContent
|
||||
|
||||
await write(css)
|
||||
for (const [, { content, className }] of cache)
|
||||
css += `.${className} {\n --svg: ${content};\n}\n`
|
||||
|
||||
await write(css)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function addIcon(iconName: string) {
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iarna/toml": "^2.2.5",
|
||||
@ -50,9 +50,9 @@
|
||||
"chokidar": "^3.6.0",
|
||||
"cpx2": "^7.0.1",
|
||||
"dotenv": "^16.4.5",
|
||||
"esbuild": "^0.21.3",
|
||||
"esbuild": "^0.21.4",
|
||||
"execa": "^9.1.0",
|
||||
"netlify-cli": "^17.23.5",
|
||||
"netlify-cli": "^17.23.8",
|
||||
"portfinder": "^1.0.32"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "6.6.1",
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@netlify/functions": "^2.7.0",
|
||||
|
||||
@ -37,10 +37,10 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuepress/helper": "2.0.0-rc.30",
|
||||
"@vuepress/helper": "2.0.0-rc.31",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"@vueuse/integrations": "^10.9.0",
|
||||
"chokidar": "^3.6.0",
|
||||
|
||||
@ -33,13 +33,13 @@
|
||||
"ts": "tsc -b tsconfig.build.json"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@shikijs/transformers": "^1.6.0",
|
||||
"@shikijs/twoslash": "^1.6.0",
|
||||
"@types/hast": "^3.0.4",
|
||||
"@vuepress/helper": "2.0.0-rc.30",
|
||||
"@vuepress/helper": "2.0.0-rc.31",
|
||||
"floating-vue": "^5.2.2",
|
||||
"mdast-util-from-markdown": "^2.0.0",
|
||||
"mdast-util-gfm": "^3.0.0",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { Plugin, PluginObject } from 'vuepress/core'
|
||||
import { getDirname, path } from 'vuepress/utils'
|
||||
import type { Plugin } from 'vuepress/core'
|
||||
import { getDirname } from 'vuepress/utils'
|
||||
import { isPlainObject } from 'vuepress/shared'
|
||||
import { highlight } from './highlight.js'
|
||||
import type {
|
||||
@ -65,16 +65,6 @@ export function shikiPlugin({
|
||||
|
||||
extendsMarkdownOptions: (options) => {
|
||||
// 注入 floating-vue 后，需要关闭 代码块 的 v-pre 配置
|
||||
if (options.code !== false) {
|
||||
if (options.code?.vPre) {
|
||||
options.code.vPre.block = false
|
||||
}
|
||||
else {
|
||||
options.code ??= {}
|
||||
options.code.vPre = { block: false }
|
||||
}
|
||||
}
|
||||
|
||||
if ((options as any).vPre !== false) {
|
||||
const vPre = isPlainObject((options as any).vPre) ? (options as any).vPre : { block: true }
|
||||
if (vPre.block) {
|
||||
|
||||
1899
pnpm-lock.yaml
generated
1899
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -63,7 +63,7 @@
|
||||
"ts:watch": "tsc -b tsconfig.build.json --watch"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vuepress": "2.0.0-rc.11"
|
||||
"vuepress": "2.0.0-rc.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pengzhanbo/utils": "^1.1.2",
|
||||
@ -76,19 +76,19 @@
|
||||
"@vuepress-plume/plugin-notes-data": "workspace:*",
|
||||
"@vuepress-plume/plugin-search": "workspace:*",
|
||||
"@vuepress-plume/plugin-shikiji": "workspace:*",
|
||||
"@vuepress/helper": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-active-header-links": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-comment": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-docsearch": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-git": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-markdown-container": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-medium-zoom": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-nprogress": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-reading-time": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-seo": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-sitemap": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-theme-data": "2.0.0-rc.30",
|
||||
"@vuepress/plugin-watermark": "2.0.0-rc.30",
|
||||
"@vuepress/helper": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-active-header-links": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-comment": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-docsearch": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-git": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-markdown-container": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-medium-zoom": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-nprogress": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-reading-time": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-seo": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-sitemap": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-theme-data": "2.0.0-rc.31",
|
||||
"@vuepress/plugin-watermark": "2.0.0-rc.31",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"bcrypt-ts": "^5.0.2",
|
||||
"date-fns": "^3.6.0",
|
||||
@ -97,7 +97,7 @@
|
||||
"nanoid": "^5.0.7",
|
||||
"vue": "^3.4.27",
|
||||
"vue-router": "^4.3.2",
|
||||
"vuepress-plugin-md-enhance": "^2.0.0-rc.43",
|
||||
"vuepress-plugin-md-enhance": "^2.0.0-rc.44",
|
||||
"vuepress-plugin-md-power": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { resolveRoutePath, useRouter } from 'vuepress/client'
|
||||
import { EXTERNAL_URL_RE } from '../utils/index.js'
|
||||
import { resolveRouteFullPath, useRoute, useRouter } from 'vuepress/client'
|
||||
import { isLinkExternal } from '@vuepress/helper/client'
|
||||
|
||||
const props = defineProps<{
|
||||
tag?: string
|
||||
@ -11,18 +11,21 @@ const props = defineProps<{
|
||||
rel?: string
|
||||
}>()
|
||||
|
||||
declare const __VUEPRESS_BASE__: string
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
|
||||
const isExternal = computed(
|
||||
() => props.href && EXTERNAL_URL_RE.test(props.href),
|
||||
() => props.href && isLinkExternal(props.href, __VUEPRESS_BASE__),
|
||||
)
|
||||
const link = computed(() => {
|
||||
if (!props.href)
|
||||
return undefined
|
||||
if (isExternal.value)
|
||||
return props.href
|
||||
return resolveRoutePath(props.href)
|
||||
return resolveRouteFullPath(props.href, route.path)
|
||||
})
|
||||
|
||||
function linkTo(e: Event) {
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { PlumeThemeBlog } from '../../../shared/index.js'
|
||||
|
||||
type NonFalseAndNullable<T> = T extends false | null | undefined ? never : T
|
||||
import { useData } from '../../composables/index.js'
|
||||
|
||||
defineProps<{
|
||||
pagination: NonFalseAndNullable<PlumeThemeBlog['pagination']>
|
||||
page: number
|
||||
totalPage: number
|
||||
isFirstPage: boolean
|
||||
@ -12,6 +9,8 @@ defineProps<{
|
||||
pageRange: { value: number | string, more?: true }[]
|
||||
}>()
|
||||
const emit = defineEmits<{ change: [value: number] }>()
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -22,7 +21,7 @@ const emit = defineEmits<{ change: [value: number] }>()
|
||||
:disabled="isFirstPage"
|
||||
@click="() => emit('change', page - 1)"
|
||||
>
|
||||
{{ pagination?.prevPageText || 'Prev' }}
|
||||
{{ theme.prevPageLabel || 'Prev' }}
|
||||
</button>
|
||||
<div class="page-range">
|
||||
<button
|
||||
@ -43,7 +42,7 @@ const emit = defineEmits<{ change: [value: number] }>()
|
||||
:disabled="isLastPage"
|
||||
@click="() => emit('change', page + 1)"
|
||||
>
|
||||
{{ pagination?.nextPageText || 'Next' }}
|
||||
{{ theme.nextPageLabel || 'Next' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,7 +5,6 @@ import PostItem from './PostItem.vue'
|
||||
import Pagination from './Pagination.vue'
|
||||
|
||||
const {
|
||||
pagination,
|
||||
postList,
|
||||
page,
|
||||
totalPage,
|
||||
@ -29,7 +28,6 @@ const {
|
||||
</template>
|
||||
<Pagination
|
||||
v-if="isPaginationEnabled"
|
||||
:pagination="pagination"
|
||||
:page="page"
|
||||
:total-page="totalPage"
|
||||
:page-range="pageRange"
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { usePageFrontmatter } from 'vuepress/client'
|
||||
import { useSidebar } from '../composables/index.js'
|
||||
import { useThemeLocaleData } from '../composables/themeData.js'
|
||||
import type { PlumeThemePageFrontmatter } from '../../shared/index.js'
|
||||
import { useData, useSidebar } from '../composables/index.js'
|
||||
|
||||
const props = defineProps<{
|
||||
isNotFound?: boolean
|
||||
}>()
|
||||
|
||||
const { hasSidebar } = useSidebar()
|
||||
const { theme, frontmatter } = useData()
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
|
||||
const enabledExternalIcon = computed(() => {
|
||||
return frontmatter.value.externalLink ?? theme.value.externalLinkIcon ?? true
|
||||
})
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { usePageData } from 'vuepress/client'
|
||||
import { computed } from 'vue'
|
||||
import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
|
||||
import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
|
||||
import type { PlumeThemePageData } from '../../shared/index.js'
|
||||
import { useDarkMode, useSidebar } from '../composables/index.js'
|
||||
import { useData, useSidebar } from '../composables/index.js'
|
||||
import { usePageEncrypt } from '../composables/encrypt.js'
|
||||
import PageAside from './PageAside.vue'
|
||||
import PageFooter from './PageFooter.vue'
|
||||
@ -13,8 +11,7 @@ import EncryptPage from './EncryptPage.vue'
|
||||
import TransitionFadeSlideY from './TransitionFadeSlideY.vue'
|
||||
|
||||
const { hasSidebar, hasAside } = useSidebar()
|
||||
const isDark = useDarkMode()
|
||||
const page = usePageData<PlumeThemePageData>()
|
||||
const { page, isDark } = useData()
|
||||
|
||||
const { isPageDecrypted } = usePageEncrypt()
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { usePageData } from 'vuepress/client'
|
||||
import { computed, ref } from 'vue'
|
||||
import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
|
||||
import { useActiveAnchor, useThemeLocaleData } from '../composables/index.js'
|
||||
import { useActiveAnchor, useData } from '../composables/index.js'
|
||||
import PageAsideItem from './PageAsideItem.vue'
|
||||
|
||||
const page = usePageData()
|
||||
const theme = useThemeLocaleData()
|
||||
const { page, theme } = useData()
|
||||
|
||||
const headers = ref(page.value.headers)
|
||||
const hasOutline = computed(() => headers.value.length > 0)
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { usePageData, usePageFrontmatter } from 'vuepress/client'
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
useReadingTimeLocale,
|
||||
} from '@vuepress/plugin-reading-time/client'
|
||||
import type {
|
||||
PlumeThemePageData,
|
||||
PlumeThemePostFrontmatter,
|
||||
} from '../../shared/index.js'
|
||||
import { useExtraBlogData } from '../composables/index.js'
|
||||
import { useReadingTimeLocale } from '@vuepress/plugin-reading-time/client'
|
||||
import { useData, useExtraBlogData } from '../composables/index.js'
|
||||
|
||||
const { page, frontmatter: matter } = useData<'post'>()
|
||||
|
||||
const page = usePageData<PlumeThemePageData>()
|
||||
const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
|
||||
const extraData = useExtraBlogData()
|
||||
const readingTime = useReadingTimeLocale()
|
||||
|
||||
|
||||
@ -1,72 +1,28 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useDarkMode } from '../composables/index.js'
|
||||
import { useThemeLocaleData } from '../composables/themeData.js'
|
||||
import { APPEARANCE_KEY } from '../utils/index.js'
|
||||
import { computed, inject, ref } from 'vue'
|
||||
import { useData } from '../composables/index.js'
|
||||
import Switch from './Switch.vue'
|
||||
|
||||
const theme = useThemeLocaleData()
|
||||
const checked = ref(false)
|
||||
const isDark = useDarkMode()
|
||||
const { theme, isDark } = useData()
|
||||
|
||||
const toggle = typeof document !== 'undefined' ? useAppearance() : () => {}
|
||||
|
||||
onMounted(() => {
|
||||
checked.value = document.documentElement.classList.contains('dark')
|
||||
const toggleAppearance = inject('toggle-appearance', () => {
|
||||
isDark.value = !isDark.value
|
||||
})
|
||||
|
||||
function useAppearance() {
|
||||
const query = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
const classList = document.documentElement.classList
|
||||
|
||||
let userPreference = localStorage.getItem(APPEARANCE_KEY)
|
||||
|
||||
let isDark
|
||||
= (theme.value.appearance === 'dark' && userPreference == null)
|
||||
|| (userPreference === 'auto' || userPreference == null
|
||||
? query.matches
|
||||
: userPreference === 'dark')
|
||||
|
||||
query.onchange = (e) => {
|
||||
if (userPreference === 'auto')
|
||||
setClass((isDark = e.matches))
|
||||
}
|
||||
|
||||
setClass(isDark)
|
||||
|
||||
function toggle() {
|
||||
setClass((isDark = !isDark))
|
||||
|
||||
userPreference = isDark
|
||||
? query.matches
|
||||
? 'auto'
|
||||
: 'dark'
|
||||
: query.matches
|
||||
? 'light'
|
||||
: 'auto'
|
||||
|
||||
localStorage.setItem(APPEARANCE_KEY, userPreference)
|
||||
}
|
||||
|
||||
function setClass(dark: boolean): void {
|
||||
checked.value = dark
|
||||
classList[dark ? 'add' : 'remove']('dark')
|
||||
}
|
||||
|
||||
return toggle
|
||||
}
|
||||
|
||||
watch(checked, (newIsDark) => {
|
||||
isDark.value = newIsDark
|
||||
const switchTitle = computed(() => {
|
||||
return isDark.value
|
||||
? theme.value.lightModeSwitchTitle || 'Switch to light theme'
|
||||
: theme.value.darkModeSwitchTitle || 'Switch to dark theme'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Switch
|
||||
class="switch-appearance"
|
||||
aria-label="toggle dark mode"
|
||||
:title="switchTitle"
|
||||
:aria-checked="checked"
|
||||
@click="toggle"
|
||||
@click="toggleAppearance"
|
||||
>
|
||||
<span class="vpi-sun sun" />
|
||||
<span class="vpi-moon moon" />
|
||||
|
||||
@ -20,8 +20,8 @@ function setStyle(item: Element) {
|
||||
const el = item as HTMLElement
|
||||
|
||||
if (!_transition) {
|
||||
const value = typeof window !== 'undefined' && window.getComputedStyle ? window.getComputedStyle(el).transition : ''
|
||||
_transition = value && !value.includes('all') ? `${value}, ` : ' '
|
||||
const value = typeof window !== 'undefined' ? window.getComputedStyle?.(el).transition : ''
|
||||
_transition = value && !value.includes('all') ? `${value || ''}, ` : ' '
|
||||
}
|
||||
|
||||
el.style.transition = `${_transition}transform ${props.duration}s ease-in-out ${props.delay}s, opacity ${props.duration}s ease-in-out ${props.delay}s`
|
||||
|
||||
@ -3,7 +3,7 @@ import { useExtraBlogData as _useExtraBlogData, useBlogPostData } from '@vuepres
|
||||
import { type Ref, computed } from 'vue'
|
||||
import { useMediaQuery } from '@vueuse/core'
|
||||
import type { PlumeThemeBlogPostItem } from '../../shared/index.js'
|
||||
import { useLocaleLink, useRouteQuery, useThemeLocaleData } from '../composables/index.js'
|
||||
import { useData, useLocaleLink, useRouteQuery } from '../composables/index.js'
|
||||
import { toArray } from '../utils/index.js'
|
||||
|
||||
export const useExtraBlogData = _useExtraBlogData as () => Ref<{
|
||||
@ -20,11 +20,10 @@ export function useLocalePostList() {
|
||||
}
|
||||
|
||||
export function usePostListControl() {
|
||||
const themeData = useThemeLocaleData()
|
||||
const { theme } = useData()
|
||||
|
||||
const list = useLocalePostList()
|
||||
const blog = computed(() => themeData.value.blog || {})
|
||||
const pagination = computed(() => blog.value.pagination || {})
|
||||
const blog = computed(() => theme.value.blog || {})
|
||||
const is960 = useMediaQuery('(max-width: 960px)')
|
||||
|
||||
const postList = computed(() => {
|
||||
@ -128,7 +127,6 @@ export function usePostListControl() {
|
||||
}
|
||||
|
||||
return {
|
||||
pagination,
|
||||
postList: finalList,
|
||||
page,
|
||||
totalPage,
|
||||
@ -147,14 +145,15 @@ const extractLocales: Record<string, { tags: string, archives: string }> = {
|
||||
}
|
||||
|
||||
export function useBlogExtract() {
|
||||
const theme = useThemeLocaleData()
|
||||
const { theme } = useData()
|
||||
const locale = usePageLang()
|
||||
const postList = useLocalePostList()
|
||||
const { tags: tagsList } = useTags()
|
||||
const blog = computed(() => theme.value.blog || {})
|
||||
|
||||
const hasBlogExtract = computed(() => theme.value.blog?.archives !== false || theme.value.blog?.tags !== false)
|
||||
const tagsLink = useLocaleLink('blog/tags/')
|
||||
const archiveLink = useLocaleLink('blog/archives/')
|
||||
const hasBlogExtract = computed(() => blog.value.archives !== false || blog.value.tags !== false)
|
||||
const tagsLink = useLocaleLink(blog.value.tagsLink || 'blog/tags/')
|
||||
const archiveLink = useLocaleLink(blog.value.archivesLink || 'blog/archives/')
|
||||
|
||||
const tags = computed(() => ({
|
||||
link: tagsLink.value,
|
||||
|
||||
@ -14,24 +14,31 @@ import type {
|
||||
PlumeThemeLocaleData,
|
||||
PlumeThemePageData,
|
||||
PlumeThemePageFrontmatter,
|
||||
PlumeThemePostFrontmatter,
|
||||
} from '../../shared/index.js'
|
||||
import { useThemeLocaleData } from './themeData.js'
|
||||
import { hashRef } from './hash.js'
|
||||
import { useDarkMode } from './darkMode.js'
|
||||
|
||||
export interface Data {
|
||||
type FrontmatterType = 'post' | 'page'
|
||||
|
||||
type Frontmatter<T extends FrontmatterType = 'page'> = T extends 'post'
|
||||
? PlumeThemePostFrontmatter
|
||||
: PlumeThemePageFrontmatter
|
||||
|
||||
export interface Data<T extends FrontmatterType = 'page'> {
|
||||
theme: ThemeLocaleDataRef<PlumeThemeLocaleData>
|
||||
page: PageDataRef<PlumeThemePageData>
|
||||
frontmatter: PageFrontmatterRef<PlumeThemePageFrontmatter>
|
||||
frontmatter: PageFrontmatterRef<Frontmatter<T>>
|
||||
hash: Ref<string>
|
||||
site: SiteLocaleDataRef
|
||||
isDark: Ref<boolean>
|
||||
}
|
||||
|
||||
export function useData(): Data {
|
||||
export function useData<T extends FrontmatterType = 'page'>(): Data<T> {
|
||||
const theme = useThemeLocaleData()
|
||||
const page = usePageData<PlumeThemePageData>()
|
||||
const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
|
||||
const frontmatter = usePageFrontmatter<Frontmatter<T>>()
|
||||
const site = useSiteLocaleData()
|
||||
const isDark = useDarkMode()
|
||||
|
||||
|
||||
@ -242,6 +242,7 @@ div[class*="language-"] {
|
||||
margin: 0 -24px;
|
||||
transition: background-color 0.5s;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
||||
@ -525,7 +525,7 @@
|
||||
:root {
|
||||
--vp-friends-text-color: var(--vp-c-text-1);
|
||||
--vp-friends-bg-color: var(--vp-c-bg);
|
||||
--vp-friends-link-color: var(--vp-c-brand-1);
|
||||
--vp-friends-name-color: var(--vp-c-brand-1);
|
||||
--vp-friends-border-color: var(--vp-c-border);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
export const EXTERNAL_URL_RE = /^[a-z]+:/i
|
||||
export const PATHNAME_PROTOCOL_RE = /^pathname:\/\//
|
||||
export const APPEARANCE_KEY = 'vuepress-theme-appearance'
|
||||
export const HASH_RE = /#.*$/
|
||||
export const EXT_RE = /(index)?\.(md|html)$/
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import { THEME_NAME } from '../utils.js'
|
||||
const FALLBACK_OPTIONS: PlumeThemeLocaleData = {
|
||||
appearance: true,
|
||||
|
||||
blog: { link: '/blog/', pagination: { perPage: 20 }, tags: true, archives: true, tagsLink: '/blog/tags/', archivesLink: '/blog/archives/' },
|
||||
blog: { link: '/blog/', pagination: { perPage: 15 }, tags: true, archives: true, tagsLink: '/blog/tags/', archivesLink: '/blog/archives/' },
|
||||
article: '/article/',
|
||||
notes: { link: '/', dir: '/notes/', notes: [] },
|
||||
navbarSocialInclude: ['github', 'twitter', 'discord', 'facebook'],
|
||||
|
||||
@ -5,10 +5,13 @@ import type { PresetLocale } from '../types.js'
|
||||
export const enLocale: PlumeThemeLocaleData = {
|
||||
selectLanguageName: 'English',
|
||||
selectLanguageText: 'Languages',
|
||||
|
||||
appearanceText: 'Appearance',
|
||||
lightModeSwitchTitle: 'Switch to light theme',
|
||||
darkModeSwitchTitle: 'Switch to dark theme',
|
||||
|
||||
editLinkText: 'Edit this page',
|
||||
contributorsText: 'Contributors',
|
||||
appearanceText: 'Appearance',
|
||||
|
||||
lastUpdated: {
|
||||
text: 'Last Updated',
|
||||
},
|
||||
|
||||
@ -7,15 +7,14 @@ export const zhLocale: PlumeThemeLocaleData = {
|
||||
selectLanguageName: '简体中文',
|
||||
selectLanguageText: '选择语言',
|
||||
|
||||
blog: {
|
||||
pagination: { prevPageText: '上一页', nextPageText: '下一页' },
|
||||
},
|
||||
appearanceText: '外观',
|
||||
lightModeSwitchTitle: '切换为浅色主题',
|
||||
darkModeSwitchTitle: '切换为深色主题',
|
||||
|
||||
outlineLabel: '此页内容',
|
||||
returnToTopLabel: '返回顶部',
|
||||
editLinkText: '编辑此页',
|
||||
contributorsText: '贡献者',
|
||||
appearanceText: '外观',
|
||||
prevPageLabel: '上一页',
|
||||
nextPageLabel: '下一页',
|
||||
|
||||
|
||||
@ -46,16 +46,6 @@ export interface PlumeThemeBlog {
|
||||
* @default 20
|
||||
*/
|
||||
perPage?: number
|
||||
/**
|
||||
* 前一页的文本
|
||||
* @default 'Prev'
|
||||
*/
|
||||
prevPageText?: string
|
||||
/**
|
||||
* 后一页的文本
|
||||
* @default 'Next'
|
||||
*/
|
||||
nextPageText?: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -142,6 +142,16 @@ export interface FriendsItem {
|
||||
link: string
|
||||
avatar?: string
|
||||
desc?: string
|
||||
backgroundColor?: string | { light: string, dark: string }
|
||||
color?: string | { light: string, dark: string }
|
||||
nameColor?: string | { light: string, dark: string }
|
||||
borderColor?: string | { light: string, dark: string }
|
||||
}
|
||||
|
||||
export interface FriendGroup {
|
||||
title?: string
|
||||
desc?: string
|
||||
list?: FriendsItem[]
|
||||
}
|
||||
|
||||
export interface PlumeThemeFriendsFrontmatter {
|
||||
@ -149,4 +159,5 @@ export interface PlumeThemeFriendsFrontmatter {
|
||||
title?: string
|
||||
description?: string
|
||||
list?: FriendsItem[]
|
||||
groups?: FriendGroup[]
|
||||
}
|
||||
|
||||
@ -27,6 +27,9 @@ export interface PlumeThemeLocaleData extends LocaleData {
|
||||
*/
|
||||
appearanceText?: string
|
||||
|
||||
lightModeSwitchTitle?: string
|
||||
darkModeSwitchTitle?: string
|
||||
|
||||
/**
|
||||
* 配置博主拥有者信息
|
||||
*
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"./plugins/plugin-md-power/src/node/index.ts"
|
||||
]
|
||||
},
|
||||
"types": ["webpack-env", "vite/client"]
|
||||
"types": ["webpack-env", "vite/client", "vuepress/client-types"]
|
||||
},
|
||||
"include": [
|
||||
"plugins/**/*",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user