@voidzero-dev/vitepress-theme 3.0.2 → 3.2.0

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/types/sponsors.ts

@@ -0,0 +1,14 @@
+export interface Sponsor {
+  name: string
+  img: string
+  url: string
+  hasDark?: true
+}
+
+export type SponsorSize = 'big' | 'medium' | 'small' | 'avatar'
+
+export interface SponsorTier {
+  tier: string
+  size: SponsorSize
+  items: Sponsor[]
+}

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>