@voidzero-dev/vitepress-theme 3.2.0 → 3.3.0

package/src/components/vite/Community.vue

@@ -1,192 +0,0 @@
-<script setup lang="ts">
-import githubIcon from '@assets/social/github-light.svg'
-
-interface Testimonial {
-  name: string
-  handle: string
-  avatar: string
-  comment: string[]
-}
-
-const testimonials: Testimonial[] = [
-  {
-    name: 'Ryan Carniato',
-    handle: '@RyanCarniato',
-    avatar: 'https://pbs.twimg.com/profile_images/1810837163447308292/8Piov0f6_400x400.jpg',
-    comment: [
-      `I'm loving what Vite enables. We've found building SolidStart that it is less a metaframework but a system of symbiotic Vite plugins. While built with SolidJS in mind, they should scale from our simplest template to opinionated starter. We're building an ecosystem on Vite.`,
-    ],
-  },
-  {
-    name: 'Rich Harris',
-    handle: '@Rich_Harris',
-    avatar: 'https://pbs.twimg.com/profile_images/557940120184041473/bFyXy8Pu_400x400.jpeg',
-    comment: [
-      `Vite is basically the united nations of JavaScript at this point. I'll be there as a representative of Sveltelandia`,
-    ],
-  },
-  {
-    name: 'David East',
-    handle: '@_davideast',
-    avatar: 'https://pbs.twimg.com/profile_images/1691627325794725888/voQFcYjY_400x400.jpg',
-    comment: [
-      'Each and every time I use Vite, I feel a true sense of pure and unbridled joy.',
-    ],
-  },
-  {
-    name: 'Mark Dalgleish',
-    handle: '@markdalgleish',
-    avatar: 'https://pbs.twimg.com/profile_images/754886061872979968/BzaOWhs1_400x400.jpg',
-    comment: [
-      `It's also a great platform to build a framework on since it provides a pluggable dev environment.`,
-      `Community is amazing too.`,
-    ],
-  },
-  {
-    name: 'Jason Miller',
-    handle: '@_developit',
-    avatar: 'https://pbs.twimg.com/profile_images/1374778373239681025/Sc9ehtAr_400x400.jpg',
-    comment: [
-      `Every time I suspect I've hit the bounds of what Vite can do, I end up being wrong.`,
-    ],
-  },
-  {
-    name: 'David Cramer',
-    handle: '@zeeg',
-    avatar: 'https://pbs.twimg.com/profile_images/1911613315765133312/HVkULegC_400x400.jpg',
-    comment: ['Vite has been a game changer for the industry.'],
-  },
-  {
-    name: 'Dion Almaer',
-    handle: '@dalmaer',
-    avatar: 'https://pbs.twimg.com/profile_images/3380865881/f73b3687ff39b795db05fcaf35972270_400x400.jpeg',
-    comment: [
-      'I am so excited to see so many great frameworks teaming up on top of vite. So many will benefit. ❤️ to the vite team.',
-    ],
-  },
-  {
-    name: 'Christoph Nakazawa',
-    handle: '@cpojer',
-    avatar: 'https://pbs.twimg.com/profile_images/1910252462126313472/gXgT-jxL_400x400.jpg',
-    comment: ['Vite is gonna eat the (JavaScript) world.'],
-  },
-  {
-    name: 'Nikolaj',
-    handle: '@lopugit',
-    avatar: 'https://avatars.githubusercontent.com/u/13629190?v=4',
-    comment: [
-      'Wow, wow, wow, wow, wow, wow, Vite is..... Vite is.... Wow 🤤🤯🙏',
-    ],
-  },
-]
-</script>
-
-<template>
-  <div class="wrapper wrapper--ticks border-t pt-14 sm:pt-30 px-5 sm:px-10">
-    <div class="flex flex-col sm:flex-row justify-between items-center gap-8 sm:gap-20 text-center sm:text-left">
-      <div class="flex flex-col gap-3">
-        <h3 class="text-white max-w-xl text-balance">Loved by the community</h3>
-        <p class="max-w-md text-white/70 text-balance">Don't take our word for it - listen to what Vite
-          community members have to say.</p>
-      </div>
-      <div class="flex gap-8 sm:gap-12 items-start justify-center sm:justify-start sm:pr-20">
-        <!-- GitHub Stars -->
-        <div class="flex flex-col gap-3">
-          <h2 class="text-white">75k+</h2>
-          <p class="text-grey flex items-center gap-2">
-            <img :src="githubIcon" alt="" class="size-6" />
-            Github Stars
-          </p>
-        </div>
-
-        <!-- NPM Downloads -->
-        <div class="flex flex-col gap-3">
-          <h2 class="text-white">40m+</h2>
-          <p class="text-grey">Weekly NPM downloads</p>
-        </div>
-      </div>
-    </div>
-    <div class="pt-14 sm:pt-30 h-[50rem] overflow-clip [mask-image:linear-gradient(to_bottom,black_70%,transparent_100%)]">
-      <!-- Masonry Grid -->
-      <div class="columns-1 sm:columns-2 lg:columns-3 gap-5">
-        <div
-          v-for="(testimonial, index) in testimonials"
-          :key="index"
-          class="break-inside-avoid mb-5"
-        >
-          <div
-            class="testimonial-card relative overflow-clip isolate rounded-lg p-6 sm:px-8 sm:py-10 flex flex-col gap-6
-                   before:content-[''] before:absolute before:inset-0 before:opacity-0 before:z-0 before:pointer-events-none before:transition-opacity before:duration-100 before:ease-in-out
-                   after:content-[''] after:absolute after:inset-px after:z-[1] after:rounded-lg after:bg-slate after:border after:border-nickel after:transition-[border-color,background] after:duration-100 after:ease-in-out
-                   hover:before:opacity-100 hover:after:border-transparent"
-          >
-            <!-- Comment -->
-            <div class="relative z-[2] flex flex-col gap-4">
-              <p v-for="(paragraph, pIndex) in testimonial.comment" :key="pIndex" class="text-white/70 leading-relaxed text-sm sm:text-base">
-                {{ paragraph }}
-              </p>
-            </div>
-
-            <!-- Author -->
-            <div class="relative z-[2] flex items-center gap-5 mt-auto">
-              <!-- Avatar -->
-              <img :src="testimonial.avatar" :alt="testimonial.name" class="w-12 h-12 rounded-sm object-cover flex-shrink-0" />
-
-              <!-- Author info -->
-              <div class="flex flex-col">
-                <span class="text-grey text-sm font-mono">{{ testimonial.name }}</span>
-                <span class="text-biege text-sm font-mono">{{ testimonial.handle }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Background image and animation for ::before pseudo-element */
-.testimonial-card::before {
-  background-image: url('@assets/vite/vite-featurepanel-4-background.jpg');
-  background-size: 150% 150%;
-  background-position: center;
-  animation: move-background 16s ease-in-out infinite;
-}
-
-/* Randomize animation timing for organic feel */
-.testimonial-card:nth-child(2)::before {
-  animation-duration: 18s;
-  animation-delay: -3s;
-}
-
-.testimonial-card:nth-child(3)::before {
-  animation-duration: 14s;
-  animation-delay: -7s;
-}
-
-.testimonial-card:nth-child(4)::before {
-  animation-duration: 20s;
-  animation-delay: -5s;
-}
-
-.testimonial-card:nth-child(5)::before {
-  animation-duration: 15s;
-  animation-delay: -9s;
-}
-
-.testimonial-card:nth-child(6)::before {
-  animation-duration: 19s;
-  animation-delay: -2s;
-}
-
-.testimonial-card:nth-child(7)::before {
-  animation-duration: 17s;
-  animation-delay: -11s;
-}
-
-.testimonial-card:nth-child(8)::before {
-  animation-duration: 16s;
-  animation-delay: -6s;
-}
-</style>

package/src/components/vite/FeatureGrid1.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
-    <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 flex flex-col gap-3">
-        <h5 class="text-balance sm:text-pretty text-white">Instant Server Start</h5>
-        <p class="sm:max-w-[28rem] text-pretty">On demand source file serving over
-          native ESM, with blazing fast
-          dependency pre-bundling.</p>
-      </div>
-      <div class="card-bg1 p-10 sm:p-15 flex justify-center">
-        <img src="@assets/vite/vite-featurepanel-1-terminal.svg" alt="Terminal" inert loading="lazy" />
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-3 justify-between border-r-0">
-      <div class="p-5 sm:p-10 flex flex-col gap-3">
-        <h5 class="text-white">Lightning Fast HMR</h5>
-        <p class="max-w-[26rem] text-pretty">Instantly reflect changes as you save, no matter how
-          big your app is.</p>
-      </div>
-      <div class="flex justify-end">
-        <img src="@assets/vite/vite-featurepanel-2-terminal.png" class="md:max-w-[80%]" inert loading="lazy"
-          alt="lightning fast hot module replacement">
-      </div>
-    </div>
-
-    <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3 lg:border-b-0">
-      <h5 class="text-white">Rich Features Out of the Box</h5>
-      <p class="sm:max-w-[28rem] text-pretty">TypeScript, JSX, CSS, Workers, Web
-        Assembly... and more with just a plugin away.</p>
-      <RiveAnimation :desktop-src="viteAnimation" :mobile-src="viteAnimation" :desktop-width="563" :desktop-height="300"
-        :mobile-width="563" :mobile-height="420" canvas-class="w-full" />
-    </div>
-
-    <div class="flex flex-col gap-3 justify-between border-r-0 border-b-0">
-      <div class="p-5 sm:p-10 flex flex-col gap-3">
-        <h5 class="text-white">Optimized Build</h5>
-        <p class="max-w-[25rem] text-pretty">Advanced tree-shaking, built-in
-          minification, fine-grained chunking control
-          powered by Rolldown.</p>
-      </div>
-      <div class="card-bg p-10 sm:p-15 flex justify-center">
-        <img src="@assets/vite/vite-featurepanel-4-terminal.svg" inert loading="lazy" alt="optimized build">
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.card-bg1 {
-  background-image: url('@assets/vite/vite-featurepanel-1-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-
-.card-bg {
-  background-image: url('@assets/vite/vite-featurepanel-4-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>

package/src/components/vite/FeatureGrid2.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_plugin.riv'
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
-    <div class="p-5 sm:p-10 flex flex-col gap-3">
-      <h5 class="text-balance sm:text-pretty text-white">Flexible Plugin System</h5>
-      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's
-        well-designed plugin interface with a few
-        extra Vite-specific options.</p>
-      <RiveAnimation :desktop-src="flexiblePluginAnimation" :desktop-width="640" :desktop-height="300"
-        canvas-class="w-[calc(100%_+_2.5rem)] mt-5 -mx-5" />
-    </div>
-
-    <div class="flex flex-col gap-3 border-r-0 justify-between">
-      <div class="p-5 sm:p-10 flex flex-col gap-3">
-        <h5 class="text-white">Fully Typed API</h5>
-        <p class="max-w-[26rem] text-pretty">Designed to be built on top of.</p>
-      </div>
-      <div class="card-bg p-5 sm:p-10 flex justify-center">
-        <img src="@assets/vite/vite-typed-api.svg" inert loading="lazy" alt="typed api">
-      </div>
-    </div>
-
-    <div class="p-5 sm:p-10 flex flex-col gap-3 lg:border-b-0">
-      <h5 class="text-white">First class SSR Support</h5>
-      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to
-        setup custom SSR (Server-Side
-        Rendering), or build your own SSR framework.</p>
-      <img src="@assets/vite/vite-ssr-support.png" alt="SSR Support" loading="lazy" class="w-full px-5">
-    </div>
-
-    <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 flex flex-col gap-3">
-        <h5 class="text-white">Continuous ecosystem integration</h5>
-        <p class="max-w-[25rem] text-pretty">Our CI continuously tests Vite changes
-          against downstream projects,
-          allowing us to improve Vite with stability and confidence.</p>
-      </div>
-      <div class="px-5 sm:px-10 flex justify-center">
-        <img src="@assets/vite/vite-ci.svg" inert loading="lazy" alt="continuous ecosystem integration">
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.card-bg {
-  background-image: url('@assets/vite/vite-featurepanel-4-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>

package/src/components/vite/Frameworks.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t py-8 sm:py-16 px-5 sm:px-10">
-    <img src="@assets/vite/vite-frameworks-mobile.png" alt="Frameworks powered by Vite" loading="lazy" class="w-full block sm:hidden">
-    <img src="@assets/vite/vite-frameworks.png" alt="Frameworks powered by Vite" loading="lazy" class="w-full hidden sm:block">
-  </section>
-</template>
-
-<style scoped>
-
-</style>

package/src/components/vite/Hero.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import CodeGroup from "@components/shared/CodeGroup.vue";
-
-import viteAnimation from '@assets/vite/animations/641_x_629_vite_masthead.riv'
-
-const installTabs = [
-  { label: 'npm', code: '$ npm create vite@latest' },
-  { label: 'Yarn', code: '$ yarn create vite' },
-  { label: 'pnpm', code: '$ pnpm create vite' },
-  { label: 'Bun', code: '$ bun create vite' },
-  { label: 'Deno', code: '$ deno init --npm vite' }
-]
-</script>
-
-<template>
-  <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel md:divide-x">
-    <div class="flex flex-col p-10 justify-between gap-20 items-center md:items-start">
-      <div class="flex flex-col gap-5 items-center md:items-start text-center md:text-left">
-        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
-          <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
-          <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </a>
-        <h1 class="text-white text-pretty max-w-[25rem]">The Build Tool for the Web</h1>
-        <p class="text-white/70 md:text-lg max-w-[27rem] text-pretty">Vite is a blazing fast frontend build tool
-          powering
-          the next generation of web applications.</p>
-        <div class="flex items-center gap-5 mt-8">
-          <a href="/guide/" class="button button--primary inline-block w-fit">
-            Get Started
-          </a>
-          <a href="https://github.com/vitejs/vite" target="_blank" rel="noopener noreferrer"
-            class="button inline-block w-fit">
-            View on GitHub
-          </a>
-        </div>
-      </div>
-      <CodeGroup :tabs="installTabs" class="hidden md:block w-full"
-        style="--vp-code-tab-bg:var(--color-slate);--vp-code-block-bg:var(--color-slate);--vp-code-tab-divider:#000" />
-    </div>
-    <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-      <div class="relative px-10 h-full flex flex-col justify-center overflow-clip py-10 sm:py-0">
-        <RiveAnimation :desktop-src="viteAnimation" :mobile-src="viteAnimation" :desktop-width="641"
-          :desktop-height="629" :mobile-width="641" :mobile-height="629" canvas-class="w-full" />
-      </div>
-    </div>
-  </div>
-</template>