❄️ Translation Batch - 2025-08-11

.vitepress/buildEnd.config.ts

@@ -14,7 +14,7 @@ export const buildEnd = async (config: SiteConfig): Promise<void> => {
     id: blogUrl,
     link: blogUrl,
     language: 'en',
-    image: 'https://vite.dev/og-image.png',
+    image: 'https://vite.dev/og-image.jpg',
     favicon: 'https://vite.dev/logo.svg',
     copyright: 'Copyright © 2019-present VoidZero Inc. & Vite Contributors',
   })

.vitepress/inlined-scripts/banner.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  __VITE_BANNER_ID__: string
+}

.vitepress/theme/components/AsideSponsors.vue

@@ -24,7 +24,12 @@ const sponsors = computed(() => {
     href="https://viteconf.org/?utm=vite-sidebar"
     target="_blank"
   >
-    <img width="22" height="22" src="/viteconf.svg" alt="ViteConf Logo" />
+    <img
+      width="22"
+      height="22"
+      <p class="heading">ViteConf 2025</p>
+      <p class="extra-info">First time in-person!</p>
+    />
     <span>
       <p class="extra-info">Building Together</p>
       <p class="heading">ViteConf 2025</p>

.vitepress/theme/components/SponsorBanner.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 /**
  * Adding a new banner:
  * 1. uncomment the banner slot in ../index.ts
@@ -15,7 +15,7 @@ const open = ref(true)
 function dismiss() {
   open.value = false
   document.documentElement.classList.add('banner-dismissed')
-  localStorage.setItem(`vite-docs-banner-${__VITE_BANNER_ID__}`, 'true')
+  localStorage.setItem(`vite-docs-banner-${window.__VITE_BANNER_ID__}`, 'true')
 }
 </script>
 

.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { gsap } from 'gsap'
 import { MotionPathPlugin } from 'gsap/dist/MotionPathPlugin'
-import { onMounted, onUnmounted, Ref, ref } from 'vue'
+import { onMounted, onUnmounted, type Ref, ref } from 'vue'
 import SvgInputs from './svg-elements/SvgInputs.vue'
 import SvgOutputs from './svg-elements/SvgOutputs.vue'
 import SvgBlueIndicator from './svg-elements/SvgBlueIndicator.vue'
 import SvgPinkIndicator from './svg-elements/SvgPinkIndicator.vue'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
-import { SvgNodeProps } from '../common/SvgNode.vue'
+import type { SvgNodeProps } from '../common/SvgNode.vue'
 
 gsap.registerPlugin(MotionPathPlugin)
 
@@ -470,7 +470,7 @@ onMounted(() => {
       </div>
       <div class="vite-chip__filter" />
       <img
-        :src="isUwu ? '/logo-uwu.png' : '/logo.svg'"
+        :src="isUwu ? '/logo-uwu.webp' : '/logo.svg'"
         :alt="isUwu ? 'Vite Kawaii Logo by @icarusgkx' : 'Vite Logo'"
         class="vite-chip__logo"
         :class="{ uwu: isUwu }"
@@ -521,6 +521,7 @@ onMounted(() => {
     transform: translate3d(0, 0, 0) scale(1);
     transition: transform 0.3s ease-in-out;
     background:
+      linear-gradient(
       linear-gradient(
         130deg,
         rgba(61, 61, 61, 0.3) 0%,
@@ -713,9 +714,10 @@ onMounted(() => {
   @media (min-width: 768px) {
     opacity: 0.1;
   }
-
   background:
     url('/noise.png'),
+  background:
+    url('../common/noise.webp'),
     radial-gradient(
       circle at right center,
       rgb(86, 50, 119) 0%,
@@ -729,10 +731,11 @@ onMounted(() => {
     rgba(0, 0, 0, 0.5) 50%,
     rgba(0, 0, 0, 0) 100%
   );
-
-  @media (min-width: 1024px) {
     background:
       url('/noise.png'),
+  @media (min-width: 1024px) {
+    background:
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,
@@ -747,11 +750,12 @@ onMounted(() => {
       rgba(0, 0, 0, 0.5) 50%,
       rgba(0, 0, 0, 0) 100%
     );
-  }
+    background:
+      url('/noise.png'),
 
   @media (min-width: 1500px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,
@@ -765,12 +769,13 @@ onMounted(() => {
       rgba(0, 0, 0, 1) 20%,
       rgba(0, 0, 0, 0.5) 50%,
       rgba(0, 0, 0, 0) 100%
-    );
+    background:
+      url('/noise.png'),
   }
 
   @media (min-width: 1800px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,

.vitepress/theme/components/landing/1. hero-section/HeroSection.vue

@@ -11,7 +11,12 @@ import HeroDiagram from './HeroDiagram.vue'
         class="hero__pill"
         target="_blank"
       >
-        <img src="/viteconf.svg" alt="Viteconf logo" width="20" height="20" />
+        <img
+        <span>ViteConf 2025</span>
+          alt="Viteconf logo"
+          width="20"
+          height="20"
+        />
         <span>ViteConf 2025</span>
       </a>
 
@@ -31,7 +36,7 @@ import HeroDiagram from './HeroDiagram.vue'
           target="_blank"
           class="btn btn--outline"
         >
-          <img src="/github.svg" alt="GitHub logo" width="20" height="20" />
+          <img src="./github.svg" alt="GitHub logo" width="20" height="20" />
           GitHub
         </a>
       </div>

.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgInputs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SvgNode, { SvgNodeProps } from '../../common/SvgNode.vue'
-import { Ref } from 'vue'
+import SvgNode, { type SvgNodeProps } from '../../common/SvgNode.vue'
+import type { Ref } from 'vue'
 
 defineProps({
   inputLines: {

.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgOutputs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SvgNode, { SvgNodeProps } from '../../common/SvgNode.vue'
-import { Ref } from 'vue'
+import SvgNode, { type SvgNodeProps } from '../../common/SvgNode.vue'
+import type { Ref } from 'vue'
 
 defineProps({
   outputLines: {

.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Ref, ref } from 'vue'
+import { type Ref, ref } from 'vue'
 import SvgNode from '../common/SvgNode.vue'
 import { gsap } from 'gsap'
 import { useSlideIn } from '../../../composables/useSlideIn'

.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue

@@ -27,6 +27,7 @@ const { startAnimation } = useCardAnimation(
       highlightEnter.value = false
     })
     return timeline
+    return timeline
   },
   {
     once: true,
@@ -35,7 +36,7 @@ const { startAnimation } = useCardAnimation(
 
 /**
  * Run the command animation on enter press
- */
+function handleEnterPress(event: KeyboardEvent) {
 function handleEnterPress(event: KeyboardEvent) {
   if (event.key === 'Enter') {
     startAnimation()
@@ -342,9 +343,10 @@ onUnmounted(() => {
       right: 0;
       bottom: 0;
       height: 100%;
-      border-radius: 12px 0 0 12px;
       background:
         url('/noise.png'),
+      background:
+        url('../common/noise.webp'),
         radial-gradient(
           ellipse 140% 80% at 96% bottom,
           #13b351 0%,
@@ -381,7 +383,7 @@ onUnmounted(() => {
     right: 40px;
     width: 1px;
     height: calc(100% - 170px - 33px);
-    background: url('/noise.png'), #13b351;
+    background: url('../common/noise.webp'), #13b351;
     box-shadow: 0 0 10px 0 #13b351;
     transition: all 0.5s ease-in;
     will-change: transform, opacity;

.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import SvgNode from '../common/SvgNode.vue'
-import { ref, Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { gsap } from 'gsap'
 import { useSlideIn } from '../../../composables/useSlideIn'
 import { useCardAnimation } from '../../../composables/useCardAnimation'
@@ -29,7 +29,7 @@ const { startAnimation } = useCardAnimation(
     const timeline = gsap.timeline()
 
     // Animate in each node
-    nodes.forEach((node, i) => {
+    nodes.forEach((node) => {
       let subTimeline = gsap.timeline()
       subTimeline.call(() => {
         node.visible.value = true

.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue

@@ -39,7 +39,6 @@ const { isCardActive, startAnimation } = useCardAnimation(
           width="658"
           height="275"
           viewBox="0 0 658 275"
-          d
           xmlns="http://www.w3.org/2000/svg"
         >
           <path

.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import SvgNode from '../common/SvgNode.vue'
-import { onMounted, onUnmounted, Ref, ref } from 'vue'
+import { onMounted, onUnmounted, type Ref, ref } from 'vue'
 import { gsap } from 'gsap'
 
 const props = defineProps({

.vitepress/theme/components/landing/3. frameworks-section/FrameworkCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Ref, ref } from 'vue'
+import { type Ref, ref } from 'vue'
 
 /**
  * A single framework or tool to display in the frameworks section.

.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
-import { computed, ComputedRef, onMounted, onUnmounted, Ref, ref } from 'vue'
-import FrameworkCard, { Framework } from './FrameworkCard.vue'
+import {
+  computed,
+  type ComputedRef,
+  onMounted,
+  onUnmounted,
+  type Ref,
+  ref,
+} from 'vue'
+import FrameworkCard, { type Framework } from './FrameworkCard.vue'
 import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 
@@ -311,7 +318,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
   }
 })
 </script>
-
+        <FrameworkCard v-for="_ in numBlocksPerRow + 2" />
 <template>
   <section class="frameworks-section" id="frameworks-section">
     <h2>인기있는 툴과 프레임워크의<br />성능을 극대화</h2>
@@ -343,7 +350,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
             </template>
             <template v-else>
               <FrameworkCard />
-            </template>
+        <FrameworkCard v-for="_ in numBlocksPerRow + 2" />
           </template>
         </div>
       </template>

.vitepress/theme/components/landing/4. community-section/CommunitySection.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import CommunityCard, { Testimonial } from './CommunityCard.vue'
-
+import CommunityCard, { type Testimonial } from './CommunityCard.vue'
 const testimonials: Testimonial[] = [
   {
     name: 'Ryan Carniato',

.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue

@@ -41,7 +41,7 @@ const { data } = useSponsor()
     <!-- Title Section -->
     <img
       class="icon-heart"
-      src="/heart.svg"
+      src="./heart.svg"
       alt="Vite is made possible by our contributors, partner companies, and sponsors"
       width="58"
       height="55"

.vitepress/theme/components/landing/common/SvgNode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, Ref, ref, watch, ComputedRef } from 'vue'
+import { computed, type Ref, ref, watch, type ComputedRef } from 'vue'
 import { gsap } from 'gsap'
 
 /**

.vitepress/theme/composables/sponsor.ts

@@ -1,4 +1,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
+import voidZeroSvg from './images/voidzero.svg'
+import boltSvg from './images/bolt.svg'
+import nuxtLabsSvg from './images/nuxtlabs.svg'
 
 interface Sponsors {
   special: Sponsor[]
@@ -17,7 +20,7 @@ interface Sponsor {
    * Expects to also have an **inversed** image with `-dark` postfix.
    */
   hasDark?: true
-}
+const data = ref<{ tier: string; size: string; items: Sponsor[] }[]>()
 
 // shared data across instances so we load only once.
 const data = ref<{ tier: string; size: string; items: Sponsor[] }[]>()
@@ -28,7 +31,7 @@ const dataUrl = `${dataHost}/vite.json`
 export const voidZero = {
   name: 'VoidZero',
   url: 'https://voidzero.dev',
-  img: '/voidzero.svg',
+  img: voidZeroSvg,
 } satisfies Sponsor
 
 const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
@@ -37,13 +40,13 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
     {
       name: 'Bolt',
       url: 'https://bolt.new',
-      img: '/bolt.svg',
+      img: boltSvg,
     },
     // sponsors antfu
     {
       name: 'NuxtLabs',
       url: 'https://nuxtlabs.com',
-      img: '/nuxtlabs.svg',
+      img: nuxtLabsSvg,
     },
   ],
   gold: [

.vitepress/theme/styles/landing.css

@@ -176,6 +176,7 @@ html:has(.landing) {
           rgba(255, 255, 255, 0.4) 0%,
           rgba(255, 255, 255, 0) 100%
         ),
+      background:
         radial-gradient(
           140.35% 140.35% at 100% 94.74%,
           #bd34fe 0%,
@@ -194,7 +195,8 @@ html:has(.landing) {
             141.42% 141.42% at 100% 0%,
             rgba(255, 255, 255, 0.5) 0%,
             rgba(255, 255, 255, 0) 100%
-          ),
+        background:
+          radial-gradient(
           radial-gradient(
             140.35% 140.35% at 100% 94.74%,
             #bd34fe 0%,