docs: use vitepress next (#8233)

Author: kiaking

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'

docs/.vitepress/theme/index.js renamed to 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,

docs/.vitepress/theme/custom.css renamed to 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 {

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;
+}

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.
+
 <script setup>
 import SponsorsGroup from './.vitepress/theme/SponsorsGroup.vue'
 </script>

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"
   },