@voidzero-dev/vitepress-theme 4.2.1 → 4.4.0

package/config.js

@@ -12,7 +12,6 @@ const aliases = {
     "src/composables/vitepress-default"
   ),
   "@vp-support": resolve(__dirname, "src/support/vitepress-default"),
-  "@rive-app/canvas-lite": import.meta.resolve("@rive-app/canvas-lite"),
 };
 
 export function extendConfig(c) {

package/package.json

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

package/src/components/oss/CTAShaderBackground.vue

@@ -9,7 +9,7 @@ import {
   Ripples,
 } from 'shaders/vue'
 
-type Variant = 'vite' | 'vitest' | 'rolldown' | 'oxc'
+type Variant = 'vite' | 'vitest' | 'rolldown' | 'oxc' | 'viteplus'
 
 interface ColorPalette {
   dark: string

package/src/components/oss/Header.vue

@@ -14,6 +14,8 @@ import VPNavBarTranslations from '@vp-default/VPNavBarTranslations.vue'
 import VPNavBarSocialLinks from '@vp-default/VPNavBarSocialLinks.vue'
 import VPNavBarExtra from '@vp-default/VPNavBarExtra.vue'
 import VPSwitchAppearance from '@vp-default/VPSwitchAppearance.vue'
+import VPSocialLinks from '@vp-default/VPSocialLinks.vue'
+
 import { useLangs } from '@vp-composables/langs'
 
 const { theme, frontmatter, isDark } = useData()
@@ -195,8 +197,8 @@ onUnmounted(() => {
     <header
       class="wrapper px-6 py-5 flex items-center justify-between relative bg-white dark:bg-primary border-b border-stroke dark:border-nickel">
       <!-- Left side: Logo + Nav -->
-      <div class="flex items-center gap-10">
-        <a href="/" class="shrink-0">
+      <div class="flex gap-10 self-stretch">
+        <a href="/" class="flex items-center -mx-2 px-2">
           <slot name="nav-bar-title-before" />
           <img class="h-4 block dark:hidden" :src="logoDark" :alt="logoAlt" />
           <img class="h-4 hidden dark:block" :src="logoLight" :alt="logoAlt" />
@@ -407,21 +409,11 @@ onUnmounted(() => {
 
               <!-- Social Icons -->
               <div class="flex items-center justify-center gap-4 pt-4">
-                <a href="https://github.com/voidzero-dev" target="_blank" rel="noopener noreferrer"
-                  class="hover:opacity-70 transition-opacity" @click="closeMobileMenu">
-                  <img src="@assets/social/github.svg" alt="GitHub" class="size-6 block dark:hidden">
-                  <img src="@assets/social/github-light.svg" alt="GitHub" class="size-6 hidden dark:block">
-                </a>
-                <a href="https://bsky.app/profile/voidzero.dev" target="_blank" rel="noopener noreferrer"
-                  class="hover:opacity-70 transition-opacity" @click="closeMobileMenu">
-                  <img src="@assets/social/bluesky.svg" alt="Bluesky" class="size-6 block dark:hidden">
-                  <img src="@assets/social/bluesky-light.svg" alt="Bluesky" class="size-6 hidden dark:block">
-                </a>
-                <a href="https://x.com/voidzerodev" target="_blank" rel="noopener noreferrer"
-                  class="hover:opacity-70 transition-opacity" @click="closeMobileMenu">
-                  <img src="@assets/social/twitter.svg" alt="X" class="size-6 block dark:hidden">
-                  <img src="@assets/social/twitter-light.svg" alt="X" class="size-6 hidden dark:block">
-                </a>
+                  <VPSocialLinks
+                    @click="closeMobileMenu"
+                    v-if="theme.socialLinks"
+                    :links="theme.socialLinks"
+                  />
               </div>
             </div>
           </div>

package/src/components/shared/RiveAnimation.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import * as rive from "@rive-app/canvas-lite"
+import riveWasm from "@rive-app/canvas-lite/rive.wasm?url"
 import { ref, onMounted, onUnmounted, computed } from "vue"
 
+rive.RuntimeLoader.setWasmUrl(riveWasm)
+
 interface Props {
   desktopSrc: string
   mobileSrc?: string

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

@@ -115,6 +115,7 @@ watch([() => searchIndexLoading.value, () => searchIndexError.value], ([loading,
     // Small delay to ensure DOM has updated with the search input
     nextTick(() => {
       activate()
+      focusSearchInput()
     })
   }
 }, { immediate: true })

package/src/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
+/// <reference types="vitepress/client" />
 
 // Asset module declarations
 declare module '*.riv' {

package/src/styles/marketing.css

@@ -175,6 +175,10 @@
         background-image: url('../assets/oxc/primary-button-background.jpg');
     }
 
+    :root[data-variant="viteplus"] .button--primary::before {
+        background-image: url('../assets/viteplus/primary-button-background.jpg');
+    }
+
     @keyframes move-background {
         0%, 100% {
             background-position: 40% 40%;

package/src/styles/tokens.css

@@ -26,7 +26,7 @@
     --color-primary: #16171d;
     --color-beige: #F4F3EC;
     --color-nickel: #3B3440;
-    --color-grey: #827A89;
+    --color-grey: #867e8e;
     --color-stroke: #E5E4E7;
     --color-midnight: #0C0912;
     --color-slate: #14121A;

package/src/styles/vitepress-default/components/vp-doc.css

@@ -235,11 +235,21 @@
   background-color: transparent;
 }
 
+.vp-doc .custom-block .vp-code-group,
+.vp-doc .custom-block [class*='vp-code-block'] {
+  margin-top: 8px;
+}
+
 .vp-doc .custom-block .vp-code-group .tabs {
   margin: 0;
   border-radius: 8px 8px 0 0;
 }
 
+.vp-doc .custom-block .vp-code-group div[class*='language-'],
+.vp-doc .custom-block [class*='vp-code-block'] div[class*='language-'] {
+  margin-top: 0 !important;
+}
+
 /**
  * Code
  * -------------------------------------------------------------------------- */
@@ -288,6 +298,7 @@
   .vp-doc div[class*='language-'],
   .vp-block {
     margin: 16px -24px;
+    border-radius: 0;
   }
 
   .vp-doc li div[class*='language-'] {

package/src/styles/vitepress-default/vars.css

@@ -313,7 +313,7 @@
   --vp-z-index-sidebar: 60;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1024px) {
   :root {
     --vp-z-index-sidebar: 25;
   }

package/src/types/theme-config.ts

@@ -73,7 +73,7 @@ export interface BannerConfig {
   /** Optional: Link target (defaults to '_blank' for external URLs) */
   target?: '_self' | '_blank'
   /** Optional: Override the variant styling (defaults to theme variant) */
-  variant?: 'vite' | 'vitest' | 'rolldown' | 'oxc'
+  variant?: 'vite' | 'vitest' | 'rolldown' | 'oxc' | 'viteplus'
 }
 
 /**

package/src/viteplus.ts

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