@voidzero-dev/vitepress-theme 2.0.1 → 3.0.0

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

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-import {computed} from 'vue'
-import {type Post, type Author, getAuthorImage, formatDateShort} from './types'
-
-interface Props {
-  articles: Post[]
-}
-
-const props = defineProps<Props>()
-
-// Get featured articles (first 3)
-const featuredArticles = computed(() => {
-  return props.articles.slice(0, 3)
-})
-</script>
-
-<template>
-  <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-stroke">
-    <!-- Large Featured Article (Left) -->
-    <a
-        v-if="featuredArticles[0]"
-        :href="featuredArticles[0].url"
-        class="featured-article md:col-span-2 flex flex-col hover:bg-beige transition-colors"
-    >
-      <div class="px-6 md:px-20 py-10 flex-1 flex flex-col justify-center">
-        <div class="w-full flex flex-col gap-6">
-
-          <!-- Image -->
-          <div class="w-full bg-nickel overflow-hidden">
-            <img
-                v-if="featuredArticles[0].cover"
-                :src="featuredArticles[0].cover"
-                :alt="featuredArticles[0].title"
-                class="w-full object-cover"
-            />
-          </div>
-
-          <!-- Content -->
-          <div class="flex flex-col gap-3">
-            <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">// {{
-                featuredArticles[0].category
-              }}</span>
-            <h2 class="text-2xl md:text-3xl text-pretty text-primary font-normal leading-tight">
-              {{ featuredArticles[0].title }}
-            </h2>
-          </div>
-
-        </div>
-      </div>
-
-      <!-- Full-width divider and author section -->
-      <div class="mt-auto border-t border-stroke">
-        <div class="px-6 md:px-20 py-5">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-4">
-              <img
-                  v-if="featuredArticles[0].authors?.[0] && getAuthorImage(featuredArticles[0].authors[0])"
-                  :src="getAuthorImage(featuredArticles[0].authors[0])!"
-                  :alt="featuredArticles[0].authors[0].name"
-                  class="w-10 h-10 rounded object-cover"
-              />
-              <div v-else class="w-10 h-10 rounded bg-grey/20"></div>
-              <span class="text-sm text-primary font-mono">{{
-                  featuredArticles[0].authors?.[0]?.name || 'Unknown'
-                }}</span>
-            </div>
-            <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">{{
-                formatDateShort(featuredArticles[0].date.string)
-              }}</span>
-          </div>
-        </div>
-      </div>
-    </a>
-
-    <!-- Smaller Articles (Right) -->
-    <div class="flex flex-col divide-y divide-stroke md:col-span-1">
-      <!-- Article 2 -->
-      <a
-          v-if="featuredArticles[1]"
-          :href="featuredArticles[1].url"
-          class="featured-article-small flex flex-col hover:bg-beige transition-colors"
-      >
-        <!-- Image -->
-        <div class="p-10 pb-5">
-          <div class="w-full bg-nickel overflow-hidden">
-            <img
-                v-if="featuredArticles[1].cover"
-                :src="featuredArticles[1].cover"
-                :alt="featuredArticles[1].title"
-                class="w-full object-cover"
-            />
-          </div>
-        </div>
-
-        <!-- Content -->
-        <div class="px-10 pb-10 flex flex-col gap-2 grow">
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">// {{
-              featuredArticles[1].category
-            }}</span>
-          <h4 class="text-xl text-pretty text-primary font-normal leading-snug">
-            {{ featuredArticles[1].title }}
-          </h4>
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">{{
-              formatDateShort(featuredArticles[1].date.string)
-            }}</span>
-        </div>
-      </a>
-
-      <!-- Article 3 -->
-      <a
-          v-if="featuredArticles[2]"
-          :href="featuredArticles[2].url"
-          class="featured-article-small flex flex-col hover:bg-beige transition-colors"
-      >
-        <!-- Image -->
-        <div class="p-10 pb-5">
-          <div class="w-full bg-nickel overflow-hidden">
-            <img
-                v-if="featuredArticles[2].cover"
-                :src="featuredArticles[2].cover"
-                :alt="featuredArticles[2].title"
-                class="w-full object-cover"
-            />
-          </div>
-        </div>
-
-        <!-- Content -->
-        <div class="px-10 pb-10 flex flex-col gap-2 grow">
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">// {{
-              featuredArticles[2].category
-            }}</span>
-          <h4 class="text-xl text-pretty text-primary font-normal leading-snug">
-            {{ featuredArticles[2].title }}
-          </h4>
-          <span class="text-grey text-xs font-medium font-mono uppercase tracking-wide">{{
-              formatDateShort(featuredArticles[2].date.string)
-            }}</span>
-        </div>
-      </a>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-</style>

package/src/vitepress/components/voidzero/blog/types.ts

@@ -1,56 +0,0 @@
-/**
- * Shared types for VoidZero blog components
- */
-
-type BaseAuthor = {
-  name: string
-}
-
-type GravatarAuthor = {
-  type: 'gravatar'
-  gravatar: string
-}
-
-type GitHubAuthor = {
-  type: 'github'
-  username: string
-}
-
-export type Author = BaseAuthor & (GravatarAuthor | GitHubAuthor)
-
-export interface Post {
-  title: string
-  url: string
-  category: string
-  cover: string
-  authors: Author[]
-  date: {
-    time: number
-    string: string
-  }
-  excerpt: string | undefined
-}
-
-/**
- * Helper to get author avatar image URL
- */
-export function getAuthorImage(author: Author): string | null {
-  if ('gravatar' in author && author.gravatar) {
-    return `https://www.gravatar.com/avatar/${author.gravatar}?s=80`
-  }
-  if ('username' in author && author.username) {
-    return `https://github.com/${author.username}.png?size=80`
-  }
-  return null
-}
-
-/**
- * Format date as "SEPT 11, 2025"
- */
-export function formatDateShort(dateString: string): string {
-  const date = new Date(dateString)
-  const month = date.toLocaleDateString('en-US', {month: 'short'}).toUpperCase()
-  const day = date.getDate()
-  const year = date.getFullYear()
-  return `${month} ${day}, ${year}`
-}

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

@@ -1,235 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import emblaCarouselVue from 'embla-carousel-vue'
-import Autoplay from 'embla-carousel-autoplay'
-
-// Import assets
-import plaidLogo from '@assets/clients/plaid.svg'
-import viteIcon from '@assets/icons/vite-light.svg'
-import vitestIcon from '@assets/icons/vitest-light.svg'
-import rolldownIcon from '@assets/icons/rolldown-light.svg'
-import oxcIcon from '@assets/icons/oxc-light.svg'
-
-// Slides data
-const slides = ref([
-  {
-    id: 1,
-    title: 'How PLAID Cut Build Times by 97% Migrating From Rollup To Rolldown',
-    thumbnail: plaidLogo,
-    projects: [
-      { name: 'Vite', logo: viteIcon, url: 'https://vite.dev/' },
-      { name: 'Rolldown', logo: rolldownIcon, url: 'https://rolldown.rs/' }
-    ]
-  },
-  {
-    id: 2,
-    title: 'How PLAID Cut Build Times by 97% Migrating From Rollup To Rolldown',
-    thumbnail: plaidLogo,
-    projects: [
-      { name: 'Vitest', logo: vitestIcon, url: 'https://vitest.dev/' },
-      { name: 'Rolldown', logo: rolldownIcon, url: 'https://rolldown.rs/' }
-    ]
-  },
-  {
-    id: 3,
-    title: 'How PLAID Cut Build Times by 97% Migrating From Rollup To Rolldown',
-    thumbnail: plaidLogo,
-    projects: [
-      { name: 'Vite', logo: viteIcon, url: 'https://vite.dev/' },
-      { name: 'Oxc', logo: oxcIcon, url: 'https://oxc.rs/' }
-    ]
-  },
-  {
-    id: 4,
-    title: 'How PLAID Cut Build Times by 97% Migrating From Rollup To Rolldown',
-    thumbnail: plaidLogo,
-    projects: [
-      { name: 'Vitest', logo: vitestIcon, url: 'https://vitest.dev/' },
-      { name: 'Oxc', logo: oxcIcon, url: 'https://oxc.rs/' }
-    ]
-  }
-])
-
-// Selected slide index
-const selectedIndex = ref(0)
-
-// Main carousel
-const [emblaMainRef, emblaMainApi] = emblaCarouselVue(
-    { loop: true },
-    [Autoplay()]
-)
-
-// Thumbnail carousel
-const [emblaThumbRef, emblaThumbApi] = emblaCarouselVue({
-  containScroll: 'keepSnaps',
-  dragFree: true
-})
-
-// Click handler for thumbnails
-const onThumbClick = (index) => {
-  if (!emblaMainApi.value) return
-  emblaMainApi.value.scrollTo(index)
-}
-
-// Sync thumbnail active state with main carousel
-const onSelect = () => {
-  if (!emblaMainApi.value || !emblaThumbApi.value) return
-  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()
-  emblaThumbApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
-}
-
-// Set up event listeners
-onMounted(() => {
-  if (!emblaMainApi.value || !emblaThumbApi.value) return
-
-  onSelect()
-  emblaMainApi.value.on('select', onSelect)
-  emblaMainApi.value.on('reInit', onSelect)
-})
-
-// Clean up event listeners
-onUnmounted(() => {
-  if (!emblaMainApi.value) return
-  emblaMainApi.value.off('select', onSelect)
-  emblaMainApi.value.off('reInit', onSelect)
-})
-</script>
-
-<template>
-  <section class="wrapper">
-    <!-- Main Carousel -->
-    <div class="bg-wine case-study-background">
-      <div class="overflow-hidden" ref="emblaMainRef">
-        <div class="flex py-10 md:py-20">
-          <div
-              v-for="(slide, index) in slides"
-              :key="slide.id"
-              :class="['embla__slide p-6 md:p-10 w-[calc(100vw-4rem)] md:w-[55rem] rounded-lg relative', index === selectedIndex ? 'bg-primary' : 'bg-primary/75']"
-          >
-            <div :class="['embla__slide__content', { 'embla__slide__content--active': index === selectedIndex }]">
-              <img :src="slide.thumbnail" :alt="slide.title" class="absolute top-6 md:top-10 right-6 md:right-10 h-4 md:h-5" />
-              <span class="text-grey text-xs font-mono uppercase tracking-wide">Case Study</span>
-              <a href="#" target="_blank">
-                <h5 class="text-white text-balance max-w-[20rem] pt-5">{{slide.title}}</h5>
-              </a>
-              <a href="#" target="_blank" class="text-white font-medium border-b inline-block mt-4">Read case study →</a>
-              <div class="absolute bottom-0 left-0 right-0 flex gap-4 px-6 md:px-10 py-4 border-t border-slate items-center">
-                <span class="text-grey text-xs font-mono uppercase tracking-wide">OSS</span>
-                <template v-for="(project, projectIndex) in slide.projects" :key="project.name">
-                  <a :href="project.url" target="_blank">
-                    <figure class="project-icon">
-                      <img loading="lazy" class="size-5" :src="project.logo" :alt="project.name">
-                      <figcaption>{{ project.name }}</figcaption>
-                    </figure>
-                  </a>
-                  <span v-if="projectIndex < slide.projects.length - 1"
-                        class="text-grey text-xs font-mono uppercase tracking-wide">//</span>
-                </template>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Thumbnail Carousel -->
-    <div class="embla-thumbs bg-primary">
-      <div class="embla-thumbs__wrapper">
-        <div class="overflow-hidden" ref="emblaThumbRef">
-          <div class="embla-thumbs__container">
-            <div
-                v-for="(slide, index) in slides"
-                :key="`thumb-${slide.id}`"
-                :class="['embla-thumbs__slide', { 'embla-thumbs__slide--selected': index === selectedIndex }]"
-            >
-              <button
-                  type="button"
-                  class="embla-thumbs__slide__button"
-                  @click="onThumbClick(index)"
-              >
-                <img :src="slide.thumbnail" :alt="`Slide ${index + 1}`" class="embla-thumbs__slide__img" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-.case-study-background {
-  background-image: url('@assets/voidzero/backgrounds/casestudies.jpg');
-  background-size: cover;
-  background-position: center;
-}
-
-.embla__slide {
-  flex: 0 0 auto;
-  min-width: 0;
-  min-height: 20rem;
-  margin: 0 1rem;
-  transition: background-color 0.6s ease, backdrop-filter 0.6s ease;
-}
-
-@media (min-width: 768px) {
-  .embla__slide {
-    min-height: 25rem;
-    margin: 0 2rem;
-  }
-}
-
-.embla__slide__content {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.embla__slide__content--active {
-  opacity: 1;
-}
-
-.embla-thumbs {
-  padding: 1rem 2rem;
-}
-
-.embla-thumbs__wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.embla-thumbs__container {
-  display: flex;
-  gap: 1rem;
-}
-
-.embla-thumbs__slide {
-  flex: 0 0 auto;
-  opacity: 0.3;
-  transition: all 0.3s ease;
-  transform: scale(0.8);
-}
-
-.embla-thumbs__slide--selected {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.embla-thumbs__slide__button {
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.embla-thumbs__slide__img {
-  height: 1.25rem;
-  width: auto;
-  max-width: 8rem;
-  object-fit: contain;
-}
-
-</style>

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

@@ -1,5 +0,0 @@
-<template>
-  <section class="wrapper wrapper--ticks border-t px-10 py-6 md:py-12 flex flex-col justify-center gap-5">
-    <h6 class="text-start text-white">Hear from our customers</h6>
-  </section>
-</template>

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

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  href: string
-  stars: string
-  contributors: string
-}>()
-</script>
-
-<template>
-  <div class="flex gap-4 divide-nickel items-center bg-slate px-3 py-1 w-fit rounded-sm">
-    <a :href="href" target="_blank" rel="noopener noreferrer">
-      <img src="@assets/social/github.svg" alt="GitHub" class="invert size-6">
-    </a>
-    <div class="flex gap-1 items-baseline">
-      <span class="text-white font-medium tracking-tight">{{ stars }}</span>
-      <span class="text-grey text-base tracking-tight">stars</span>
-    </div>
-    <div class="flex gap-1 items-baseline">
-      <span class="text-white text-lg font-medium tracking-tight">{{ contributors }}</span>
-      <span class="text-grey text-base tracking-tight">contributors</span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="wrapper flex flex-col justify-start items-center gap-6 pt-6 md:pt-20 pb-10">
-    <div class="w-full sm:w-2xl flex flex-col justify-start items-center gap-10 px-5 sm:px-0">
-      <div class="flex flex-col justify-start items-center gap-4">
-        <div inert class="px-3 py-1 bg-primary-white rounded shadow-[0px_2px_4px_0px_rgba(0,0,0,0.05)] outline outline-nickel/5 flex items-center gap-1.5 font-mono font-medium text-sm tracking-tighter mb-3">
-          <div class="p-0.5 bg-[#00B442]/10 rounded-sm inline-flex justify-start items-center gap-2">
-            <div class="size-1.5 bg-[#00B442] rounded-[1.10px] animate-pulse"></div>
-          </div>
-          <span class="text-grey">prod server</span>
-          <span class="text-grey">/</span>
-          <span class="text-nickel">running</span>
-        </div>
-        <h1 class="text-center text-primary text-balance shine-text">
-          <span class="inline-block">The JavaScript</span>
-          <span class="inline-block">Tooling Company</span>
-        </h1>
-        <p class="self-stretch text-center text-balance text-nickel">We are building a unified JavaScript toolchain to make web developers more productive than ever before.</p>
-      </div>
-      <div class="flex items-center gap-5">
-        <a href="https://viteplus.dev" target="_blank" rel="noopener noreferrer" class="button button--primary">
-          <img src="@assets/icons/viteplus-light.svg" class="size-7" alt="Vite+ Logo">
-          <span>Explore Vite+</span>
-        </a>
-      </div>
-    </div>
-    <RiveAnimation
-        :desktop-src="homepageAnimation"
-        :mobile-src="homepageAnimationMobile"
-        :desktop-width="1280"
-        :desktop-height="580"
-        :mobile-width="343"
-        :mobile-height="148"
-        canvas-class="w-full pt-6 md:pt-0 max-w-[60rem] mx-auto"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import homepageAnimation from '@assets/voidzero/animations/1280_x_552_homepage.riv'
-import homepageAnimationMobile from '@assets/voidzero/animations/343_x_148_homepage_mobile.riv'
-</script>
-
-<style scoped>
-.shine-text {
-  background: linear-gradient(
-      110deg,
-      var(--color-primary) 0%,
-      var(--color-primary) 40%,
-      #6C3BFF 48%,
-      #6C3BFF 50%,
-      #6C3BFF 52%,
-      var(--color-primary) 60%,
-      var(--color-primary) 100%
-  );
-  background-size: 400% 100%;
-  background-position: 100% 0;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shine 5s ease-in-out 0s 1 forwards;
-}
-
-@keyframes shine {
-  to {
-    background-position: 35% 0;
-  }
-}
-</style>

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

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import accelLogo from '@assets/voidzero/investors/accel.svg'
-import amplifyLogo from '@assets/voidzero/investors/amplify.svg'
-import sunflowerLogo from '@assets/voidzero/investors/sunflower.png'
-import peakxvLogo from '@assets/voidzero/investors/peakxv.png'
-
-const investors = [
-  {src: accelLogo, alt: 'Accel'},
-  {src: peakxvLogo, alt: 'Peak XV'},
-  {src: sunflowerLogo, alt: 'Sunflower'},
-  {src: amplifyLogo, alt: 'Amplify'}
-]
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t items-center bg-[#FBFAF7] grid grid-cols-1 md:grid-cols-10">
-    <div class="px-5 md:px-10 py-6 md:py-0 col-span-4 border-b md:border-b-0 text-center md:text-start">
-      <p class="text-primary text-balance">Backed by the very best in the dev tools space.</p>
-    </div>
-    <div class="col-span-6 border-l border-stroke">
-      <LogoGrid
-          :logos="investors"
-      />
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-</style>

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

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import NewsletterForm from '@components/shared/NewsletterForm.vue'
-
-interface Props {
-  endpoint?: string
-  formId?: string
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t">
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6 px-6 md:px-10 py-10">
-      <h2 class="text-xl md:text-2xl text-primary font-normal">
-        Subscribe to our monthly newsletter
-      </h2>
-      <div class="w-full md:w-auto md:min-w-[400px]">
-        <NewsletterForm :endpoint="endpoint" :form-id="formId" />
-      </div>
-    </div>
-  </section>
-</template>

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

@@ -1,6 +0,0 @@
-<template>
-  <section class="wrapper wrapper--ticks border-t px-10 h-48 sm:h-90 flex flex-col justify-center gap-5">
-    <h2 class="text-start text-white">Open Source</h2>
-    <p class="max-w-md text-balance text-white/70">We are the creators, maintainers, and contributors of some of the most critical infrastructure projects in the JavaScript ecosystem.</p>
-  </section>
-</template>