docs: vitepress next updates (#8260)

docs/.vitepress/config.ts

@@ -4,27 +4,7 @@ export default defineConfig({
   title: 'Vite',
   description: 'Next Generation Frontend Tooling',
 
-  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')
-          }
-        })()
-      `
-    ]
-  ],
+  head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
 
   vue: {
     reactivityTransform: true
@@ -40,6 +20,12 @@ export default defineConfig({
       text: 'Suggest changes to this page'
     },
 
+    socialLinks: [
+      { icon: 'twitter', link: 'https://twitter.com/vite_js' },
+      { icon: 'discord', link: 'https://chat.vitejs.dev' },
+      { icon: 'github', link: 'https://github.com/vitejs/vite' }
+    ],
+
     algolia: {
       apiKey: 'b573aa848fd57fb47d693b531297403c',
       indexName: 'vitejs',
@@ -61,6 +47,11 @@ export default defineConfig({
       ]
     },
 
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2019-present Evan You & Vite Contributors'
+    },
+
     nav: [
       { text: 'Guide', link: '/guide/' },
       { text: 'Config', link: '/config/' },
@@ -106,7 +97,7 @@ export default defineConfig({
     ],
 
     sidebar: {
-      '/': [
+      '/guide/': [
         {
           text: 'Guide',
           items: [

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { VPHomeSponsors } from 'vitepress/theme'
+import { useSponsor } from '../composables/sponsor'
+
+const { data } = useSponsor()
+</script>
+
+<template>
+  <VPHomeSponsors
+    v-if="data"
+    message="Vite is free and open source, made possible by wonderful sponsors."
+    action-link="https://github.com/sponsors/yyx990803"
+    :data="data"
+  />
+</template>

docs/.vitepress/theme/composables/sponsor.ts

@@ -0,0 +1,61 @@
+import { ref, onMounted } from 'vue'
+
+interface Sponsors {
+  special: Sponsor[]
+  platinum: Sponsor[]
+  platinum_china: Sponsor[]
+  gold: Sponsor[]
+  silver: Sponsor[]
+  bronze: Sponsor[]
+}
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+// shared data across instances so we load only once.
+const data = ref()
+
+const dataHost = 'https://sponsors.vuejs.org'
+const dataUrl = `${dataHost}/vite.json`
+
+export function useSponsor() {
+  onMounted(async () => {
+    if (data.value) {
+      return
+    }
+
+    const result = await fetch(dataUrl)
+    const json = await result.json()
+
+    data.value = mapSponsors(json)
+  })
+
+  return {
+    data
+  }
+}
+
+function mapSponsors(sponsors: Sponsors) {
+  return [
+    {
+      tier: 'Platinum Sponsor',
+      size: 'big',
+      items: mapImgPath(sponsors['platinum'])
+    },
+    {
+      tier: 'Gold Sponsors',
+      size: 'medium',
+      items: mapImgPath(sponsors['gold'])
+    }
+  ]
+}
+
+function mapImgPath(sponsors: Sponsor[]) {
+  return sponsors.map((sponsor) => ({
+    ...sponsor,
+    img: `${dataHost}/images/${sponsor.img}`
+  }))
+}

docs/.vitepress/theme/index.ts

@@ -1,15 +1,14 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import SponsorsSidebar from './SponsorsSidebar.vue'
 import './styles/vars.css'
 import './styles/custom.css'
+import HomeSponsors from './components/HomeSponsors.vue'
 
 export default {
   ...Theme,
   Layout() {
     return h(Theme.Layout, null, {
-      'sidebar-bottom': () =>
-        h('div', { class: 'sponsors sidebar' }, [h(SponsorsSidebar)])
+      'home-features-after': () => h(HomeSponsors)
     })
   }
 }

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

@@ -1,35 +1,15 @@
-.home-hero .image {
-  width: 200px;
-  height: 200px;
-}
-
-.nav-bar .logo {
-  height: 30px;
-  margin-right: 2px;
-}
-
-.content img {
-  border-radius: 10px;
-}
-
-.nav-dropdown-link-item .icon {
-  display: none;
-}
-
-.custom-block.tip {
-  border-color: var(--vp-c-brand-light);
-}
-
-.DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
-}
+@media (min-width: 640px) {
+  .VPHero .text {
+    max-width: 592px;
+  }
 
-#play-vite-audio {
-  padding: 0;
-  margin-left: 5px;
-  display: inline-flex;
+  .VPHero .tagline {
+    max-width: 440px;
+  }
 }
 
-#play-vite-audio img {
-  opacity: 0.8;
+@media (min-width: 960px) {
+  .VPHero .tagline {
+    max-width: 480px;
+  }
 }