@voidzero-dev/vitepress-theme 0.0.2 → 0.0.4

package/components/Terminal.vue

@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import {ref, onMounted, onUnmounted} from 'vue'
-import {TabsContent, TabsList, TabsRoot, TabsTrigger} from 'reka-ui'
-import TerminalAnimation1 from "./terminal-animations/TerminalAnimation1.vue";
-import TerminalAnimation2 from "./terminal-animations/TerminalAnimation2.vue";
-import TerminalAnimation3 from "./terminal-animations/TerminalAnimation3.vue";
-import TerminalAnimation4 from "./terminal-animations/TerminalAnimation4.vue";
-import TerminalAnimation5 from "./terminal-animations/TerminalAnimation5.vue";
-import TerminalAnimation6 from "./terminal-animations/TerminalAnimation6.vue";
-import terminalBg from '../assets/terminal-background.jpg';
-
-// Auto-progression configuration
-const AUTO_ADVANCE_DELAY = 1500
-
-// State management
-const activeTab = ref('tab1')
-const autoPlayEnabled = ref(true)
-let autoAdvanceTimeout: ReturnType<typeof setTimeout> | null = null
-
-// Intersection Observer state
-const sectionRef = ref<HTMLElement | null>(null)
-const isVisible = ref(false)
-let observer: IntersectionObserver | null = null
-
-// Tab progression logic
-const tabSequence = ['tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6']
-
-const goToNextTab = () => {
-  const currentIndex = tabSequence.indexOf(activeTab.value)
-  const nextIndex = (currentIndex + 1) % tabSequence.length
-  activeTab.value = tabSequence[nextIndex]
-}
-
-// Handle animation completion
-const onAnimationComplete = () => {
-  if (!autoPlayEnabled.value) return
-
-  // Clear any existing timeout
-  if (autoAdvanceTimeout) {
-    clearTimeout(autoAdvanceTimeout)
-  }
-
-  // Schedule next tab
-  autoAdvanceTimeout = setTimeout(() => {
-    goToNextTab()
-  }, AUTO_ADVANCE_DELAY)
-}
-
-// Handle user interaction with tabs
-const onTabChange = () => {
-  // User clicked a tab, disable auto-play
-  autoPlayEnabled.value = false
-
-  // Clear any pending auto-advance
-  if (autoAdvanceTimeout) {
-    clearTimeout(autoAdvanceTimeout)
-    autoAdvanceTimeout = null
-  }
-}
-
-// Setup Intersection Observer
-onMounted(() => {
-  if (!sectionRef.value) return
-
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && !isVisible.value) {
-          isVisible.value = true
-          // Disconnect observer after first intersection
-          observer?.disconnect()
-        }
-      })
-    },
-    {
-      threshold: 0.2, // Trigger when 20% of the element is visible
-      rootMargin: '0px'
-    }
-  )
-
-  observer.observe(sectionRef.value)
-})
-
-// Cleanup
-onUnmounted(() => {
-  if (autoAdvanceTimeout) {
-    clearTimeout(autoAdvanceTimeout)
-  }
-  if (observer) {
-    observer.disconnect()
-  }
-})
-</script>
-
-<template>
-  <section
-      ref="sectionRef"
-      :style="{ backgroundImage: `url(${terminalBg})` }"
-      class="wrapper border-t h-[40rem] bg-wine bg-cover bg-top flex justify-center pt-28 overflow-clip">
-    <div
-        :class="[
-          'self-stretch px-4 sm:px-8 py-5 sm:py-7 relative bg-primary rounded-tl-lg rounded-tr-lg inline-flex flex-col justify-start items-start gap-2 overflow-hidden w-[62rem] outline-1 outline-offset-[3px] outline-white/30',
-          'transition-transform duration-1000',
-          isVisible ? 'translate-y-0' : 'translate-y-24'
-        ]"
-        style="transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);">
-      <TabsRoot
-          v-if="isVisible"
-          v-model="activeTab"
-          @update:modelValue="onTabChange"
-      >
-        <TabsList
-          aria-label="features"
-          :class="[
-            'absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center p-1 rounded-md border border-white/10',
-            'transition-transform duration-700 delay-300',
-            isVisible ? 'translate-y-0' : 'translate-y-12'
-          ]"
-          style="transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);">
-          <TabsTrigger value="tab1">
-            new
-          </TabsTrigger>
-          <TabsTrigger value="tab2">
-            dev
-          </TabsTrigger>
-          <TabsTrigger value="tab3">
-            lint
-          </TabsTrigger>
-          <TabsTrigger value="tab4">
-            fmt
-          </TabsTrigger>
-          <TabsTrigger value="tab5">
-            test
-          </TabsTrigger>
-          <TabsTrigger value="tab6">
-            build
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="tab1">
-          <TerminalAnimation1 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab2">
-          <TerminalAnimation2 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab3">
-          <TerminalAnimation3 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab4">
-          <TerminalAnimation4 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab5">
-          <TerminalAnimation5 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab6">
-          <TerminalAnimation6 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-      </TabsRoot>
-
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-</style>

package/components/terminal-animations/TerminalAnimation1.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import Typewriter from 'typewriter-effect/dist/core'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-let typewriter;
-
-onMounted(() => {
-  const target = document.getElementById('terminal-code');
-  typewriter = new Typewriter(target, {
-    loop: false,
-    delay: 1,
-  })
-  typewriter
-      .typeString(`<span>$ vite new vite-plus-demo --template react-ts</span>`)
-      .pauseFor(500)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .pasteString(`<span class="text-aqua">◇  Scaffolding project in ~/vite-plus-demo</span>`)
-      .pauseFor(500)
-      .pasteString(`<span class="text-grey block">|</span>`)
-      .pasteString(`<span class="text-zest block">└  Done.</span>`)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .pauseFor(500)
-      .pasteString(`<span class="block"><span class="text-zest">✓</span> Installing dependencies using default package manager: <span class="text-vite">pnpm@v10.16.1</span></span>`)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .pasteString(`<div class="block"><span class="text-grey">Progress:</span> resolved 1, reused 0, downloaded 0, added 0</div>`)
-      .pasteString(`<div class="block"><span class="text-grey">Packages:</span> <span class="text-vite">+31</span></div>`)
-      .typeString(`<span class="text-grey block">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>`)
-      .pasteString(`<div class="block"><span class="text-grey">Progress:</span> resolved 31, reused 31, downloaded 0, added 31, <span class="text-zest">done</span></div>`)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .callFunction(() => {
-        if (props.onAnimationComplete) {
-          props.onAnimationComplete()
-        }
-      })
-      .start();
-})
-
-onUnmounted(() => {
-  if(typewriter){
-    typewriter.stop()
-  }
-})
-</script>
-
-<template>
-  <p class="font-mono text-sm text-white leading-[1.5rem]">
-    <span id="terminal-code"></span>
-  </p>
-</template>

package/components/terminal-animations/TerminalAnimation2.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import Typewriter from 'typewriter-effect/dist/core'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-let typewriter;
-
-onMounted(() => {
-  // Get current time for easter egg
-  const now = new Date()
-  let hours = now.getHours()
-  const minutes = now.getMinutes().toString().padStart(2, '0')
-  const seconds = now.getSeconds().toString().padStart(2, '0')
-  const ampm = hours >= 12 ? 'pm' : 'am'
-  hours = hours % 12 || 12
-  const currentTime = `${hours}:${minutes}:${seconds} ${ampm}`
-
-  const target = document.getElementById('terminal-code');
-  typewriter = new Typewriter(target, {
-    loop: false,
-    delay: 1,
-  })
-  typewriter
-      .typeString(`<span>$ vite dev</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> ready in <span class="text-white font-medium">65</span> ms</div>`)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .pauseFor(500)
-      .pasteString(`<div class="block"><span class="text-vite">  →  Local:   </span><span class="text-aqua">http://localhost:5173/</span></div>`)
-      .pasteString(`<div class="block text-grey">→  Network: use <span class="text-white font-medium">--host</span> to expose</div>`)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .pauseFor(1500)
-      .pasteString(`<div class="block text-grey">${currentTime} <span class="text-aqua">[vite]</span> (client) <span class="text-vite">hmr update</span> /src/App.tsx</div>`)
-      .pasteString(`<span class="block w-full h-[1rem]"></span>`)
-      .callFunction(() => {
-        if (props.onAnimationComplete) {
-          props.onAnimationComplete()
-        }
-      })
-      .start();
-})
-
-onUnmounted(() => {
-  if(typewriter){
-    typewriter.stop()
-  }
-})
-</script>
-
-<template>
-  <p class="font-mono text-sm text-white leading-[1.5rem]">
-    <span id="terminal-code"></span>
-  </p>
-</template>

package/components/terminal-animations/TerminalAnimation3.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import Typewriter from 'typewriter-effect/dist/core'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-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()
-  }
-})
-</script>
-
-<template>
-  <p class="font-mono text-sm text-white leading-[1.5rem]">
-    <span id="terminal-code"></span>
-  </p>
-</template>

package/components/terminal-animations/TerminalAnimation4.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import Typewriter from 'typewriter-effect/dist/core'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-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()
-  }
-})
-</script>
-
-<template>
-  <p class="font-mono text-sm text-white leading-[1.5rem]">
-    <span id="terminal-code"></span>
-  </p>
-</template>

package/components/terminal-animations/TerminalAnimation5.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import Typewriter from 'typewriter-effect/dist/core'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-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()
-  }
-})
-</script>
-
-<template>
-  <p class="font-mono text-sm text-white leading-[1.5rem]">
-    <span id="terminal-code"></span>
-  </p>
-</template>

package/components/terminal-animations/TerminalAnimation6.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import Typewriter from 'typewriter-effect/dist/core'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-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()
-  }
-})
-</script>
-
-<template>
-  <p class="font-mono text-sm text-white leading-[1.5rem]">
-    <span id="terminal-code"></span>
-  </p>
-</template>

package/index.ts

@@ -1,44 +0,0 @@
-/**
- * @voidzero-dev/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
- * }
- * ```
- */
-
-import type { Theme } from 'vitepress'
-import Footer from './components/Footer.vue'
-import Header from './components/Header.vue'
-import Terminal from './components/Terminal.vue'
-import Eyebrow from './components/Eyebrow.vue'
-import RiveAnimation from './components/RiveAnimation.vue'
-
-// NOTE: We don't import style.css here because the consuming theme
-// needs to import Tailwind first, then our styles.
-// See the usage example in the JSDoc comment above.
-
-export default {
-  Layout: () => null, // Base theme provides no layout, consuming themes must provide one
-  enhanceApp({ app }) {
-    // Register shared components globally - available in all consuming projects
-    app.component('Footer', Footer)
-    app.component('Header', Header)
-    app.component('Terminal', Terminal)
-    app.component('Eyebrow', Eyebrow)
-    app.component('RiveAnimation', RiveAnimation)
-  }
-} satisfies Theme