@voidzero-dev/vitepress-theme 2.0.0 → 2.1.0

package/package.json

@@ -1,20 +1,17 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "files": [
     "src"
   ],
   "sideEffects": [
     "*.css"
   ],
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build"
-  },
   "peerDependencies": {
     "@docsearch/css": "^4.3.2",
     "@docsearch/js": "^4.3.2",
@@ -62,5 +59,9 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4",
     "vue-tsc": "^3.1.2"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
   }
-}
+}

package/src/aliases.js

@@ -0,0 +1,14 @@
+import { resolve } from "path";
+
+const __dirname = import.meta.dirname;
+
+export default {
+  "@assets": resolve(__dirname, "vitepress/assets"),
+  "@components": resolve(__dirname, "vitepress/components"),
+  "@vp-default": resolve(__dirname, "vitepress/components/vitepress-default"),
+  "@vp-composables": resolve(
+    __dirname,
+    "vitepress/composables/vitepress-default"
+  ),
+  "@vp-support": resolve(__dirname, "vitepress/support/vitepress-default"),
+};

package/src/vitepress/assets/clients/clickup.svg

@@ -0,0 +1,5 @@
+<svg width="256" height="64" viewBox="0 0 256 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.411092 50.1719C-0.214959 49.4086 -0.0780078 48.285 0.691788 47.667L7.98408 41.8119C8.62017 41.3012 9.55015 41.4165 10.0688 42.0462C15.022 48.0596 20.278 50.8435 26.0957 50.8435C31.8732 50.8435 36.9859 48.099 41.7222 42.1523C42.2305 41.5141 43.1582 41.3821 43.8035 41.8815L51.1954 47.602C51.976 48.2061 52.1332 49.3268 51.5203 50.1004C44.5175 58.9398 35.9435 63.597 26.0957 63.597C16.2766 63.597 7.62609 58.9689 0.411092 50.1719Z" fill="#202020"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4487 17.1674C26.1739 16.924 25.7606 16.9239 25.4855 17.1671L9.62895 31.1881C9.02279 31.7241 8.09562 31.6619 7.56651 31.0497L1.38195 23.8942C0.860213 23.2906 0.922623 22.3792 1.52177 21.8523L25.0072 1.19951C25.5562 0.716746 26.3783 0.716854 26.9271 1.19976L50.4178 21.8682C51.0173 22.3957 51.079 23.308 50.556 23.9114L44.3565 31.0633C43.8267 31.6744 42.9001 31.7356 42.2946 31.1994L26.4487 17.1674Z" fill="#202020"/>
+<path d="M83.1535 52.7596C77.5333 52.7596 72.8498 50.9382 69.051 47.2955C65.2522 43.6008 63.3788 38.8652 63.3788 33.0889C63.3788 27.2606 65.3042 22.473 69.103 18.7262C72.9539 14.9274 77.6374 13.054 83.2055 13.054C90.0747 13.054 96.1632 16.0202 99.7018 20.6517L93.5092 27.1565C90.543 23.9821 87.3166 22.3689 83.83 22.3689C80.8638 22.3689 78.418 23.3577 76.3885 25.3872C74.411 27.4167 73.4223 29.9666 73.4223 33.0369C73.4223 36.0031 74.411 38.5009 76.3885 40.5305C78.418 42.5079 80.8638 43.4967 83.778 43.4967C87.5768 43.4967 90.9073 41.8314 93.6653 38.553L100.118 44.7456C98.3488 47.0873 95.955 49.0128 92.9888 50.5219C90.0226 52.031 86.7442 52.7596 83.1535 52.7596ZM111.036 12.4816V52.1871H101.877V12.4816H111.036ZM119.717 20.9119C116.646 20.9119 114.409 18.6742 114.409 15.6039C114.409 12.6377 116.75 10.4 119.717 10.4C122.683 10.4 124.972 12.6377 124.972 15.6039C124.972 18.6742 122.683 20.9119 119.717 20.9119ZM124.348 23.4618V52.1871H115.137V23.4618H124.348ZM141.979 52.8116C137.452 52.8116 133.809 51.4066 130.947 48.5965C128.137 45.7864 126.732 42.1957 126.732 37.7724C126.732 33.3491 128.137 29.7584 130.999 26.9483C133.861 24.1383 137.556 22.7332 142.135 22.7332C148.12 22.7332 153.376 25.6474 155.821 31.1114L148.484 34.9623C147.027 32.5165 144.997 31.2676 142.343 31.2676C140.418 31.2676 138.857 31.892 137.608 33.141C136.411 34.3899 135.786 35.9511 135.786 37.7724C135.786 41.5712 138.545 44.3813 142.239 44.3813C144.893 44.3813 147.339 42.9242 148.38 40.6866L155.717 45.0578C153.219 49.8454 148.068 52.8116 141.979 52.8116ZM187.659 52.1871H176.731L168.249 40.7907L166.896 42.0396V52.1871H157.737V12.4816H166.896V31.788L175.534 23.4618H186.722L174.389 35.0144L187.659 52.1871ZM188.273 37.252V13.7305H198.057V37.0959C198.057 41.4151 200.555 43.4967 204.145 43.4967C207.684 43.4967 210.182 41.311 210.182 37.0959V13.7305H220.017V37.252C220.017 48.5965 212.159 52.8637 204.145 52.8637C196.183 52.8637 188.273 48.5965 188.273 37.252ZM241.759 22.7332C245.87 22.7332 249.201 24.1903 251.855 27.1045C254.509 29.9666 255.81 33.5573 255.81 37.7724C255.81 41.9876 254.457 45.5782 251.803 48.5444C249.149 51.4586 245.818 52.9157 241.811 52.9157C238.637 52.9157 235.879 51.8749 233.641 49.7934V63.9999H224.43V23.4618H233.485V26.1157C235.723 23.8781 238.481 22.7332 241.759 22.7332ZM246.443 37.8765C246.443 34.1297 243.737 31.2676 239.99 31.2676C236.243 31.2676 233.485 34.1297 233.485 37.8765C233.485 39.6978 234.109 41.259 235.306 42.56C236.555 43.8609 238.116 44.4854 239.99 44.4854C241.863 44.4854 243.424 43.8609 244.621 42.56C245.818 41.259 246.443 39.6978 246.443 37.8765Z" fill="#202020"/>
+</svg>

package/src/vitepress/assets/clients/stripe.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 468 222.5;" xml:space="preserve" viewBox="54 36 360.02 149.84"> <style type="text/css"> 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#635BFF;} </style> <g> 	<path class="st0" d="M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 		c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z 		 M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z"></path> 	<path class="st0" d="M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 		c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 		c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z"></path> 	<polygon class="st0" points="223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 	"></polygon> 	<rect x="223.8" y="69.3" class="st0" width="25.1" height="87.5"></rect> 	<path class="st0" d="M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z"></path> 	<path class="st0" d="M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 		c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z"></path> 	<path class="st0" d="M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 		C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 		c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z"></path> </g> </svg>

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

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, inject} from 'vue'
 import {useData} from 'vitepress'
 
-// Import background images for all variants
-import viteFooterBg from '@assets/vite/footer-background.jpg'
-import vitestFooterBg from '@assets/vitest/footer-background.jpg'
-import rolldownFooterBg from '@assets/rolldown/footer-background.jpg'
-import oxcFooterBg from '@assets/oxc/footer-background.jpg'
-
 // Social icons
 import githubIcon from '@assets/social/github-light.svg'
 import discordIcon from '@assets/social/discord-light.svg'
 import blueskyIcon from '@assets/social/bluesky-light.svg'
 import twitterIcon from '@assets/social/twitter-light.svg'
+import { themeContextKey } from '../../types/theme-context'
 
 // Props for CTA section
 withDefaults(defineProps<{
@@ -28,19 +23,7 @@ withDefaults(defineProps<{
 })
 
 const {theme} = useData()
-
-// Background image mapping based on variant
-const backgroundMap = {
-  vite: viteFooterBg,
-  vitest: vitestFooterBg,
-  rolldown: rolldownFooterBg,
-  oxc: oxcFooterBg,
-} as const
-
-type Variant = keyof typeof backgroundMap
-
-const variant = computed(() => (theme.value.variant as Variant) || 'vite')
-const backgroundImage = computed(() => backgroundMap[variant.value] || viteFooterBg)
+const { footerBg: backgroundImage } = inject(themeContextKey)!
 
 // Social icon mapping
 const socialIconMap: Record<string, string> = {
@@ -109,7 +92,7 @@ const getSocialLabel = (social: SocialLink): string => {
     <section class="wrapper">
       <div class="relative w-full">
         <img :src="backgroundImage" alt="Footer background" inert loading="lazy"
-             class="absolute inset-0 w-full h-full object-cover z-0 md:hidden"/>
+             class="absolute inset-0 w-full h-full object-cover z-0"/>
         <div
             class="relative z-10 w-full sm:w-2xl flex flex-col justify-start items-center gap-5 px-5 sm:px-0 py-10 md:py-30 mx-auto">
           <h2 class="text-center text-white text-balance">{{ heading }}</h2>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import {useData, useRoute} from 'vitepress'
+import { useData, useRoute } from 'vitepress'
 import { normalizeLink } from '@vp-support/utils'
-import {ref, computed, onMounted, onUnmounted, watch, nextTick} from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, inject } from 'vue'
 import { getSearchProvider } from '@vp-support/search-config'
+import { themeContextKey } from '../../types/theme-context'
 
 // Import VitePress header components
 import VPNavBarSearch from '@vp-default/VPNavBarSearch.vue'
@@ -14,17 +15,7 @@ import VPNavBarExtra from '@vp-default/VPNavBarExtra.vue'
 import VPSwitchAppearance from '@vp-default/VPSwitchAppearance.vue'
 import { useLangs } from '@vp-composables/langs'
 
-// Import project logos
-import viteDark from '@assets/logos/vite-dark.svg'
-import viteLight from '@assets/logos/vite-light.svg'
-import vitestDark from '@assets/logos/vitest-dark.svg'
-import vitestLight from '@assets/logos/vitest-light.svg'
-import rolldownDark from '@assets/logos/rolldown-dark.svg'
-import rolldownLight from '@assets/logos/rolldown-light.svg'
-import oxcDark from '@assets/logos/oxc-dark.svg'
-import oxcLight from '@assets/logos/oxc-light.svg'
-
-const {theme, site, frontmatter} = useData()
+const { theme, frontmatter } = useData()
 const nav = theme.value.nav
 
 const route = useRoute()
@@ -35,28 +26,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 // Hide appearance toggle when theme is forced via frontmatter
 const isForcedTheme = computed(() => !!frontmatter.value.theme)
 
-// Logo mapping based on variant
-const logoMap = {
-  vite: { dark: viteDark, light: viteLight },
-  vitest: { dark: vitestDark, light: vitestLight },
-  rolldown: { dark: rolldownDark, light: rolldownLight },
-  oxc: { dark: oxcDark, light: oxcLight },
-} as const
-
-type LogoVariant = keyof typeof logoMap
-
-const variant = computed(() => (theme.value.variant as LogoVariant) || 'vite')
-const logoDark = computed(() => logoMap[variant.value]?.dark || viteDark)
-const logoLight = computed(() => logoMap[variant.value]?.light || viteLight)
-const logoAlt = computed(() => {
-  const names: Record<LogoVariant, string> = {
-    vite: 'Vite',
-    vitest: 'Vitest',
-    rolldown: 'Rolldown',
-    oxc: 'OXC',
-  }
-  return names[variant.value] || 'Vite'
-})
+const { logoDark, logoLight, logoAlt } = inject(themeContextKey)!
 
 // Check if we're on a marketing page (non-doc layout)
 const isMarketingPage = computed(() => {
@@ -157,7 +127,7 @@ const focusTrap = {
     if (!mobileMenu) return
 
     const focusableElements = mobileMenu.querySelectorAll(
-        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
     )
 
     if (focusableElements.length === 0) return
@@ -215,13 +185,15 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div :class="isMarketingPage ? 'relative w-full z-50' : 'relative w-full z-50 lg:fixed lg:left-0 lg:right-0 lg:top-[var(--vp-banner-height,0)]'">
-    <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">
+  <div
+    :class="isMarketingPage ? 'relative w-full z-50' : 'relative w-full z-50 lg:fixed lg:left-0 lg:right-0 lg:top-[var(--vp-banner-height,0)]'">
+    <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">
-          <img class="h-4 block dark:hidden" :src="logoDark" :alt="logoAlt"/>
-          <img class="h-4 hidden dark:block" :src="logoLight" :alt="logoAlt"/>
+          <img class="h-4 block dark:hidden" :src="logoDark" :alt="logoAlt" />
+          <img class="h-4 hidden dark:block" :src="logoLight" :alt="logoAlt" />
         </a>
 
         <!-- Desktop navigation -->
@@ -250,34 +222,30 @@ onUnmounted(() => {
         </div>
 
         <!-- Mobile search icon - visible <1024px, hidden if search unavailable -->
-        <button
-            v-if="isSearchAvailable"
-            @click="triggerSearch"
-            aria-label="Search"
-            class="lg:hidden p-2 text-primary dark:text-white hover:opacity-70 transition-opacity cursor-pointer"
-            type="button"
-        >
+        <button v-if="isSearchAvailable" @click="triggerSearch" aria-label="Search"
+          class="lg:hidden p-2 text-primary dark:text-white hover:opacity-70 transition-opacity cursor-pointer"
+          type="button">
           <svg class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path
+              d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
+              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
         </button>
 
         <!-- Mobile hamburger - visible <1024px -->
-        <button
-            @click="toggleMobileMenu"
-            :aria-expanded="mobileMenuOpen"
-            aria-controls="mobile-menu"
-            aria-label="Toggle navigation menu"
-            class="lg:hidden p-2 -mr-2 text-primary dark:text-white hover:opacity-70 transition-opacity cursor-pointer"
-            type="button"
-        >
-          <svg v-if="!mobileMenuOpen" class="size-6 block dark:hidden" viewBox="0 0 18 8" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0 0.75H18" stroke="#08060D" stroke-width="1.5"/>
-            <path d="M0 6.75H18" stroke="#08060D" stroke-width="1.5"/>
+        <button @click="toggleMobileMenu" :aria-expanded="mobileMenuOpen" aria-controls="mobile-menu"
+          aria-label="Toggle navigation menu"
+          class="lg:hidden p-2 -mr-2 text-primary dark:text-white hover:opacity-70 transition-opacity cursor-pointer"
+          type="button">
+          <svg v-if="!mobileMenuOpen" class="size-6 block dark:hidden" viewBox="0 0 18 8"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 0.75H18" stroke="#08060D" stroke-width="1.5" />
+            <path d="M0 6.75H18" stroke="#08060D" stroke-width="1.5" />
           </svg>
-          <svg v-if="!mobileMenuOpen" class="size-6 hidden dark:block" viewBox="0 0 18 8" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0 0.75H18" stroke="#FFFFFF" stroke-width="1.5"/>
-            <path d="M0 6.75H18" stroke="#FFFFFF" stroke-width="1.5"/>
+          <svg v-if="!mobileMenuOpen" class="size-6 hidden dark:block" viewBox="0 0 18 8"
+            xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 0.75H18" stroke="#FFFFFF" stroke-width="1.5" />
+            <path d="M0 6.75H18" stroke="#FFFFFF" stroke-width="1.5" />
           </svg>
 
         </button>
@@ -288,52 +256,33 @@ onUnmounted(() => {
     <div class="wrapper relative h-0 tick-left tick-right"></div>
 
     <!-- Mobile Menu Overlay - Full Screen -->
-    <div
-        v-if="mobileMenuOpen"
-        id="mobile-menu"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Mobile navigation menu"
-        :data-theme="isForcedTheme ? 'dark' : undefined"
-        class="lg:hidden fixed inset-0 z-[1001] bg-white dark:bg-primary"
-    >
+    <div v-if="mobileMenuOpen" id="mobile-menu" role="dialog" aria-modal="true" aria-label="Mobile navigation menu"
+      :data-theme="isForcedTheme ? 'dark' : undefined"
+      class="lg:hidden fixed inset-0 z-[1001] bg-white dark:bg-primary">
       <section class="wrapper animate-fade-in">
 
         <!-- Internal Header with Logo, Search and Close Button -->
         <div class="w-full pl-5 pr-5 py-5 lg:py-7 flex items-center justify-between">
           <a href="/">
-            <img class="h-4 block dark:hidden" :src="logoDark" :alt="logoAlt"/>
-            <img class="h-4 hidden dark:block" :src="logoLight" :alt="logoAlt"/>
+            <img class="h-4 block dark:hidden" :src="logoDark" :alt="logoAlt" />
+            <img class="h-4 hidden dark:block" :src="logoLight" :alt="logoAlt" />
           </a>
           <div class="flex items-center gap-2">
             <!-- Search button - hidden if search unavailable -->
-            <button
-                v-if="isSearchAvailable"
-                @click="triggerSearch"
-                aria-label="Search"
-                class="p-2 text-primary dark:text-white hover:opacity-70 transition-opacity cursor-pointer"
-                type="button"
-            >
+            <button v-if="isSearchAvailable" @click="triggerSearch" aria-label="Search"
+              class="p-2 text-primary dark:text-white hover:opacity-70 transition-opacity cursor-pointer" type="button">
               <svg class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path
+                  d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
+                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
             </button>
             <!-- Close button -->
-            <button
-                @click="closeMobileMenu"
-                aria-label="Close navigation menu"
-                class="p-2 -mr-2 text-primary dark:text-white hover:opacity-70 transition-opacity"
-                type="button"
-            >
-              <svg
-                  class="size-6 cursor-pointer"
-                  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"/>
+            <button @click="closeMobileMenu" aria-label="Close navigation menu"
+              class="p-2 -mr-2 text-primary dark:text-white hover:opacity-70 transition-opacity" type="button">
+              <svg class="size-6 cursor-pointer" 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>
@@ -341,62 +290,46 @@ onUnmounted(() => {
 
         <!-- Scrollable content container -->
         <div
-            class="overflow-y-auto flex flex-col [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-            style="height: calc(100vh - 88px);">
+          class="overflow-y-auto flex flex-col [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+          style="height: calc(100vh - 88px);">
           <!-- Navigation Items - Top Section -->
           <nav class="flex-1 w-full pt-6 pb-8">
             <ul class="space-y-1">
               <li v-for="(navItem, index) in nav" :key="navItem.text">
                 <!-- Dropdown item - render as accordion -->
                 <template v-if="isDropdown(navItem)">
-                  <button
-                      @click="toggleAccordion(index)"
-                      class="w-full flex items-center justify-between py-3 px-4 text-lg font-sans text-primary dark:text-white"
-                      :aria-expanded="expandedAccordions.has(index)"
-                  >
+                  <button @click="toggleAccordion(index)"
+                    class="w-full flex items-center justify-between py-3 px-4 text-lg font-sans text-primary dark:text-white"
+                    :aria-expanded="expandedAccordions.has(index)">
                     <span>{{ navItem.text }}</span>
-                    <svg
-                        class="size-4 transition-transform duration-200"
-                        :class="{ 'rotate-180': expandedAccordions.has(index) }"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                    >
+                    <svg class="size-4 transition-transform duration-200"
+                      :class="{ 'rotate-180': expandedAccordions.has(index) }" viewBox="0 0 24 24" fill="none"
+                      stroke="currentColor" stroke-width="2">
                       <path d="M6 9l6 6 6-6" />
                     </svg>
                   </button>
                   <!-- Accordion content -->
-                  <ul
-                      v-show="expandedAccordions.has(index)"
-                      class="pl-4 space-y-1"
-                  >
+                  <ul v-show="expandedAccordions.has(index)" class="pl-4 space-y-1">
                     <template v-for="childItem in navItem.items" :key="childItem.link || childItem.text">
                       <!-- Direct link item -->
                       <li v-if="'link' in childItem">
-                        <a
-                            :href="normalizeLink(childItem.link)"
-                            @click="closeMobileMenu"
-                            :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(childItem.link) }"
-                            class="block py-2 px-4 text-base font-sans text-grey dark:text-white/80 hover:text-primary dark:hover:text-white"
-                        >
+                        <a :href="normalizeLink(childItem.link)" @click="closeMobileMenu"
+                          :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(childItem.link) }"
+                          class="block py-2 px-4 text-base font-sans text-grey dark:text-white/80 hover:text-primary dark:hover:text-white">
                           {{ childItem.text }}
                         </a>
                       </li>
                       <!-- Nested group/section (items with dividers) -->
                       <li v-else-if="'items' in childItem">
-                        <p v-if="childItem.text" class="pt-3 pb-1 px-4 text-xs font-semibold uppercase tracking-wider text-grey/70 dark:text-white/50">
+                        <p v-if="childItem.text"
+                          class="pt-3 pb-1 px-4 text-xs font-semibold uppercase tracking-wider text-grey/70 dark:text-white/50">
                           {{ childItem.text }}
                         </p>
                         <ul class="space-y-1">
                           <li v-for="nestedItem in childItem.items" :key="nestedItem.link || nestedItem.text">
-                            <a
-                                v-if="nestedItem.link"
-                                :href="normalizeLink(nestedItem.link)"
-                                @click="closeMobileMenu"
-                                :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(nestedItem.link) }"
-                                class="block py-2 px-4 text-base font-sans text-grey dark:text-white/80 hover:text-primary dark:hover:text-white"
-                            >
+                            <a v-if="nestedItem.link" :href="normalizeLink(nestedItem.link)" @click="closeMobileMenu"
+                              :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(nestedItem.link) }"
+                              class="block py-2 px-4 text-base font-sans text-grey dark:text-white/80 hover:text-primary dark:hover:text-white">
                               {{ nestedItem.text }}
                             </a>
                           </li>
@@ -406,20 +339,13 @@ onUnmounted(() => {
                   </ul>
                 </template>
                 <!-- Regular link item -->
-                <a
-                    v-else-if="navItem.link"
-                    :href="normalizeLink(navItem.link)"
-                    @click="closeMobileMenu"
-                    :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(navItem.link) }"
-                    class="block py-3 px-4 text-lg font-sans text-primary dark:text-white"
-                >
+                <a v-else-if="navItem.link" :href="normalizeLink(navItem.link)" @click="closeMobileMenu"
+                  :class="{ 'bg-primary/10 dark:bg-white/10': route.path === normalizeLink(navItem.link) }"
+                  class="block py-3 px-4 text-lg font-sans text-primary dark:text-white">
                   {{ navItem.text }}
                 </a>
                 <!-- Nav item without link (shouldn't happen, but defensive) -->
-                <span
-                    v-else
-                    class="block py-3 px-4 text-lg font-sans text-primary dark:text-white"
-                >
+                <span v-else class="block py-3 px-4 text-lg font-sans text-primary dark:text-white">
                   {{ navItem.text }}
                 </span>
               </li>
@@ -427,34 +353,24 @@ onUnmounted(() => {
           </nav>
 
           <!-- Bottom Section - Language + Appearance + Social -->
-          <div class="w-full pt-6 pb-12 border-t border-stroke dark:border-nickel relative tick-left tick-right mt-auto">
+          <div
+            class="w-full pt-6 pb-12 border-t border-stroke dark:border-nickel relative tick-left tick-right mt-auto">
             <div class="space-y-6">
               <!-- Language Selector (Accordion) -->
               <div v-if="localeLinks.length && currentLang.label" class="px-4">
-                <button
-                    @click="languageMenuOpen = !languageMenuOpen"
-                    class="w-full flex items-center justify-between text-grey dark:text-white/80 text-sm font-medium"
-                    :aria-expanded="languageMenuOpen"
-                >
+                <button @click="languageMenuOpen = !languageMenuOpen"
+                  class="w-full flex items-center justify-between text-grey dark:text-white/80 text-sm font-medium"
+                  :aria-expanded="languageMenuOpen">
                   <span>{{ theme.langMenuLabel || 'Language' }}</span>
-                  <svg
-                      class="size-4 transition-transform duration-200"
-                      :class="{ 'rotate-180': languageMenuOpen }"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                  >
+                  <svg class="size-4 transition-transform duration-200" :class="{ 'rotate-180': languageMenuOpen }"
+                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M6 9l6 6 6-6" />
                   </svg>
                 </button>
                 <ul v-show="languageMenuOpen" class="mt-3 space-y-1">
                   <li v-for="locale in localeLinks" :key="locale.link">
-                    <a
-                        :href="locale.link"
-                        @click="closeMobileMenu"
-                        class="block py-2 text-sm text-primary dark:text-white hover:opacity-70 transition-opacity"
-                    >
+                    <a :href="locale.link" @click="closeMobileMenu"
+                      class="block py-2 text-sm text-primary dark:text-white hover:opacity-70 transition-opacity">
                       {{ locale.text }}
                     </a>
                   </li>
@@ -469,33 +385,18 @@ 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"
-                >
+                <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"
-                >
+                <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"
-                >
+                <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>
@@ -513,6 +414,7 @@ onUnmounted(() => {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }

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

@@ -179,13 +179,13 @@ const getBackerEmptySlots = (itemCount: number, minSlots: number = 30) => {
 
 <template>
   <div class="wrapper wrapper--ticks border-t py-14 sm:py-30 px-5 sm:px-10">
-    <div class="flex flex-col md:flex-row justify-between items-center gap-8 md:gap-20 text-center md:text-left">
+    <div class="flex flex-col md:flex-row justify-between items-center gap-8 md:gap-20 text-center md:text-left md:pl-15">
       <div class="flex flex-col gap-3">
         <h3 class="text-white max-w-xl text-balance">{{ heading }}</h3>
         <p class="max-w-lg text-white/70 text-balance">{{ description }}</p>
         <a :href="sponsorLink" target="_blank" class="button w-fit mt-8 mx-auto md:mx-0">{{ sponsorLinkText }}</a>
       </div>
-      <div class="flex gap-8 md:gap-12 items-start justify-center md:justify-start md:pr-20">
+      <div class="flex gap-8 md:gap-12 items-start justify-center md:justify-start md:pr-25">
         <img src="../../assets/vite/vite-by-voidzero.png" alt="Brought to you by VoidZero" class="h-44 max-w-full object-contain mt-10 md:mt-0"/>
       </div>
     </div>
@@ -396,4 +396,4 @@ const getBackerEmptySlots = (itemCount: number, minSlots: number = 30) => {
   margin-right: -1px;
   margin-bottom: -1px;
 }
-</style>
+</style>