feat: add missing contents

Author: Gumball12

.vitepress/config.ts

@@ -13,6 +13,7 @@ import {
   groupIconVitePlugin,
 } from 'vitepress-plugin-group-icons'
 import { buildEnd } from './buildEnd.config'
+import { markdownItImageSize } from 'markdown-it-image-size'
 
 const ogDescription = 'Vite, 프런트엔드 개발의 새로운 기준'
 const ogImage = 'https://ko.vite.dev/og-image.jpg'
@@ -499,6 +500,10 @@ export default defineConfig({
       md.use(markdownItFootnote)
       // @ts-ignore
       md.use(groupIconMdPlugin)
+      // @ts-ignore
+      md.use(markdownItImageSize, {
+        publicDir: path.resolve(import.meta.dirname, '../public')
+      })
     },
   },
   vite: {

.vitepress/theme/components/NonInheritBadge.vue

@@ -0,0 +1,8 @@
+<template>
+  <a
+    href="/guide/api-environment#environments-configuration"
+    class="ignore-header"
+  >
+    <Badge type="info" text="non-inherit" />
+  </a>
+</template>

.vitepress/theme/components/SponsorBanner.vue

@@ -80,7 +80,7 @@ function dismiss() {
         Register
       </a>
     </p>
-    <button @click="dismiss">
+    <button aria-label="close" @click="dismiss">
       <svg
         class="close"
         xmlns="http://www.w3.org/2000/svg"

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

@@ -56,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
       v-if="props.framework.logo"
       :src="props.framework.logo"
       :alt="props.framework.name"
+      loading="lazy"
     />
   </component>
 </template>

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

@@ -36,6 +36,7 @@ defineProps<{
         :src="testimonial.avatar"
         :alt="testimonial.name"
         class="card__avatar"
+        loading="lazy"
       />
       <div class="card__meta">
         <span class="card__name">

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

@@ -53,7 +53,7 @@ SolidJS in mind, they should scale from our simplest template to opinionated sta
     name: 'David Cramer',
     handle: '@zeeg',
     avatar:
-      'https://pbs.twimg.com/profile_images/1706891973553168384/zdAPOznc_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1911613315765133312/HVkULegC_400x400.jpg',
     comment: ['Vite has been a game changer for the industry.'],
   },
   {
@@ -69,7 +69,7 @@ SolidJS in mind, they should scale from our simplest template to opinionated sta
     name: 'Christoph Nakazawa',
     handle: '@cpojer',
     avatar:
-      'https://pbs.twimg.com/profile_images/1854151427595407360/4GyUCgEH_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1910252462126313472/gXgT-jxL_400x400.jpg',
     comment: ['Vite is gonna eat the (JavaScript) world.'],
   },
   {

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

@@ -45,6 +45,7 @@ const { data } = useSponsor()
       alt="Vite is made possible by our contributors, partner companies, and sponsors"
       width="58"
       height="55"
+      loading="lazy"
     />
     <h2>자유롭게 사용할 수 있는 오픈 소스</h2>
     <h4>
@@ -55,7 +56,7 @@ const { data } = useSponsor()
     <h4>제공</h4>
     <div class="voidzero">
       <a :href="voidZero.url" target="_blank">
-        <img :src="voidZero.img" />
+        <img :src="voidZero.img" alt="VoidZero logo" loading="lazy" />
       </a>
     </div>
 

.vitepress/theme/index.ts

@@ -9,6 +9,7 @@ import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
 import YouTubeVideo from './components/YouTubeVideo.vue'
 import SponsorBanner from './components/SponsorBanner.vue'
+import NonInheritBadge from './components/NonInheritBadge.vue'
 import 'virtual:group-icons.css'
 
 export default {
@@ -22,6 +23,7 @@ export default {
   enhanceApp({ app }) {
     app.component('SvgImage', SvgImage)
     app.component('YouTubeVideo', YouTubeVideo)
+     app.component('NonInheritBadge', NonInheritBadge)
     app.use(TwoslashFloatingVue)
   },
 } satisfies Theme

.vitepress/theme/styles/landing.css

@@ -4,17 +4,11 @@
 
 html:has(.landing) {
   --vp-c-bg: #101010;
-
   background-color: #101010;
-
-  body {
-    background-color: #101010;
-  }
 }
 
 .landing {
   overflow-x: hidden;
-  background-color: #101010;
 
   * {
     -webkit-font-smoothing: antialiased !important;

package.json

@@ -21,6 +21,7 @@
     "gray-matter": "^4.0.3",
     "gsap": "^3.13.0",
     "markdown-it-footnote": "^4.0.0",
+    "markdown-it-image-size": "^14.7.0",
     "prettier": "^3.6.2",
     "vite": "^7.0.6",
     "vitepress": "^2.0.0-alpha.9",