@voidzero-dev/vitepress-theme 2.0.1 → 3.0.0

package/src/vitepress/components/voidzero/about/TeamGrid.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import githubIcon from '@assets/social/github.svg'
-import twitterIcon from '@assets/social/twitter.svg'
-import blueskyIcon from '@assets/social/bluesky.svg'
-import discordIcon from '@assets/social/discord.svg'
-
-interface Member {
-  avatar: string
-  name: string
-  title: string
-  desc?: string
-  handle: string
-  links: Array<{ icon: 'github' | 'x' | 'bluesky' | 'discord', link: string }>
-}
-
-const props = defineProps<{
-  members: Member[]
-}>()
-
-const iconMap = {
-  github: githubIcon,
-  x: twitterIcon,
-  bluesky: blueskyIcon,
-  discord: discordIcon,
-}
-
-// Helper to determine which borders a card needs based on its position
-const getBorderClasses = (index: number) => {
-  const classes: string[] = []
-  const position = index + 1 // 1-based
-  const total = props.members.length
-
-  // RIGHT BORDERS: remove from last item in each row per breakpoint
-  // Mobile (1 col): no right borders
-  classes.push('border-r-0')
-
-  // SM (2 cols): border-r on odd items (1st, 3rd, 5th...)
-  if (position % 2 !== 0) classes.push('sm:border-r')
-
-  // LG (3 cols): border-r on all except every 3rd (3rd, 6th, 9th...)
-  if (position % 3 !== 0) classes.push('lg:border-r')
-  else classes.push('lg:border-r-0')
-
-  // XL (4 cols): border-r on all except every 4th (4th, 8th, 12th...)
-  if (position % 4 !== 0) classes.push('xl:border-r')
-  else classes.push('xl:border-r-0')
-
-  // TOP BORDERS: remove from first row per breakpoint
-  // Mobile (1 col): top border on all except 1st
-  if (position > 1) classes.push('border-t')
-
-  // SM (2 cols): top border on all except 1st row (positions 1-2)
-  if (position > 2) classes.push('sm:border-t')
-  else classes.push('sm:border-t-0')
-
-  // LG (3 cols): top border on all except 1st row (positions 1-3)
-  if (position > 3) classes.push('lg:border-t')
-  else classes.push('lg:border-t-0')
-
-  // XL (4 cols): top border on all except 1st row (positions 1-4)
-  if (position > 4) classes.push('xl:border-t')
-  else classes.push('xl:border-t-0')
-
-  // BOTTOM BORDERS: remove from last row per breakpoint
-  // Mobile (1 col): bottom border on all except last
-  if (position < total) classes.push('border-b')
-
-  // SM (2 cols): bottom border on all except last row
-  const lastRowStartSm = Math.ceil(total / 2) * 2 - 1 // Start of last row in 2-col
-  if (position <= total - 2 || position < lastRowStartSm) classes.push('sm:border-b')
-  else classes.push('sm:border-b-0')
-
-  // LG (3 cols): bottom border on all except last row
-  const lastRowStartLg = Math.ceil(total / 3) * 3 - 2
-  if (position <= total - 3 || position < lastRowStartLg) classes.push('lg:border-b')
-  else classes.push('lg:border-b-0')
-
-  // XL (4 cols): bottom border on all except last row
-  const lastRowStartXl = Math.ceil(total / 4) * 4 - 3
-  if (position <= total - 4 || position < lastRowStartXl) classes.push('xl:border-b')
-  else classes.push('xl:border-b-0')
-
-  return classes.join(' ')
-}
-
-const formatDescription = (desc: string): string => {
-  // Format as line comments: "Creator of Vue.js & Vite" -> "// Creator of\n// Vue.js & Vite"
-  const words = desc.split(' ')
-  const lines: string[] = []
-  let currentLine = ''
-
-  // Group words into lines (roughly 2-3 words per line for readability)
-  words.forEach((word, i) => {
-    if (i % 3 === 0 && i > 0) {
-      lines.push(currentLine.trim())
-      currentLine = word
-    } else {
-      currentLine += (currentLine ? ' ' : '') + word
-    }
-  })
-  if (currentLine) lines.push(currentLine.trim())
-
-  // Build comment format
-  return lines.map(line => `// ${line}`).join('\n')
-}
-</script>
-
-<template>
-  <section id="team" class="wrapper wrapper--ticks border-t">
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10">
-      <div
-        v-for="(member, index) in members"
-        :key="index"
-        class="border-stroke flex flex-col"
-        :class="getBorderClasses(index)"
-      >
-        <!-- Card content -->
-        <div class="flex flex-col gap-5 pt-4 md:pt-8 pb-4 flex-1">
-          <!-- Header: Avatar + Name/Title -->
-          <div class="px-8 flex gap-6">
-            <div class="w-14 h-14 rounded-[10px] bg-violet-600/20 overflow-hidden flex-shrink-0">
-              <img :src="member.avatar" :alt="member.name" class="w-full h-full object-cover" />
-            </div>
-            <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-              <h5 class="text-primary md:text-lg font-medium truncate">{{ member.name }}</h5>
-              <p class="text-nickel text-base">{{ member.title }}</p>
-            </div>
-          </div>
-
-          <!-- Description (comment format) -->
-          <div class="px-8 hidden md:block min-h-[3rem]">
-            <pre v-if="member.desc" class="font-mono text-grey text-xs uppercase whitespace-pre-wrap leading-tight">{{ formatDescription(member.desc) }}</pre>
-          </div>
-        </div>
-
-        <!-- Footer: Social links + Handle -->
-        <div class="px-6 py-4 border-t border-stroke flex justify-between items-center">
-          <!-- Social icons -->
-          <div class="flex items-center gap-3">
-            <template v-for="(link, linkIndex) in member.links" :key="linkIndex">
-              <a
-                v-if="iconMap[link.icon]"
-                :href="link.link"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-nickel hover:text-white transition-colors"
-              >
-                <img :src="iconMap[link.icon]" :alt="link.icon" class="size-5" />
-              </a>
-            </template>
-          </div>
-
-          <!-- Handle badge -->
-          <div class="bg-beige rounded-md px-3 pb-0.5">
-            <span class="text-nickel text-xs font-mono uppercase font-medium">{{ member.handle }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

package/src/vitepress/components/voidzero/about/TeamSectionHeading.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="wrapper border-t flex flex-col justify-start items-center py-10 md:py-30">
-    <div class="w-full sm:w-2xl flex flex-col justify-start items-center gap-5 px-5 sm:px-0">
-      <h2 class="text-center text-primary text-balance">
-        Meet the team
-      </h2>
-      <p class="self-stretch text-center text-balance text-grey">Including creators and core contributors to some of the
-        most widely adopted open-source projects.</p>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-</script>

package/src/vitepress/components/voidzero/blog/BlogArchive.vue

@@ -1,223 +0,0 @@
-<script setup lang="ts">
-import {ref, computed, watch} from 'vue'
-import {type Post, formatDateShort} from './types'
-import {
-  PaginationRoot,
-  PaginationList,
-  PaginationListItem,
-  PaginationEllipsis,
-  PaginationPrev,
-  PaginationNext
-} from 'reka-ui'
-
-interface Props {
-  posts: Post[]
-}
-
-const props = defineProps<Props>()
-
-const ITEMS_PER_PAGE = 10
-
-// State
-const currentPage = ref(1)
-const searchQuery = ref('')
-const selectedCategory = ref('all')
-
-// Extract unique categories from posts
-const allCategories = computed(() => {
-  const categories = new Set<string>()
-  props.posts.forEach(post => {
-    if (post.category) {
-      categories.add(post.category)
-    }
-  })
-  return ['All', ...Array.from(categories).sort()]
-})
-
-// Filter posts by search query and category
-const filteredPosts = computed(() => {
-  let result = props.posts
-
-  // Filter by category
-  if (selectedCategory.value !== 'all') {
-    result = result.filter(post =>
-        post.category.toLowerCase() === selectedCategory.value.toLowerCase()
-    )
-  }
-
-  // Filter by search query
-  if (searchQuery.value.trim()) {
-    const query = searchQuery.value.toLowerCase().trim()
-    result = result.filter(post =>
-        post.title.toLowerCase().includes(query)
-    )
-  }
-
-  return result
-})
-
-// Get paginated posts for current page
-const paginatedPosts = computed(() => {
-  const start = (currentPage.value - 1) * ITEMS_PER_PAGE
-  const end = start + ITEMS_PER_PAGE
-  return filteredPosts.value.slice(start, end)
-})
-
-// Total items for pagination
-const totalItems = computed(() => filteredPosts.value.length)
-
-// Reset pagination when filters change
-watch([searchQuery, selectedCategory], () => {
-  currentPage.value = 1
-})
-
-// Category selection handler
-function selectCategory(category: string, event: MouseEvent) {
-  selectedCategory.value = category.toLowerCase() === 'all' ? 'all' : category
-  // Blur button to prevent focus state from interfering with outline
-  ;(event.target as HTMLButtonElement)?.blur()
-}
-
-// Check if category is active
-function isCategoryActive(category: string): boolean {
-  if (category.toLowerCase() === 'all') {
-    return selectedCategory.value === 'all'
-  }
-  return selectedCategory.value.toLowerCase() === category.toLowerCase()
-}
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t">
-    <!-- Header Row -->
-    <div class="px-6 md:px-20 pt-30 pb-10 flex flex-col gap-6">
-      <!-- Title -->
-      <h2 class="text-3xl md:text-4xl font-heading font-medium text-primary">All articles</h2>
-
-      <!-- Filters Row -->
-      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-6">
-        <!-- Category Filters -->
-        <div class="flex flex-wrap items-center gap-2 md:gap-3">
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide mr-2">// Categories</span>
-          <button
-              v-for="category in allCategories"
-              :key="category"
-              type="button"
-              :data-active="isCategoryActive(category)"
-              class="px-3 py-1.5 rounded text-sm font-medium outline outline-1 transition-colors cursor-pointer bg-white text-primary outline-stroke data-[active=true]:outline-ruby data-[active=false]:hover:bg-beige focus:outline-1 capitalize"
-              @click="selectCategory(category, $event)"
-          >
-            {{ category }}
-          </button>
-        </div>
-
-        <!-- Search Input -->
-        <div class="flex items-center gap-2 outline outline-1 outline-stroke rounded-lg px-3 py-2 w-full md:w-64">
-          <svg class="size-5 text-grey shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-          </svg>
-          <input
-              v-model="searchQuery"
-              type="text"
-              placeholder="Search..."
-              class="bg-transparent text-primary placeholder-grey text-sm outline-none w-full"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Full-width border -->
-    <div class="border-t border-stroke relative tick-left tick-right"></div>
-
-    <!-- Articles List -->
-    <div class="mx-6 md:mx-20 border-l border-r border-stroke flex flex-col gap-5" :class="{ 'pb-6 md:pb-20': totalItems <= ITEMS_PER_PAGE }">
-      <a
-          v-for="post in paginatedPosts"
-          :key="post.url"
-          :href="post.url"
-          class="flex flex-col md:flex-row hover:bg-beige transition-colors border-t border-b border-stroke first:border-t-0 last:border-b-0"
-      >
-        <!-- Cover Image -->
-        <div class="w-full md:w-[350px] bg-nickel overflow-hidden shrink-0">
-          <img
-              v-if="post.cover"
-              :src="post.cover"
-              :alt="post.title"
-              class="w-full object-cover"
-          />
-        </div>
-
-        <!-- Content -->
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between grow gap-4 md:gap-6 p-6 md:py-0 md:pr-10">
-          <div class="flex flex-col gap-2">
-            <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">// {{ post.category }}</span>
-            <h4 class="text-xl text-primary font-normal leading-snug text-pretty">
-              {{ post.title }}
-            </h4>
-          </div>
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide whitespace-nowrap">
-            {{ formatDateShort(post.date.string) }}
-          </span>
-        </div>
-      </a>
-
-      <!-- Empty State -->
-      <div v-if="paginatedPosts.length === 0" class="p-10 text-center">
-        <p class="text-grey text-base">No articles found matching your criteria.</p>
-      </div>
-    </div>
-
-    <!-- Pagination -->
-    <div v-if="totalItems > ITEMS_PER_PAGE" class="border-t border-stroke p-6 md:p-10 flex justify-center">
-      <PaginationRoot
-          v-model:page="currentPage"
-          :total="totalItems"
-          :items-per-page="ITEMS_PER_PAGE"
-          :sibling-count="1"
-          :show-edges="true"
-      >
-        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-          <PaginationPrev class="size-10 flex items-center justify-center text-grey hover:text-primary transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed">
-            <svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
-              <path
-                  d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"/>
-            </svg>
-          </PaginationPrev>
-
-          <template v-for="(page, index) in items" :key="index">
-            <PaginationListItem
-                v-if="page.type === 'page'"
-                :value="page.value"
-                class="pagination-item size-10 flex items-center justify-center text-sm font-mono text-grey hover:text-primary transition-colors cursor-pointer"
-            >
-              {{ page.value }}
-            </PaginationListItem>
-            <PaginationEllipsis
-                v-else
-                :index="index"
-                class="size-10 flex items-center justify-center text-sm font-mono text-grey"
-            >
-              &hellip;
-            </PaginationEllipsis>
-          </template>
-
-          <PaginationNext class="size-10 flex items-center justify-center text-grey hover:text-primary transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed">
-            <svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
-              <path
-                  d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"/>
-            </svg>
-          </PaginationNext>
-        </PaginationList>
-      </PaginationRoot>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-/* Pagination active state - needs scoped style for data attribute selector */
-.pagination-item[data-selected="true"] {
-  outline: 1px solid var(--color-stroke);
-  color: var(--color-primary);
-}
-</style>