@voidzero-dev/vitepress-theme 2.0.1 → 2.1.0

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

@@ -1,419 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from "vue";
-import GitHubStats from "./GitHubStats.vue";
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-
-// Import project icons
-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";
-
-// Import terminal SVGs
-import viteTerminal from "@assets/voidzero/terminals/vite.svg";
-import vitestTerminal from "@assets/voidzero/terminals/vitest.svg";
-import rolldownTerminal from "@assets/voidzero/terminals/rolldown.svg";
-
-// Import Rive animations
-import viteAnimation from "@assets/voidzero/animations/480_x_480_build_tool_for_web.riv";
-import vitestAnimation from "@assets/voidzero/animations/480_x_480_next_generation_runner.riv";
-import rolldownAnimation from "@assets/voidzero/animations/480_x_480_fastest_javascript_bundler.riv";
-import oxcAnimation from "@assets/voidzero/animations/480_x_480_language_toolchain.riv";
-
-const activeProject = ref(0);
-const activatedProjects = ref<Set<number>>(new Set([0])); // Track projects that have been activated
-const cardRefs = ref<HTMLElement[]>([]);
-let observer: IntersectionObserver | null = null;
-
-// Once a project becomes active, add it to the set (animations only play in, never out)
-watch(activeProject, (newIndex) => {
-  activatedProjects.value.add(newIndex);
-});
-
-const projects = [
-  {
-    id: "vite",
-    name: "Vite",
-    url: "https://vite.dev",
-    icon: viteIcon,
-    terminal: viteTerminal,
-    animation: viteAnimation,
-  },
-  {
-    id: "vitest",
-    name: "Vitest",
-    url: "https://vitest.dev",
-    icon: vitestIcon,
-    terminal: vitestTerminal,
-    animation: vitestAnimation,
-  },
-  {
-    id: "rolldown",
-    name: "Rolldown",
-    url: "https://rolldown.rs",
-    icon: rolldownIcon,
-    terminal: rolldownTerminal,
-    animation: rolldownAnimation,
-  },
-  {
-    id: "oxc",
-    name: "Oxc",
-    url: "https://oxc.rs",
-    icon: oxcIcon,
-    terminal: null, // Oxc uses Rive animation instead
-    animation: oxcAnimation,
-  },
-];
-
-const scrollToProject = (index: number) => {
-  const card = cardRefs.value[index];
-  if (card) {
-    card.scrollIntoView({ behavior: "smooth", block: "center" });
-  }
-};
-
-onMounted(() => {
-  observer = new IntersectionObserver(
-    () => {
-      // Calculate which card's center is closest to viewport center
-      const viewportCenter = window.innerHeight / 2;
-      let closestIndex = 0;
-      let closestDistance = Infinity;
-
-      cardRefs.value.forEach((card, index) => {
-        if (!card) return;
-        const rect = card.getBoundingClientRect();
-
-        // Skip if card is completely out of viewport
-        if (rect.bottom < 0 || rect.top > window.innerHeight) return;
-
-        // Calculate card's center position relative to viewport
-        const cardCenter = rect.top + rect.height / 2;
-
-        // Calculate absolute distance to viewport center
-        const distance = Math.abs(cardCenter - viewportCenter);
-
-        // Track the closest card
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestIndex = index;
-        }
-      });
-
-      activeProject.value = closestIndex;
-    },
-    { threshold: [0, 0.1, 0.5, 1] }
-  );
-
-  cardRefs.value.forEach((card) => {
-    if (card) observer?.observe(card);
-  });
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
-});
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t flex">
-    <div class="w-72 p-10 sticky top-0 self-start hidden md:flex flex-col">
-      <ul class="flex flex-col gap-4">
-        <li
-          v-for="(project, index) in projects"
-          :key="project.id"
-          :class="[
-            'transition-all duration-500 ease-out',
-            activeProject === index ? '' : 'opacity-40 grayscale',
-          ]"
-        >
-          <button
-            type="button"
-            class="flex gap-4 text-base cursor-pointer bg-transparent border-none p-0"
-            @click="scrollToProject(index)"
-          >
-            <img :src="project.icon" :alt="project.name" class="size-6" />
-            {{ project.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
-    <div class="w-full md:border-l border-nickel">
-      <!-- Vite -->
-      <div
-        class="grid md:grid-cols-2 w-full"
-        :ref="el => cardRefs[0] = el as HTMLElement"
-        data-project="0"
-      >
-        <div class="flex flex-col p-10 justify-between gap-20">
-          <div class="flex flex-col gap-5 max-w-[20rem]">
-            <span class="text-grey text-xs font-mono uppercase tracking-wide"
-              >Vite</span
-            >
-            <h4 class="text-white text-pretty">The build tool for the web</h4>
-            <p class="text-white/70 text-base max-w-[25rem] text-pretty">
-              Vite is the default choice for single-page web applications and
-              the foundation for fullstack frameworks like TanStack Start, Nuxt,
-              SvelteKit and more.
-            </p>
-            <a
-              :href="projects[0].url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="button button--sm inline-block w-fit mt-5"
-              >Explore Vite</a
-            >
-          </div>
-          <GitHubStats
-            href="https://github.com/vitejs/vite"
-            stars="75.0k"
-            contributors="1,161"
-          />
-        </div>
-        <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-          <div
-            class="relative pl-10 h-full flex flex-col justify-center overflow-clip"
-          >
-            <div
-              :class="[
-                'absolute inset-0 bg-vite transition-opacity duration-700 ease-out',
-                activatedProjects.has(0) ? 'opacity-100' : 'opacity-0',
-              ]"
-            ></div>
-            <div
-              :class="[
-                'block p-2 relative bg-slate rounded-tl rounded-bl outline-1 outline-offset-[2px] outline-white/20 transition-transform duration-700 ease-out z-10',
-                activatedProjects.has(0) ? 'translate-x-0' : 'translate-x-10',
-              ]"
-            >
-              <img
-                v-if="projects[0].terminal"
-                loading="lazy"
-                :src="projects[0].terminal"
-                alt="terminal"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Vitest -->
-      <div
-        class="grid md:grid-cols-2 w-full border-t border-nickel"
-        :ref="el => cardRefs[1] = el as HTMLElement"
-        data-project="1"
-      >
-        <div class="flex flex-col p-10 justify-between gap-20">
-          <div class="flex flex-col gap-5 max-w-[20rem]">
-            <span class="text-grey text-xs font-mono uppercase tracking-wide"
-              >Vitest</span
-            >
-            <h4 class="text-white text-pretty">The Vite-native test runner</h4>
-            <p class="text-white/70 text-base max-w-[25rem] text-pretty">
-              Vitest is a feature-rich test runner that understands your Vite
-              config, is Jest-compatible, and works out-of-the-box with
-              TypeScript & ESM.
-            </p>
-            <a
-              :href="projects[1].url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="button button--sm inline-block w-fit mt-5"
-              >Explore Vitest</a
-            >
-          </div>
-          <GitHubStats
-            href="https://github.com/vitest-dev/vitest"
-            stars="14.9k"
-            contributors="631"
-          />
-        </div>
-        <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-          <div
-            class="relative pl-10 h-full flex flex-col justify-end overflow-clip pt-10 sm:pt-0"
-          >
-            <div
-              :class="[
-                'absolute inset-0 bg-vitest transition-opacity duration-700 ease-out',
-                activatedProjects.has(1) ? 'opacity-100' : 'opacity-0',
-              ]"
-            ></div>
-            <div
-              :class="[
-                'block p-2 relative bg-slate rounded-tl outline-1 outline-offset-[2px] outline-white/20 transition-transform duration-700 ease-out z-10',
-                activatedProjects.has(1) ? 'translate-x-0' : 'translate-x-10',
-              ]"
-            >
-              <img
-                v-if="projects[1].terminal"
-                loading="lazy"
-                :src="projects[1].terminal"
-                alt="terminal"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Rolldown -->
-      <div
-        class="grid md:grid-cols-2 w-full border-t border-nickel"
-        :ref="el => cardRefs[2] = el as HTMLElement"
-        data-project="2"
-      >
-        <div class="flex flex-col p-10 justify-between gap-20">
-          <div class="flex flex-col gap-5 max-w-[20rem]">
-            <span class="text-grey text-xs font-mono uppercase tracking-wide"
-              >Rolldown</span
-            >
-            <h4 class="text-white text-pretty">
-              The blazing fast JavaScript bundler
-            </h4>
-            <p class="text-white/70 text-base max-w-[25rem] text-pretty">
-              Rolldown is a Rust-based bundler with Rollup-compatible API, and
-              esbuild-equivalent performance & feature set. It also powers Vite
-              version 8 and above.
-            </p>
-            <a
-              :href="projects[2].url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="button button--sm inline-block w-fit mt-5"
-              >Explore Rolldown</a
-            >
-          </div>
-          <GitHubStats
-            href="https://github.com/rolldown/rolldown"
-            stars="12.2k"
-            contributors="148"
-          />
-        </div>
-        <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-          <div
-            class="relative pl-10 h-full flex flex-col justify-center overflow-clip py-10 sm:py-0"
-          >
-            <div
-              :class="[
-                'absolute inset-0 bg-rolldown transition-opacity duration-700 ease-out',
-                activatedProjects.has(2) ? 'opacity-100' : 'opacity-0',
-              ]"
-            ></div>
-            <div
-              :class="[
-                'block p-2 relative bg-slate rounded-tl rounded-bl outline-1 outline-offset-[2px] outline-white/20 transition-transform duration-700 ease-out z-10',
-                activatedProjects.has(2) ? 'translate-x-0' : 'translate-x-10',
-              ]"
-            >
-              <img
-                v-if="projects[2].terminal"
-                loading="lazy"
-                :src="projects[2].terminal"
-                alt="terminal"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Oxc -->
-      <div
-        class="grid md:grid-cols-2 w-full border-t border-nickel"
-        :ref="el => cardRefs[3] = el as HTMLElement"
-        data-project="3"
-      >
-        <div class="flex flex-col p-10 justify-between gap-20">
-          <div class="flex flex-col gap-5 max-w-[20rem]">
-            <span class="text-grey text-xs font-mono uppercase tracking-wide"
-              >Oxc</span
-            >
-            <h4 class="text-white text-pretty">
-              The fastest JavaScript language toolchain
-            </h4>
-            <p class="text-white/70 text-base max-w-[25rem] text-pretty">
-              Oxc is the foundation of our unified toolchain. It includes linter
-              (oxlint), formatter (oxfmt), parser, resolver, transformer, and
-              minifier, all with state-of-the-art performance.
-            </p>
-            <a
-              :href="projects[3].url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="button button--sm inline-block w-fit mt-5"
-              >Explore Oxc</a
-            >
-          </div>
-          <GitHubStats
-            href="https://github.com/oxc-project/oxc"
-            stars="17.2k"
-            contributors="268"
-          />
-        </div>
-        <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-          <div
-            class="relative pl-10 h-full flex flex-col justify-center overflow-clip"
-          >
-            <div
-              :class="[
-                'absolute inset-0 bg-oxc transition-opacity duration-700 ease-out',
-                activatedProjects.has(3) ? 'opacity-100' : 'opacity-0',
-              ]"
-            ></div>
-            <div
-              :class="[
-                'relative transition-transform duration-700 ease-out z-10',
-                activatedProjects.has(3) ? 'translate-x-0' : 'translate-x-10',
-              ]"
-            >
-              <RiveAnimation
-                :desktop-src="projects[3].animation"
-                :mobile-src="projects[3].animation"
-                :desktop-width="480"
-                :desktop-height="480"
-                :mobile-width="480"
-                :mobile-height="480"
-                canvas-class="w-full"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.bg-vite {
-  background-image: url("@assets/voidzero/backgrounds/vite.jpg");
-  background-size: cover;
-  background-position: center;
-}
-
-.bg-vitest {
-  background-image: url("@assets/voidzero/backgrounds/vitest.jpg");
-  background-size: cover;
-  background-position: center;
-}
-
-.bg-rolldown {
-  background-image: url("@assets/voidzero/backgrounds/rolldown.jpg");
-  background-size: cover;
-  background-position: center;
-}
-
-.bg-oxc {
-  background-image: url("@assets/voidzero/backgrounds/oxc.jpg");
-  background-size: cover;
-  background-position: center;
-}
-
-/* Respect user's motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Ensure smooth scrolling behavior */
-html {
-  scroll-behavior: smooth;
-}
-</style>

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

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import 'vue3-carousel/carousel.css'
-import {Carousel, Slide, Pagination} from 'vue3-carousel'
-
-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
-}
-
-interface Props {
-  posts?: Post[]
-}
-
-withDefaults(defineProps<Props>(), {
-  posts: () => []
-})
-
-const carouselConfig = {
-  itemsToShow: 'auto',
-  wrapAround: true,
-  snapAlign: 'start',
-  autoplay: 3000,
-  transition: 500,
-  mouseDrag: true,
-  touchDrag: true
-}
-</script>
-
-<template>
-  <section
-      class="wrapper border-t wrapper--ticks grid grid-cols-1 md:grid-cols-10 divide-x-0 md:divide-x divide-stroke h-auto md:h-[32.5rem]">
-    <div class="flex flex-col divide-y divide-stroke md:col-span-4">
-      <div class="p-5 md:p-10 grow-0 md:grow flex flex-col gap-6 md:gap-10 md:h-72 justify-center md:justify-start">
-        <h3 class="text-pretty">Featured resources &amp; updates</h3>
-        <a href="/blog" class="button w-fit">All Resources</a>
-      </div>
-      <div class="px-6 py-6 md:px-10 pt-16 md:pb-8 flex flex-col gap-4 relative">
-        <span class="bg-[#F4F3EC]/40 text-primary text-xs absolute top-3 left-3 p-2 rounded font-mono">js</span>
-        <div class="flex flex-col gap-0">
-          <div class="text-grey text-xs font-mono">resources</div>
-          <div class="text-primary text-xs font-mono">.filter<span class="text-grey">(i => i.collection ===</span> "featured"<span class="text-grey">)</span></div>
-          <div class="text-primary text-xs font-mono">.filter<span class="text-grey">(i => i.postedBy ===</span> "VoidZero"<span class="text-grey">)</span></div>
-          <div class="text-primary text-xs font-mono">.filter<span class="text-grey">(i => i.articles.length ===</span> {{posts.length}}<span class="text-grey">)</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="col-span-1 md:col-span-6 border-t border-stroke md:border-t-0">
-      <Carousel v-bind="carouselConfig" class="resources-carousel py-10 pb-30 md:pb-10">
-        <Slide v-for="(post, index) in posts" :key="index">
-          <a
-            :href="post.url"
-            class="bg-white outline-1 outline-stroke my-1 ml-5 md:ml-4 rounded w-[80vw] md:w-[25rem] lg:w-[21rem] aspect-square translate-x-[-1px] flex flex-col overflow-hidden hover:outline-2 transition-all">
-            <div class="w-full aspect-[2/1] overflow-hidden">
-              <img
-                loading="lazy"
-                :src="post.cover"
-                :alt="post.title"
-                class="w-full h-full object-cover">
-            </div>
-            <div class="p-5 flex flex-col gap-4">
-              <span class="text-xs text-grey font-mono uppercase tracking-widest">// {{ post.category }}</span>
-              <h4 class="text-xl text-primary font-sans text-pretty font-normal">
-                {{ post.title }}
-              </h4>
-            </div>
-          </a>
-        </Slide>
-        <template #addons>
-          <Pagination />
-        </template>
-      </Carousel>
-    </div>
-  </section>
-</template>
-
-<style>
-.is-dragging {
-  pointer-events: none;
-}
-
-/* Add left padding to first slide, right padding to last slide - scoped to Resources carousel only */
-.resources-carousel .carousel__slide:first-child {
-  padding-left: 1.25rem;
-}
-
-.resources-carousel .carousel__slide:last-child {
-  padding-right: 1.25rem;
-}
-
-/* Pagination dots - positioned at bottom left */
-.resources-carousel .carousel__pagination {
-  position: absolute;
-  bottom: 1rem;
-  left: 1.25rem;
-  transform: none;
-  gap: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .resources-carousel .carousel__pagination {
-    left: 2rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .resources-carousel .carousel__pagination {
-    bottom: -2.5rem;
-  }
-}
-
-.resources-carousel .carousel__pagination-button {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: var(--color-stroke);
-  transition: background-color 0.2s;
-}
-
-.resources-carousel .carousel__pagination-button--active {
-  background-color: var(--color-primary);
-}
-</style>