@voidzero-dev/vitepress-theme 2.0.0 → 2.1.0

package/src/vitepress/components/voidzero/home/Statistics.vue

@@ -1,507 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref, computed, watch, shallowRef, markRaw, Ref, Component } from 'vue'
-import type { Chart as ChartType, ChartData } from 'chart.js'
-import moment from 'moment'
-import viteIcon from '@assets/icons/vite-dark.svg'
-import vitestIcon from '@assets/icons/vitest-dark.svg'
-import rolldownIcon from '@assets/icons/rolldown-dark.svg'
-import oxcIcon from '@assets/icons/oxc-dark.svg'
-
-interface GithubStat {
-  repo: string
-  stars: number
-  contributors: number
-}
-
-interface Props {
-  statsUrl?: string
-  githubStats?: GithubStat[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  statsUrl: '/stats.json',
-  githubStats: () => []
-})
-
-type ProjectKey = 'vite' | 'vitest' | 'rolldown' | 'oxlint'
-
-const projects = [
-  { key: 'vite' as ProjectKey, name: 'Vite', icon: viteIcon, color: '#6C3BFF' },
-  { key: 'vitest' as ProjectKey, name: 'Vitest', icon: vitestIcon, color: '#22FF73' },
-  { key: 'rolldown' as ProjectKey, name: 'Rolldown', icon: rolldownIcon, color: '#FF5500' },
-  { key: 'oxlint' as ProjectKey, name: 'Oxc', icon: oxcIcon, color: '#32F3E9' }
-]
-
-// Repo name to project key mapping
-const repoMapping: Record<string, ProjectKey> = {
-  'vitejs/vite': 'vite',
-  'vitest-dev/vitest': 'vitest',
-  'rolldown/rolldown': 'rolldown',
-  'oxc-project/oxc': 'oxlint'
-}
-
-const selectedProject = ref<ProjectKey>('vite')
-const allProjectData = ref<Record<ProjectKey, { x: number; y: number }[]>>({
-  vite: [],
-  vitest: [],
-  rolldown: [],
-  oxlint: []
-})
-const allTotalDownloads = ref<Record<ProjectKey, number>>({
-  vite: 0,
-  vitest: 0,
-  rolldown: 0,
-  oxlint: 0
-})
-const allGithubStars = ref<Record<ProjectKey, number>>({
-  vite: 0,
-  vitest: 0,
-  rolldown: 0,
-  oxlint: 0
-})
-const allContributors = ref<Record<ProjectKey, number>>({
-  vite: 0,
-  vitest: 0,
-  rolldown: 0,
-  oxlint: 0
-})
-
-const dataPoints = ref<{ x: number; y: number }[]>([])
-const stats: Ref<ChartData<'line', { x: number; y: number }[], unknown>> = ref({
-  datasets: []
-})
-const statsChart = shallowRef<ChartType | null>(null)
-
-// Dynamically loaded NumberFlow - use shallowRef for components
-const NumberFlow = shallowRef<Component | null>(null)
-const continuous = shallowRef<any>(null)
-
-const totalDownloads = computed(() => {
-  return allTotalDownloads.value[selectedProject.value]
-})
-
-const weeklyDownloads = computed(() => {
-  const projectData = allProjectData.value[selectedProject.value]
-  return (projectData.slice().reverse().find(p => p.y > 0)?.y || 0)
-})
-
-const weeklyDownloadsFormatted = computed(() => {
-  const value = weeklyDownloads.value
-  if (value >= 1000000) {
-    return (value / 1000000).toFixed(1) + 'M'
-  } else if (value >= 1000) {
-    return (value / 1000).toFixed(1) + 'K'
-  }
-  return value.toString()
-})
-
-const githubStars = computed(() => {
-  return allGithubStars.value[selectedProject.value]
-})
-
-const githubStarsFormatted = computed(() => {
-  const value = githubStars.value
-  if (value >= 1000000) {
-    return (value / 1000000).toFixed(1) + 'M'
-  } else if (value >= 1000) {
-    return (value / 1000).toFixed(1) + 'K'
-  }
-  return value.toString()
-})
-
-const contributors = computed(() => {
-  return allContributors.value[selectedProject.value]
-})
-
-const contributorsFormatted = computed(() => {
-  const value = contributors.value
-  if (value >= 1000000) {
-    return (value / 1000000).toFixed(1) + 'M'
-  } else if (value >= 1000) {
-    return (value / 1000).toFixed(1) + 'K'
-  }
-  return value.toString()
-})
-
-const selectedProjectData = computed(() => {
-  return projects.find(p => p.key === selectedProject.value)
-})
-
-const dropdownOpen = ref(false)
-const dropdownButtonRef = ref<HTMLButtonElement | null>(null)
-const focusedIndex = ref<number>(0)
-const announcement = ref<string>('')
-
-// Helper function to convert hex to rgba
-const hexToRgba = (hex: string, alpha: number) => {
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`
-}
-
-// Close dropdown when clicking outside
-const closeDropdown = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-  if (!target.closest('.project-dropdown')) {
-    dropdownOpen.value = false
-  }
-}
-
-const handleKeydown = (e: KeyboardEvent) => {
-  if (!dropdownOpen.value) {
-    // When closed, open with Enter or Space or ArrowDown
-    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-      e.preventDefault()
-      dropdownOpen.value = true
-      focusedIndex.value = projects.findIndex(p => p.key === selectedProject.value)
-    }
-  } else {
-    // When open, handle navigation
-    switch (e.key) {
-      case 'Escape':
-        e.preventDefault()
-        dropdownOpen.value = false
-        dropdownButtonRef.value?.focus()
-        break
-      case 'ArrowDown':
-        e.preventDefault()
-        focusedIndex.value = (focusedIndex.value + 1) % projects.length
-        break
-      case 'ArrowUp':
-        e.preventDefault()
-        focusedIndex.value = focusedIndex.value === 0 ? projects.length - 1 : focusedIndex.value - 1
-        break
-      case 'Enter':
-      case ' ':
-        e.preventDefault()
-        selectedProject.value = projects[focusedIndex.value].key
-        dropdownOpen.value = false
-        dropdownButtonRef.value?.focus()
-        break
-      case 'Home':
-        e.preventDefault()
-        focusedIndex.value = 0
-        break
-      case 'End':
-        e.preventDefault()
-        focusedIndex.value = projects.length - 1
-        break
-    }
-  }
-}
-
-const selectProject = (projectKey: ProjectKey) => {
-  const project = projects.find(p => p.key === projectKey)
-  selectedProject.value = projectKey
-  dropdownOpen.value = false
-  dropdownButtonRef.value?.focus()
-
-  // Announce change to screen readers
-  if (project) {
-    announcement.value = `${project.name} selected. Showing ${project.name} statistics.`
-    setTimeout(() => announcement.value = '', 1000)
-  }
-}
-
-onMounted(async () => {
-  // Add click listener for closing dropdown
-  document.addEventListener('click', closeDropdown)
-
-  // Dynamically import Chart.js and NumberFlow client-side only
-  const { default: Chart } = await import('chart.js/auto')
-  await import('chartjs-adapter-moment')
-
-  const numberFlowModule = await import('@number-flow/vue')
-  NumberFlow.value = markRaw(numberFlowModule.default)
-  continuous.value = markRaw(numberFlowModule.continuous)
-
-  // Get the data from the stats URL
-  const response = await fetch(props.statsUrl)
-  const rawData = await response.json()
-
-  // Extract data for all projects
-  for (const project of projects) {
-    const projectData = rawData[project.key] || []
-    let points = projectData
-      .map((point: {x: number; y: number}) => ({
-        x: moment(point['x']).valueOf(),
-        y: point['y']
-      }))
-      .filter(point => point.y > 0) // Remove points with y = 0
-
-    // Remove trailing incomplete data points (last 1-2 weeks of data)
-    // This ensures we don't show incomplete current week data
-    if (points.length > 2) {
-      points = points.slice(0, -2) // Remove last 2 points
-    }
-
-    allProjectData.value[project.key] = points
-    allTotalDownloads.value[project.key] = rawData.totalDownloads?.[project.key] || 0
-  }
-
-  // Parse GitHub stats data
-  if (props.githubStats && props.githubStats.length > 0) {
-    props.githubStats.forEach((stat) => {
-      const projectKey = repoMapping[stat.repo]
-      if (projectKey) {
-        allGithubStars.value[projectKey] = stat.stars
-        allContributors.value[projectKey] = stat.contributors
-      }
-    })
-  }
-
-  // Set initial data points for selected project
-  dataPoints.value = allProjectData.value[selectedProject.value]
-
-  const canvas = document.getElementById('chart-canvas') as HTMLCanvasElement
-  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-
-  // Get initial project color
-  const initialColor = projects.find(p => p.key === selectedProject.value)?.color || '#6C3BFF'
-  const gradient = ctx.createLinearGradient(0, 0, -50, 400)
-  gradient.addColorStop(0, initialColor)
-  gradient.addColorStop(1, initialColor)
-
-  stats.value = {
-    datasets: [
-      {
-        data: dataPoints.value,
-        fill: {
-          target: 'origin',
-          above: hexToRgba(initialColor, 0.1)
-        },
-        pointStyle: false,
-        borderWidth: 3,
-        borderColor: gradient,
-        stepped: false
-      }
-    ]
-  }
-
-  statsChart.value = new Chart(canvas as HTMLCanvasElement, {
-    type: 'line',
-    options: {
-      scales: {
-        x: {
-          type: 'time',
-          time: {
-            unit: 'week'
-          },
-          display: false,
-          alignToPixels: true,
-          ticks: { padding: 0 },
-          border: {
-            display: false
-          }
-        },
-        y: {
-          min: 0,
-          display: false,
-          ticks: { padding: 0 },
-          alignToPixels: true,
-          border: {
-            display: false
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          display: false
-        },
-        tooltip: {
-          enabled: false
-        }
-      },
-      layout: {
-        autoPadding: false,
-        padding: {
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 80
-        }
-      },
-      aspectRatio: 5/3.5
-    },
-    data: {
-      datasets: stats.value.datasets
-    }
-  })
-})
-
-onUnmounted(() => {
-  if (statsChart.value) {
-    statsChart.value.destroy()
-  }
-  // Remove click listener
-  document.removeEventListener('click', closeDropdown)
-})
-
-// Watch for project changes and update the chart
-watch(selectedProject, (newProject) => {
-  const newData = allProjectData.value[newProject]
-
-  if (statsChart.value && statsChart.value.data && statsChart.value.data.datasets[0]) {
-    // Get the dataset
-    const dataset = statsChart.value.data.datasets[0]
-
-    // Replace the data array entirely (not mutate in place)
-    dataset.data = newData.slice() // Use slice to create a new array
-
-    // Update the color
-    const canvas = document.getElementById('chart-canvas') as HTMLCanvasElement
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-    const newColor = projects.find(p => p.key === newProject)?.color || '#6C3BFF'
-    const newGradient = ctx.createLinearGradient(0, 0, -50, 400)
-    newGradient.addColorStop(0, newColor)
-    newGradient.addColorStop(1, newColor)
-    dataset.borderColor = newGradient
-
-    // Update the fill color
-    if (dataset.fill && typeof dataset.fill === 'object') {
-      dataset.fill.above = hexToRgba(newColor, 0.1)
-    }
-
-    // Call update to re-render the chart
-    statsChart.value.update()
-  }
-}, { flush: 'post' })
-</script>
-
-<template>
-  <!-- Screen reader announcements -->
-  <div aria-live="polite" aria-atomic="true" class="sr-only">
-    {{ announcement }}
-  </div>
-
-  <section class="wrapper wrapper--ticks border-t grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-ceramic">
-    <div class="p-6 md:p-10 flex flex-col justify-between">
-      <h6 class="flex gap-2 items-center">
-        <span>Total downloads</span>
-      </h6>
-      <h1>
-        <component v-if="NumberFlow" :is="NumberFlow" :plugins="[continuous]" :value="totalDownloads" />
-        <span v-else>{{ totalDownloads }}</span>
-      </h1>
-    </div>
-    <div class="relative w-full aspect-[5/3.5]">
-      <div class="absolute top-4 md:top-6 left-4 md:left-6 z-10 project-dropdown">
-        <button
-          ref="dropdownButtonRef"
-          @click.stop="dropdownOpen = !dropdownOpen"
-          @keydown="handleKeydown"
-          :aria-expanded="dropdownOpen"
-          :aria-label="`Select project: ${selectedProjectData?.name}`"
-          aria-haspopup="listbox"
-          class="button cursor-pointer"
-        >
-          <img v-if="selectedProjectData" :src="selectedProjectData.icon" class="size-6" :alt="selectedProjectData?.name">
-          <span>{{ selectedProjectData?.name }} <span class="hidden md:inline-block">Downloads</span></span>
-          <svg class="size-3 ml-1 fill-primary" :class="{ 'rotate-180': dropdownOpen }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 7" aria-hidden="true">
-            <path d="M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z"/>
-          </svg>
-        </button>
-        <ul
-          v-if="dropdownOpen"
-          role="listbox"
-          :aria-label="'Project selection'"
-          class="absolute top-full left-0 mt-1 bg-white border border-stroke rounded-lg shadow-lg overflow-hidden min-w-full select-none"
-        >
-          <li
-            v-for="(project, index) in projects"
-            :key="project.key"
-            role="option"
-            :aria-selected="selectedProject === project.key"
-          >
-            <button
-              @click.stop="selectProject(project.key)"
-              @keydown="handleKeydown"
-              :class="{
-                'bg-gray-50': selectedProject === project.key,
-                'bg-gray-100': focusedIndex === index
-              }"
-              class="select-none cursor-pointer flex items-center gap-2 px-3 py-2 w-full text-left text-base hover:bg-stroke/20 focus:outline-none focus:bg-stroke/20 hover:text-primary focus:text-primary"
-            >
-              <img :src="project.icon" class="size-5" alt="">
-              <span class="font-medium">{{ project.name }}</span>
-              <svg v-if="selectedProject === project.key" class="size-4 ml-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-              </svg>
-            </button>
-          </li>
-        </ul>
-      </div>
-      <canvas id="chart-canvas" width="200" height="200"></canvas>
-      <div class="flex justify-between absolute bottom-6 md:bottom-10 left-6 md:left-10 right-6 md:right-10">
-        <p class="font-mono text-sm text-nickel">April 2020</p>
-        <p class="font-mono text-sm text-nickel">Today</p>
-      </div>
-    </div>
-  </section>
-  <section class="wrapper wrapper--ticks border-t grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-ceramic">
-    <div class="flex flex-col gap-2 p-6 md:p-10">
-      <h2>
-        <component
-          v-if="NumberFlow"
-          :is="NumberFlow"
-          :plugins="[continuous]"
-          :value="weeklyDownloads"
-          :format="{ notation: 'compact', maximumFractionDigits: 1 }"
-        />
-        <span v-else>{{ weeklyDownloadsFormatted }}</span>+
-      </h2>
-      <p class="lead">Weekly NPM downloads</p>
-    </div>
-    <div class="flex flex-col gap-2 p-6 md:p-10">
-      <h2>
-        <component
-          v-if="NumberFlow"
-          :is="NumberFlow"
-          :plugins="[continuous]"
-          :value="githubStars"
-          :format="{ notation: 'compact', maximumFractionDigits: 1 }"
-        />
-        <span v-else>{{ githubStarsFormatted }}</span>+
-      </h2>
-      <p class="lead">GitHub Stars</p>
-    </div>
-    <div class="flex flex-col gap-2 p-6 md:p-10">
-      <h2>
-        <component
-          v-if="NumberFlow"
-          :is="NumberFlow"
-          :plugins="[continuous]"
-          :value="contributors"
-          :format="{ notation: 'compact', maximumFractionDigits: 1 }"
-        />
-        <span v-else>{{ contributorsFormatted }}</span>+
-      </h2>
-      <p class="lead">Contributors</p>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-#chart-canvas {
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-</style>

package/src/vitepress/components/voidzero/home/StatisticsSectionHeading.vue

@@ -1,5 +0,0 @@
-<template>
-  <section class="wrapper px-5 md:px-10 h-36 md:h-48 sm:h-80 flex flex-col justify-center gap-5">
-    <h3 class="text-start max-w-lg text-balance">Trusted by millions of developers around the world</h3>
-  </section>
-</template>

package/src/vitepress/components/voidzero/home/TeamCTA.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-<section class="wrapper wrapper--ticks border-t px-5 md:px-10 py-10 md:py-40 flex flex-col items-center gap-10 bg-[#FBFAF7]">
-  <h3 class="max-w-[45rem] text-center text-balance mx-auto">Our mission is to make the next generation of JavaScript developers more productive than ever before.</h3>
-  <div class="flex flex-row gap-6 items-baseline">
-    <a href="/about" class="button">Learn more</a>
-<!--    <a href="/about" class="text-primary font-medium border-b">Meet our team →</a>-->
-  </div>
-</section>
-</template>
-
-<style scoped>
-
-</style>