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