docs: upgrade vitepress and add aside sponsors (#8363)

Author: kiaking

docs/.vitepress/config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
     },
 
     carbonAds: {
-      carbon: 'CEBIEK3N',
+      code: 'CEBIEK3N',
       placement: 'vitejsdev'
     },
 

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VPDocAsideSponsors } from 'vitepress/theme'
+import { useSponsor } from '../composables/sponsor'
+
+const { data } = useSponsor()
+
+const sponsors = computed(() => {
+  return (
+    data?.value.map((sponsor) => {
+      return {
+        size: sponsor.size === 'big' ? 'mini' : 'xmini',
+        items: sponsor.items
+      }
+    }) ?? []
+  )
+})
+</script>
+
+<template>
+  <VPDocAsideSponsors v-if="data" :data="sponsors" />
+</template>

docs/.vitepress/theme/index.ts

@@ -3,12 +3,14 @@ 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'
 
 export default {
   ...Theme,
   Layout() {
     return h(Theme.Layout, null, {
-      'home-features-after': () => h(HomeSponsors)
+      'home-features-after': () => h(HomeSponsors),
+      'aside-outline-after': () => h(AsideSponsors)
     })
   }
 }

docs/guide/env-and-mode.md

@@ -16,7 +16,7 @@ Vite exposes env variables on the special **`import.meta.env`** object. Some bui
 
 During production, these env variables are **statically replaced**. It is therefore necessary to always reference them using the full static string. For example, dynamic key access like `import.meta.env[key]` will not work.
 
-It will also replace these strings appearing in JavaScript strings and Vue templates. This should be a rare case, but it can be unintended. You may see errors like `Missing Semicolon` or `Unexpected token` in this case, for example when `"process.env.NODE_ENV: "` is transformed to `""development": "`. There are ways to work around this behavior:
+It will also replace these strings appearing in JavaScript strings and Vue templates. This should be a rare case, but it can be unintended. You may see errors like `Missing Semicolon` or `Unexpected token` in this case, for example when `"process.env.`<wbr>`NODE_ENV"` is transformed to `""development": "`. There are ways to work around this behavior:
 
 - For JavaScript strings, you can break the string up with a Unicode zero-width space, e.g. `'import.meta\u200b.env.MODE'`.
 

docs/guide/index.md

@@ -116,7 +116,7 @@ Running `vite` starts the dev server using the current working directory as root
 In a project where Vite is installed, you can use the `vite` binary in your npm scripts, or run it directly with `npx vite`. Here are the default npm scripts in a scaffolded Vite project:
 
 <!-- prettier-ignore -->
-```json5
+```json
 {
   "scripts": {
     "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`

docs/index.md

@@ -1,10 +1,16 @@
 ---
 layout: home
 
+title: Vite
+titleTemplate: Next Generation Frontend Tooling
+
 hero:
   name: Vite
   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
   actions:
     - theme: brand
       text: Get Started

docs/public/vite-splash-dark.jpg

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