❄️ Translation Batch - 2025-09-16

.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/inlined-scripts/banner.js

@@ -6,6 +6,17 @@
     }
   }
 
+  window.__VITE_BANNER_ID__ = 'viteplusannouncement'
+  restore(`vite-docs-banner-${__VITE_BANNER_ID__}`, 'banner-dismissed')
+})()
+;(() => {
+  const restore = (key, cls, def = false) => {
+    const saved = localStorage.getItem(key)
+    if (saved ? saved !== 'false' : def) {
+      document.documentElement.classList.add(cls)
+    }
+  }
+
   window.__VITE_BANNER_ID__ = 'viteconf2025'
   restore(`vite-docs-banner-${__VITE_BANNER_ID__}`, 'banner-dismissed')
 })()

.vitepress/theme/components/AsideSponsors.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { VPDocAsideSponsors } from 'vitepress/theme'
+import { VPDocAsideSponsors } from '@voidzero-dev/vitepress-theme'
 import { useSponsor, voidZero } from '../composables/sponsor'
 
 const { data } = useSponsor()
 
 const sponsors = computed(() => {
   return [
-    { size: 'small', items: [voidZero] },
+    { size: 'small' as const, items: [voidZero] },
     ...(data.value?.map((sponsor) => {
       return {
-        size: sponsor.size === 'big' ? 'mini' : 'xmini',
+        size: (sponsor.size === 'big' ? 'mini' : 'xmini') as 'mini' | 'xmini',
         items: sponsor.items,
       }
     }) ?? []),
@@ -21,20 +21,25 @@ const sponsors = computed(() => {
 <template>
   <a
     class="viteconf"
-    href="https://viteconf.org/?utm=vite-sidebar"
+    href="https://www.youtube.com/playlist?list=PLqGQbXn_GDmkJaoykvHCUmXUPjhgH2bVr"
     target="_blank"
   >
-    <img width="22" height="22" src="/viteconf.svg" alt="ViteConf Logo" />
+    <img
+      width="22"
+      height="22"
+      src="../../../images/viteconf.svg"
+      alt="ViteConf Logo"
+    />
     <span>
       <p class="extra-info">Building Together</p>
       <p class="heading">ViteConf 2025</p>
-      <p class="extra-info">First time in-person!</p>
+      <p class="extra-info">View the replays</p>
     </span>
   </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />
 </template>
 
-<style>
+<style scoped>
 .viteconf {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -64,20 +69,21 @@ const sponsors = computed(() => {
 .viteconf:hover img {
   transform: scale(1.75);
 }
+.viteconf span {
+  display: block;
+}
+.viteconf p {
+  margin: 0;
+  padding: 0;
+  line-height: 1.1rem;
+  color: var(--vp-c-text-1);
+}
 .viteconf .heading {
-  background-image: linear-gradient(
-    120deg,
-    #b047ff 16%,
-    var(--vp-c-brand-lighter),
-    var(--vp-c-brand-lighter)
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--vp-c-brand-lighter);
 }
 .viteconf .extra-info {
   color: var(--vp-c-text-1);
-  opacity: 0;
+  opacity: 1;
   font-size: 0.7rem;
   padding-left: 0.1rem;
   transition: opacity 0.5s;

.vitepress/theme/components/ScrimbaLink.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+defineProps<{
+  href: string
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="scrimba">
+    <span class="play-button">
+      <span class="play-icon"></span>
+    </span>
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot>Watch an interactive lesson on Scrimba</slot>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.scrimba {
+  margin: 16px 0;
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+  border: 1px solid var(--vp-custom-block-info-border);
+  padding: 16px 20px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.play-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  min-width: 26px;
+  border-radius: 50%;
+  background-color: var(--vp-c-brand-1);
+}
+.play-icon {
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  border-style: solid;
+  border-width: 5px 0 5px 8px;
+  border-color: transparent transparent transparent #fff;
+}
+.scrimba a {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+.scrimba a:hover {
+  color: var(--vp-c-brand-2);
+}
+</style>