@voidzero-dev/vitepress-theme 3.2.1 → 3.3.1

package/package.json

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

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

@@ -29,58 +29,106 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
 </script>
 
 <template>
-  <div
-    v-if="frontmatter.layout !== false"
-    class="Layout"
-    :class="frontmatter.pageClass"
-  >
+  <div v-if="frontmatter.layout !== false" class="Layout" :class="frontmatter.pageClass">
     <TopBanner />
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
     <OSSHeader />
 
-    <!-- Content wrapper with borders -->
-    <div class="content-wrapper">
-      <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
-
-      <VPSidebar :open="isSidebarOpen">
-        <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
-        <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
-      </VPSidebar>
-
-      <VPContent>
-      <template #page-top><slot name="page-top" /></template>
-      <template #page-bottom><slot name="page-bottom" /></template>
-
-      <template #not-found><slot name="not-found" /></template>
-      <template #home-hero-before><slot name="home-hero-before" /></template>
-      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
-      <template #home-hero-info><slot name="home-hero-info" /></template>
-      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
-      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
-      <template #home-hero-image><slot name="home-hero-image" /></template>
-      <template #home-hero-after><slot name="home-hero-after" /></template>
-      <template #home-features-before><slot name="home-features-before" /></template>
-      <template #home-features-after><slot name="home-features-after" /></template>
-
-      <template #doc-footer-before><slot name="doc-footer-before" /></template>
-      <template #doc-before><slot name="doc-before" /></template>
-      <template #doc-after><slot name="doc-after" /></template>
-      <template #doc-top><slot name="doc-top" /></template>
-      <template #doc-bottom><slot name="doc-bottom" /></template>
-
-      <template #aside-top><slot name="aside-top" /></template>
-      <template #aside-bottom><slot name="aside-bottom" /></template>
-      <template #aside-outline-before><slot name="aside-outline-before" /></template>
-      <template #aside-outline-after><slot name="aside-outline-after" /></template>
-      <template #aside-ads-before><slot name="aside-ads-before" /></template>
-      <template #aside-ads-after><slot name="aside-ads-after" /></template>
-    </VPContent>
+    <div class="flex flex-col min-h-screen">
+      <!-- Content wrapper with borders -->
+      <div class="content-wrapper flex-1">
+        <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
+
+        <VPSidebar :open="isSidebarOpen">
+          <template #sidebar-nav-before>
+            <slot name="sidebar-nav-before" />
+          </template>
+          <template #sidebar-nav-after>
+            <slot name="sidebar-nav-after" />
+          </template>
+        </VPSidebar>
+
+        <VPContent>
+          <template #page-top>
+            <slot name="page-top" />
+          </template>
+          <template #page-bottom>
+            <slot name="page-bottom" />
+          </template>
+
+          <template #not-found>
+            <slot name="not-found" />
+          </template>
+          <template #home-hero-before>
+            <slot name="home-hero-before" />
+          </template>
+          <template #home-hero-info-before>
+            <slot name="home-hero-info-before" />
+          </template>
+          <template #home-hero-info>
+            <slot name="home-hero-info" />
+          </template>
+          <template #home-hero-info-after>
+            <slot name="home-hero-info-after" />
+          </template>
+          <template #home-hero-actions-after>
+            <slot name="home-hero-actions-after" />
+          </template>
+          <template #home-hero-image>
+            <slot name="home-hero-image" />
+          </template>
+          <template #home-hero-after>
+            <slot name="home-hero-after" />
+          </template>
+          <template #home-features-before>
+            <slot name="home-features-before" />
+          </template>
+          <template #home-features-after>
+            <slot name="home-features-after" />
+          </template>
+
+          <template #doc-footer-before>
+            <slot name="doc-footer-before" />
+          </template>
+          <template #doc-before>
+            <slot name="doc-before" />
+          </template>
+          <template #doc-after>
+            <slot name="doc-after" />
+          </template>
+          <template #doc-top>
+            <slot name="doc-top" />
+          </template>
+          <template #doc-bottom>
+            <slot name="doc-bottom" />
+          </template>
+
+          <template #aside-top>
+            <slot name="aside-top" />
+          </template>
+          <template #aside-bottom>
+            <slot name="aside-bottom" />
+          </template>
+          <template #aside-outline-before>
+            <slot name="aside-outline-before" />
+          </template>
+          <template #aside-outline-after>
+            <slot name="aside-outline-after" />
+          </template>
+          <template #aside-ads-before>
+            <slot name="aside-ads-before" />
+          </template>
+          <template #aside-ads-after>
+            <slot name="aside-ads-after" />
+          </template>
+        </VPContent>
+      </div>
+
+      <VPFooter />
+      <slot name="layout-bottom" />
     </div>
-
-    <VPFooter />
-    <slot name="layout-bottom" />
   </div>
   <Content v-else />
 </template>

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

@@ -25,6 +25,13 @@ defineOptions({ inheritAttrs: false })
     <VPLink
       v-bind="$attrs"
       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"
+      :class="{
+        active: isActive(
+          page.relativePath,
+          item.activeMatch || href,
+          !!item.activeMatch
+        )
+      }"
       :href
       :target="item.target"
       :rel="item.rel"
@@ -42,4 +49,13 @@ defineOptions({ inheritAttrs: false })
   border-top: 1px solid var(--vp-c-divider);
   padding: 12px 12px 0;
 }
+
+.link:hover {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.link.active {
+  color: var(--vp-c-brand-1);
+}
 </style>

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

@@ -20,13 +20,25 @@ const href = computed(() =>
 
 <template>
   <VPLink
-    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"
-    :no-icon="item.noIcon"
-    tabindex="0"
-  >
+    class="flex items-center px-3 py-2 text-base font-heading text-primary
+     dark:text-white hover:opacity-85 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
+    :class="{
+      active: isActive(
+        page.relativePath,
+        item.activeMatch || href,
+        !!item.activeMatch
+      )
+    }" :href :target="item.target" :rel="item.rel" :no-icon="item.noIcon" tabindex="0">
     <span v-html="item.text"></span>
   </VPLink>
 </template>
+
+<style scoped>
+.link.active {
+  color: var(--vp-c-brand-1);
+}
+
+.link:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/src/styles/base.css

@@ -55,6 +55,7 @@ body {
   image-rendering: high-quality;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--vp-c-bg);
 }
 
 /* Default light mode for marketing */
@@ -82,6 +83,14 @@ html.dark:not([data-theme]) .docs-layout {
   color: var(--vp-c-text-1);
 }
 
+html.dark [img-light] {
+  display: none;
+}
+
+html:not(.dark) [img-dark] {
+  display: none;
+}
+
 /* Explicit dark sections in marketing (via data-theme="dark") */
 [data-theme="dark"] {
   background-color: var(--color-primary);