docs: use voidzero theme (#165)

Author: yyx990803

docs/.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import { extendConfig } from '@voidzero-dev/vitepress-theme/config'
 import { defineConfig } from 'vitepress'
 import {
   groupIconMdPlugin,
@@ -7,26 +8,38 @@ import {
 import { withMermaid } from 'vitepress-plugin-mermaid'
 import { version } from '../../package.json'
 
+const DevToolsKitNav = [
+  { text: 'Introduction', link: '/kit/' },
+  { text: 'DevTools Plugin', link: '/kit/devtools-plugin' },
+  { text: 'Dock System', link: '/kit/dock-system' },
+  { text: 'RPC', link: '/kit/rpc' },
+  { text: 'Shared State', link: '/kit/shared-state' },
+]
+
+const SocialLinks = [
+  { icon: 'bluesky', link: 'https://bsky.app/profile/vite.dev' },
+  { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@vite' },
+  { icon: 'x', link: 'https://x.com/vite_js' },
+  { icon: 'discord', link: 'https://chat.vite.dev' },
+  { icon: 'github', link: 'https://github.com/vitejs/devtools' },
+]
+
 // https://vitepress.dev/reference/site-config
-export default withMermaid(defineConfig({
+export default extendConfig(withMermaid(defineConfig({
   title: 'Vite DevTools',
   description: 'Visualize and analyze your Vite build process with powerful developer tools. Extensible architecture for building custom DevTools integrations.',
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
   ],
   themeConfig: {
+    variant: 'vite',
+
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Guide', link: '/guide/' },
       {
         text: 'DevTools Kit',
-        items: [
-          { text: 'Introduction', link: '/kit/' },
-          { text: 'DevTools Plugin', link: '/kit/devtools-plugin' },
-          { text: 'Dock System', link: '/kit/dock-system' },
-          { text: 'RPC', link: '/kit/rpc' },
-          { text: 'Shared State', link: '/kit/shared-state' },
-        ],
+        items: DevToolsKitNav,
       },
       {
         text: `v${version}`,
@@ -69,6 +82,22 @@ export default withMermaid(defineConfig({
     footer: {
       message: `Released under the MIT License.`,
       copyright: 'Copyright © 2025-present VoidZero Inc. & Vite Contributors',
+      nav: [
+        {
+          title: 'Vite DevTools',
+          items: [
+            { text: 'Guide', link: '/guide/' },
+            { text: 'Features', link: '/guide/features' },
+            { text: 'Release Notes', link: 'https://github.com/vitejs/devtools/releases' },
+            { text: 'Contributing', link: 'https://github.com/vitejs/devtools/blob/main/CONTRIBUTING.md' },
+          ],
+        },
+        {
+          title: 'DevTools Kit',
+          items: DevToolsKitNav,
+        },
+      ],
+      social: SocialLinks,
     },
 
     lastUpdated: {
@@ -80,13 +109,7 @@ export default withMermaid(defineConfig({
       text: 'Suggest changes to this page',
     },
 
-    socialLinks: [
-      { icon: 'bluesky', link: 'https://bsky.app/profile/vite.dev' },
-      { icon: 'mastodon', link: 'https://elk.zone/m.webtoo.ls/@vite' },
-      { icon: 'x', link: 'https://x.com/vite_js' },
-      { icon: 'discord', link: 'https://chat.vite.dev' },
-      { icon: 'github', link: 'https://github.com/vitejs/devtools' },
-    ],
+    socialLinks: SocialLinks,
   },
   markdown: {
     codeTransformers: [
@@ -119,4 +142,4 @@ export default withMermaid(defineConfig({
       useMaxWidth: true,
     },
   },
-}))
+})))

docs/.vitepress/theme/Home.vue

@@ -0,0 +1,26 @@
+<script setup>
+import FeatureGrid from '@components/oss/FeatureGrid.vue'
+import Footer from '@components/oss/Footer.vue'
+import HeadingSection from '@components/oss/HeadingSection.vue'
+import Hero from '@components/oss/Hero.vue'
+import Spacer from '@components/shared/Spacer.vue'
+</script>
+
+<template>
+  <Hero />
+
+  <HeadingSection
+    heading="Inspect, Analyze, Extend"
+    subheading="Vite DevTools not only provides built-in features, but also a extensible architecture for custom integrations."
+  />
+
+  <FeatureGrid />
+
+  <Spacer />
+
+  <Footer
+    heading="Understand your Vite App Better"
+    subheading="Visually inspect modules, plugins, chunks, assets, packages..." button-text="Get Started"
+    button-link="/guide/"
+  />
+</template>

docs/.vitepress/theme/index.ts

@@ -1,13 +1,25 @@
+/// <reference types="vite/client" />
+
 import type { Theme } from 'vitepress'
+import monoIcon from '@assets/icons/vite-mono.svg'
+import footerBg from '@assets/vite/footer-background.jpg'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
-import DefaultTheme from 'vitepress/theme'
+import BaseTheme, { themeContextKey } from '@voidzero-dev/vitepress-theme'
 import 'virtual:group-icons.css'
 import './styles.css'
 import '@shikijs/vitepress-twoslash/style.css'
 
 export default {
-  extends: DefaultTheme,
+  extends: BaseTheme,
   enhanceApp({ app }) {
     app.use(TwoslashFloatingVue)
+
+    app.provide(themeContextKey, {
+      logoDark: '/logo-dark.svg',
+      logoLight: '/logo-light.svg',
+      logoAlt: 'Vite Devtools',
+      footerBg,
+      monoIcon,
+    })
   },
 } satisfies Theme

docs/.vitepress/theme/styles.css

@@ -1,6 +1,7 @@
-.VPImage.logo {
-  height: 18px;
-}
+/* styles.css */
+@import "@voidzero-dev/vitepress-theme/src/styles/index.css";
+
+@source "./**/*.vue";
 
 .mermaid .node rect,
 .mermaid .node circle,

docs/index.md

@@ -1,5 +1,6 @@
 ---
 layout: home
+theme: dark
 
 hero:
   name: Vite DevTools
@@ -13,8 +14,7 @@ hero:
       text: View on GitHub
       link: https://github.com/vitejs/devtools
   image:
-    light: /logo_devtools.svg
-    dark: /logo_devtools_dark.svg
+    src: /hero.svg
     alt: Vite DevTools
 
 features:
@@ -37,3 +37,9 @@ features:
     title: Framework Agnostic
     details: Works with any framework built on Vite. Use Vue, React, Svelte, or any other framework to build your DevTools UI.
 ---
+
+<script setup>
+import Home from './.vitepress/theme/Home.vue'
+</script>
+
+<Home />

docs/package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@shikijs/vitepress-twoslash": "catalog:docs",
     "@vitejs/devtools": "workspace:*",
+    "@voidzero-dev/vitepress-theme": "catalog:docs",
     "mermaid": "catalog:docs",
     "vitepress": "catalog:docs",
     "vitepress-plugin-group-icons": "catalog:docs",