docs: update vitepress and add active match to nav (#8376)

docs/.vitepress/config.ts

@@ -53,9 +53,9 @@ export default defineConfig({
     },
 
     nav: [
-      { text: 'Guide', link: '/guide/' },
-      { text: 'Config', link: '/config/' },
-      { text: 'Plugins', link: '/plugins/' },
+      { text: 'Guide', link: '/guide/', activeMatch: '/guide/' },
+      { text: 'Config', link: '/config/', activeMatch: '/config/' },
+      { text: 'Plugins', link: '/plugins/', activeMatch: '/plugins/' },
       {
         text: 'Links',
         items: [

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -9,6 +9,7 @@ const { data } = useSponsor()
   <VPHomeSponsors
     v-if="data"
     message="Vite is free and open source, made possible by wonderful sponsors."
+    action-text="Become a sponsor"
     action-link="https://github.com/sponsors/yyx990803"
     :data="data"
   />

docs/.vitepress/theme/index.ts

@@ -1,7 +1,6 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
 import './styles/vars.css'
-import './styles/custom.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
 
@@ -10,7 +9,7 @@ export default {
   Layout() {
     return h(Theme.Layout, null, {
       'home-features-after': () => h(HomeSponsors),
-      'aside-outline-after': () => h(AsideSponsors)
+      'aside-ads-before': () => h(AsideSponsors)
     })
   }
 }

docs/.vitepress/theme/styles/custom.css

@@ -1,15 +0,0 @@
-@media (min-width: 640px) {
-  .VPHero .text {
-    max-width: 592px;
-  }
-
-  .VPHero .tagline {
-    max-width: 440px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPHero .tagline {
-    max-width: 480px;
-  }
-}

docs/.vitepress/theme/styles/vars.css

@@ -38,6 +38,25 @@
     #bd34fe 30%,
     #41d1ff
   );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
 }
 
 /**

docs/index.md

@@ -9,8 +9,8 @@ hero:
   text: Next Generation Frontend Tooling
   tagline: Get ready for a development environment that can finally catch up with you.
   image:
-    light: /vite-splash-light.jpg
-    dark: /vite-splash-dark.jpg
+    src: /logo-with-shadow.png
+    alt: Vite
   actions:
     - theme: brand
       text: Get Started

package.json

@@ -88,7 +88,7 @@
     "typescript": "^4.6.4",
     "unbuild": "^0.7.4",
     "vite": "workspace:*",
-    "vitepress": "1.0.0-draft.6",
+    "vitepress": "1.0.0-draft.8",
     "vitest": "^0.12.9",
     "vue": "^3.2.35"
   },

pnpm-lock.yaml

@@ -64,7 +64,7 @@ importers:
       typescript: ^4.6.4
       unbuild: ^0.7.4
       vite: workspace:*
-      vitepress: 1.0.0-draft.6
+      vitepress: 1.0.0-draft.8
       vitest: ^0.12.9
       vue: ^3.2.35
     devDependencies:
@@ -122,7 +122,7 @@ importers:
       typescript: 4.6.4
       unbuild: 0.7.4
       vite: link:packages/vite
-      vitepress: 1.0.0-draft.6
+      vitepress: 1.0.0-draft.8
       vitest: 0.12.9
       vue: 3.2.36
 
@@ -8466,8 +8466,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vitepress/1.0.0-draft.6:
-    resolution: {integrity: sha512-l5V9Z31+D9EBFy4na7aNhAQ4MKRGVuwjBlFKDkY4kSRHPDPUC9XcNbH1mbWepeYaauJc9IDniWj7uVU6ZqJ53g==}
+  /vitepress/1.0.0-draft.8:
+    resolution: {integrity: sha512-r1cphHgtJ/KFwtph3cyusGWjRyX0NHvwfBboKnG5mRJpOP/JyvX5q5+NIiRYElPgdFXU7Roxkl8BcJbxWht56Q==}
     engines: {node: '>=14.6.0'}
     hasBin: true
     dependencies: