@voidzero-dev/vitepress-theme 2.0.0 → 2.1.0

package/src/vitepress/components/oss/TopBanner.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { useData } from 'vitepress'
 import type { BannerConfig } from '../../types/theme-config'
-
-// Import footer background images (reused for banner)
-import viteBannerBg from '@assets/vite/footer-background.jpg'
-import vitestBannerBg from '@assets/vitest/footer-background.jpg'
-import rolldownBannerBg from '@assets/rolldown/footer-background.jpg'
-import oxcBannerBg from '@assets/oxc/footer-background.jpg'
-
-// Import variant icons (mono versions for banner)
-import viteIcon from '@assets/icons/vite-mono.svg'
-import vitestIcon from '@assets/icons/vitest-mono.svg'
-import rolldownIcon from '@assets/icons/rolldown-mono.svg'
-import oxcIcon from '@assets/icons/oxc-mono.svg'
+import { themeContextKey } from '../../types/theme-context'
 
 const { theme, frontmatter } = useData()
 
@@ -23,47 +12,16 @@ const isMarketingPage = computed(() => {
   return layout === 'home' || (layout && layout !== 'doc' && layout !== 'page')
 })
 
-// Background image mapping based on variant
-const backgroundMap = {
-  vite: viteBannerBg,
-  vitest: vitestBannerBg,
-  rolldown: rolldownBannerBg,
-  oxc: oxcBannerBg,
-} as const
-
-// Icon mapping based on variant
-const iconMap = {
-  vite: viteIcon,
-  vitest: vitestIcon,
-  rolldown: rolldownIcon,
-  oxc: oxcIcon,
-} as const
-
-type BannerVariant = keyof typeof backgroundMap
-
 // Get banner configuration
 const bannerConfig = computed<BannerConfig | undefined>(() => theme.value.banner)
 
-// Get variant - use banner.variant if specified, otherwise fall back to theme variant
-const bannerVariant = computed<BannerVariant>(() => {
-  if (bannerConfig.value?.variant) {
-    return bannerConfig.value.variant as BannerVariant
-  }
-  const themeVariant = theme.value.variant as string
-  if (themeVariant in backgroundMap) {
-    return themeVariant as BannerVariant
-  }
-  return 'vite'
-})
-
 // Only show if banner is configured
 const showBanner = computed(() => {
   return bannerConfig.value?.text && bannerConfig.value?.url
 })
 
-// Computed values for rendering
-const backgroundImage = computed(() => backgroundMap[bannerVariant.value] || viteBannerBg)
-const variantIcon = computed(() => iconMap[bannerVariant.value] || viteIcon)
+const { footerBg: backgroundImage, monoIcon, logoAlt } = inject(themeContextKey)!
+
 const bannerText = computed(() => bannerConfig.value?.text || '')
 const bannerUrl = computed(() => bannerConfig.value?.url || '#')
 
@@ -84,51 +42,34 @@ const linkRel = computed(() => {
 </script>
 
 <template>
-  <div v-if="showBanner" :class="isMarketingPage ? 'top-banner hidden md:block relative w-full overflow-hidden border-b border-white/10' : 'top-banner hidden md:block relative w-full overflow-hidden border-b border-white/10 lg:fixed lg:top-0 lg:left-0 lg:right-0 lg:z-60'" data-theme="dark">
-    <a
-      :href="bannerUrl"
-      :target="linkTarget"
-      :rel="linkRel"
-      class="group block relative w-full no-underline text-white"
-    >
+  <div v-if="showBanner"
+    :class="isMarketingPage ? 'top-banner hidden md:block relative w-full overflow-hidden border-b border-white/10' : 'top-banner hidden md:block relative w-full overflow-hidden border-b border-white/10 lg:fixed lg:top-0 lg:left-0 lg:right-0 lg:z-60'"
+    data-theme="dark">
+    <a :href="bannerUrl" :target="linkTarget" :rel="linkRel"
+      class="group block relative w-full no-underline text-white">
       <!-- Background image -->
-      <img
-        :src="backgroundImage"
-        alt=""
-        aria-hidden="true"
-        class="absolute inset-0 w-full h-full object-cover object-bottom z-0"
-        loading="eager"
-      />
+      <img :src="backgroundImage" alt="" aria-hidden="true"
+        class="absolute inset-0 w-full h-full object-cover object-bottom z-0" loading="eager" />
 
       <!-- Content overlay -->
       <div class="relative z-10 w-full h-10 flex px-4">
         <div class="flex items-center gap-2 w-full max-w-360 mx-auto px-4">
           <!-- Left: Variant icon -->
-          <img
-            :src="variantIcon"
-            :alt="`${bannerVariant} icon`"
-            class="w-5 h-5 shrink-0 hidden sm:block"
-          />
+          <img :src="monoIcon" :alt="`${logoAlt} icon`" class="w-5 h-5 shrink-0 hidden sm:block" />
 
           <!-- Text -->
-          <span class="text-xs font-medium font-mono leading-snug tracking-wide uppercase whitespace-nowrap overflow-hidden text-ellipsis">
+          <span
+            class="text-xs font-medium font-mono leading-snug tracking-wide uppercase whitespace-nowrap overflow-hidden text-ellipsis">
             {{ bannerText }}
           </span>
 
           <!-- Arrow icon -->
-          <svg
-            class="shrink-0 transition-transform duration-200 group-hover:translate-x-1"
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <rect width="20" height="20" rx="4" fill="#08060D"/>
-            <rect x="0.5" y="0.5" width="19" height="19" rx="3.5" stroke="white" stroke-opacity="0.15"/>
-            <path d="M10 6L14 10L10 14" stroke="white" stroke-width="1.2" stroke-linejoin="round"/>
-            <path d="M14 10L6 10" stroke="white" stroke-width="1.2" stroke-linejoin="round"/>
+          <svg class="shrink-0 transition-transform duration-200 group-hover:translate-x-1" width="20" height="20"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <rect width="20" height="20" rx="4" fill="#08060D" />
+            <rect x="0.5" y="0.5" width="19" height="19" rx="3.5" stroke="white" stroke-opacity="0.15" />
+            <path d="M10 6L14 10L10 14" stroke="white" stroke-width="1.2" stroke-linejoin="round" />
+            <path d="M14 10L6 10" stroke="white" stroke-width="1.2" stroke-linejoin="round" />
           </svg>
         </div>
       </div>

package/src/vitepress/components/oss/TrustedBy.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import LogoGrid from '@components/shared/LogoGrid.vue'
 
 // Glob import all client logos
-const logoModules = import.meta.glob('@assets/clients/*.svg', {
+const logoModules = import.meta.glob('../../assets/clients/*.svg', {
   eager: true,
   import: 'default'
 })

package/src/vitepress/components/vite/Community.vue

@@ -92,7 +92,7 @@ const testimonials: Testimonial[] = [
       <div class="flex gap-8 sm:gap-12 items-start justify-center sm:justify-start sm:pr-20">
         <!-- GitHub Stars -->
         <div class="flex flex-col gap-3">
-          <h2 class="text-white">75.0k</h2>
+          <h2 class="text-white">75k+</h2>
           <p class="text-grey flex items-center gap-2">
             <img :src="githubIcon" alt="" class="size-6" />
             Github Stars
@@ -101,7 +101,7 @@ const testimonials: Testimonial[] = [
 
         <!-- NPM Downloads -->
         <div class="flex flex-col gap-3">
-          <h2 class="text-white">2.3bn+</h2>
+          <h2 class="text-white">40m+</h2>
           <p class="text-grey">Weekly NPM downloads</p>
         </div>
       </div>
@@ -189,4 +189,4 @@ const testimonials: Testimonial[] = [
   animation-duration: 16s;
   animation-delay: -6s;
 }
-</style>
+</style>

package/src/vitepress/components/vite/FeatureGrid1.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import RiveAnimation from "@components/shared/RiveAnimation.vue";
+import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
+</script>
+
+<template>
+  <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
+    <div class="flex flex-col gap-3 justify-between">
+      <div class="p-5 sm:p-10 flex flex-col gap-3">
+        <h5 class="text-balance sm:text-pretty text-white">Instant Server Start</h5>
+        <p class="sm:max-w-[28rem] text-pretty">On demand source file serving over native ESM, with blazing fast
+          dependency pre-bundling.</p>
+      </div>
+      <div class="card-bg1 p-10 sm:p-15 flex justify-center">
+        <img src="@assets/vite/vite-featurepanel-1-terminal.svg" alt="Terminal" inert loading="lazy" />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3 justify-between border-r-0">
+      <div class="p-5 sm:p-10 flex flex-col gap-3">
+        <h5 class="text-white">Lightning Fast HMR</h5>
+        <p class="max-w-[26rem] text-pretty">Hot Module Replacement (HMR) that delivers updates instantly as you save,
+          and stays fast as your app grows.</p>
+      </div>
+      <div class="relative min-h-100 -mt-15">
+        <img src="@assets/vite/vite-featurepanel-2-terminal.png" inert loading="lazy" alt="lightning fast hot module replacement"
+          class="absolute bottom-0 right-0 w-full max-w-[560px]">
+      </div>
+    </div>
+
+    <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
+      <h5 class="text-white">Rich Features Out of the Box</h5>
+      <p class="sm:max-w-[28rem] text-pretty">TypeScript, JSX, CSS, Workers, Web Assembly... and more with just a plugin away.</p>
+      <RiveAnimation :desktop-src="viteAnimation" :mobile-src="viteAnimation" :desktop-width="563" :desktop-height="300"
+        :mobile-width="563" :mobile-height="420" canvas-class="w-full" />
+    </div>
+
+    <div class="flex flex-col gap-3 justify-between border-r-0">
+      <div class="p-5 sm:p-10 flex flex-col gap-3">
+        <h5 class="text-white">Optimized Build</h5>
+        <p class="max-w-[25rem] text-pretty">Advanced tree-shaking, built-in minification, fine-grained chunking control
+          powered by Rolldown.</p>
+      </div>
+      <div class="card-bg p-10 sm:p-15 flex justify-center">
+        <img src="@assets/vite/vite-featurepanel-4-terminal.svg" inert loading="lazy" alt="optimized build">
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card-bg1 {
+  background-image: url('@assets/vite/vite-featurepanel-1-background.jpg');
+  background-size: cover;
+  background-position: center;
+}
+
+.card-bg {
+  background-image: url('@assets/vite/vite-featurepanel-4-background.jpg');
+  background-size: cover;
+  background-position: center;
+}
+</style>

package/src/vitepress/components/vite/{FeatureGrid.vue → FeatureGrid2.vue}

@@ -6,18 +6,15 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
 <template>
   <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
     <div class="p-5 sm:p-10 flex flex-col gap-3">
-      <h5 class="text-balance sm:text-pretty text-white">Flexible plugin system</h5>
-      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's well-designed plugin interface with a few extra Vite-specific options.</p>
-      <RiveAnimation
-          :desktop-src="flexiblePluginAnimation"
-          :desktop-width="640"
-          :desktop-height="300"
-          canvas-class="w-[calc(100%_+_2.5rem)] mt-5 -mx-5"
-      />
+      <h5 class="text-balance sm:text-pretty text-white">Flexible Plugin System</h5>
+      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's well-designed plugin interface with a few
+        extra Vite-specific options.</p>
+      <RiveAnimation :desktop-src="flexiblePluginAnimation" :desktop-width="640" :desktop-height="300"
+        canvas-class="w-[calc(100%_+_2.5rem)] mt-5 -mx-5" />
     </div>
     <div class="flex flex-col gap-3 border-r-0 justify-between">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
-        <h5 class="text-white">Fully typed API</h5>
+        <h5 class="text-white">Fully Typed API</h5>
         <p class="max-w-[26rem] text-pretty">Designed to be built on top of.</p>
       </div>
       <div class="card-bg p-5 sm:p-10 flex justify-center">
@@ -26,7 +23,8 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
     </div>
     <div class="p-5 sm:p-10 flex flex-col gap-3">
       <h5 class="text-white">First class SSR Support</h5>
-      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to setup custom SSR (Server-Side Rendering), or build your own SSR framework.</p>
+      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to setup custom SSR (Server-Side
+        Rendering), or build your own SSR framework.</p>
       <img src="@assets/vite/vite-ssr-support.png" alt="SSR Support" loading="lazy" class="w-full px-5">
     </div>
     <div class="flex flex-col gap-3 justify-between">

package/src/vitepress/components/vite/Hero.vue

@@ -28,29 +28,20 @@ const installTabs = [
           <a href="/guide/" class="button button--primary inline-block w-fit">
             Get Started
           </a>
-          <a href="https://github.com/vitejs/vite" target="_blank" rel="noopener noreferrer" class="button inline-block w-fit">
+          <a href="https://github.com/vitejs/vite" target="_blank" rel="noopener noreferrer"
+            class="button inline-block w-fit">
             View on GitHub
           </a>
         </div>
       </div>
-      <CodeGroup :tabs="installTabs" class="hidden md:block w-full" />
+      <CodeGroup :tabs="installTabs" class="hidden md:block w-full"
+        style="--vp-code-tab-bg:var(--color-slate);--vp-code-block-bg:var(--color-slate);--vp-code-tab-divider:#000" />
     </div>
     <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
       <div class="relative px-10 h-full flex flex-col justify-center overflow-clip py-10 sm:py-0">
-        <RiveAnimation
-            :desktop-src="viteAnimation"
-            :mobile-src="viteAnimation"
-            :desktop-width="641"
-            :desktop-height="629"
-            :mobile-width="641"
-            :mobile-height="629"
-            canvas-class="w-full"
-        />
+        <RiveAnimation :desktop-src="viteAnimation" :mobile-src="viteAnimation" :desktop-width="641"
+          :desktop-height="629" :mobile-width="641" :mobile-height="629" canvas-class="w-full" />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/src/vitepress/components/vitepress-default/VPDocOutlineItem.vue

@@ -33,8 +33,8 @@ defineProps<{
 
 .outline-link {
   display: block;
-  line-height: 32px;
-  font-size: 15px;
+  line-height: 28px;
+  font-size: 13px;
   font-weight: 400;
   color: var(--vp-c-text-2);
   white-space: nowrap;

package/src/vitepress/components/vitepress-default/VPFlyout.vue

@@ -30,7 +30,7 @@ function onBlur() {
   >
     <button
       type="button"
-      class="flex items-center px-3 py-2 text-base font-sans text-primary dark:text-white hover:opacity-70 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
+      class="flex items-center px-3 py-2 text-base font-heading text-primary dark:text-white hover:opacity-70 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
       aria-haspopup="true"
       :aria-expanded="open"
       :aria-label="label"

package/src/vitepress/components/vitepress-default/VPMenuLink.vue

@@ -24,7 +24,7 @@ defineOptions({ inheritAttrs: false })
   <div class="VPMenuLink">
     <VPLink
       v-bind="$attrs"
-      class="flex items-center justify-between rounded-md px-3 py-2 text-base font-sans text-primary dark:text-white text-left whitespace-nowrap hover:opacity-70 transition-opacity"
+      class="flex items-center justify-between rounded-md px-3 py-2 text-sm font-heading text-primary dark:text-white text-left whitespace-nowrap hover:opacity-70 transition-opacity"
       :href
       :target="item.target"
       :rel="item.rel"

package/src/vitepress/components/vitepress-default/VPNavBarMenuLink.vue

@@ -20,7 +20,7 @@ const href = computed(() =>
 
 <template>
   <VPLink
-    class="flex items-center px-3 py-2 text-base font-sans text-primary dark:text-white hover:opacity-70 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
+    class="flex items-center px-3 py-2 text-base font-heading text-primary dark:text-white hover:opacity-70 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
     :href
     :target="item.target"
     :rel="item.rel"

package/src/vitepress/components/vitepress-default/VPSidebarItem.vue

@@ -146,7 +146,7 @@ function onCaretClick() {
   flex-grow: 1;
   padding: 4px 0;
   line-height: 24px;
-  font-size: 15px;
+  font-size: 14px;
   transition: color 0.25s;
 }
 

package/src/vitepress/components/vitepress-default/VPSocialLink.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed, nextTick, onMounted, ref, useSSRContext } from 'vue'
-import type { SSGContext } from '../../support/vitepress-default/shared-utils'
 
 const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
@@ -35,7 +34,7 @@ const svg = computed(() => {
 
 if (import.meta.env.SSR) {
   typeof props.icon === 'string' &&
-    useSSRContext<SSGContext>()?.vpSocialIcons.add(props.icon)
+    useSSRContext()?.vpSocialIcons.add(props.icon)
 }
 </script>