@voidzero-dev/vitepress-theme 0.0.2 → 0.0.3

package/dist/vitepress/components/terminal-animations/TerminalAnimation3.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation3.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation3",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite lint</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block text-grey"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">lint</span></div>`).pauseFor(500).pasteString(`<div class="block text-grey">Found <span class="text-white">0 warnings</span> and <span class="text-white">0 errors</span>.</div>`).pasteString(`<div class="block text-grey"><span class="text-zest">✓</span> Finished in  <span class="text-white">1ms</span> on <span class="text-white">3 files</span> with <span class="text-white">88 rules</span> using <span class="text-white">10 threads</span>.</div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation3_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation3_default as default };

package/dist/vitepress/components/terminal-animations/TerminalAnimation4.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation4.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation4",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite fmt</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block text-grey"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">fmt</span></div>`).pauseFor(500).pasteString(`<div class="block">src/App.css <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`).pasteString(`<div class="block">src/App.tsx <span class="text-aqua">1ms</span></div>`).pasteString(`<div class="block">src/index.css <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`).pasteString(`<div class="block">src/main.tsx <span class="text-aqua">1ms</span></div>`).pasteString(`<div class="block">src/vite-env.d.ts <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`).pasteString(`<div class="block"><span class="text-zest">✓</span> Formatted <span class="text-aqua">2 files</span> in <span class="text-aqua">2ms</span>.</div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation4_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation4_default as default };

package/dist/vitepress/components/terminal-animations/TerminalAnimation5.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation5.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation5",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite test</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">test</span> RUN ~/vite-plus-demo</div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).pauseFor(300).pasteString(`<div class="block"><span class="text-zest">✓</span> test/hello.spec.ts <span class="text-grey">(1 test)</span> <span class="text-zest">1ms</span></div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block text-grey">Test Files <span class="text-zest">1 passed</span> <span class="text-grey">(1)</span></div>`).pasteString(`<div class="block text-grey">Tests <span class="text-zest">1 passed</span> <span class="text-grey">(1)</span></div>`).pasteString(`<div class="block text-grey">Start at <span class="text-white">00:13:44</span></div>`).pasteString(`<div class="block text-grey">Duration <span class="text-white">199ms</span> <span class="text-grey">(transform 13ms, setup 0ms, collect 8ms, tests 1ms, environment 0ms, prepare 33ms)</span></div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation5_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation5_default as default };

package/dist/vitepress/components/terminal-animations/TerminalAnimation6.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation6.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation6",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite build</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">building for production</span></div>`).pauseFor(100).pasteString(`<div class="block">transforming...</div>`).pauseFor(400).pasteString(`<div class="block"><span class="text-zest">✓</span> <span class="text-grey">32 modules transformed...</span></div>`).pauseFor(300).pasteString(`<div class="block">rendering chunks...</div>`).pasteString(`<div class="block">computing gzip size...</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/<span class="text-white">index.html</span></span>&nbsp;&nbsp;0.46 kB | gzip:  0.30 kB</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-vite">react-CHdo91hT.svg</span></span>&nbsp;&nbsp;4.13 kB | gzip:  2.05 kB</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-electric">index-D8b4DHJx.css</span></span>&nbsp;&nbsp;1.39 kB | gzip:  0.71 kB</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-aqua">index-CAl1KfkQ.js</span></span>188.06 kB | gzip: 59.21 kB</div>`).pasteString(`<div class="block"><span class="text-zest">✓ built in 308ms</span></div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation6_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation6_default as default };

package/dist/vitepress/index.d.ts

@@ -0,0 +1,34 @@
+import * as vitepress0 from "vitepress";
+
+//#region src/vitepress/index.d.ts
+
+/**
+ * @voidzerodev/vitepress-theme
+ *
+ * Shared VitePress theme providing base styles, fonts, and design tokens
+ * for VoidZero projects.
+ *
+ * Usage:
+ * Extend this theme in your project's VitePress theme.
+ *
+ * @example
+ * ```ts
+ * // In your-project/.vitepress/theme/index.ts
+ * import Theme from '@voidzero-dev/vitepress-theme'
+ * import './overrides.css' // Your project-specific styles
+ *
+ * export default {
+ *   extends: Theme,
+ *   Layout: YourLayout
+ * }
+ * ```
+ *
+ */
+declare const VPTheme: {
+  Layout: () => null;
+  enhanceApp({
+    app
+  }: vitepress0.EnhanceAppContext): void;
+};
+//#endregion
+export { VPTheme };

package/dist/vitepress/index.js

@@ -0,0 +1,21 @@
+import Footer_default from "./components/Footer.js";
+import Header_default from "./components/Header.js";
+import Terminal_default from "./components/Terminal.js";
+import Eyebrow_default from "./components/Eyebrow.js";
+import RiveAnimation_default from "./components/RiveAnimation.js";
+
+//#region src/vitepress/index.ts
+const VPTheme = {
+	Layout: () => null,
+	enhanceApp({ app }) {
+		app.component("Footer", Footer_default);
+		app.component("Header", Header_default);
+		app.component("Terminal", Terminal_default);
+		app.component("Eyebrow", Eyebrow_default);
+		app.component("RiveAnimation", RiveAnimation_default);
+	}
+};
+var vitepress_default = VPTheme;
+
+//#endregion
+export { VPTheme, vitepress_default as default };

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
-  "main": "./index.ts",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "style": "./style.css",
-      "import": "./index.ts"
-    }
+      "styles": "./dist/index.css",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
   },
   "files": [
-    "index.ts",
-    "style.css",
-    "fonts",
-    "assets",
-    "components"
+    "dist"
   ],
+  "scripts": {
+    "build": "tsdown"
+  },
   "peerDependencies": {
     "vitepress": "^2.0.0-alpha.12",
     "vue": "^3.5.0"
@@ -25,15 +28,14 @@
     "@rive-app/canvas": "^2.31.6",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.13",
-    "tailwindcss": "^4.1.13",
     "reka-ui": "^2.5.1",
+    "tailwindcss": "^4.1.13",
     "typewriter-effect": "^2.22.0"
   },
-  "keywords": [
-    "vitepress",
-    "theme",
-    "voidzero",
-    "tailwind"
-  ],
-  "license": "MIT"
+  "devDependencies": {
+    "tsdown": "^0.15.11",
+    "typescript": "^5.9.3",
+    "unplugin-vue": "^7.0.4",
+    "vue-tsc": "^3.1.2"
+  }
 }

package/assets/checkmark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" fill="none" viewBox="0 0 20 19"><circle cx="10" cy="9.5" r="9" stroke="#3b3440" stroke-width=".5"/><path stroke="#fff" stroke-width="1.2" d="M17.794 14a9 9 0 0 0 0-9M2.206 14a9 9 0 0 1 0-9"/><path stroke="#fff" stroke-linejoin="bevel" stroke-width="1.2" d="m6.249 9.788 2.308 2.309 5.195-5.195"/></svg>

package/components/Eyebrow.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  title: string
-}>()
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t p-5 pl-10">
-    <span class="text-nickel dark:text-white text-xs font-medium font-mono uppercase tracking-wide">{{ title }}</span>
-  </section>
-</template>

package/components/Footer.vue

@@ -1,44 +0,0 @@
-<template>
-  <footer class="bg-primary" data-theme="dark">
-    <section class="wrapper">
-      <div class="bg-wine bg-[url(/cta-background.jpg)] bg-cover py-16 md:py-30 px-5 md:px-0 overflow-clip flex flex-col items-center justify-center gap-8 md:gap-12">
-        <h2 class="text-white w-full md:w-2xl text-center text-balance">Take your team's productivity to the next level with Vite+</h2>
-      <div class="flex items-center gap-5">
-        <a href="https://tally.so/r/nGWebL" target="_blank" rel="noopener noreferrer" class="button">Register your interest</a>
-        <a href="https://voidzero.dev/posts/announcing-vite-plus?utm_source=viteplusdev&utm_content=bottom_learn_more" target="_blank" rel="noopener noreferrer" class="button">
-          Learn more
-        </a>
-      </div>
-      </div>
-      <div class="px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-30 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between">
-        <div>
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Company</p>
-          <ul class="flex flex-col gap-3">
-            <li><a href="https://voidzero.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">VoidZero</a></li>
-            <li><a href="https://vite.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Vite</a></li>
-            <li><a href="https://rolldown.rs/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Rolldown</a></li>
-            <li><a href="https://vitest.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Vitest</a></li>
-            <li><a href="https://oxc.rs/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Oxc</a></li>
-          </ul>
-        </div>
-        <div>
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Social</p>
-          <ul class="flex flex-col gap-3">
-            <li><a href="https://github.com/voidzero-dev" target="_blank" rel="noopener noreferrer" class="text-white text-base flex gap-3 items-center"><img loading="lazy" src="/github.svg" alt="GitHub" class="size-5">GitHub</a></li>
-            <li><a href="https://web-cdn.bsky.app/profile/voidzero.dev" target="_blank" rel="noopener noreferrer" class="text-white text-base flex gap-3 items-center"><img loading="lazy" src="/bluesky.svg" alt="Bluesky" class="size-5">Bluesky</a></li>
-            <li><a href="https://x.com/voidzerodev" target="_blank" rel="noopener noreferrer" class="text-white text-base flex gap-3 items-center"><img loading="lazy" src="/twitter.svg" alt="Twitter" class="size-5">X.com</a></li>
-          </ul>
-        </div>
-      </div>
-    </section>
-    <section class="wrapper wrapper--ticks border-t py-5 px-5 md:px-24">
-      <p class="text-sm">© {{ new Date().getFullYear() }} VoidZero Inc. <span class="hidden sm:inline ">All Rights Reserved.</span></p>
-    </section>
-  </footer>
-</template>
-
-<style scoped>
-
-</style>
-<script setup lang="ts">
-</script>

package/components/Header.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import {useData, useRoute} from 'vitepress'
-
-const {site, theme} = useData()
-const nav = theme.value.nav
-
-const route = useRoute()
-</script>
-
-<template>
-  <header class="wrapper px-6 py-7 flex items-center justify-between">
-    <div class="flex items-center gap-10">
-      <a href="/">
-        <img class="h-4" src="/logo.svg" :alt="site.title"/>
-      </a>
-      <ul class="nav">
-        <li v-for="navItem in nav" :key="navItem.link">
-          <a
-              :class="{ active: route.path === navItem.link }"
-              :href="navItem.link"
-          >
-            {{ navItem.text }}
-          </a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="flex items-center gap-6">
-      <slot name="right-side">
-        <!-- Right-aligned links / calls-to-action -->
-      </slot>
-    </div>
-  </header>
-</template>
-
-<style scoped>
-
-</style>

package/components/RiveAnimation.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import * as rive from "@rive-app/canvas"
-import { ref, onMounted, onUnmounted, computed } from "vue"
-
-interface Props {
-  desktopSrc: string
-  mobileSrc?: string
-  breakpoint?: number
-  stateMachines?: string
-  canvasClass?: string
-  desktopWidth?: number
-  desktopHeight?: number
-  mobileWidth?: number
-  mobileHeight?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  breakpoint: 768, // md breakpoint
-  stateMachines: "State Machine 1",
-  canvasClass: "w-full"
-})
-
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const containerRef = ref<HTMLElement | null>(null)
-let riveInstance: rive.Rive | null = null
-let hasStarted = ref(false)
-let observer: IntersectionObserver | null = null
-
-const isMobile = ref(false)
-
-const checkMobile = () => {
-  isMobile.value = window.innerWidth < props.breakpoint
-}
-
-const getCurrentSrc = () => {
-  return isMobile.value && props.mobileSrc ? props.mobileSrc : props.desktopSrc
-}
-
-const currentWidth = computed(() => {
-  return isMobile.value && props.mobileWidth ? props.mobileWidth : props.desktopWidth
-})
-
-const currentHeight = computed(() => {
-  return isMobile.value && props.mobileHeight ? props.mobileHeight : props.desktopHeight
-})
-
-const loadAnimation = () => {
-  if (!canvasRef.value || riveInstance) return
-
-  const src = getCurrentSrc()
-
-  riveInstance = new rive.Rive({
-    src,
-    canvas: canvasRef.value,
-    autoplay: false,
-    stateMachines: props.stateMachines,
-    onLoad: () => {
-      riveInstance?.resizeDrawingSurfaceToCanvas()
-    }
-  })
-}
-
-const playAnimation = () => {
-  if (riveInstance) {
-    riveInstance.play()
-  }
-}
-
-const cleanupAnimation = () => {
-  if (riveInstance) {
-    riveInstance.cleanup()
-    riveInstance = null
-  }
-}
-
-const handleResize = () => {
-  const wasMobile = isMobile.value
-  checkMobile()
-
-  // If mobile state changed, reload with correct source
-  if (wasMobile !== isMobile.value) {
-    const wasPlaying = hasStarted.value
-    cleanupAnimation()
-    loadAnimation()
-    if (wasPlaying) {
-      playAnimation()
-    }
-  }
-}
-
-onMounted(() => {
-  checkMobile()
-
-  // Load animation immediately
-  loadAnimation()
-
-  // Set up intersection observer to play animation when in viewport
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && !hasStarted.value) {
-          hasStarted.value = true
-          playAnimation()
-        }
-      })
-    },
-    {
-      threshold: 0.1 // Start when 10% visible
-    }
-  )
-
-  if (containerRef.value) {
-    observer.observe(containerRef.value)
-  }
-
-  // Listen for window resize to handle breakpoint changes
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  cleanupAnimation()
-
-  if (observer && containerRef.value) {
-    observer.unobserve(containerRef.value)
-    observer.disconnect()
-  }
-
-  window.removeEventListener('resize', handleResize)
-})
-</script>
-
-<template>
-  <div ref="containerRef" class="pointer-events-none touch-none select-none">
-    <canvas
-      ref="canvasRef"
-      :width="currentWidth"
-      :height="currentHeight"
-      :class="canvasClass"
-    />
-  </div>
-</template>
-
-<style scoped>
-</style>