docs(en): merge docs-cn/sync-docs into docs-cn/dev @ 3274db06

.vitepress/config.ts

@@ -7,6 +7,11 @@ import {
   groupIconMdPlugin,
   groupIconVitePlugin,
 } from 'vitepress-plugin-group-icons'
+<<<<<<< HEAD
+=======
+import { graphvizMarkdownPlugin } from 'vitepress-plugin-graphviz'
+import llmstxt from 'vitepress-plugin-llms'
+>>>>>>> 3274db06edbbe16ff450b5092c1a808c62756031
 import { markdownItImageSize } from 'markdown-it-image-size'
 import { extendConfig } from '@voidzero-dev/vitepress-theme/config'
 import type { FooterLink } from '@voidzero-dev/vitepress-theme'
@@ -105,9 +110,9 @@ const config = defineConfig({
     logo: '/logo.svg',
 
     banner: {
-      id: 'vite+',
-      text: 'Announcing Vite+ | The Unified Toolchain for the Web',
-      url: 'https://voidzero.dev/posts/announcing-vite-plus?utm_source=vite&utm_content=top_banner',
+      id: 'viteplus-alpha',
+      text: 'Announcing Vite+ Alpha: Open source. Unified. Next-gen.',
+      url: 'https://voidzero.dev/posts/announcing-vite-plus-alpha?utm_source=vite&utm_content=top_banner',
     },
 
     editLink: {
@@ -205,8 +210,17 @@ const config = defineConfig({
           { text: '发布策略', link: '/releases' },
           { text: '致谢', link: '/acknowledgements' },
           {
+<<<<<<< HEAD
             text: '纪录片',
             link: 'https://www.youtube.com/watch?v=bmWQqAKLgT4'
+=======
+            text: 'Plugin Registry',
+            link: 'https://registry.vite.dev/plugins',
+          },
+          {
+            text: 'The Documentary',
+            link: 'https://www.youtube.com/watch?v=bmWQqAKLgT4',
+>>>>>>> 3274db06edbbe16ff450b5092c1a808c62756031
           },
           {
             items: [
@@ -520,7 +534,7 @@ const config = defineConfig({
         },
       },
     ],
-    config(md) {
+    async config(md) {
       md.use(groupIconMdPlugin, {
         titleBar: {
           includeSnippet: true
@@ -529,7 +543,12 @@ const config = defineConfig({
       md.use(markdownItImageSize, {
         publicDir: path.resolve(import.meta.dirname, '../public')
       })
+<<<<<<< HEAD
     }
+=======
+      await graphvizMarkdownPlugin(md)
+    },
+>>>>>>> 3274db06edbbe16ff450b5092c1a808c62756031
   },
   vite: {
     plugins: [

.vitepress/theme/components/SupportedVersions.vue

@@ -18,6 +18,7 @@ const previousMajorLatestMinors: Record<string, string> = {
   '4': '4.5',
   '5': '5.4',
   '6': '6.4',
+  '7': '7.3',
 }
 
 // Current latest Vite version and support info

.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import { h } from 'vue'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import '@shikijs/vitepress-twoslash/style.css'
 import 'virtual:group-icons.css'
+import 'vitepress-plugin-graphviz/style.css'
 import Theme from '@voidzero-dev/vitepress-theme/src/vite'
 import './styles.css'
 

.vitepress/theme/landing/Community.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import githubIcon from '@assets/social/github-light.svg'
+import { Icon } from '@iconify/vue'
 
 interface Testimonial {
   name: string
@@ -107,7 +107,7 @@ const testimonials: Testimonial[] = [
         <div class="flex flex-col gap-3">
           <h2 class="text-white">75k+</h2>
           <p class="text-grey flex items-center gap-2">
-            <img :src="githubIcon" alt="" class="size-6" />
+            <Icon icon="simple-icons:github" width="20px" height="20px" />
             Github Stars
           </p>
         </div>

.vitepress/theme/landing/Hero.vue

@@ -14,11 +14,11 @@ if (typeof document !== 'undefined') {
 }
 
 const installTabs = [
-  { label: 'npm', code: '$ npm create vite@latest' },
-  { label: 'Yarn', code: '$ yarn create vite' },
-  { label: 'pnpm', code: '$ pnpm create vite' },
-  { label: 'Bun', code: '$ bun create vite' },
-  { label: 'Deno', code: '$ deno init --npm vite' },
+  { label: 'npm', code: 'npm create vite@latest', prefix: '$ ' },
+  { label: 'Yarn', code: 'yarn create vite', prefix: '$ ' },
+  { label: 'pnpm', code: 'pnpm create vite', prefix: '$ ' },
+  { label: 'Bun', code: 'bun create vite', prefix: '$ ' },
+  { label: 'Deno', code: 'deno init --npm vite', prefix: '$ ' },
 ]
 </script>
 

.vitepress/theme/live/Events.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import background from '@voidzero-dev/vitepress-theme/src/assets/vite/footer-background.jpg'
+import event1 from '../../../images/events/viteconf_2022.jpg'
+import event2 from '../../../images/events/viteconf_2023.jpg'
+import event3 from '../../../images/events/viteconf_2024.jpg'
+import event4 from '../../../images/events/viteconf_2025.jpg'
+
+const EVENTS = [
+  {
+    date: '2025',
+    title: 'ViteConf 2025',
+    image: event4,
+    url: 'https://www.youtube.com/watch?v=x7Jsmt_o9ek&list=PLqGQbXn_GDmkJaoykvHCUmXUPjhgH2bVr',
+  },
+  {
+    date: '2024',
+    title: 'ViteConf 2024',
+    image: event3,
+    url: 'https://www.youtube.com/watch?v=mWK3Y_1kmaM&list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp',
+  },
+  {
+    date: '2023',
+    title: 'ViteConf 2023',
+    image: event2,
+    url: 'https://www.youtube.com/watch?v=veCxKeLl35A&list=PLqGQbXn_GDmkOsHI7-Wrbv1GgAA4tJZhg',
+  },
+  {
+    date: '2022',
+    title: 'ViteConf 2022',
+    image: event1,
+    url: 'https://www.youtube.com/watch?v=Znd11rVHQOE&list=PLqGQbXn_GDmkI_lwbq5LsVYMEoX2ilKfI',
+  },
+]
+</script>
+
+<template>
+  <div class="wrapper wrapper--ticks w-full text-center md:text-left">
+    <h2
+      class="text-white text-2xl px-10 py-5 text-pretty border-nickel border-y"
+    >
+      Previous events
+    </h2>
+    <div class="relative grid md:grid-cols-2 xl:grid-cols-4 wrapper--ticks">
+      <a
+        v-for="event in EVENTS"
+        :key="event.date"
+        class="group event-card block p-0.5"
+        :style="`background-image: url(${background});`"
+        :href="event.url"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          :src="event.image"
+          :alt="event.title"
+          class="w-full aspect-video object-cover"
+        />
+        <div class="bg-primary group-hover:bg-primary/95 bg-blur-lg">
+          <h3 class="text-white text-xl px-10 py-3 text-pretty">
+            {{ event.title }}
+          </h3>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style>
+.event-card {
+  background-size: 200% 200%;
+  background-position: 100% 200%;
+  background-blend-mode: overlay;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.event-card:hover {
+  animation: event-card-hover 10s ease-in-out infinite;
+  background-color: transparent;
+}
+@keyframes event-card-hover {
+  0% {
+    background-position: 100% 200%;
+  }
+  50% {
+    background-position: -100% 200%;
+  }
+  100% {
+    background-position: 100% 200%;
+  }
+}
+</style>

.vitepress/theme/live/Hero.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel md:divide-x"
+  >
+    <div
+      class="flex flex-col items-center text-center md:text-left md:items-start p-10 gap-5 justify-center"
+    >
+      <h1 class="text-white text-pretty max-w-[35rem]">
+        5th anniversary of the Vite Team Creation
+      </h1>
+      <p class="text-white text-3xl text-pretty max-w-[35rem]">
+        Vite: The Documentary re-premiere
+      </p>
+      <p class="text-white/70 md:text-lg max-w-[35rem] text-pretty">
+        Join the ecosystem this March 19th at 3 PM UTC to remember the story we
+        wrote together. And participate in the live stage to discuss our past,
+        present, and future. We'll be waiting for you!
+      </p>
+      <div class="flex items-start justify-between w-full gap-5 mt-8">
+        <div class="flex items-center gap-5">
+          <a
+            href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Vite.%20The%20documentary&dates=20260319T150000/20260319T160000&ctz=Europe/London&details=5th%20anniversary%20Community%20time%0A%0AJoin%20on%20Discord:%20https%3A%2F%2Fdiscord.gg%2FPsQ3SfhhDQ"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button button--primary inline-block w-fit"
+          >
+            Add to Calendar
+          </a>
+          <a
+            href="https://chat.vite.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button inline-block w-fit"
+          >
+            Join Community
+          </a>
+        </div>
+        <a
+          href="https://www.cultrepo.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block w-fit grayscale hover:grayscale-0 hover:scale-105 transition-all duration-100"
+        >
+          <img
+            src="../../../images/cultrepo-tv.svg"
+            width="60"
+            height="44"
+            class="block"
+            inert
+            loading="lazy"
+            alt="Cult.Repo"
+          />
+        </a>
+      </div>
+    </div>
+    <div class="flex items-center justify-center p-10 md:min-h-[30rem]">
+      <img
+        src="../../../images/vite-live-community.webp"
+        width="1832"
+        height="1388"
+        class="block sm:max-w-[80%] lg:max-w-[70%]"
+        inert
+        loading="lazy"
+        alt="Vite community: Evan You, Matias Capeletto, Bjorn Lu, Anthony Fu, Sapphi Red, Dominik Göpel, Vladimir Sheremet, Ryan Carniato, Pedro Cattori, Mark Dalgleish, Rich Harris, Fred Schott, Eric Simons, Theo Browne, David Cramer, Misko Hevery"
+      />
+    </div>
+  </div>
+</template>

.vitepress/theme/live/Layout.vue

@@ -0,0 +1,27 @@
+<script setup>
+import Hero from './Hero.vue'
+import Timer from './Timer.vue'
+import TimeoutSwitcher from './TimeoutSwitcher.vue'
+import VideoIframe from './VideoIframe.vue'
+import Events from './Events.vue'
+import Footer from '@components/oss/Footer.vue'
+</script>
+
+<template>
+  <TimeoutSwitcher at="2026-03-19T15:00:00.000Z">
+    <template #default>
+      <Hero />
+      <Timer at="2026-03-19T15:00:00.000Z" />
+    </template>
+    <template #timeout>
+      <VideoIframe />
+    </template>
+  </TimeoutSwitcher>
+  <Events />
+  <Footer
+    heading="Start building with Vite"
+    subheading="Prepare for a development environment that can finally keep pace with the speed of your mind."
+    button-text="Get Started"
+    button-link="/guide/"
+  />
+</template>

.vitepress/theme/live/TimeoutSwitcher.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  at: {
+    type: String,
+    required: true,
+  },
+})
+
+const timeoutTimestamp = computed(() => new Date(props.at).getTime())
+const now = ref(0)
+let intervalId
+
+const isTimedOut = computed(() => {
+  return now.value >= timeoutTimestamp.value
+})
+
+onMounted(() => {
+  now.value = Date.now()
+  intervalId = window.setInterval(() => {
+    now.value = Date.now()
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    window.clearInterval(intervalId)
+  }
+})
+</script>
+
+<template>
+  <slot v-if="isTimedOut" name="timeout" />
+  <slot v-else />
+</template>