diff --git a/package.json b/package.json index c7c304ec..305d3c75 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "sort-package-json": "^2.0.0", "taze": "^0.8.2", "ts-node": "^10.9.1", + "tsconfig-vuepress": "^4.0.0", "typescript": "^4.8.4", "vite": "^3.1.8" }, diff --git a/packages/plugin-baidu-tongji/tsconfig.build.json b/packages/plugin-baidu-tongji/tsconfig.build.json index 3395ea55..9a9c1efa 100644 --- a/packages/plugin-baidu-tongji/tsconfig.build.json +++ b/packages/plugin-baidu-tongji/tsconfig.build.json @@ -2,7 +2,8 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "rootDir": "./src", - "outDir": "./lib" + "outDir": "./lib", + "composite": true }, "include": ["./src"], "files": [] diff --git a/packages/plugin-blog-data/src/client/config.ts b/packages/plugin-blog-data/src/client/config.ts index 27063fc9..97d99d32 100644 --- a/packages/plugin-blog-data/src/client/config.ts +++ b/packages/plugin-blog-data/src/client/config.ts @@ -4,7 +4,6 @@ import { useBlogPostData } from './composables/index.js' export default defineClientConfig({ enhance({ app }) { - // provide theme data & theme locale data const blogPostData = useBlogPostData() // setup devtools in dev mode diff --git a/packages/plugin-blog-data/src/node/index.ts b/packages/plugin-blog-data/src/node/index.ts index 312eda7b..289ed329 100644 --- a/packages/plugin-blog-data/src/node/index.ts +++ b/packages/plugin-blog-data/src/node/index.ts @@ -1,6 +1,6 @@ import { blogDataPlugin } from './plugin.js' export * from '../shared/index.js' -export * from './plugin.js' +export { blogDataPlugin } export default blogDataPlugin diff --git a/packages/plugin-blog-data/src/node/plugin.ts b/packages/plugin-blog-data/src/node/plugin.ts index 8348d0b8..38d1694c 100644 --- a/packages/plugin-blog-data/src/node/plugin.ts +++ b/packages/plugin-blog-data/src/node/plugin.ts @@ -41,6 +41,15 @@ export const blogDataPlugin = ({ return { name: '@vuepress-plume/vuepress-plugin-blog-data', clientConfigFile: path.resolve(__dirname, '../client/config.js'), + extendsPage(page) { + if ( + page.filePathRelative && + options.exclude.every((filter) => filter(page.filePathRelative!)) && + options.include.some((filter) => filter(page.filePathRelative!)) + ) { + ;(page.data as any).isBlogPost = true + } + }, onPrepared: async (app) => await preparedBlogData(app, options), onWatched(app, watchers) { const watcher = chokidar.watch('pages/**/*', { diff --git a/packages/plugin-windicss/src/client/config.vite.ts b/packages/plugin-windicss/src/client/config.vite.ts index 0bf9dc52..6558b17a 100644 --- a/packages/plugin-windicss/src/client/config.vite.ts +++ b/packages/plugin-windicss/src/client/config.vite.ts @@ -1,5 +1,6 @@ import { defineClientConfig } from '@vuepress/client' +// import 'virtual:windi-devtools' import 'virtual:windi.css' export default defineClientConfig({}) diff --git a/packages/plugin-windicss/src/node/plugin.ts b/packages/plugin-windicss/src/node/plugin.ts index 8d23f8f3..eaa87e17 100644 --- a/packages/plugin-windicss/src/node/plugin.ts +++ b/packages/plugin-windicss/src/node/plugin.ts @@ -14,7 +14,10 @@ export const windiCSSPlugin = (options?: WindiCSSOptions | string): Plugin => { let userOptions: UserOptions | undefined let utilsOptions: WindiPluginUtilsOptions | undefined if (typeof options === 'string') { - userOptions = { config: options } + userOptions = { + config: options, + include: ['**/.vuepress/**/*.{vue,jsx,tsx}', '**/*.md'], + } } else { options = options || {} userOptions = options.userOptions diff --git a/packages/plugin-windicss/src/node/windicss.d.ts b/packages/plugin-windicss/src/node/windicss.d.ts index 1e309ec4..50c54b58 100644 --- a/packages/plugin-windicss/src/node/windicss.d.ts +++ b/packages/plugin-windicss/src/node/windicss.d.ts @@ -1,17 +1,17 @@ -declare module 'windicss-webpack-plugin' { - const result: any +// declare module 'windicss-webpack-plugin' { +// const result: any - export default result -} +// export default result +// } -declare module 'vite-plugin-windicss' { - const result: any +// declare module 'vite-plugin-windicss' { +// const result: any - type UserOptions = any +// type UserOptions = any - type WindiPluginUtilsOptions = any +// type WindiPluginUtilsOptions = any - export default result +// export default result - export { UserOptions, WindiPluginUtilsOptions } -} +// export { UserOptions, WindiPluginUtilsOptions } +// } diff --git a/packages/theme/package.json b/packages/theme/package.json index 23348b79..68606795 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -39,6 +39,7 @@ "@vuepress-plume/vuepress-plugin-blog-data": "workspace:*", "@vuepress-plume/vuepress-plugin-caniuse": "workspace:*", "@vuepress-plume/vuepress-plugin-copy-code": "workspace:*", + "@vuepress-plume/vuepress-plugin-windicss": "workspace:*", "@vuepress/client": "2.0.0-beta.51", "@vuepress/core": "2.0.0-beta.51", "@vuepress/plugin-active-header-links": "2.0.0-beta.51", @@ -55,6 +56,7 @@ "@vuepress/plugin-toc": "2.0.0-beta.51", "@vuepress/shared": "2.0.0-beta.51", "@vuepress/utils": "2.0.0-beta.51", + "@vueuse/core": "^9.3.0", "date-fns": "^2.29.3", "nanoid": "^4.0.0", "ts-debounce": "^4.0.0", @@ -63,6 +65,7 @@ "vuepress-plugin-comment2": "2.0.0-beta.110", "vuepress-plugin-md-enhance": "2.0.0-beta.110", "vuepress-plugin-seo2": "2.0.0-beta.110", - "vuepress-plugin-sitemap2": "2.0.0-beta.110" + "vuepress-plugin-sitemap2": "2.0.0-beta.110", + "windicss": "^3.5.6" } } diff --git a/packages/theme/src/client/components/Navbar/index.vue b/packages/theme/src/client/components/Navbar/index.vue new file mode 100644 index 00000000..6f0ce0e1 --- /dev/null +++ b/packages/theme/src/client/components/Navbar/index.vue @@ -0,0 +1,4 @@ + + diff --git a/packages/theme/src/client/composables/index.ts b/packages/theme/src/client/composables/index.ts new file mode 100644 index 00000000..7021f731 --- /dev/null +++ b/packages/theme/src/client/composables/index.ts @@ -0,0 +1,4 @@ +export * from './useDarkMode.js' +export * from './useScrollPromise.js' +export * from './useThemeData.js' +export * from './useResolveRouteWithRedirect.js' diff --git a/packages/theme/src/client/composables/useDarkMode.ts b/packages/theme/src/client/composables/useDarkMode.ts new file mode 100644 index 00000000..97d049fe --- /dev/null +++ b/packages/theme/src/client/composables/useDarkMode.ts @@ -0,0 +1,72 @@ +import { usePreferredDark, useStorage } from '@vueuse/core' +import { computed, inject, onMounted, onUnmounted, provide, watch } from 'vue' +import type { InjectionKey, WritableComputedRef } from 'vue' +import { useThemeLocaleData } from './useThemeData.js' + +export type DarkModeRef = WritableComputedRef + +export const darkModeSymbol: InjectionKey = Symbol( + __VUEPRESS_DEV__ ? 'darkMode' : '' +) + +/** + * Inject dark mode global computed + */ +export const useDarkMode = (): DarkModeRef => { + const isDarkMode = inject(darkModeSymbol) + if (!isDarkMode) { + throw new Error('useDarkMode() is called without provider.') + } + return isDarkMode +} + +/** + * Create dark mode ref and provide as global computed in setup + */ +export const setupDarkMode = (): void => { + const themeLocale = useThemeLocaleData() + const isDarkPreferred = usePreferredDark() + const darkStorage = useStorage( + 'vuepress-color-scheme', + themeLocale.value.colorMode + ) + + const isDarkMode = computed({ + get() { + // disable color mode switching + if (!themeLocale.value.colorModeSwitch) { + return themeLocale.value.colorMode === 'dark' + } + // auto detected from prefers-color-scheme + if (darkStorage.value === 'auto') { + return isDarkPreferred.value + } + // storage value + return darkStorage.value === 'dark' + }, + set(val) { + if (val === isDarkPreferred.value) { + darkStorage.value = 'auto' + } else { + darkStorage.value = val ? 'dark' : 'light' + } + }, + }) + provide(darkModeSymbol, isDarkMode) + + updateHtmlDarkClass(isDarkMode) +} + +export const updateHtmlDarkClass = (isDarkMode: DarkModeRef): void => { + const update = (value = isDarkMode.value): void => { + // set `class="dark"` on `` element + const htmlEl = window?.document.querySelector('html') + htmlEl?.classList.toggle('dark', value) + } + + onMounted(() => { + watch(isDarkMode, update, { immediate: true }) + }) + + onUnmounted(() => update()) +} diff --git a/packages/theme/src/client/composables/useResolveRouteWithRedirect.ts b/packages/theme/src/client/composables/useResolveRouteWithRedirect.ts new file mode 100644 index 00000000..297b0e95 --- /dev/null +++ b/packages/theme/src/client/composables/useResolveRouteWithRedirect.ts @@ -0,0 +1,28 @@ +import { isFunction, isString } from '@vuepress/shared' +import { useRouter } from 'vue-router' +import type { Router } from 'vue-router' + +/** + * Resolve a route with redirection + */ +export const useResolveRouteWithRedirect = ( + ...args: Parameters +): ReturnType => { + const router = useRouter() + const route = router.resolve(...args) + const lastMatched = route.matched[route.matched.length - 1] + if (!lastMatched?.redirect) { + return route + } + const { redirect } = lastMatched + const resolvedRedirect = isFunction(redirect) ? redirect(route) : redirect + const resolvedRedirectObj = isString(resolvedRedirect) + ? { path: resolvedRedirect } + : resolvedRedirect + return useResolveRouteWithRedirect({ + hash: route.hash, + query: route.query, + params: route.params, + ...resolvedRedirectObj, + }) +} diff --git a/packages/theme/src/client/composables/useScrollPromise.ts b/packages/theme/src/client/composables/useScrollPromise.ts new file mode 100644 index 00000000..0405f8c7 --- /dev/null +++ b/packages/theme/src/client/composables/useScrollPromise.ts @@ -0,0 +1,22 @@ +export interface ScrollPromise { + wait(): Promise | null + pending: () => void + resolve: () => void +} + +let promise: Promise | null = null +let promiseResolve: (() => void) | null = null + +const scrollPromise: ScrollPromise = { + wait: () => promise, + pending: () => { + promise = new Promise((resolve) => (promiseResolve = resolve)) + }, + resolve: () => { + promiseResolve?.() + promise = null + promiseResolve = null + }, +} + +export const useScrollPromise = (): ScrollPromise => scrollPromise diff --git a/packages/theme/src/client/composables/useThemeData.ts b/packages/theme/src/client/composables/useThemeData.ts new file mode 100644 index 00000000..59e41440 --- /dev/null +++ b/packages/theme/src/client/composables/useThemeData.ts @@ -0,0 +1,14 @@ +import { + useThemeData as _useThemeData, + useThemeLocaleData as _useThemeLocaleData, +} from '@vuepress/plugin-theme-data/client' +import type { + ThemeDataRef, + ThemeLocaleDataRef, +} from '@vuepress/plugin-theme-data/client' +import type { PlumeThemeData } from '../../shared/index.js' + +export const useThemeData = (): ThemeDataRef => + _useThemeData() +export const useThemeLocaleData = (): ThemeLocaleDataRef => + _useThemeLocaleData() diff --git a/packages/theme/src/client/config.ts b/packages/theme/src/client/config.ts index dc4e4d21..a3fc2b3e 100644 --- a/packages/theme/src/client/config.ts +++ b/packages/theme/src/client/config.ts @@ -1,8 +1,14 @@ import { defineClientConfig } from '@vuepress/client' +import { setupDarkMode } from './composables/index.js' import Layout from './layouts/Layout.vue' import NotFound from './layouts/NotFound.vue' +import './styles/index.scss' + export default defineClientConfig({ + setup() { + setupDarkMode() + }, layouts: { Layout, NotFound, diff --git a/packages/theme/src/client/layouts/Layout.vue b/packages/theme/src/client/layouts/Layout.vue index 167e2c32..4fb39628 100644 --- a/packages/theme/src/client/layouts/Layout.vue +++ b/packages/theme/src/client/layouts/Layout.vue @@ -1,3 +1,14 @@ + diff --git a/packages/theme/src/client/styles/index.scss b/packages/theme/src/client/styles/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/packages/theme/src/client/windi.config.ts b/packages/theme/src/client/windi.config.ts new file mode 100644 index 00000000..58a7b703 --- /dev/null +++ b/packages/theme/src/client/windi.config.ts @@ -0,0 +1,73 @@ +import { getDirname, path } from '@vuepress/utils' +import { defineConfig } from 'windicss/helpers' +import typography from 'windicss/plugin/typography' + +const __dirname = getDirname(import.meta.url) + +export default defineConfig({ + darkMode: 'class', + // attributify: true, + plugins: [(typography as any)()], + theme: { + extend: { + textColor: '#2c3e50', + fontFamily: { + sans: [ + 'ui-sans-serif', + '-apple-system', + 'BlinkMackSystemFont', + '"Segoe UI"', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + '"Fira Sans"', + '"Droid Sans"', + '"Helvetica Neue"', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + '"Noto Color Emoji"', + ], + mono: [ + 'Consolas', + 'Monaco', + 'ui-monospace', + 'SFMono-Regular', + 'Menlo', + '"Andale Mono"', + '"Ubuntu Mono"', + 'monospace', + ], + }, + typography: { + DEFAULT: { + css: { + color: '#2c3e50', + a: { + color: 'red', + }, + h1: { color: 'inherit' }, + h2: { color: 'inherit' }, + h3: { color: 'inherit' }, + h4: { color: 'inherit' }, + h5: { color: 'inherit' }, + h6: { color: 'inherit' }, + b: { color: 'inherit' }, + em: { color: 'inherit' }, + strong: { color: 'inherit' }, + blockquote: { color: 'inherit' }, + }, + }, + }, + }, + }, + extract: { + include: [ + path.resolve(__dirname, '{components,layouts}/**/*'), + path.resolve(process.cwd(), '**/.vuepress/{components,layouts}/*'), + path.resolve(process.cwd(), '**/*.md'), + ], + }, +}) diff --git a/packages/theme/src/node/plugins.ts b/packages/theme/src/node/plugins.ts index 4ce3adb9..dcdcf661 100644 --- a/packages/theme/src/node/plugins.ts +++ b/packages/theme/src/node/plugins.ts @@ -3,6 +3,7 @@ import { baiduTongjiPlugin } from '@vuepress-plume/vuepress-plugin-baidu-tongji' import { blogDataPlugin } from '@vuepress-plume/vuepress-plugin-blog-data' import { caniusePlugin } from '@vuepress-plume/vuepress-plugin-caniuse' import { copyCodePlugin } from '@vuepress-plume/vuepress-plugin-copy-code' +import { windiCSSPlugin } from '@vuepress-plume/vuepress-plugin-windicss' import type { App, PluginConfig } from '@vuepress/core' import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links' import { docsearchPlugin } from '@vuepress/plugin-docsearch' @@ -14,6 +15,7 @@ import { palettePlugin } from '@vuepress/plugin-palette' import { prismjsPlugin } from '@vuepress/plugin-prismjs' import { searchPlugin } from '@vuepress/plugin-search' import { themeDataPlugin } from '@vuepress/plugin-theme-data' +import { getDirname, path } from '@vuepress/utils' import { commentPlugin } from 'vuepress-plugin-comment2' import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance' import { seoPlugin } from 'vuepress-plugin-seo2' @@ -24,6 +26,8 @@ import type { } from '../shared/index.js' import autoFrontmatter from './autoFrontmatter.js' +const __dirname = getDirname(import.meta.url) + export const setupPlugins = ( app: App, options: PlumeThemePluginOptions, @@ -33,6 +37,7 @@ export const setupPlugins = ( return [ palettePlugin({ preset: 'sass' }), + windiCSSPlugin(path.resolve(__dirname, '../client/windi.config.js')), themeDataPlugin({ themeData: localeOptions }), autoFrontmatterPlugin(autoFrontmatter(app, localeOptions)), blogDataPlugin({ diff --git a/packages/theme/src/shared/options/index.ts b/packages/theme/src/shared/options/index.ts index 940940d0..588243bc 100644 --- a/packages/theme/src/shared/options/index.ts +++ b/packages/theme/src/shared/options/index.ts @@ -7,6 +7,42 @@ export interface PlumeThemeOptions extends PlumeThemeLocaleOptions { * 对主题内部使用的插件进行配置 */ themePlugins?: PlumeThemePluginOptions + + /** + * 是否仅使用博客功能 + * + * @default false + */ + onlyBlog?: boolean + + blog?: { + /** + * blog 文章读取目录 + * + * @default './' 即 vuepress 配置的 source 目录 + */ + dir?: string + + /** + * 在 `blog.dir` 目录中，通过 glob string 配置包含文件 + * + * @default - ['**\*.md'] + */ + include?: string[] + + /** + * 在 `blog.dir` 目录中，通过 glob string 配置排除的文件 + * + * _README.md 文件一般作为主页或者某个目录下的主页，不应该被读取为 blog文章_ + * + * @default - ['.vuepress/', 'node_modules/', '{README,index}.md'] + */ + exclude?: string[] + } + + notes?: { + dir?: string + } } export type PlumeThemeLocaleOptions = PlumeThemeData diff --git a/packages/theme/src/shared/options/locale.ts b/packages/theme/src/shared/options/locale.ts index 2132ecfb..dba9f9f7 100644 --- a/packages/theme/src/shared/options/locale.ts +++ b/packages/theme/src/shared/options/locale.ts @@ -71,9 +71,11 @@ export interface PlumeThemeLocaleData extends LocaleData { */ logoDark?: string /** - * 是否启用深色模式 + * 是否启用深色模式切换按钮 */ - darkMode?: boolean + colorModeSwitch?: boolean + + colorMode?: 'auto' | 'light' | 'dark' toggleDarkMode?: string diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 58a1d7e4..9efacbd0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,7 @@ importers: sort-package-json: ^2.0.0 taze: ^0.8.2 ts-node: ^10.9.1 + tsconfig-vuepress: ^4.0.0 typescript: ^4.8.4 vite: ^3.1.8 devDependencies: @@ -65,6 +66,7 @@ importers: sort-package-json: 2.0.0 taze: 0.8.2 ts-node: 10.9.1_5ra3kupzwcghzakkfdrtyjk72u + tsconfig-vuepress: 4.0.0 typescript: 4.8.4 vite: 3.1.8 @@ -255,6 +257,7 @@ importers: '@vuepress-plume/vuepress-plugin-blog-data': workspace:* '@vuepress-plume/vuepress-plugin-caniuse': workspace:* '@vuepress-plume/vuepress-plugin-copy-code': workspace:* + '@vuepress-plume/vuepress-plugin-windicss': workspace:* '@vuepress/client': 2.0.0-beta.51 '@vuepress/core': 2.0.0-beta.51 '@vuepress/plugin-active-header-links': 2.0.0-beta.51 @@ -271,6 +274,7 @@ importers: '@vuepress/plugin-toc': 2.0.0-beta.51 '@vuepress/shared': 2.0.0-beta.51 '@vuepress/utils': 2.0.0-beta.51 + '@vueuse/core': ^9.3.0 date-fns: ^2.29.3 nanoid: ^4.0.0 ts-debounce: ^4.0.0 @@ -280,6 +284,7 @@ importers: vuepress-plugin-md-enhance: 2.0.0-beta.110 vuepress-plugin-seo2: 2.0.0-beta.110 vuepress-plugin-sitemap2: 2.0.0-beta.110 + windicss: ^3.5.6 dependencies: '@types/lodash.merge': 4.6.7 '@vuepress-plume/vuepress-plugin-auto-frontmatter': link:../plugin-auto-frontmatter @@ -287,6 +292,7 @@ importers: '@vuepress-plume/vuepress-plugin-blog-data': link:../plugin-blog-data '@vuepress-plume/vuepress-plugin-caniuse': link:../plugin-caniuse '@vuepress-plume/vuepress-plugin-copy-code': link:../plugin-copy-code + '@vuepress-plume/vuepress-plugin-windicss': link:../plugin-windicss '@vuepress/client': 2.0.0-beta.51 '@vuepress/core': 2.0.0-beta.51 '@vuepress/plugin-active-header-links': 2.0.0-beta.51 @@ -303,6 +309,7 @@ importers: '@vuepress/plugin-toc': 2.0.0-beta.51 '@vuepress/shared': 2.0.0-beta.51 '@vuepress/utils': 2.0.0-beta.51 + '@vueuse/core': 9.3.0_vue@3.2.41 date-fns: 2.29.3 nanoid: 4.0.0 ts-debounce: 4.0.0 @@ -312,6 +319,7 @@ importers: vuepress-plugin-md-enhance: 2.0.0-beta.110 vuepress-plugin-seo2: 2.0.0-beta.110 vuepress-plugin-sitemap2: 2.0.0-beta.110 + windicss: 3.5.6 packages/theme-back: specifiers: @@ -14322,6 +14330,10 @@ packages: strip-bom: 3.0.0 dev: true + /tsconfig-vuepress/4.0.0: + resolution: {integrity: sha512-bhujOtmpGdclg92bBrc+Y4L+emxN7jldlmogfT0ks9TmBzcEmzCAiphYRZ+J4idyDyLL+O7Kd9w4nOkUFtOoZA==} + dev: true + /tslib/1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} diff --git a/tsconfig.base.json b/tsconfig.base.json index 8ecec5a4..7dbe13db 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -1,47 +1,13 @@ { + "extends": "tsconfig-vuepress/base.json", "compilerOptions": { - "composite": true, "allowSyntheticDefaultImports": true, "lib": ["DOM", "ES2020"], - "module": "esnext", + "module": "ESNext", "moduleResolution": "NodeNext", "noEmitOnError": true, - "esModuleInterop": true, + "noImplicitAny": false, "skipLibCheck": true, - "target": "ES2020", - "allowJs": false, - "allowUmdGlobalAccess": false, - "allowUnreachableCode": false, - "allowUnusedLabels": false, - "alwaysStrict": true, - "checkJs": false, - "declaration": true, - "declarationMap": false, - "exactOptionalPropertyTypes": false, - "forceConsistentCasingInFileNames": true, - "importsNotUsedAsValues": "error", - "newLine": "lf", - "noFallthroughCasesInSwitch": false, - "noImplicitAny": true, - "noImplicitOverride": true, - "noImplicitReturns": true, - "noImplicitThis": true, - "noImplicitUseStrict": false, - "noPropertyAccessFromIndexSignature": false, - "noStrictGenericChecks": false, - "noUncheckedIndexedAccess": false, - "noUnusedLocals": false, - "noUnusedParameters": false, - "preserveValueImports": false, - "removeComments": false, - "resolveJsonModule": true, - "sourceMap": false, - "strict": true, - "strictBindCallApply": true, - "strictFunctionTypes": true, - "strictNullChecks": true, - "strictPropertyInitialization": true, - "stripInternal": true, - "useUnknownInCatchVariables": true + "target": "ES2020" } }