diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 4659ea5ab7ae4f..5023b3cdc328d9 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -3,17 +3,42 @@ import { defineConfig } from 'vitepress' export default defineConfig({ title: 'Vite', description: 'Next Generation Frontend Tooling', - head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]], + + head: [ + ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }], + + // TODO: This is neeeded to get smooth dark mode appearance on initial + // load. And this will be gone when VitePress figures out how to handle + // this in core. + [ + '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') + } + })() + ` + ] + ], + vue: { reactivityTransform: true }, + themeConfig: { - repo: 'vitejs/vite', logo: '/logo.svg', - docsDir: 'docs', - docsBranch: 'main', - editLinks: true, - editLinkText: 'Suggest changes to this page', + + editLink: { + repo: 'vitejs/vite', + branch: 'main', + dir: 'docs', + text: 'Suggest changes to this page' + }, algolia: { apiKey: 'b573aa848fd57fb47d693b531297403c', @@ -28,6 +53,14 @@ export default defineConfig({ placement: 'vitejsdev' }, + localeLinks: { + text: 'English', + items: [ + { text: '简体中文', link: 'https://cn.vitejs.dev' }, + { text: '日本語', link: 'https://ja.vitejs.dev' } + ] + }, + nav: [ { text: 'Guide', link: '/guide/' }, { text: 'Config', link: '/config/' }, @@ -69,34 +102,14 @@ export default defineConfig({ link: 'https://v2.vitejs.dev' } ] - }, - { - text: 'Languages', - items: [ - { - text: 'English', - link: 'https://vitejs.dev' - }, - { - text: '简体中文', - link: 'https://cn.vitejs.dev' - }, - { - text: '日本語', - link: 'https://ja.vitejs.dev' - } - ] } ], sidebar: { - '/config/': 'auto', - '/plugins': 'auto', - // catch-all fallback '/': [ { text: 'Guide', - children: [ + items: [ { text: 'Why Vite', link: '/guide/why' @@ -153,7 +166,7 @@ export default defineConfig({ }, { text: 'APIs', - children: [ + items: [ { text: 'Plugin API', link: '/guide/api-plugin' diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.ts similarity index 84% rename from docs/.vitepress/theme/index.js rename to docs/.vitepress/theme/index.ts index babdc165f30ed8..4c75157f96c18e 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.ts @@ -1,7 +1,8 @@ -import Theme from 'vitepress/theme' import { h } from 'vue' +import Theme from 'vitepress/theme' import SponsorsSidebar from './SponsorsSidebar.vue' -import './custom.css' +import './styles/vars.css' +import './styles/custom.css' export default { ...Theme, diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/styles/custom.css similarity index 70% rename from docs/.vitepress/theme/custom.css rename to docs/.vitepress/theme/styles/custom.css index 098a29853b4a49..2678c12e6b4283 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/styles/custom.css @@ -16,17 +16,12 @@ display: none; } -:root { - --c-brand: #646cff; - --c-brand-light: #747bff; -} - .custom-block.tip { - border-color: var(--c-brand-light); + border-color: var(--vp-c-brand-light); } .DocSearch { - --docsearch-primary-color: var(--c-brand) !important; + --docsearch-primary-color: var(--vp-c-brand) !important; } #play-vite-audio { diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css new file mode 100644 index 00000000000000..1d2dc2b93d8a96 --- /dev/null +++ b/docs/.vitepress/theme/styles/vars.css @@ -0,0 +1,5 @@ +:root { + --vp-c-brand: #646cff; + --vp-c-brand-light: #747bff; + --vp-c-brand-dark: #535bf2; +} diff --git a/docs/index.md b/docs/index.md index ce1678de00404e..f1e950b19e8582 100644 --- a/docs/index.md +++ b/docs/index.md @@ -23,6 +23,8 @@ features: footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors --- +> TODO: Home Page feature is not ready in VitePress Next just yet! So this page looks broken for now. + diff --git a/package.json b/package.json index dd19523dfdc497..6984f57b077c1e 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "typescript": "^4.6.4", "unbuild": "^0.7.4", "vite": "workspace:*", - "vitepress": "^0.22.4", + "vitepress": "1.0.0-draft.1", "vitest": "^0.12.4", "vue": "^3.2.33" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 953a97be252b82..a0ae1e24a2afe0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,7 +60,7 @@ importers: typescript: ^4.6.4 unbuild: ^0.7.4 vite: workspace:* - vitepress: ^0.22.4 + vitepress: 1.0.0-draft.1 vitest: ^0.12.4 vue: ^3.2.33 devDependencies: @@ -114,7 +114,7 @@ importers: typescript: 4.6.4 unbuild: 0.7.4 vite: link:packages/vite - vitepress: 0.22.4 + vitepress: 1.0.0-draft.1 vitest: 0.12.4 vue: 3.2.33 @@ -2368,6 +2368,42 @@ packages: /@vue/shared/3.2.33: resolution: {integrity: sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==} + /@vueuse/core/8.5.0_vue@3.2.33: + resolution: {integrity: sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==} + peerDependencies: + '@vue/composition-api': ^1.1.0 + vue: ^2.6.0 || ^3.2.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue: + optional: true + dependencies: + '@vueuse/metadata': 8.5.0 + '@vueuse/shared': 8.5.0_vue@3.2.33 + vue: 3.2.33 + vue-demi: 0.12.5_vue@3.2.33 + dev: true + + /@vueuse/metadata/8.5.0: + resolution: {integrity: sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g==} + dev: true + + /@vueuse/shared/8.5.0_vue@3.2.33: + resolution: {integrity: sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==} + peerDependencies: + '@vue/composition-api': ^1.1.0 + vue: ^2.6.0 || ^3.2.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue: + optional: true + dependencies: + vue: 3.2.33 + vue-demi: 0.12.5_vue@3.2.33 + dev: true + /@wessberg/stringutil/1.0.19: resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==} engines: {node: '>=8.0.0'} @@ -2707,6 +2743,10 @@ packages: - supports-color dev: true + /body-scroll-lock/4.0.0-beta.0: + resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==} + dev: true + /brace-expansion/1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -8298,20 +8338,23 @@ packages: engines: {node: '>= 0.8'} dev: true - /vitepress/0.22.4: - resolution: {integrity: sha512-oZUnLO/SpYdThaBKefDeOiVlr0Rie4Ppx3FzMnMyLtJnI5GlBMNjqYqMy/4+umm/iC+ZDJfI+IlDKxv5fZnYzA==} + /vitepress/1.0.0-draft.1: + resolution: {integrity: sha512-9tNpUu0dwd5w5DNCBlgsmw4HlEl55o8jdOk/tQIxQ2j//0UkEAPT32TL5KRuro1Bp5OM6njZ37s8Y8g26MnooQ==} engines: {node: '>=14.0.0'} hasBin: true dependencies: '@docsearch/css': 3.0.0 '@docsearch/js': 3.0.0 '@vitejs/plugin-vue': link:packages/plugin-vue + '@vueuse/core': 8.5.0_vue@3.2.33 + body-scroll-lock: 4.0.0-beta.0 prismjs: 1.28.0 vite: link:packages/vite vue: 3.2.33 transitivePeerDependencies: - '@algolia/client-search' - '@types/react' + - '@vue/composition-api' - react - react-dom dev: true @@ -8349,6 +8392,21 @@ packages: engines: {node: '>=0.10.0'} dev: true + /vue-demi/0.12.5_vue@3.2.33: + resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dependencies: + vue: 3.2.33 + dev: true + /vue-router/4.0.15_vue@3.2.33: resolution: {integrity: sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==} peerDependencies: