@voidzero-dev/vitepress-theme 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -15,20 +15,12 @@
     "*.css"
   ],
   "peerDependencies": {
-    "@docsearch/css": "^4.3.2",
-    "@docsearch/js": "^4.3.2",
     "vitepress": "^2.0.0-alpha.12",
     "vue": "^3.5.0"
   },
-  "peerDependenciesMeta": {
-    "@docsearch/css": {
-      "optional": true
-    },
-    "@docsearch/js": {
-      "optional": true
-    }
-  },
   "dependencies": {
+    "@docsearch/css": "^4.3.2",
+    "@docsearch/js": "^4.3.2",
     "@rive-app/canvas": "^2.31.6",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",

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/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);