@voidzero-dev/vitepress-theme 3.0.2 → 3.1.0

package/config.js

@@ -53,8 +53,17 @@ export function extendConfig(c) {
 
   // inject alias
   v.resolve ??= {};
-  v.resolve.alias ??= {};
-  Object.assign(v.resolve.alias, aliases);
+  const al = (v.resolve.alias ??= {});
+  if (Array.isArray(al)) {
+    for (const key in aliases) {
+      al.push({
+        find: key,
+        replacement: aliases[key]
+      })
+    }
+  } else {
+    Object.assign(v.resolve.alias, aliases);
+  }
 
   const pkg = "@voidzero-dev/vitepress-theme";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/components/oxc/FeatureFormatter.vue

@@ -0,0 +1,30 @@
+<template>
+  <section id="feature-formatter" class="wrapper grid border-t md:grid-cols-2">
+    <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
+      <div class="flex flex-col gap-5">
+        <span class="text-grey text-xs font-mono uppercase tracking-wide">Formatter<span class="text-aqua"> (Alpha)</span></span>
+        <h4 class="text-white">Oxfmt: Prettier-compatible formatter</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Enforce consistent code styles</p>
+        <ul class="checkmark-list">
+          <li>3x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">Biome</code></li>
+          <li>35x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">Prettier</code></li>
+          <li>Tailwind class sorting support</li>
+        </ul>
+        <a href="/docs/guide/usage/formatter" class="button w-fit mt-6">Usage Guide</a>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <div class="h-full overflow-clip flex justify-end items-center py-5 px-5 md:py-20 md:pl-10 md:pr-0">
+        <img loading="lazy" src="@assets/oxc/oxc-formatter-terminal.png" alt="Linter" class="[mask-image:linear-gradient(to_bottom,black_50%,transparent),linear-gradient(to_right,black_50%,transparent)] [mask-composite:intersect] [-webkit-mask-composite:source-in]">
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card-bg {
+  background-image: url('@assets/oxc/oxc-feature-background.jpg');
+  background-size: cover;
+  background-position: center;
+}
+</style>

package/src/components/oxc/FeatureLinter.vue

@@ -1,18 +1,15 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <section id="feature-linter" class="wrapper border-t grid md:grid-cols-2">
+  <section id="feature-linter" class="wrapper grid md:grid-cols-2">
     <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Linter</span>
-        <h4 class="text-white">Oxlint: The Rust-powered linter</h4>
+        <h4 class="text-white">Oxlint: ESLint-compatible linter</h4>
         <p class="text-white/70 text-base max-w-[25rem] text-pretty">Catch bugs before they make it to production</p>
         <ul class="checkmark-list">
           <li>50~100x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code></li>
           <li>570+ rules and growing</li>
-          <li>Type-aware Linting</li>
+          <li>True type-aware Linting powered by <code class="mx-1 outline-none bg-nickel/50 text-aqua">tsgo</code></li>
+          <li>Support for <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code> JS Plugins</li>
         </ul>
         <a href="/docs/guide/usage/linter" class="button w-fit mt-6">Usage Guide</a>
       </div>
@@ -31,4 +28,4 @@
   background-size: cover;
   background-position: center;
 }
-</style>
+</style>

package/src/components/oxc/FeatureMinifier.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import RiveAnimation from "@components/shared/RiveAnimation.vue";
+import minifierAnimation from '@assets/oxc/animations/560_x_260_minifier.riv'
+</script>
+
+<template>
+  <section id="feature-minifier" class="wrapper border-t grid md:grid-cols-2">
+    <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
+      <div class="flex flex-col gap-5">
+        <span class="text-grey text-xs font-mono uppercase tracking-wide">Minifier <span class="text-aqua">(Alpha)</span></span>
+        <h4 class="text-white">oxc-minify</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Compress and optimize</p>
+        <ul class="checkmark-list">
+          <li>Dead code elimination</li>
+          <li>Syntax shortening & whitespace removal</li>
+          <li>Variable name mangling</li>
+        </ul>
+        <a href="/docs/guide/usage/minifier" class="button w-fit mt-6">Usage Guide</a>
+      </div>
+    </div>
+    <div class="flex flex-col py-10">
+      <RiveAnimation :desktop-src="minifierAnimation" :desktop-width="560" :desktop-height="260"
+        canvas-class="w-full" />
+    </div>
+  </section>
+</template>

package/src/components/oxc/FeatureParser.vue

@@ -5,52 +5,53 @@ import parserBenchmarkBg from '@assets/oxc/oxc-feature-background.jpg';
 const performanceData = [
   {
     name: 'OXC',
-    percentage: 18,
-    time: '60ms',
+    percentage: 20,
+    time: '26.3ms',
     isPrimary: true
   },
   {
     name: 'SWC',
     percentage: 65,
-    time: '210ms'
+    time: '84.1ms'
   },
   {
     name: 'Biome',
     percentage: 100,
-    time: '325ms'
+    time: '130.1ms'
   }
 ]
 </script>
 
 <template>
-  <section id="feature-parser" class="wrapper grid md:grid-cols-2">
-    <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
+  <section id="feature-parser" class="wrapper grid border-t md:grid-cols-2">
+    <div class="px-5 py-6 md:p-10 md:py-15 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Parser</span>
-        <h4 class="text-white">Quick AST generation</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">The perfect input for advanced transformations and compilations</p>
+        <h4 class="text-white">oxc-parser</h4>
+        <p class="text-white/70 text-base max-w-100 text-pretty">The foundation for advanced transformations and
+          compilations</p>
         <ul class="checkmark-list">
           <li>3x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">SWC</code></li>
-          <li>All Test262 stage4 tests passed</li>
+          <li>Parses <code class="mx-1 outline-none bg-nickel/50 text-aqua">.js(x)</code> and <code class="mx-1 outline-none bg-nickel/50 text-aqua">.ts(x)</code></li>
+          <li>Passes all Test262 stage4 tests</li>
         </ul>
         <a href="/docs/guide/usage/parser" class="button w-fit mt-6">Usage Guide</a>
       </div>
     </div>
-    <div class="flex flex-col justify-center px-5 md:px-10 py-5 md:pb-10 md:py-20">
-      <p class="text-white font-medium mb-10">Parser Benchmark for Oxc, Swc and Biome</p>
+    <div class="flex flex-col justify-center px-5 md:px-10 py-5 md:pb-10 md:py-10">
+      <p class="text-white font-medium mb-10">
+        Parser Benchmark for Oxc, Swc and Biome
+      </p>
       <div class="flex flex-col gap-6">
-        <PerformanceBar
-            v-for="item in performanceData"
-            :key="item.name"
-            :data="item"
-            :background-image="parserBenchmarkBg"
-            large
-        />
+        <PerformanceBar v-for="item in performanceData" :key="item.name" :data="item"
+          :background-image="parserBenchmarkBg" large />
       </div>
+      <p class="text-xs mt-10">
+        Parsing typescript.js on Macbook Pro M3 Max | 
+        <a href="https://github.com/oxc-project/bench-javascript-parser-written-in-rust" target="_blank">Source</a>
+      </p>
     </div>
   </section>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/oxc/FeatureResolver.vue

@@ -7,10 +7,15 @@
     <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Resolver</span>
-        <h4 class="text-white">Speedy module resolution</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Ensure your dependencies are located correctly and instantly</p>
+        <h4 class="text-white">oxc-resolver</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Node.js-compatible CJS and ESM module resolution
+        </p>
         <ul class="checkmark-list">
-          <li>28x faster than enhanced-resolve</li>
+          <li>Behavior alignment with <code
+              class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code></li>
+          <li>28x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code>
+          <li>Highly customizable</li>
+          </li>
         </ul>
         <a href="/docs/guide/usage/resolver" class="button w-fit mt-6">Usage Guide</a>
       </div>
@@ -21,4 +26,4 @@
       </div>
     </div>
   </section>
-</template>
+</template>

package/src/components/oxc/FeatureToolbar.vue

@@ -2,11 +2,12 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 
 const features = [
-  { id: 'feature-parser', label: 'parser' },
   { id: 'feature-linter', label: 'linter' },
-  { id: 'feature-resolver', label: 'resolver' },
+  { id: 'feature-formatter', label: 'formatter' },
+  { id: 'feature-parser', label: 'parser' },
   { id: 'feature-transformer', label: 'transformer' },
-  { id: 'feature-minifier', label: 'minifier + formatter' },
+  { id: 'feature-resolver', label: 'resolver' },
+  { id: 'feature-minifier', label: 'minifier' },
 ]
 
 const activeSection = ref('feature-parser')
@@ -42,8 +43,8 @@ const scrollToSection = (e: Event, id: string) => {
 
     // Easing function (easeInOutCubic)
     const ease = progress < 0.5
-        ? 4 * progress * progress * progress
-        : 1 - Math.pow(-2 * progress + 2, 3) / 2
+      ? 4 * progress * progress * progress
+      : 1 - Math.pow(-2 * progress + 2, 3) / 2
 
     window.scrollTo(0, startPosition + distance * ease)
 
@@ -164,18 +165,13 @@ onUnmounted(() => {
 <template>
   <div class="wrapper wrapper wrapper--ticks border-t w-full relative z-20"></div>
   <section class="wrapper sticky top-0 border-b bg-primary z-10 overflow-hidden">
-    <ul class="w-full sm:grid sm:grid-cols-5 flex items-center divide-x divide-nickel relative overflow-x-auto scrollbar-hide touch-none sm:touch-auto select-none sm:select-auto">
-      <div
-          class="absolute bottom-0 h-0.5 bg-white transition-all duration-300 ease-out"
-          :style="underlineStyle"
-      />
+    <ul
+      class="w-full sm:grid sm:grid-cols-6 flex items-center divide-x divide-nickel relative overflow-x-auto scrollbar-hide touch-none sm:touch-auto select-none sm:select-auto">
+      <div class="absolute bottom-0 h-0.5 bg-white transition-all duration-300 ease-out" :style="underlineStyle" />
       <li v-for="(feature, _index) in features" :key="feature.id" ref="listItems" class="flex-shrink-0">
-        <a
-            :href="`#${feature.id}`"
-            @click="scrollToSection($event, feature.id)"
-            class="h-full text-sm font-mono tracking-tight py-4 px-6 sm:px-0 flex justify-center gap-1.5 transition-colors duration-200 whitespace-nowrap"
-            :class="activeSection === feature.id ? 'text-white' : 'text-grey'"
-        >
+        <a :href="`#${feature.id}`" @click="scrollToSection($event, feature.id)"
+          class="h-full text-sm font-mono tracking-tight py-4 px-6 sm:px-0 flex justify-center gap-1.5 transition-colors duration-200 whitespace-nowrap"
+          :class="activeSection === feature.id ? 'text-white' : 'text-grey'">
           <span>{{ feature.label }}</span>
         </a>
       </li>
@@ -191,7 +187,9 @@ onUnmounted(() => {
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
-</style>
+</style>

package/src/components/oxc/FeatureTransformer.vue

@@ -7,19 +7,20 @@
     <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Transformer</span>
-        <h4 class="text-white">Instant JavaScript transformation</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Transpile the code you need</p>
+        <h4 class="text-white">oxc-transform</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Transpile source code at the speed of thought</p>
         <ul class="checkmark-list">
-          <li><code class="mx-1 outline-none bg-nickel/50 text-aqua">Babel</code> compatible</li>
-          <li><code class="mx-1 outline-none bg-nickel/50 text-aqua">TypeScript</code> / <code
-              class="mx-1 outline-none bg-nickel/50 text-aqua">React JSX</code></li>
+          <li><code class="mx-1 outline-none bg-nickel/50 text-aqua">TypeScript</code> & <code
+              class="mx-1 outline-none bg-nickel/50 text-aqua">JSX</code></li>
+          <li>Syntax lowering to ES2015</li>
           <li>Isolated Declarations DTS Emit</li>
+          <li>React Fast Refresh, styled-components, and more</li>
         </ul>
         <a href="/docs/guide/usage/transformer" class="button w-fit mt-6">Usage Guide</a>
       </div>
     </div>
     <div class="flex flex-col">
-      <div class="card-bg h-full overflow-clip flex justify-end items-center py-20 px-5 md:px-20">
+      <div class="card-bg h-full overflow-clip flex justify-end items-center py-5 md:py-10 px-5 md:px-25">
         <img loading="lazy" src="@assets/oxc/oxc-transformer-terminal.png" alt="Transformer" class="w-full md:w-auto">
       </div>
     </div>
@@ -32,4 +33,4 @@
   background-size: cover;
   background-position: center;
 }
-</style>
+</style>

package/src/components/oxc/Hero.vue

@@ -12,7 +12,7 @@ import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
         </div>
         <h1 class="text-white text-pretty">The JavaScript Oxidation Compiler</h1>
-        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A collection of JavaScript tools written in Rust</p>
+        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A collection of high-performance JavaScript tools written in Rust</p>
         <div class="flex items-center gap-5 mt-8">
           <a href="/docs/guide/introduction" class="button button--primary inline-block w-fit">
             Get Started
@@ -24,7 +24,7 @@ import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
       </div>
     </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">
+      <div class="relative px-10 h-full flex flex-col justify-center overflow-clip pb-10 sm:pb-0">
         <RiveAnimation
             :desktop-src="oxcAnimation"
             :mobile-src="oxcAnimation"
@@ -41,4 +41,4 @@ import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
 
 <style scoped>
 
-</style>
+</style>

package/src/components/rolldown/FeatureGrid.vue

@@ -7,29 +7,24 @@ import performanceBarBg from '@assets/rolldown/rolldown-rollup-background.jpg';
 const performanceData = [
   {
     name: 'Rolldown',
-    percentage: 20,
-    time: '0.63s',
+    percentage: 4.01,
+    time: '1.61s',
     isPrimary: true
   },
   {
     name: 'esbuild',
-    percentage: 39,
-    time: '1.23s'
+    percentage: 4.24,
+    time: '1.70s'
   },
   {
-    name: 'Rolldown-Vite',
-    percentage: 47,
-    time: '1.49s'
+    name: 'rspack',
+    percentage: 10.15,
+    time: '4.07s',
   },
   {
-    name: 'Farm',
-    percentage: 66,
-    time: '2.08s'
-  },
-  {
-    name: 'Rsbuild',
+    name: 'Rollup + esbuild',
     percentage: 100,
-    time: '3.14s'
+    time: '40.10s'
   }
 ]
 </script>
@@ -37,54 +32,55 @@ const performanceData = [
 <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 pb-0 sm:pb-0 flex flex-col gap-3">
+      <div class="p-5 sm:p-15 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-balance sm:text-pretty text-white">Speed of Rust</h5>
-        <p class="sm:max-w-[28rem] text-pretty">Rolldown handles tens of thousands of modules without breaking a sweat</p>
+        <p class="sm:max-w-[30rem] text-pretty">Rolldown handles tens of thousands of modules without breaking a sweat
+        </p>
       </div>
-      <div class="p-5 sm:p-10 flex flex-col gap-10">
+      <div class="p-5 sm:p-15 flex flex-col gap-10">
         <div class="flex flex-col gap-4">
-          <PerformanceBar
-              v-for="item in performanceData"
-              :key="item.name"
-              :data="item"
-              :background-image="performanceBarBg"
-          />
+          <PerformanceBar v-for="item in performanceData" :key="item.name" :data="item"
+            :background-image="performanceBarBg" />
         </div>
         <div>
-          <p class="text-sm"><span class="text-white font-medium">Benchmark</span> bundling <span class="text-white font-medium">19k</span> modules.</p>
-          <p class="text-xs">10k React JSX components + 9k iconify JS files</p>
+          <p class="text-sm"><a
+              href="https://github.com/rolldown/benchmarks/tree/f3997c801b7d261e8aaa15d4affbf6730cc19884?tab=readme-ov-file#ubuntu-latest-updated-2025-12-21"
+              target="_blank" class="text-white font-medium">Benchmark</a> bundling <span
+              class="text-white font-medium">19k</span>
+            modules.</p>
+          <p class="text-xs">10k React JSX components + 9k iconify JS files, with minification and source maps.</p>
         </div>
       </div>
     </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">
+
+    <div class="flex flex-col gap-3 border-r-0 justify-between overflow-hidden">
+      <div class="p-5 sm:p-15 sm:pb-10 flex flex-col gap-3">
         <h5 class="text-white">Rollup Compatible</h5>
-        <p class="max-w-[26rem] text-pretty">Familiar API & options with a rich plugin ecosystem</p>
+        <p class="max-w-[30rem] text-pretty">Familiar API & options with a rich plugin ecosystem</p>
       </div>
       <div class="card-bg px-5 sm:px-20 pt-5 sm:pt-10 flex justify-center">
-        <img src="@assets/rolldown/rolldown-rollup.png" inert loading="lazy" alt="rollup compatible">
+        <img src="@assets/rolldown/rolldown-rollup.png" class="-mb-[60px]" inert loading="lazy" alt="rollup compatible">
       </div>
     </div>
+
     <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
+      <div class="p-5 sm:p-15 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-white">Esbuild Feature Parity</h5>
         <p class="max-w-[26rem] text-pretty">Built-in transforms, define, inject, minify, CSS bundling & more...</p>
       </div>
-      <div class="flex-1 flex items-center justify-center p-5 sm:p-10">
-        <img src="@assets/rolldown/rolldown-esbuild-parity.png" inert loading="lazy" alt="jest compatible" class="w-full max-h-60 object-contain">
+      <div class="flex-1 flex items-center justify-center p-8 sm:p-15 sm:pt-10">
+        <img src="@assets/rolldown/rolldown-esbuild-parity.png" inert loading="lazy" alt="jest compatible"
+          class="w-full max-h-60 object-contain">
       </div>
     </div>
+
     <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
+      <div class="p-5 sm:p-15 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-white">Designed for Vite</h5>
         <p class="max-w-[25rem] text-pretty">The unified bundler powering Vite 8+</p>
       </div>
-      <RiveAnimation
-          :desktop-src="vitePoweredAnimation"
-          :desktop-width="640"
-          :desktop-height="300"
-          canvas-class="w-full mb-10"
-      />
+      <RiveAnimation :desktop-src="vitePoweredAnimation" :desktop-width="640" :desktop-height="300"
+        canvas-class="w-full mb-10" />
     </div>
   </section>
 </template>

package/src/components/rolldown/Hero.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-between items-center md:items-start">
-      <div class="flex flex-col gap-5 max-w-[30rem] text-center md:text-left items-center md:items-start">
+      <div class="flex flex-col gap-5 text-center md:text-left items-center md:items-start">
         <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">Fast Rust-based bundler for JavaScript</h1>
-        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">with Rollup-compatible API</p>
+        <h1 class="text-white text-pretty max-w-[35rem]">Blazing Fast<br>Rust-based bundler for JavaScript</h1>
+        <p class="text-white/70 text-lg max-w-[30rem] text-pretty">with Rollup-compatible API and esbuild feature parity</p>
         <div class="flex items-center gap-5 mt-6">
           <a href="/guide/" class="button button--primary inline-block w-fit">
             <span>Get Started</span>
@@ -54,4 +54,4 @@
 }
 </style>
 <script setup lang="ts">
-</script>
+</script>

package/src/components/vitest/FeatureGrid.vue

@@ -9,7 +9,8 @@ import esmAnimation from '@assets/vitest/animations/640_x_300_esm.riv'
     <div class="flex flex-col gap-3">
       <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-balance sm:text-pretty text-white">Vite Powered</h5>
-        <p class="sm:max-w-[28rem] text-pretty">Reuse Vite's config and plugins - consistent across your app and tests.
+        <p class="sm:max-w-[30rem] text-pretty">Reuse <code
+          class="mr-1 outline-none bg-nickel/50 text-vite">Vite</code>'s config and plugins - consistent across your app and tests.
           But it's not required to use Vitest!</p>
       </div>
       <RiveAnimation
@@ -22,7 +23,8 @@ import esmAnimation from '@assets/vitest/animations/640_x_300_esm.riv'
     <div class="flex flex-col gap-3 border-r-0 justify-between">
       <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-white">Jest Compatible</h5>
-        <p class="max-w-[26rem] text-pretty">Expect, snapshot, coverage, and more - migrating from Jest is
+        <p class="max-w-[28rem] text-pretty">Expect, snapshot, coverage, and more - migrating from <code
+          class="mr-1 outline-none bg-nickel/50 text-zest">Jest</code> is
           straightforward.</p>
       </div>
       <div class="flex-1 flex items-center justify-center p-5 sm:p-10">
@@ -32,7 +34,7 @@ import esmAnimation from '@assets/vitest/animations/640_x_300_esm.riv'
     <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">Smart & instant watch mode</h5>
-        <p class="max-w-[26rem] text-pretty">Only rerun the related changes, just like HMR for tests!</p>
+        <p class="max-w-[23rem] text-pretty">Only rerun the related changes, just like HMR for tests!</p>
       </div>
       <div class="card-bg px-5 sm:px-10 pt-5 sm:pt-10 flex justify-center">
         <img src="@assets/vitest/vitest-watcher.png" inert loading="lazy" alt="typed api">

package/src/components/vitest/Intro.vue

@@ -4,30 +4,31 @@
       <div class="flex flex-col gap-3 max-w-md">
         <div class="flex gap-3 items-center">
           <img src="@assets/icons/vitest-light.svg" alt="Vitest icon" class="size-5">
-          <span
-              class="text-grey text-xs font-medium font-mono uppercase tracking-wide">Why Vitest</span>
+          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">Why Vitest</span>
         </div>
         <h3 class="text-white max-w-xl text-balance">The Vite Native Test Runner</h3>
         <a href="/guide/why" target="_blank" class="button w-fit mt-8 hidden lg:block">Learn more</a>
       </div>
       <div class="lg:max-w-lg">
-        <p class="text-pretty">
-          Vite's out-of-the-box support for common web patterns, features like glob imports and SSR primitives, and its
-          many plugins and integrations are fostering a vibrant ecosystem. Its dev and build story are key to its
-          success.
-          For docs, there are several SSG-based alternatives powered by Vite. Vite's Unit Testing story hasn't been
-          clear
-          though. Existing options like were created in a different context. There is a lot of duplication between <code
-            class="mr-1 outline-none bg-nickel/50 text-zest">Jest</code>
-          and Vite, forcing users to configure two different pipelines.
+        <p class="text-pretty mb-5">
+          <a href="https://vite.dev" target="_blank"><code
+              class="mr-1 outline-none bg-nickel/50 text-vite">Vite</code></a> has become the shared foundation for
+          modern
+          web development - but test runners like <a href="https://jestjs.io/" target="_blank"><code
+              class="mr-1 outline-none bg-nickel/50 text-zest">Jest</code></a>
+          cannot reuse its resolution and transform
+          pipeline, resulting in duplicated configurations and compatibility issues.
         </p>
+        <p class="text-pretty mb-5">Vitest was born to solve this problem: by building on top of Vite, Vitest natively
+          understands everything you have configured for your Vite app, and the tests just work.</p>
+        <p class="text-pretty">That said, you can totally use Vitest without using Vite - even for backend code. It's a great test runner in
+          its own right.</p>
         <a href="/guide/why" target="_blank" class="button w-fit mt-8 block lg:hidden">Learn more</a>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
 <script setup lang="ts">
-</script>
+</script>

package/src/oxc.ts

@@ -0,0 +1,22 @@
+import { VoidZeroTheme, themeContextKey } from "./";
+import type { Theme } from "vitepress";
+
+// inject project variant assets
+import logoDark from "@assets/logos/oxc-dark.svg";
+import logoLight from "@assets/logos/oxc-light.svg";
+import footerBg from "@assets/oxc/footer-background.jpg";
+import monoIcon from "@assets/icons/oxc-mono.svg";
+
+export default {
+  ...VoidZeroTheme,
+  enhanceApp(ctx) {
+    ctx.app.provide(themeContextKey, {
+      logoDark,
+      logoLight,
+      logoAlt: "Vite",
+      footerBg,
+      monoIcon,
+    });
+    VoidZeroTheme.enhanceApp(ctx)
+  },
+} satisfies Theme;

package/src/rolldown.ts

@@ -0,0 +1,22 @@
+import { VoidZeroTheme, themeContextKey } from "./";
+import type { Theme } from "vitepress";
+
+// inject project variant assets
+import logoDark from "@assets/logos/rolldown-dark.svg";
+import logoLight from "@assets/logos/rolldown-light.svg";
+import footerBg from "@assets/rolldown/footer-background.jpg";
+import monoIcon from "@assets/icons/rolldown-mono.svg";
+
+export default {
+  ...VoidZeroTheme,
+  enhanceApp(ctx) {
+    ctx.app.provide(themeContextKey, {
+      logoDark,
+      logoLight,
+      logoAlt: "Vite",
+      footerBg,
+      monoIcon,
+    });
+    VoidZeroTheme.enhanceApp(ctx)
+  },
+} satisfies Theme;

package/src/vite.ts

@@ -0,0 +1,22 @@
+import { VoidZeroTheme, themeContextKey } from "./";
+import type { Theme } from "vitepress";
+
+// inject project variant assets
+import logoDark from "@assets/logos/vite-dark.svg";
+import logoLight from "@assets/logos/vite-light.svg";
+import footerBg from "@assets/vite/footer-background.jpg";
+import monoIcon from "@assets/icons/vite-mono.svg";
+
+export default {
+  ...VoidZeroTheme,
+  enhanceApp(ctx) {
+    ctx.app.provide(themeContextKey, {
+      logoDark,
+      logoLight,
+      logoAlt: "Vite",
+      footerBg,
+      monoIcon,
+    });
+    VoidZeroTheme.enhanceApp(ctx)
+  },
+} satisfies Theme;

package/src/vitest.ts

@@ -0,0 +1,22 @@
+import { VoidZeroTheme, themeContextKey } from "./";
+import type { Theme } from "vitepress";
+
+// inject project variant assets
+import logoDark from "@assets/logos/vitest-dark.svg";
+import logoLight from "@assets/logos/vitest-light.svg";
+import footerBg from "@assets/vitest/footer-background.jpg";
+import monoIcon from "@assets/icons/vitest-mono.svg";
+
+export default {
+  ...VoidZeroTheme,
+  enhanceApp(ctx) {
+    ctx.app.provide(themeContextKey, {
+      logoDark,
+      logoLight,
+      logoAlt: "Vite",
+      footerBg,
+      monoIcon,
+    });
+    VoidZeroTheme.enhanceApp(ctx)
+  },
+} satisfies Theme;

package/src/components/oxc/FeatureMinifierFormatter.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import minifierAnimation from '@assets/oxc/animations/560_x_260_minifier.riv'
-</script>
-
-<template>
-  <section id="feature-minifier" 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 py-10">
-      <span class="text-grey text-xs font-mono uppercase tracking-wide px-10">Minifier <span class="text-aqua">(Alpha Build)</span></span>
-      <RiveAnimation
-          :desktop-src="minifierAnimation"
-          :desktop-width="560"
-          :desktop-height="260"
-          canvas-class="w-full"
-      />
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
-        <h5 class="text-white">Optimize Compression</h5>
-        <p class="max-w-[25rem] text-pretty">Minimize file sizes for fast delivery</p>
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-3 justify-between py-10">
-      <span class="text-grey text-xs font-mono uppercase tracking-wide px-10">Formatter <span class="text-aqua">(Alpha Build)</span></span>
-      <div class="flex-1 flex items-center justify-center px-5 sm:px-10">
-        <img src="@assets/oxc/oxc-formatter-terminal.png" inert loading="lazy" alt="blazing-fast formatting" class="w-full object-contain [mask-image:linear-gradient(to_bottom,black_50%,transparent),linear-gradient(to_right,black_50%,transparent)] [mask-composite:intersect] [-webkit-mask-composite:source-in]">
-      </div>
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
-        <h5 class="text-white">Oxfmt: Blazing-Fast Formatting </h5>
-        <p class="max-w-[26rem] text-pretty">Enforce consistent code styles</p>
-      </div>
-    </div>
-
-  </section>
-</template>