docs: rebrand (#1340)

docs/.vitepress/config.ts

@@ -1,13 +1,16 @@
 import path from 'node:path'
 import fs from 'node:fs'
-import type { DefaultTheme, HeadConfig } from 'vitepress'
+import type { HeadConfig } from 'vitepress'
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import {
   groupIconMdPlugin,
   groupIconVitePlugin,
+  localIconLoader,
 } from 'vitepress-plugin-group-icons'
 import { markdownItImageSize } from 'markdown-it-image-size'
+import { extendConfig } from '@voidzero-dev/vitepress-theme/config'
+import type { FooterLink } from '@voidzero-dev/vitepress-theme'
 import packageJson from '../../package.json' with { type: 'json' }
 import { buildEnd } from './buildEnd.config'
 
@@ -46,8 +49,8 @@ const additionalTitle = ((): string => {
       return ''
   }
 })()
-const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
-  const links: DefaultTheme.NavItemWithLink[] = []
+const versionLinks = (() => {
+  const links: FooterLink[] = []
 
   if (deployType !== 'main') {
     links.push({
@@ -85,7 +88,7 @@ const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
 //   ]
 // }
 
-export default defineConfig({
+const config = defineConfig({
   title: `Vite${additionalTitle}`,
   description: 'Frontend-Tooling der nächsten Generation',
   sitemap: {
@@ -94,11 +97,18 @@ export default defineConfig({
   cleanUrls: true,
 
   head: [
-    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+    [
+      'link',
+      { rel: 'icon', type: 'image/svg+xml', href: '/logo-without-border.svg' },
+    ],
     [
       'link',
       { rel: 'alternate', type: 'application/rss+xml', href: '/blog.rss' },
     ],
+    [
+      'link',
+      { rel: 'icon', type: 'image/svg+xml', href: '/logo-without-border.svg' },
+    ],
     ['link', { rel: 'me', href: 'https://m.webtoo.ls/@vite' }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:title', content: ogTitle }],
@@ -132,8 +142,16 @@ export default defineConfig({
   },
 
   themeConfig: {
+    variant: 'vite',
     logo: '/logo.svg',
 
+    banner: {
+      id: 'vite+',
+      text: 'Vite+ Ankündigung | Die einheitliche Toolchain für das Web',
+      url: 'https://voidzero.dev/posts/announcing-vite-plus?utm_source=vite&utm_content=top_banner',
+    },
+
+
     editLink: {
       pattern: 'https://github.com/vitejs/docs-de/edit/main/docs/:path',
       text: 'Änderungen für diese Seite vorschlagen',
@@ -201,8 +219,38 @@ export default defineConfig({
     },
 
     footer: {
-      message: `Veröffentlicht unter der MIT-Lizenz. (${commitRef})`,
-      copyright: 'Copyright © 2019-present VoidZero Inc. & Vite Contributors',
+      copyright: `© 2025 VoidZero Inc. and Vite contributors. (${commitRef})`,
+      nav: [
+        {
+          title: 'Vite',
+          items: [
+            { text: 'Leitfaden', link: '/guide/' },
+            { text: 'Konfiguration', link: '/config/' },
+            { text: 'Plugins', link: '/plugins/' },
+          ],
+        },
+        {
+          title: 'Ressourcen',
+          items: [
+            { text: 'Team', link: '/team' },
+            { text: 'Blog', link: '/blog' },
+            {
+              text: 'Veröffentlichungen',
+              link: 'https://github.com/vitejs/vite/releases',
+            },
+          ],
+        },
+        {
+          title: 'Versions',
+          items: versionLinks,
+        },
+      ],
+      social: [
+        { icon: 'github', link: 'https://github.com/vitejs/vite' },
+        { icon: 'discord', link: 'https://chat.vite.dev' },
+        { icon: 'bluesky', link: 'https://bsky.app/profile/vite.dev' },
+        { icon: 'x', link: 'https://x.com/vite_js' },
+      ],
     },
 
     nav: [
@@ -552,20 +600,21 @@ export default defineConfig({
         customIcon: {
           firebase: 'vscode-icons:file-type-firebase',
           '.gitlab-ci.yml': 'vscode-icons:file-type-gitlab',
+          'vite.config': localIconLoader(
+            import.meta.url,
+            '../public/logo-without-border.svg',
+          ),
         },
       }),
     ],
     optimizeDeps: {
-      include: [
-        '@shikijs/vitepress-twoslash/client',
-        'gsap',
-        'gsap/dist/ScrollTrigger',
-        'gsap/dist/MotionPathPlugin',
-      ],
+      include: ['@shikijs/vitepress-twoslash/client'],
     },
     define: {
       __VITE_VERSION__: JSON.stringify(viteVersion),
     },
   },
   buildEnd,
 })
+
+export default extendConfig(config)

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -1,46 +1,37 @@
 <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] },
-    ...(data?.value.map((sponsor) => {
+    { size: 'small' as const, items: [voidZero] },
+    ...(data.value?.map((sponsor) => {
       return {
-        size: sponsor.size === 'big' ? 'mini' : 'xmini',
-        items: sponsor.items
+        size: (sponsor.size === 'big' ? 'mini' : 'xmini') as 'mini' | 'xmini',
+        items: sponsor.items,
       }
     }) ?? []),
   ]
 })
 </script>
 
 <template>
-  <a
-    class="viteconf"
-    href="https://www.youtube.com/playlist?list=PLqGQbXn_GDmkJaoykvHCUmXUPjhgH2bVr"
-    target="_blank"
-  >
-    <img
-      width="22"
-      height="22"
-      src="../../../images/viteconf.svg"
-      alt="ViteConf Logo"
-    />
+  <a class="viteconf" href="https://www.youtube.com/playlist?list=PLqGQbXn_GDmkJaoykvHCUmXUPjhgH2bVr" target="_blank">
+    <img width="22" height="22" src="../../../images/viteconf.svg" alt="ViteConf Logo" />
     <span>
-      <p class="extra-info">Gemeinsam bauen</p>
+      <p class="extra-info">Building Together</p>
       <p class="heading">ViteConf 2025</p>
-      <p class="extra-info">Sehen Sie sich die Wiederholungen an</p>
+      <p class="extra-info">View the replays</p>
     </span>
   </a>
   <VPDocAsideSponsors v-if="data" :data="sponsors" />
 </template>
 
-<style>
-.vite-event {
+<style scoped>
+.viteconf {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 14px;
@@ -59,26 +50,44 @@ const sponsors = computed(() => {
   border: 2px solid var(--vp-c-bg-alt);
   transition: border-color 0.5s;
 }
-.vite-event:hover {
+
+.viteconf:hover {
   border: 2px solid var(--vp-c-brand-light);
 }
-.vite-event img {
+
+.viteconf img {
   transition: transform 0.5s;
   transform: scale(1.25);
 }
-.vite-event:hover img {
+
+.viteconf:hover img {
   transform: scale(1.75);
 }
-.vite-event .heading {
-  background-image: var(--vp-home-hero-name-background);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+
+.viteconf span {
+  display: block;
 }
-.vite-event .extra-info {
+
+.viteconf p {
+  margin: 0;
+  padding: 0;
+  line-height: 1.1rem;
   color: var(--vp-c-text-1);
+}
+
+.viteconf .heading {
+  color: var(--vp-c-brand-lighter);
+}
+
+.viteconf .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 1;
   font-size: 0.7rem;
   padding-left: 0.1rem;
   transition: opacity 0.5s;
 }
-</style>
+
+.viteconf:hover .extra-info {
+  opacity: 0.9;
+}
+</style>