docs: v6 translation

.prettierignore

@@ -2,6 +2,7 @@ blog/*
 config/*
 docs/*
 guide/*
+changes/*
 team.md
 releases.md
 .vitepress/*

.vitepress/config.ts

@@ -6,13 +6,18 @@ import markdownItCustomAnchor from './markdown-it-custom-anchor'
 // @ts-ignore
 import renderPermalink from './render-permalink'
 import markdownItFootnote from 'markdown-it-footnote'
+import {
+  groupIconMdPlugin,
+  groupIconVitePlugin,
+} from 'vitepress-plugin-group-icons'
+import { buildEnd } from './buildEnd.config'
 
 const ogDescription = 'Vite, 프런트엔드 개발의 새로운 기준'
 const ogImage = 'https://ko.vite.dev/og-image.jpg'
 const ogTitle = 'Vite'
 const ogUrl = 'https://ko.vite.dev'
 
-// netlify envs
+// netlify 환경 변수
 const deployURL = process.env.DEPLOY_PRIME_URL || ''
 const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev'
 
@@ -26,18 +31,13 @@ const deployType = (() => {
       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 5 문서',
+      link: 'https://v5.vite.dev',
+    },
     {
       text: 'Vite 4 문서',
       link: 'https://v4.vite.dev',
@@ -57,7 +57,7 @@ const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
     case 'local':
       return [
         {
-          text: 'Vite 5 문서 (릴리스)',
+          text: 'Vite 6 문서 (릴리스)',
           link: 'https://ko.vite.dev',
         },
         ...oldVersions,
@@ -141,6 +141,7 @@ export default defineConfig({
     },
 
     socialLinks: [
+      // @ts-ignore
       { icon: 'bluesky', link: 'https://bsky.app/profile/vite.dev' },
       { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@vite' },
       { icon: 'x', link: 'https://x.com/vite_js' },
@@ -187,7 +188,7 @@ export default defineConfig({
                 link: 'https://x.com/vite_js',
               },
               {
-                text: 'Discord Chat',
+                text: 'Discord',
                 link: 'https://chat.vite.dev',
               },
               {
@@ -199,7 +200,7 @@ export default defineConfig({
                 link: 'https://viteconf.org',
               },
               {
-                text: 'DEV 커뮤니티',
+                text: 'DEV',
                 link: 'https://dev.to/t/vite',
               },
               {
@@ -290,9 +291,13 @@ export default defineConfig({
               link: '/guide/philosophy',
             },
             {
-              text: 'v4에서 마이그레이션하기',
+              text: 'v5에서 마이그레이션하기',
               link: '/guide/migration',
             },
+            {
+              text: 'v4에서 마이그레이션하기',
+              link: '/guide/migration-from-v4',
+            },
             {
               text: 'v3에서 마이그레이션하기',
               link: '/guide/migration-from-v3',
@@ -305,6 +310,10 @@ export default defineConfig({
               text: 'v1에서 마이그레이션하기',
               link: '/guide/migration-from-v1',
             },
+            {
+              text: '주요 변경 사항',
+              link: '/changes/',
+            },
           ],
         },
         {
@@ -322,20 +331,41 @@ export default defineConfig({
               text: 'JavaScript API',
               link: '/guide/api-javascript',
             },
-            {
-              text: 'Vite 런타임 API',
-              link: '/guide/api-vite-runtime',
-            },
             {
               text: 'Vite 설정 레퍼런스',
               link: '/config/',
             },
           ],
         },
+        {
+          text: '환경 API',
+          items: [
+            {
+              text: '환경 API',
+              link: '/guide/api-environment',
+            },
+            {
+              text: '환경 인스턴스',
+              link: '/guide/api-environment-instances',
+            },
+            {
+              text: '플러그인',
+              link: '/guide/api-environment-plugins',
+            },
+            {
+              text: '프레임워크',
+              link: '/guide/api-environment-frameworks',
+            },
+            {
+              text: '런타임',
+              link: '/guide/api-environment-runtimes',
+            },
+          ],
+        },
       ],
       '/config/': [
         {
-          text: 'Config',
+          text: '설정',
           items: [
             {
               text: 'Vite 설정하기',
@@ -372,6 +402,45 @@ export default defineConfig({
           ],
         },
       ],
+      '/changes/': [
+        {
+          text: '주요 변경 사항',
+          link: '/changes/',
+        },
+        {
+          text: '최신 버전',
+          items: [],
+        },
+        {
+          text: '예정된 변경 사항',
+          items: [
+            {
+              text: '훅에서 this.environment 사용하기',
+              link: '/changes/this-environment-in-hooks',
+            },
+            {
+              text: 'HMR hotUpdate 플러그인 훅',
+              link: '/changes/hotupdate-hook',
+            },
+            {
+              text: '환경별 API로 마이그레이션',
+              link: '/changes/per-environment-apis',
+            },
+            {
+              text: 'ModuleRunner API를 사용하는 SSR',
+              link: '/changes/ssr-using-modulerunner',
+            },
+            {
+              text: '빌드 중 공유되는 플러그인',
+              link: '/changes/shared-plugins-during-build',
+            },
+          ],
+        },
+        {
+          text: '지난 변경 사항',
+          items: [],
+        },
+      ],
     },
 
     outline: {
@@ -381,7 +450,7 @@ export default defineConfig({
   transformPageData(pageData) {
     const canonicalUrl = `${ogUrl}/${pageData.relativePath}`
       .replace(/\/index\.md$/, '/')
-      .replace(/\.md$/, '/')
+      .replace(/\.md$/, '')
     pageData.frontmatter.head ??= []
     pageData.frontmatter.head.unshift(
       ['link', { rel: 'canonical', href: canonicalUrl }],
@@ -399,6 +468,27 @@ export default defineConfig({
       md.use(markdownItCustomAnchor)
       // @ts-ignore
       md.use(markdownItFootnote)
+      // @ts-ignore
+      md.use(groupIconMdPlugin)
+    },
+  },
+  vite: {
+    plugins: [
+      groupIconVitePlugin({
+        customIcon: {
+          firebase: 'vscode-icons:file-type-firebase',
+          '.gitlab-ci.yml': 'vscode-icons:file-type-gitlab',
+        },
+      }),
+    ],
+    optimizeDeps: {
+      include: [
+        '@shikijs/vitepress-twoslash/client',
+        'gsap',
+        'gsap/dist/ScrollTrigger',
+        'gsap/dist/MotionPathPlugin',
+      ],
     },
   },
+  buildEnd,
 })

.vitepress/theme/components/AsideSponsors.vue

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

.vitepress/theme/components/YouTubeVideo.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  videoId: String,
+})
+</script>
+
+<template>
+  <div class="full-width-youtube-video">
+    <iframe
+      width="560"
+      height="315"
+      :src="`https://www.youtube.com/embed/${videoId}`"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<style scoped>
+.full-width-youtube-video {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.full-width-youtube-video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 0.5rem;
+}
+</style>

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

@@ -437,6 +437,12 @@ const isChromiumBrowser = ref(false)
 onMounted(() => {
   isChromiumBrowser.value = 'chrome' in window
 })
+
+// Check for uwu query
+const isUwu = ref(false)
+onMounted(() => {
+  isUwu.value = location.search.includes('?uwu')
+})
 </script>
 
 <template>
@@ -463,7 +469,12 @@ onMounted(() => {
         ></div>
       </div>
       <div class="vite-chip__filter" />
-      <img src="/logo.svg" alt="Vite Logo" class="vite-chip__logo" />
+      <img
+        :src="isUwu ? '/logo-uwu.png' : '/logo.svg'"
+        :alt="isUwu ? 'Vite Kawaii Logo by @icarusgkx' : 'Vite Logo'"
+        class="vite-chip__logo"
+        :class="{ uwu: isUwu }"
+      />
     </div>
   </div>
 
@@ -638,6 +649,10 @@ onMounted(() => {
     z-index: 3;
   }
 
+  .uwu.vite-chip__logo {
+    width: 134px;
+  }
+
   &.active {
     box-shadow: 0 30px 35px -10px rgba(0, 0, 0, 0.6);
     transform: translate3d(0, 0, 0) scale(1);

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

@@ -30,10 +30,10 @@ const { isCardActive, startAnimation } = useCardAnimation(
         <span class="code code__inactive">
           <span class="code--red">import</span> { createServer }
           <span class="code--red">from</span>
-          <span class="code--blue">'vite'</span><br /><br />
+          <span class="code--blue">&nbsp;'vite'</span><br /><br />
           <span class="code--red">const</span> server =
           <span class="code--red">await</span>
-          <span class="code--purple">createServer</span>({<br />
+          <span class="code--purple">&nbsp;createServer</span>({<br />
           <span class="code--grey"
             >&nbsp;&nbsp;&nbsp;// user config options</span
           ><br />

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

@@ -23,8 +23,10 @@ import logoReact from './images/react.svg'
 import logoRemix from './images/remix.svg'
 import logoSvelte from './images/svelte.svg'
 import logoLaravel from './images/laravel.svg'
+import logoAdonis from './images/adonis.svg'
 import logoEmber from './images/ember.svg'
 import logoPreact from './images/preact.svg'
+import logoHono from './images/hono.svg'
 
 /**
  * The frameworks and tools to display in this section.
@@ -149,13 +151,27 @@ const frameworks: Framework[] = [
     url: 'https://laravel.com/',
     visible: ref(false),
   },
+  {
+    name: 'AdonisJS',
+    logo: logoAdonis,
+    color: '#5a45ff',
+    url: 'https://adonisjs.com/',
+    visible: ref(false),
+  },
   {
     name: 'EmberJS',
     logo: logoEmber,
     color: '#e04e39',
     url: 'https://emberjs.com/',
     visible: ref(false),
   },
+  {
+    name: 'Hono',
+    logo: logoHono,
+    color: '#ff5c13',
+    url: 'https://hono.dev/',
+    visible: ref(false),
+  },
 ]
 
 // Starting parameters