feat: use voidzero theme

Author: sapphi-red

docs/.vitepress/config.ts

@@ -1,17 +1,23 @@
 import { defineConfig } from 'vitepress'
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 import Icons from 'unplugin-icons/vite'
+import { extendConfig } from '@voidzero-dev/vitepress-theme/config'
 
-export default defineConfig({
+const config = defineConfig<unknown>({
   title: 'Vite Plugin Registry',
-  description: 'Discover plugins for Vite, Rollup, Rolldown',
+  description: 'Discover plugins for Vite, Rolldown, and Rollup',
   cleanUrls: true,
 
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  head: [['link', { rel: 'icon', href: 'https://vite.dev/logo-without-border.svg' }]],
 
   themeConfig: {
+    variant: "vite",
+
+    footer: {
+      copyright: `© 2026 VoidZero Inc. and Vite contributors.`,
+    },
+
     nav: [
-      { text: 'About', link: '/about' },
       { text: 'Plugins', link: '/plugins' },
       { text: 'Guide', link: '/guide/' },
     ],
@@ -35,7 +41,7 @@ export default defineConfig({
       provider: 'local',
     },
 
-    socialLinks: [{ icon: 'github', link: 'https://github.com/sapphi-red/vite-plugin-registry' }],
+    socialLinks: [{ icon: 'github', link: 'https://github.com/vitejs/vite-plugin-registry' }],
   },
   markdown: {
     config(md) {
@@ -46,3 +52,5 @@ export default defineConfig({
     plugins: [groupIconVitePlugin(), Icons({ compiler: 'vue3' })],
   },
 })
+
+export default extendConfig(config)

docs/.vitepress/theme/index.ts

@@ -1,11 +1,12 @@
-import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
+import ViteTheme from "@voidzero-dev/vitepress-theme/src/vite";
 import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import 'virtual:group-icons.css'
+import "./styles.css";
 
 export default {
-  extends: DefaultTheme,
+  extends: ViteTheme,
   enhanceApp({ app }) {
     app.use(FloatingVue)
   },

docs/.vitepress/theme/landing/About.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <section class="wrapper border-t px-5 sm:px-10 py-14 sm:py-20">
+    <div class="max-w-2xl mx-auto">
+      <p class="text-white/70 text-pretty mb-8">
+        This registry collects plugin data from npm daily and provides a searchable directory of plugins for Vite, Rolldown, and Rollup.
+      </p>
+      <p class="text-white/70 text-pretty mb-8">
+        The data is refreshed every day automatically based on the data from npm and metadata provided by plugin authors.
+      </p>
+      <h3 class="text-white text-lg font-semibold mb-4">For Plugin Authors</h3>
+      <p class="text-white/70 text-pretty mb-8">
+        Plugin authors can provide enhanced metadata by adding a <code class="text-white/90 bg-white/10 px-1.5 py-0.5 rounded">vite-plugin-registry</code> field to their <code class="text-white/90 bg-white/10 px-1.5 py-0.5 rounded">package.json</code>. See the <a href="/guide/" class="text-white underline">Guide</a> for details.
+      </p>
+      <h3 class="text-white text-lg font-semibold mb-4">Credits</h3>
+      <p class="text-white/70 text-pretty">
+        This registry is partially inspired by <a href="https://www.flint.fyi/blog/what-flint-does-differently/#plugin-registry" class="text-white underline" target="_blank" rel="noopener noreferrer">Flint's blog post "What Flint Does Differently"</a>.
+      </p>
+    </div>
+  </section>
+</template>

docs/.vitepress/theme/landing/Hero.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="wrapper wrapper--ticks grid w-full border-nickel"
+  >
+    <div
+      class="flex flex-col p-10 justify-between gap-10 items-center"
+    >
+      <div
+        class="flex flex-col gap-5 items-center text-center"
+      >
+        <h1 class="text-white text-pretty max-w-[30rem]">
+          Vite Plugin Registry
+        </h1>
+        <p class="text-white/70 md:text-lg max-w-[30rem] text-pretty">
+          Discover and compare plugins for Vite, Rollup, and Rolldown.
+          Find the right tools to enhance your build workflow.
+        </p>
+        <div class="flex items-center gap-5 mt-8">
+          <a href="/plugins/" class="button button--primary inline-block w-fit">
+            Browse Plugins
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/landing/Layout.vue

@@ -0,0 +1,15 @@
+<script setup>
+import Hero from './Hero.vue'
+import About from './About.vue'
+import Footer from '@components/oss/Footer.vue'
+</script>
+
+<template>
+  <Hero />
+  <About />
+  <Footer
+    heading="Start building"
+    button-text="Browse Plugins"
+    button-link="/plugins/"
+  />
+</template>

docs/.vitepress/theme/styles.css

@@ -0,0 +1,18 @@
+@import '@voidzero-dev/vitepress-theme/src/styles/index.css';
+
+@source "./**/*.vue";
+
+/* Vite */
+:root[data-variant='vite'] {
+  --color-brand: #6b1eb9;
+}
+
+:root.dark:not([data-theme])[data-variant='vite'],
+:root[data-theme='dark'][data-variant='vite'] {
+  --color-brand: var(--color-vite);
+}
+
+/* Forced light mode brand for Vite */
+:root[data-theme='light'][data-variant='vite'] {
+  --color-brand: #6b1eb9;
+}

docs/about.md

@@ -1,16 +1,12 @@
 ---
+title: Vite Plugin Registry
+titleTemplate: Discover plugins for your build tools
 layout: home
+theme: dark
+---
 
-hero:
-  name: Vite Plugin Registry
-  text: Discover plugins for your build tools
-  tagline: Find and compare plugins for Vite, Rollup, Rolldown
-  actions:
-    - theme: brand
-      text: Browse Plugins
-      link: /plugins
-    - theme: alt
-      text: Plugin Author Guide
-      link: /guide/
+<script setup>
+import Home from './.vitepress/theme/landing/Layout.vue'
+</script>
 
----
+<Home />

docs/index.md

@@ -19,6 +19,7 @@
     "@types/node": "^24.10.4",
     "@types/semver": "^7.7.1",
     "@valibot/to-json-schema": "^1.5.0",
+    "@voidzero-dev/vitepress-theme": "^4.0.4",
     "@vueuse/core": "^14.1.0",
     "floating-vue": "^5.2.2",
     "minisearch": "^7.2.0",