From 9250460b3ff79121200e9bc3b27a39e64fcf284c Mon Sep 17 00:00:00 2001 From: Kia Ishii Date: Thu, 19 May 2022 21:35:46 +0900 Subject: [PATCH] feat: make appearance configurable --- docs/.vitepress/config.ts | 27 ++---- docs/config/app-configs.md | 82 +++++++++++++++++++ docs/config/theme-configs.md | 3 + .../theme-default/components/VPNavBar.vue | 1 + .../components/VPNavBarAppearance.vue | 5 +- .../components/VPNavBarExtra.vue | 4 +- .../components/VPNavScreenAppearance.vue | 5 +- .../components/VPSwitchAppearance.vue | 6 +- src/client/theme-default/styles/vp-doc.css | 2 +- src/node/build/render.ts | 6 +- src/node/config.ts | 39 +++++++-- src/shared/shared.ts | 1 + types/shared.d.ts | 17 ++-- 13 files changed, 154 insertions(+), 44 deletions(-) create mode 100644 docs/config/app-configs.md create mode 100644 docs/config/theme-configs.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index d0acaa99..19c7e415 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -5,28 +5,10 @@ export default defineConfig({ title: 'VitePress', description: 'Vite & Vue powered static site generator.', - // TODO: Do something about this. - head: [ - [ - 'script', - {}, - ` - ;(() => { - const saved = localStorage.getItem('vitepress-theme-appearance') - const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches - - if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') { - document.documentElement.classList.add('dark') - } - })() - ` - ] - ], - themeConfig: { nav: [ { text: 'Guide', link: '/guide/what-is-vitepress' }, - { text: 'Config', link: '/config/app-basics' }, + { text: 'Configs', link: '/config/app-configs' }, { text: 'Release Notes', link: 'https://github.com/vuejs/vitepress/releases' @@ -70,8 +52,11 @@ function getGuideSidebar() { function getConfigSidebar() { return [ { - text: 'App Config', - items: [{ text: 'Basics', link: '/config/app-basics' }] + text: 'Config', + items: [ + { text: 'App Configs', link: '/config/app-configs' }, + { text: 'Theme Configs', link: '/config/theme-configs' } + ] } ] } diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md new file mode 100644 index 00000000..d3092f20 --- /dev/null +++ b/docs/config/app-configs.md @@ -0,0 +1,82 @@ +# App Configs + +App configs are where you can define the global settings of the site. App configs define fundamental settings that are not only limited to the theme configs such as configuration for "base directory", or the "title" of the site. + +```ts +export default { + // These are app level configs. + lang: 'en-US', + title: 'VitePress', + description: 'Vite & Vue powered static site generator.', + ... +} +``` + +## base + +- Type: `string` +- Default: `/` + +The base URL the site will be deployed at. You will need to set this if you plan to deploy your site under a sub path, for example, GitHub pages. If you plan to deploy your site to `https://foo.github.io/bar/`, then you should set base to `'/bar/'`. It should always start and end with a slash. + +The base is automatically prepended to all the URLs that start with / in other options, so you only need to specify it once. + +```ts +export default { + base: '/base/' +} +``` + +## lang + +- Type: `string` +- Default: `en-US` + +The lang attribute for the site. This will render as a `` tag in the page HTML. + +```ts +export default { + lang: 'en-US' +} +``` + +## title + +- Type: `string` +- Default: `VitePress` + +Title for the site. This will be the suffix for all page titles, and displayed in the nav bar. + +```ts +export default { + title: 'VitePress' +} +``` + +## description + +- Type: `string` +- Default: `A VitePress site` + +Description for the site. This will render as a `` tag in the page HTML. + +```ts +export default { + description: 'A VitePress site' +} +``` + +## appearance + +- Type: `boolean` +- Default: `true` + +Whether to enable "Dark Mode" or not. If the option is set to `true`, it adds `.dark` class to the `` tag. + +It also injects inline script that tries to read users settings from local storage by `vitepress-theme-appearance` key and restores users preferred color mode. + +```ts +export default { + appearance: true +} +``` diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md new file mode 100644 index 00000000..3bd5693f --- /dev/null +++ b/docs/config/theme-configs.md @@ -0,0 +1,3 @@ +# Theme Configs + +Coming soon... diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index 7d5c3196..7f8a15c3 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -84,6 +84,7 @@ defineEmits<{ .menu + .translations::before, .menu + .appearance::before, +.menu + .social-links::before, .translations + .appearance::before, .appearance + .social-links::before { margin-right: 8px; diff --git a/src/client/theme-default/components/VPNavBarAppearance.vue b/src/client/theme-default/components/VPNavBarAppearance.vue index 39add39a..62c8d9fc 100644 --- a/src/client/theme-default/components/VPNavBarAppearance.vue +++ b/src/client/theme-default/components/VPNavBarAppearance.vue @@ -1,9 +1,12 @@ diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue index 13abe687..8f27f502 100644 --- a/src/client/theme-default/components/VPNavBarExtra.vue +++ b/src/client/theme-default/components/VPNavBarExtra.vue @@ -4,7 +4,7 @@ import VPFlyout from './VPFlyout.vue' import VPSwitchAppearance from './VPSwitchAppearance.vue' import VPSocialLinks from './VPSocialLinks.vue' -const { theme } = useData() +const { site, theme } = useData()