Ready Release for Vite v5.0

.vitepress/config.ts

@@ -1,12 +1,65 @@
 import { defineConfig } from 'vitepress'
-import renderPermaLink from './render-perma-link'
-import MarkDownItCustomAnchor from './markdown-it-custom-anchor'
 
 const ogDescription = 'Next Generation Frontend Tooling'
 const ogImage = 'https://vitejs.dev/og-image.png'
 const ogTitle = 'Vite'
 const ogUrl = 'https://vitejs.dev'
 
+// netlify envs
+const deployURL = process.env.DEPLOY_PRIME_URL || ''
+const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev'
+
+const deployType = (() => {
+  switch (deployURL) {
+    case 'https://main--vite-docs-main.netlify.app':
+      return 'main'
+    case '':
+      return 'local'
+    default:
+      return 'release'
+  }
+})()
+const additionalTitle = ((): string => {
+  switch (deployType) {
+    case 'main':
+      return ' (main branch)'
+    case 'local':
+      return ' (local)'
+    case 'release':
+      return ''
+  }
+})()
+const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
+  const oldVersions: DefaultTheme.NavItemWithLink[] = [
+    {
+      text: 'Vite 4 Docs',
+      link: 'https://v4.vitejs.dev',
+    },
+    {
+      text: 'Vite 3 Docs',
+      link: 'https://v3.vitejs.dev',
+    },
+    {
+      text: 'Vite 2 Docs',
+      link: 'https://v2.vitejs.dev',
+    },
+  ]
+
+  switch (deployType) {
+    case 'main':
+    case 'local':
+      return [
+        {
+          text: 'Vite 5 Docs (release)',
+          link: 'https://vitejs.dev',
+        },
+        ...oldVersions,
+      ]
+    case 'release':
+      return oldVersions
+  }
+})()
+
 export default defineConfig({
   title: 'Vite 官方中文文档',
   description: '下一代前端工具链',
@@ -40,6 +93,7 @@ export default defineConfig({
     es: { label: 'Español', link: 'https://es.vitejs.dev' },
     pt: { label: 'Português', link: 'https://pt.vitejs.dev' },
     ko: { label: '한국어', link: 'https://ko.vitejs.dev' },
+    de: { label: 'Deutsch', link: 'https://de.vitejs.dev' },
   },
 
   themeConfig: {
@@ -51,7 +105,8 @@ export default defineConfig({
     },
 
     outline: {
-      label: '本页目录'
+      label: '本页目录',
+      level: [2, 3],
     },
 
     socialLinks: [
@@ -127,31 +182,44 @@ export default defineConfig({
         text: '相关链接',
         items: [
           { text: 'Team', link: '/team' },
+          { text: 'Blog', link: '/blog' },
           { text: 'Releases', link: '/releases' },
           {
-            text: 'Twitter',
-            link: 'https://twitter.com/vite_js'
-          },
-          {
-            text: 'Discord Chat',
-            link: 'https://chat.vitejs.dev'
-          },
-          {
-            text: 'Awesome Vite',
-            link: 'https://github.com/vitejs/awesome-vite'
-          },
-          {
-            text: 'Dev.to 社区',
-            link: 'https://dev.to/t/vite'
+            items: [
+              {
+                text: 'Twitter',
+                link: 'https://twitter.com/vite_js',
+              },
+              {
+                text: 'Discord 聊天室',
+                link: 'https://chat.vitejs.dev'
+              },
+              {
+                text: 'Awesome Vite',
+                link: 'https://github.com/vitejs/awesome-vite'
+              },
+              {
+                text: 'ViteConf',
+                link: 'https://viteconf.org',
+              },
+              {
+                text: 'Dev.to 社区',
+                link: 'https://dev.to/t/vite'
+              },
+              {
+                text: 'Rollup 插件兼容',
+                link: 'https://vite-rollup-plugins.patak.dev/'
+              },
+              {
+                text: '更新日志',
+                link: 'https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md'
+              },
+              {
+                text: '贡献指南',
+                link: 'https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md',
+              },
+            ],
           },
-          {
-            text: 'Rollup 插件兼容',
-            link: 'https://vite-rollup-plugins.patak.dev/'
-          },
-          {
-            text: '更新日志',
-            link: 'https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md'
-          }
         ]
       },
       {
@@ -230,12 +298,16 @@ export default defineConfig({
               text: '故障排除',
               link: '/guide/troubleshooting'
             },
+            {
+              text: '性能',
+              link: '/guide/performance',
+            },
             {
               text: '理念',
               link: '/guide/philosophy',
             },
             {
-              text: '从 v3 迁移',
+              text: '从 v4 迁移',
               link: '/guide/migration'
             },
           ],
@@ -296,11 +368,11 @@ export default defineConfig({
             },
             {
               text: 'Worker 选项',
-              link: '/config/worker-options'
-            }
-          ]
-        }
-      ]
-    }
+              link: '/config/worker-options',
+            },
+          ],
+        },
+      ],
+    },
   },
 })

.vitepress/theme/components/AsideSponsors.vue

@@ -18,12 +18,16 @@ const sponsors = computed(() => {
 </script>
 
 <template>
-  <a class="viteconf" href="https://viteconf.org/23" target="_blank">
+  <a
+    class="viteconf"
+    href="https://viteconf.org/23/replay?utm=vite-sidebar"
+    target="_blank"
+  >
     <img width="22" height="22" src="/viteconf.svg" />
     <span>
-      <p class="extra-info">Free Online Conference</p>
-      <p class="heading">ViteConf 23 - Oct 5</p>
-      <p class="extra-info">Get your ticket now!</p>
+      <p class="extra-info">Beyond Fast</p>
+      <p class="heading">ViteConf 2023</p>
+      <p class="extra-info">Watch the replay!</p>
     </span>
   </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />
@@ -34,7 +38,6 @@ const sponsors = computed(() => {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 14px;
-  padding-left: 2.5rem;
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
   position: relative;
@@ -44,7 +47,8 @@ const sponsors = computed(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
+  width: 100%;
+  gap: 1rem;
   background-color: var(--vp-c-bg-alt);
   border: 2px solid var(--vp-c-bg-alt);
   transition: border-color 0.5s;
@@ -53,8 +57,6 @@ const sponsors = computed(() => {
   border: 2px solid var(--vp-c-brand-light);
 }
 .viteconf img {
-  position: absolute;
-  left: 1.5rem;
   transition: transform 0.5s;
   transform: scale(1.25);
 }

.vitepress/theme/components/BlogIndex.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { data as posts } from './blog.data'
+
+function getDateTime(time: number) {
+  return new Date(time).toISOString()
+}
+</script>
+
+<template>
+  <ul class="blog-list">
+    <li class="blog-entry" v-for="post of posts">
+      <article>
+        <time :datetime="getDateTime(post.date.time)">{{
+          post.date.string
+        }}</time>
+        <h2 class="title">
+          <a :href="post.url">{{ post.title }}</a>
+        </h2>
+      </article>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.blog-list {
+  list-style-type: none;
+  padding: 0;
+}
+.blog-entry {
+  margin-top: 3em;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.blog-entry time {
+  font-size: 14px;
+}
+.title {
+  border: none;
+  margin-top: 0;
+  padding-top: 0;
+  font-size: 22px;
+}
+.title a {
+  font-weight: 600;
+  text-decoration: none;
+}
+</style>

.vitepress/theme/components/blog.data.ts

@@ -0,0 +1,40 @@
+import { createContentLoader } from 'vitepress'
+
+interface Post {
+  title: string
+  url: string
+  date: {
+    time: number
+    string: string
+  }
+}
+
+declare const data: Post[]
+export { data }
+
+export default createContentLoader('blog/*.md', {
+  // excerpt: true,
+  transform(raw): Post[] {
+    return raw
+      .map(({ url, frontmatter }) => ({
+        title: frontmatter.head.find((e) => e[1].property === 'og:title')[1]
+          .content,
+        url,
+        date: formatDate(frontmatter.date),
+      }))
+      .sort((a, b) => b.date.time - a.date.time)
+  },
+})
+
+function formatDate(raw: string): Post['date'] {
+  const date = new Date(raw)
+  date.setUTCHours(12)
+  return {
+    time: +date,
+    string: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }),
+  }
+}

.vitepress/theme/composables/sponsor.ts

@@ -42,7 +42,14 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
       img: '/astro.svg',
     },
   ],
-  gold: [],
+  gold: [
+    // through GitHub -> OpenCollective
+    {
+      name: 'Remix',
+      url: 'https://remix.run/',
+      img: '/remix.svg',
+    },
+  ],
 }
 
 export function useSponsor() {

.vitepress/theme/index.ts

@@ -1,22 +1,27 @@
 import { h } from 'vue'
-import Theme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
 import WwAds from './components/WwAds.vue'
-import './styles/vars.css'
 import './custom.css'
+// temporary fix for vitepress not including component css when only
+// imported in a single page
+import './components/BlogIndex.vue'
 
 export default {
-  ...Theme,
+  extends: DefaultTheme,
   Layout() {
-    return h(Theme.Layout, null, {
+    return h(DefaultTheme.Layout, null, {
       'home-features-after': () => h(HomeSponsors),
       'aside-outline-after': () => h(WwAds),
       'aside-bottom': () => h(AsideSponsors)
     })
   },
   enhanceApp({ app }) {
     app.component('SvgImage', SvgImage)
-  }
-}
+  },
+} satisfies Theme
+

.vitepress/theme/styles/vars.css

@@ -118,3 +118,11 @@
 .vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
   max-width: 124px;
 }
+
+.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image[alt='Bit'] {
+  max-height: 44px;
+}
+
+.vp-sponsor-grid.big .vp-sponsor-grid-image {
+  max-height: 96px;
+}