@voidzero-dev/vitepress-theme 2.0.0 → 2.1.0

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

@@ -1,560 +0,0 @@
-<script setup lang="ts">
-import {useData, useRoute} from 'vitepress'
-import {ref, onMounted, onUnmounted, watch, nextTick, computed} from 'vue'
-import 'vue3-carousel/carousel.css'
-import Megamenu from './Megamenu.vue'
-
-interface FeaturedArticle {
-  title: string
-  url?: string
-  link?: string
-  cover?: string
-  image?: string
-}
-
-interface GithubStat {
-  repo: string
-  stars: number
-  contributors: number
-}
-
-interface Props {
-  featuredArticles?: FeaturedArticle[]
-  githubStats?: GithubStat[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  featuredArticles: () => [],
-  githubStats: () => []
-})
-
-const {theme} = useData()
-const nav = theme.value.nav
-
-const route = useRoute()
-
-// Calculate total GitHub stars from all repos
-const totalGithubStars = computed(() => {
-  if (!props.githubStats || props.githubStats.length === 0) {
-    return 0
-  }
-  return props.githubStats.reduce((sum, stat) => sum + stat.stars, 0)
-})
-
-// Format stars for display (e.g., 103.6k)
-const formattedStars = computed(() => {
-  const stars = totalGithubStars.value
-  if (stars >= 1000000) {
-    return (stars / 1000000).toFixed(1) + 'M'
-  } else if (stars >= 1000) {
-    return (stars / 1000).toFixed(1) + 'k'
-  }
-  return stars.toString()
-})
-
-// Megamenu state
-const megamenuOpen = ref(false)
-const activeMegamenuItem = ref<string | null>(null)
-const megamenuRef = ref<HTMLElement | null>(null)
-const hoverTimeout = ref<number | null>(null)
-
-// Mobile menu state
-const mobileMenuOpen = ref(false)
-const expandedMobileItem = ref<string | null>(null)
-
-// Close megamenu when clicking outside
-const handleClickOutside = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-  if (megamenuRef.value && !megamenuRef.value.contains(target)) {
-    closeMegamenu()
-  }
-}
-
-// Handle keyboard navigation
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Escape') {
-    if (mobileMenuOpen.value) {
-      closeMobileMenu()
-    } else if (megamenuOpen.value) {
-      closeMegamenu()
-    }
-  }
-}
-
-// Open megamenu for a specific nav item
-const openMegamenu = (navItemLink: string) => {
-  if (hoverTimeout.value) {
-    clearTimeout(hoverTimeout.value)
-    hoverTimeout.value = null
-  }
-  activeMegamenuItem.value = navItemLink
-  megamenuOpen.value = true
-}
-
-// Close megamenu with optional delay
-const closeMegamenu = (delay: number = 0) => {
-  if (delay > 0) {
-    hoverTimeout.value = window.setTimeout(() => {
-      megamenuOpen.value = false
-      activeMegamenuItem.value = null
-    }, delay)
-  } else {
-    if (hoverTimeout.value) {
-      clearTimeout(hoverTimeout.value)
-      hoverTimeout.value = null
-    }
-    megamenuOpen.value = false
-    activeMegamenuItem.value = null
-  }
-}
-
-// Handle nav item hover (desktop)
-const handleNavItemMouseEnter = (navItem: any) => {
-  if (navItem.megamenu) {
-    openMegamenu(navItem.link)
-  } else {
-    closeMegamenu(200)
-  }
-}
-
-// Handle nav item hover leave
-const handleNavItemMouseLeave = () => {
-  closeMegamenu(200)
-}
-
-// Handle megamenu hover (keep it open)
-const handleMegamenuMouseEnter = () => {
-  if (hoverTimeout.value) {
-    clearTimeout(hoverTimeout.value)
-    hoverTimeout.value = null
-  }
-}
-
-// Handle megamenu leave
-const handleMegamenuMouseLeave = () => {
-  closeMegamenu(200)
-}
-
-// Toggle megamenu on click (mobile)
-const toggleMegamenu = (navItem: any) => {
-  if (navItem.megamenu) {
-    if (activeMegamenuItem.value === navItem.link) {
-      closeMegamenu()
-    } else {
-      openMegamenu(navItem.link)
-    }
-  }
-}
-
-// Body scroll lock for mobile menu
-const lockBodyScroll = () => {
-  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
-  document.body.style.overflow = 'hidden'
-  document.body.style.position = 'fixed'
-  document.body.style.width = '100%'
-  document.body.style.top = '0'
-  if (scrollbarWidth > 0) {
-    document.body.style.paddingRight = `${scrollbarWidth}px`
-  }
-}
-
-const unlockBodyScroll = () => {
-  document.body.style.overflow = ''
-  document.body.style.position = ''
-  document.body.style.width = ''
-  document.body.style.top = ''
-  document.body.style.paddingRight = ''
-}
-
-// Toggle mobile menu
-const toggleMobileMenu = () => {
-  mobileMenuOpen.value = !mobileMenuOpen.value
-  if (mobileMenuOpen.value) {
-    lockBodyScroll()
-    expandedMobileItem.value = null
-  } else {
-    unlockBodyScroll()
-    expandedMobileItem.value = null
-  }
-}
-
-// Easter egg: right-click logo to open Google Drive
-const handleLogoRightClick = (event: MouseEvent) => {
-  event.preventDefault()
-  window.open('https://drive.google.com/drive/folders/19FVA6toa2elRXRXO16wrmLn1Rsbhj2Te', '_blank')
-}
-
-// Toggle accordion item in mobile menu
-const toggleMobileAccordion = (navItemLink: string) => {
-  if (expandedMobileItem.value === navItemLink) {
-    expandedMobileItem.value = null
-  } else {
-    expandedMobileItem.value = navItemLink
-  }
-}
-
-// Close mobile menu
-const closeMobileMenu = () => {
-  mobileMenuOpen.value = false
-  expandedMobileItem.value = null
-  unlockBodyScroll()
-}
-
-// Focus trap for mobile menu
-const focusTrap = {
-  firstFocusableEl: null as HTMLElement | null,
-  lastFocusableEl: null as HTMLElement | null,
-
-  activate: () => {
-    const mobileMenu = document.getElementById('mobile-menu')
-    if (!mobileMenu) return
-
-    const focusableElements = mobileMenu.querySelectorAll(
-        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    )
-
-    if (focusableElements.length === 0) return
-
-    focusTrap.firstFocusableEl = focusableElements[0] as HTMLElement
-    focusTrap.lastFocusableEl = focusableElements[focusableElements.length - 1] as HTMLElement
-
-    focusTrap.firstFocusableEl?.focus()
-
-    document.addEventListener('keydown', focusTrap.handleTabKey)
-  },
-
-  deactivate: () => {
-    document.removeEventListener('keydown', focusTrap.handleTabKey)
-    focusTrap.firstFocusableEl = null
-    focusTrap.lastFocusableEl = null
-  },
-
-  handleTabKey: (e: KeyboardEvent) => {
-    if (e.key !== 'Tab') return
-
-    if (e.shiftKey) {
-      if (document.activeElement === focusTrap.firstFocusableEl) {
-        focusTrap.lastFocusableEl?.focus()
-        e.preventDefault()
-      }
-    } else {
-      if (document.activeElement === focusTrap.lastFocusableEl) {
-        focusTrap.firstFocusableEl?.focus()
-        e.preventDefault()
-      }
-    }
-  }
-}
-
-// Activate/deactivate focus trap when mobile menu opens/closes
-watch(mobileMenuOpen, (isOpen) => {
-  if (isOpen) {
-    nextTick(() => {
-      focusTrap.activate()
-    })
-  } else {
-    focusTrap.deactivate()
-  }
-})
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-  unlockBodyScroll()
-  if (hoverTimeout.value) {
-    clearTimeout(hoverTimeout.value)
-  }
-})
-</script>
-
-<template>
-  <div class="header-wrapper z-50 relative bg-white dark:bg-primary" ref="megamenuRef">
-    <header class="wrapper px-6 py-5 lg:py-7 flex items-center justify-between relative z-[1000]">
-      <div class="flex items-center gap-10">
-        <a href="/" @contextmenu="handleLogoRightClick">
-          <img class="h-4 block dark:hidden" src="@assets/voidzero/logo.svg" alt="VoidZero"/>
-          <img class="h-4 hidden dark:block" src="@assets/voidzero/logo-light.svg" alt="VoidZero"/>
-        </a>
-
-        <!-- Desktop navigation - hidden on mobile -->
-        <nav class="nav-container hidden md:block">
-          <ul class="nav">
-            <li
-                v-for="navItem in nav"
-                :key="navItem.link"
-                @mouseenter="handleNavItemMouseEnter(navItem)"
-                @mouseleave="handleNavItemMouseLeave"
-                class="inline-block px-5"
-            >
-              <a
-                  :class="{ active: route.path === navItem.link }"
-                  :href="navItem.link"
-                  :target="navItem.link?.startsWith('http') ? '_blank' : navItem.target"
-                  :rel="navItem.link?.startsWith('http') ? 'noopener noreferrer' : undefined"
-                  :aria-expanded="navItem.megamenu && activeMegamenuItem === navItem.link ? 'true' : undefined"
-                  :aria-haspopup="navItem.megamenu ? 'true' : undefined"
-                  :aria-controls="navItem.megamenu ? `megamenu-${navItem.link}` : undefined"
-                  @click="navItem.megamenu && ($event.preventDefault(), toggleMegamenu(navItem))"
-              >
-                {{ navItem.text }}
-                <svg
-                    v-if="navItem.megamenu"
-                    class="inline-block ml-1 size-3 transition-transform"
-                    :class="{ 'rotate-180': activeMegamenuItem === navItem.link }"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 12 7"
-                    fill="currentColor"
-                    aria-hidden="true"
-                >
-                  <path d="M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z"/>
-                </svg>
-              </a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-
-      <div class="flex items-center gap-6">
-        <a href="https://github.com/voidzero-dev" target="_blank" rel="noopener noreferrer"
-           class="hidden lg:flex gap-1.5 items-center">
-          <img src="@assets/social/github.svg" alt="Star on GitHub" class="size-6 block dark:hidden">
-          <img src="@assets/social/github-light.svg" alt="Star on GitHub" class="size-6 hidden dark:block">
-          <span class="text-primary dark:text-grey font-mono text-sm font-medium">{{ formattedStars }}</span>
-        </a>
-        <a href="https://viteplus.dev" target="_blank" rel="noopener noreferrer" class="button hidden md:block">
-          Explore Vite+
-        </a>
-
-        <!-- Mobile hamburger/close button - Right aligned -->
-        <button
-            @click="toggleMobileMenu"
-            :aria-expanded="mobileMenuOpen"
-            aria-controls="mobile-menu"
-            aria-label="Toggle navigation menu"
-            class="md: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>
-
-        </button>
-      </div>
-    </header>
-
-    <!-- Mobile Menu Overlay - Full Screen -->
-    <div
-        v-if="mobileMenuOpen"
-        id="mobile-menu"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Mobile navigation menu"
-        data-theme="dark"
-        class="md:hidden fixed inset-0 z-[1001] bg-primary"
-    >
-      <section class="wrapper animate-fade-in">
-
-        <!-- Internal Header with Logo and Close Button -->
-        <div class="w-full pl-5 pr-7 py-5 lg:py-7 flex items-center justify-between">
-          <a href="/">
-            <img class="h-4" src="@assets/voidzero/logo-light.svg" alt="VoidZero"/>
-          </a>
-          <button
-              @click="closeMobileMenu"
-              aria-label="Close navigation menu"
-              class="p-2 -mr-2 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>
-
-        <!-- 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);">
-          <!-- Navigation Items - Top Section -->
-          <nav class="flex-1 w-full pt-6 pb-8">
-            <ul class="space-y-1">
-              <li v-for="navItem in nav" :key="navItem.link">
-                <!-- Nav items with megamenu - Accordion trigger -->
-                <template v-if="navItem.megamenu">
-                  <button
-                      @click="toggleMobileAccordion(navItem.link)"
-                      :aria-expanded="expandedMobileItem === navItem.link"
-                      :aria-controls="`mobile-megamenu-${navItem.link}`"
-                      class="w-full text-left py-3 px-4 text-lg font-sans text-white flex items-center justify-between cursor-pointer"
-                  >
-                    <span>{{ navItem.text }}</span>
-                    <svg class="size-4 transition-transform duration-200"
-                         :class="{ 'rotate-180': expandedMobileItem === navItem.link }" viewBox="0 0 15 8" fill="none"
-                         xmlns="http://www.w3.org/2000/svg">
-                      <path d="M13.8638 0.530325L7.1971 7.19699L0.530438 0.530324" stroke="#F4F3EC" stroke-width="1.5"
-                            stroke-linejoin="round"/>
-                    </svg>
-
-                  </button>
-
-                  <!-- Accordion Content - Megamenu (instant, no transition) -->
-                  <Transition>
-                    <div
-                        v-if="expandedMobileItem === navItem.link"
-                        :id="`mobile-megamenu-${navItem.link}`"
-                        class="pb-4 pt-2"
-                    >
-                      <Megamenu
-                          :featured-articles="props.featuredArticles"
-                          :on-link-click="closeMobileMenu"
-                      />
-                    </div>
-                  </Transition>
-                </template>
-
-                <!-- Regular nav items without megamenu -->
-                <template v-else>
-                  <a
-                      :href="navItem.link"
-                      @click="closeMobileMenu"
-                      :class="{ 'bg-white/10': route.path === navItem.link }"
-                      class="block py-3 px-4 text-lg font-sans text-white"
-                  >
-                    {{ navItem.text }}
-                  </a>
-                </template>
-              </li>
-            </ul>
-          </nav>
-
-          <!-- Bottom Section - CTA and Social -->
-          <div class="w-full py-12 border-t border-nickel relative tick-left tick-right mt-auto">
-            <div class="space-y-12">
-              <!-- CTA Button -->
-              <div class="px-6">
-                <a
-                    href="https://viteplus.dev"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="button button--primary button--white block text-center bg-white text-primary hover:bg-white/90"
-                    @click="closeMobileMenu"
-                >
-                  <span>Explore Vite+</span>
-                </a>
-              </div>
-
-              <!-- Divider -->
-              <div class="border-t border-nickel tick-left tick-right relative"></div>
-
-              <!-- Social Icons -->
-              <div class="flex items-center justify-center gap-4 pb-12">
-                <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-light.svg" alt="GitHub" class="size-6">
-                </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-light.svg" alt="Bluesky" class="size-6">
-                </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-light.svg" alt="X" class="size-6">
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <!-- Desktop Megamenu Panel - Full Width (Hidden on mobile) -->
-    <Transition
-        enter-active-class="transition-all duration-200 ease-out"
-        enter-from-class="opacity-0 -translate-y-2"
-        enter-to-class="opacity-100 translate-y-0"
-        leave-active-class="transition-all duration-150 ease-in"
-        leave-from-class="opacity-100 translate-y-0"
-        leave-to-class="opacity-0 -translate-y-2"
-    >
-      <div
-          v-if="megamenuOpen && !mobileMenuOpen"
-          :id="`megamenu-${activeMegamenuItem}`"
-          role="region"
-          aria-label="Mega menu"
-          class="hidden md:block absolute top-full left-0 right-0 w-full z-[1000] pt-10 -mt-10"
-          @mouseenter="handleMegamenuMouseEnter"
-          @mouseleave="handleMegamenuMouseLeave"
-      >
-        <div class="wrapper wrapper--ticks border-t border-b bg-white dark:bg-primary megamenu-shadow">
-          <div class="mx-28 border-l border-r border-stroke dark:border-nickel">
-            <Megamenu
-                :featured-articles="props.featuredArticles"
-            />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.megamenu-shadow {
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-  animation: shadowFadeIn 0.3s ease-out forwards;
-}
-
-@keyframes shadowFadeIn {
-  from {
-    box-shadow: rgba(50, 50, 93, 0.1) 0px 25px 50px -20px, rgba(0, 0, 0, 0.15) 0px 15px 30px -30px;
-  }
-  to {
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.animate-fade-in {
-  animation: fadeIn 300ms ease-out 100ms forwards;
-  opacity: 0;
-}
-</style>