@voidzero-dev/vitepress-theme 2.0.1 → 3.0.0

package/src/components/oss/TopBanner.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { useData } from 'vitepress'
+import type { BannerConfig } from '../../types/theme-config'
+import { themeContextKey } from '../../types/theme-context'
+
+const { theme, frontmatter } = useData()
+
+// Check if we're on a marketing page (non-doc layout) - matches Header.vue logic
+const isMarketingPage = computed(() => {
+  const layout = frontmatter.value.layout
+  return layout === 'home' || (layout && layout !== 'doc' && layout !== 'page')
+})
+
+// Get banner configuration
+const bannerConfig = computed<BannerConfig | undefined>(() => theme.value.banner)
+
+// Only show if banner is configured
+const showBanner = computed(() => {
+  return bannerConfig.value?.text && bannerConfig.value?.url
+})
+
+const { footerBg: backgroundImage, monoIcon, logoAlt } = inject(themeContextKey)!
+
+const bannerText = computed(() => bannerConfig.value?.text || '')
+const bannerUrl = computed(() => bannerConfig.value?.url || '#')
+
+// Determine link target
+const linkTarget = computed(() => {
+  if (bannerConfig.value?.target) {
+    return bannerConfig.value.target
+  }
+  // Default: external URLs open in new tab
+  const url = bannerConfig.value?.url || ''
+  return url.startsWith('http') ? '_blank' : '_self'
+})
+
+// Rel attribute for security
+const linkRel = computed(() => {
+  return linkTarget.value === '_blank' ? 'noopener noreferrer' : undefined
+})
+
+function dismiss() {
+  document.documentElement.classList.add('banner-dismissed')
+  localStorage.setItem(`banner-dismissed-${bannerConfig.value?.id || ''}`, 'true')
+}
+</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">
+      <!-- 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" />
+
+      <!-- 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="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">
+            {{ 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>
+        </div>
+      </div>
+    </a>
+    <!-- Close button -->
+    <button @click="dismiss" aria-label="Close navigation menu"
+      class="absolute right-2 top-1/2 -translate-y-1/2 z-20 p-2 text-white hover:opacity-70 transition-opacity"
+      type="button">
+      <svg class="cursor-pointer mt-px" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none"
+        viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style>
+:root.banner-dismissed .top-banner {
+  display: none;
+}
+
+/* Set CSS variable for banner height - only on md+ where banner is visible */
+@media (min-width: 768px) {
+  .top-banner {
+    --vp-banner-height: 40px;
+  }
+
+  :root:has(.top-banner):not(.banner-dismissed) {
+    --vp-banner-height: 40px;
+  }
+}
+</style>

package/src/{vitepress/components → 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 → 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/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 border-b-0">
+      <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 border-b-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 → components/vite/FeatureGrid2.vue}

@@ -6,29 +6,30 @@ 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">
         <img src="@assets/vite/vite-typed-api.svg" inert loading="lazy" alt="typed api">
       </div>
     </div>
-    <div class="p-5 sm:p-10 flex flex-col gap-3">
+
+    <div class="p-5 sm:p-10 flex flex-col gap-3 border-b-0">
       <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">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Continuous ecosystem integration</h5>

package/src/{vitepress/components → components}/vite/Hero.vue

@@ -16,41 +16,32 @@ const installTabs = [
 <template>
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel md:divide-x">
     <div class="flex flex-col p-10 justify-between gap-20 items-center md:items-start">
-      <div class="flex flex-col gap-5 max-w-[25rem] items-center md:items-start text-center md:text-left">
+      <div class="flex flex-col gap-5 items-center md:items-start text-center md:text-left">
         <div class="flex items-center gap-2">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="../../assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
         </div>
-        <h1 class="text-white text-pretty">The Build Tool for the Web</h1>
-        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">Vite is a blazing fast frontend build tool powering
+        <h1 class="text-white text-pretty max-w-[25rem]">The Build Tool for the Web</h1>
+        <p class="text-white/70 md:text-lg max-w-[27rem] text-pretty">Vite is a blazing fast frontend build tool powering
           the next generation of web applications.</p>
         <div class="flex items-center gap-5 mt-8">
           <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 → 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 → 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 → 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 → 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 → 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 → 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>
 

package/src/index.ts

@@ -1,2 +1,103 @@
-export { default } from './vitepress'
-export * from './vitepress'
+/**
+ * @voidzerodev/vitepress-theme
+ *
+ * Full fork of VitePress default theme with custom variant system.
+ * Supports both traditional VitePress doc layouts and custom variant layouts.
+ * Set themeConfig.variant to 'voidzero' or 'viteplus' in your VitePress config.
+ *
+ * Layouts:
+ * - layout: 'doc' | 'home' | 'page' → Uses VitePress default layout
+ * - No layout or custom → Uses variant-specific custom layout
+ */
+
+// NOTE: @docsearch/css is loaded dynamically in VPAlgoliaSearchBox.vue
+// This allows local search users to avoid installing docsearch packages
+
+// Unified design system - single import
+// Contains: tokens → base → docs → marketing (in that order)
+import "./styles/index.css";
+
+import type { Theme } from "vitepress";
+import { watch } from "vue";
+
+// Main layout router
+import VPLayout from "./layouts/VPLayout.vue";
+// VitePress default theme components (forked)
+import VPBadge from "@vp-default/VPBadge.vue";
+
+const VoidZeroTheme = {
+  Layout: VPLayout, // Smart layout router that switches between VP and custom layouts
+  enhanceApp({ app, router, siteData }) {
+    const variant = siteData.value.themeConfig?.variant || "voidzero";
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-variant", variant);
+
+      // Watch for frontmatter.theme changes and apply theme logic
+      watch(
+        () => router.route.data.frontmatter?.theme,
+        (theme) => {
+          if (theme) {
+            // Forced theme via frontmatter
+            document.documentElement.setAttribute("data-theme", theme);
+          } else {
+            // OSS: Respect user preference, but default to dark if no preference
+            document.documentElement.removeAttribute("data-theme");
+
+            const hasUserPreference = localStorage.getItem(
+              "vitepress-theme-appearance"
+            );
+            if (
+              !hasUserPreference &&
+              !document.documentElement.classList.contains("dark")
+            ) {
+              // No user preference - set dark as default for OSS
+              document.documentElement.classList.add("dark");
+            }
+          }
+        },
+        { immediate: true }
+      );
+    }
+
+    // VitePress default theme component (for markdown usage)
+    app.component("Badge", VPBadge);
+  },
+} satisfies Theme;
+
+// VP components (for use in Markdown and custom components)
+export { default as VPBadge } from "@vp-default/VPBadge.vue";
+export { default as VPButton } from "@vp-default/VPButton.vue";
+export { default as VPDocAsideSponsors } from "@vp-default/VPDocAsideSponsors.vue";
+export { default as VPFeatures } from "@vp-default/VPFeatures.vue";
+export { default as VPHomeContent } from "@vp-default/VPHomeContent.vue";
+export { default as VPHomeFeatures } from "@vp-default/VPHomeFeatures.vue";
+export { default as VPHomeHero } from "@vp-default/VPHomeHero.vue";
+export { default as VPHomeSponsors } from "@vp-default/VPHomeSponsors.vue";
+export { default as VPImage } from "@vp-default/VPImage.vue";
+export { default as VPLink } from "@vp-default/VPLink.vue";
+export { default as VPSocialLink } from "@vp-default/VPSocialLink.vue";
+export { default as VPSocialLinks } from "@vp-default/VPSocialLinks.vue";
+export { default as VPSponsors } from "@vp-default/VPSponsors.vue";
+export { default as VPTeamMembers } from "@vp-default/VPTeamMembers.vue";
+export { default as VPTeamPage } from "@vp-default/VPTeamPage.vue";
+export { default as VPTeamPageSection } from "@vp-default/VPTeamPageSection.vue";
+export { default as VPTeamPageTitle } from "@vp-default/VPTeamPageTitle.vue";
+
+// Export custom layouts and components
+export { VoidZeroTheme };
+export default VoidZeroTheme;
+
+// Export types
+export type { Sponsors } from "./components/vitepress-default/VPSponsors.vue";
+export type {
+  BannerConfig,
+  FooterConfig,
+  FooterColumn,
+  FooterLink,
+  FooterSocialLink,
+  GridSize,
+  Sponsor,
+  SponsorTier,
+  VoidZeroThemeConfig,
+} from "./types/theme-config";
+export { type ThemeContext, themeContextKey } from "./types/theme-context";

package/src/{vitepress/layouts → layouts}/VPLayout.vue

@@ -6,9 +6,6 @@ import { useData } from 'vitepress'
 import VPDefaultLayout from '@vp-default/Layout.vue'
 
 // Import custom variant layouts/components
-import VoidZeroHeader from '@components/voidzero/Header.vue'
-import VoidZeroFooter from '@components/voidzero/Footer.vue'
-import VitePlusHeader from '@components/viteplus/Header.vue'
 import OSSHeader from '@components/oss/Header.vue'
 import TopBanner from '@components/oss/TopBanner.vue'
 
@@ -16,7 +13,7 @@ const { frontmatter, site } = useData()
 const slots = useSlots()
 
 // Determine variant from theme config
-const variant = computed(() => site.value.themeConfig?.variant || 'voidzero')
+const variant = computed(() => site.value.themeConfig?.variant || 'vite')
 
 // Determine which layout to use based on frontmatter.layout
 // Default behavior (no layout specified) = use VitePress doc layout
@@ -45,21 +42,9 @@ const useVPLayout = computed(() => {
       </template>
     </VPDefaultLayout>
   </div>
-
-  <div v-else-if="variant === 'viteplus'" class="marketing-layout" :data-theme="frontmatter.theme" :data-variant="variant">
-    <VitePlusHeader />
-    <Content />
-  </div>
-
-  <div v-else-if="variant === 'voidzero'" class="marketing-layout" :data-theme="frontmatter.theme" :data-variant="variant">
-    <VoidZeroHeader />
-    <Content />
-    <VoidZeroFooter />
-  </div>
-
   <div v-else class="marketing-layout" :data-theme="frontmatter.theme" :data-variant="variant">
     <TopBanner />
-    <OSSHeader/>
+    <OSSHeader />
     <Content />
   </div>
 </template>