@voidzero-dev/vitepress-theme 4.7.1 → 4.8.0

package/package.json

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

package/src/components/oss/Footer.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import {computed, inject} from 'vue'
-import {useData} from 'vitepress'
-import { Icon } from '@iconify/vue'
+import {inject} from 'vue'
 import { themeContextKey } from '../../types/theme-context'
+import FooterNav from './FooterNav.vue'
 
 // Props for CTA section
 withDefaults(defineProps<{
@@ -17,62 +16,7 @@ withDefaults(defineProps<{
   buttonLink: '/guide/'
 })
 
-const {theme} = useData()
 const { footerBg: backgroundImage } = inject(themeContextKey)!
-
-// Social icon name mapping
-const socialIconName = (icon: string): string => {
-  const key = icon.toLowerCase()
-  if (key === 'twitter') return 'simple-icons:x'
-  return `simple-icons:${key}`
-}
-
-// Footer configuration from theme
-interface FooterLink {
-  text: string
-  link: string
-}
-
-interface FooterColumn {
-  title: string
-  items: FooterLink[]
-}
-
-interface SocialLink {
-  icon: string
-  link: string
-  label?: string
-}
-
-interface FooterConfig {
-  message?: string
-  copyright?: string
-  nav?: FooterColumn[]
-  social?: SocialLink[]
-}
-
-const footerConfig = computed<FooterConfig>(() => {
-  const footer = theme.value.footer || {}
-  return footer as FooterConfig
-})
-const footerNav = computed(() => footerConfig.value.nav || [])
-const footerSocial = computed(() => footerConfig.value.social || [])
-const footerCopyright = computed(() =>
-  footerConfig.value.copyright || `© ${new Date().getFullYear()} VoidZero Inc. All Rights Reserved.`
-)
-
-// Get display label for social link
-const getSocialLabel = (social: SocialLink): string => {
-  if (social.label) return social.label
-  const labels: Record<string, string> = {
-    github: 'GitHub',
-    discord: 'Discord',
-    bluesky: 'Bluesky',
-    twitter: 'X.com',
-    x: 'X.com',
-  }
-  return labels[social.icon.toLowerCase()] || social.icon
-}
 </script>
 
 <template>
@@ -91,39 +35,7 @@ const getSocialLabel = (social: SocialLink): string => {
           </a>
         </div>
       </div>
-      <div
-          class="px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-40 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between">
-        <div class="flex flex-col md:flex-row gap-10 md:gap-20">
-          <div v-for="column in footerNav" :key="column.title">
-            <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">{{ column.title }}</p>
-            <ul class="flex flex-col gap-3">
-              <li v-for="item in column.items" :key="item.link">
-                <a :href="item.link" class="text-white text-base">{{ item.text }}</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div v-if="footerSocial.length">
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Social</p>
-          <ul class="flex flex-col gap-3">
-            <li v-for="social in footerSocial" :key="social.link">
-              <a :href="social.link" class="text-white text-base flex gap-3 items-center" target="_blank"
-                 rel="noopener noreferrer">
-                <Icon :icon="socialIconName(social.icon)" class="size-[18px]" :aria-label="getSocialLabel(social)" />
-                {{ getSocialLabel(social) }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </section>
-    <section
-        class="wrapper wrapper--ticks border-t py-5 px-5 md:px-24 flex flex-col md:flex-row gap-3 md:gap-0 justify-between items-start md:items-center">
-      <p class="text-sm">{{ footerCopyright }}</p>
-      <div class="gap-10 text-sm hidden md:flex">
-        <!--        <a href="https://voidzero.dev/terms" class="text-grey">Terms & Conditions</a>
-                <a href="https://voidzero.dev/privacy" class="text-grey">Privacy Policy</a>-->
-      </div>
     </section>
+    <FooterNav />
   </footer>
 </template>

package/src/components/oss/FooterNav.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import {computed} from 'vue'
+import {useData} from 'vitepress'
+import { Icon } from '@iconify/vue'
+
+const {theme} = useData()
+
+// Social icon name mapping
+const socialIconName = (icon: string): string => {
+  const key = icon.toLowerCase()
+  if (key === 'twitter') return 'simple-icons:x'
+  return `simple-icons:${key}`
+}
+
+// Footer configuration from theme
+interface FooterLink {
+  text: string
+  link: string
+}
+
+interface FooterColumn {
+  title: string
+  items: FooterLink[]
+}
+
+interface SocialLink {
+  icon: string
+  link: string
+  label?: string
+}
+
+interface FooterConfig {
+  message?: string
+  copyright?: string
+  nav?: FooterColumn[]
+  social?: SocialLink[]
+}
+
+const footerConfig = computed<FooterConfig>(() => {
+  const footer = theme.value.footer || {}
+  return footer as FooterConfig
+})
+const footerNav = computed(() => footerConfig.value.nav || [])
+const footerSocial = computed(() => footerConfig.value.social || [])
+const footerCopyright = computed(() =>
+  footerConfig.value.copyright || `© ${new Date().getFullYear()} VoidZero Inc. All Rights Reserved.`
+)
+
+// Get display label for social link
+const getSocialLabel = (social: SocialLink): string => {
+  if (social.label) return social.label
+  const labels: Record<string, string> = {
+    github: 'GitHub',
+    discord: 'Discord',
+    bluesky: 'Bluesky',
+    twitter: 'X.com',
+    x: 'X.com',
+  }
+  return labels[social.icon.toLowerCase()] || social.icon
+}
+</script>
+
+<template>
+  <div>
+    <section class="wrapper wrapper--ticks border-t">
+      <div
+          class="px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-40 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between">
+        <div class="flex flex-col md:flex-row gap-10 md:gap-20">
+          <div v-for="column in footerNav" :key="column.title">
+            <p class="text-[var(--vp-c-text-2)] text-xs font-mono uppercase tracking-wide mb-8">{{ column.title }}</p>
+            <ul class="flex flex-col gap-3">
+              <li v-for="item in column.items" :key="item.link">
+                <a :href="item.link" class="text-[var(--vp-c-text-1)] text-base">{{ item.text }}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div v-if="footerSocial.length">
+          <p class="text-[var(--vp-c-text-2)] text-xs font-mono uppercase tracking-wide mb-8">Social</p>
+          <ul class="flex flex-col gap-3">
+            <li v-for="social in footerSocial" :key="social.link">
+              <a :href="social.link" class="text-[var(--vp-c-text-1)] text-base flex gap-3 items-center" target="_blank"
+                 rel="noopener noreferrer">
+                <Icon :icon="socialIconName(social.icon)" class="size-[18px]" :aria-label="getSocialLabel(social)" />
+                {{ getSocialLabel(social) }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section
+        class="wrapper wrapper--ticks border-t py-5 px-5 md:px-24 flex flex-col md:flex-row gap-3 md:gap-0 justify-between items-start md:items-center">
+      <p class="text-sm">{{ footerCopyright }}</p>
+      <div class="gap-10 text-sm hidden md:flex">
+        <!--        <a href="https://voidzero.dev/terms" class="text-grey">Terms & Conditions</a>
+                <a href="https://voidzero.dev/privacy" class="text-grey">Privacy Policy</a>-->
+      </div>
+    </section>
+  </div>
+</template>

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

@@ -9,7 +9,7 @@ import TopBanner from '@components/oss/TopBanner.vue'
 import VPSidebar from './VPSidebar.vue'
 import VPSkipLink from './VPSkipLink.vue'
 import { useData } from '@vp-composables/data'
-import { layoutInfoInjectionKey, registerWatchers } from '@vp-composables/layout'
+import { layoutInfoInjectionKey, registerWatchers, useLayout } from '@vp-composables/layout'
 import { useSidebarControl } from '@vp-composables/sidebar'
 
 const {
@@ -21,6 +21,7 @@ const {
 registerWatchers({ closeSidebar })
 
 const { frontmatter } = useData()
+const { hasSidebar } = useLayout()
 
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
@@ -41,7 +42,7 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
 
     <div class="flex flex-col min-h-screen">
       <!-- Content wrapper with borders -->
-      <div class="content-wrapper flex-1">
+      <div class="content-wrapper flex-1" :class="{ 'has-sidebar': hasSidebar }">
         <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
 
         <VPSidebar :open="isSidebarOpen">
@@ -176,4 +177,11 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
     max-width: 90rem;
   }
 }
+
+@media (min-width: 1024px) {
+  .content-wrapper.has-sidebar {
+    display: grid;
+    grid-template-columns: var(--vp-sidebar-width) 1fr;
+  }
+}
 </style>

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

@@ -82,14 +82,6 @@ const { isHome, hasSidebar } = useLayout()
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
-  }
-}
-
-@media (min-width: 1440px) {
-  .VPContent.has-sidebar {
-    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>

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

@@ -76,7 +76,7 @@ const pageName = computed(() =>
 
 @media (min-width: 1024px) {
   .VPDoc {
-    padding: 48px 32px 0;
+    padding: 0 32px 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
@@ -133,34 +133,28 @@ const pageName = computed(() =>
 }
 
 .aside-container {
-  position: fixed;
-  top: var(--vp-nav-height);
+  position: sticky;
+  top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
   padding-top: 20px;
   padding-left: 32px;
   width: 224px;
-  height: calc(100vh - var(--vp-nav-height));
+  height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px));
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-width: none;
   border-left: 1px solid var(--vp-c-divider);
 }
 
-@media (min-width: 1024px) {
-  .aside-container {
-    top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
-    height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px));
-  }
-}
-
 .aside-container::-webkit-scrollbar {
   display: none;
 }
 
 .aside-curtain {
-  position: fixed;
+  position: absolute;
   bottom: 0;
+  left: 0;
   z-index: 10;
-  width: 224px;
+  width: 100%;
   height: 32px;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
   pointer-events: none;
@@ -181,7 +175,7 @@ const pageName = computed(() =>
 
 @media (min-width: 1024px) {
   .content {
-    padding: 0 32px 128px;
+    padding: 48px 32px 128px;
   }
 }
 

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

@@ -88,6 +88,7 @@ const classes = computed(() => {
   }
 
   .VPLocalNav.has-sidebar {
+    grid-column: 1 / -1;
     padding-left: var(--vp-sidebar-width);
     border-bottom: none;
   }

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

@@ -92,16 +92,22 @@ watch(
 
 @media (min-width: 1024px) {
   .VPSidebar {
+    position: sticky;
     top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
+    bottom: unset;
     left: unset;
     padding-left: 32px;
     width: var(--vp-sidebar-width);
     max-width: 100%;
+    height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px));
     background-color: transparent;
     opacity: 1;
     visibility: visible;
     box-shadow: none;
     transform: translateX(0);
+    z-index: auto;
+    grid-row: 1 / -1;
+    align-self: start;
   }
 }
 

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

@@ -240,13 +240,16 @@ const itemIcon = useIcon(() => (props.item as any).icon)
   transform: rotate(0)/*rtl:rotate(180deg)*/;
 }
 
-.VPSidebarItem.level-0.has-icon > .items,
+.VPSidebarItem.level-0.has-icon .items {
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.VPSidebarItem.level-0 .items,
 .VPSidebarItem.level-1 .items,
 .VPSidebarItem.level-2 .items,
 .VPSidebarItem.level-3 .items,
 .VPSidebarItem.level-4 .items,
 .VPSidebarItem.level-5 .items {
-  border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
 }
 
@@ -269,6 +272,6 @@ const itemIcon = useIcon(() => (props.item as any).icon)
 }
 
 .VPSidebarItem.level-0.has-icon > .items {
-  margin-left: 6px;
+  margin-left: 8px;
 }
 </style>

package/src/index.ts

@@ -82,6 +82,7 @@ export { default as VPTeamPageSection } from "@vp-default/VPTeamPageSection.vue"
 export { default as VPTeamPageTitle } from "@vp-default/VPTeamPageTitle.vue";
 
 // Export custom layouts and components
+export { default as FooterNav } from "@components/oss/FooterNav.vue";
 export { VoidZeroTheme };
 export default VoidZeroTheme;
 

package/src/styles/marketing.css

@@ -82,11 +82,13 @@
         border-left: 5px solid transparent;
     }
     
-    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
+    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before,
+    .dark:not([data-theme]) .wrapper--ticks::before, .dark:not([data-theme]) .tick-left::before {
         border-left-color: var(--color-nickel);
     }
 
-    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
+    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after,
+    .dark:not([data-theme]) .wrapper--ticks::after, .dark:not([data-theme]) .tick-right::after {
         border-right-color: var(--color-nickel);
     }