@voidzero-dev/vitepress-theme 0.0.14 → 0.0.15

package/components/terminal-animations/TerminalAnimation5.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import {useTypewriter} from '../../composables/useTypewriter'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-let typewriter;
-
-onMounted(async () => {
-    const Typewriter = await useTypewriter()
-    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,55 +0,0 @@
-<script setup lang="ts">
-import {useTypewriter} from '../../composables/useTypewriter'
-import {onMounted, onUnmounted} from "vue";
-
-const props = defineProps<{
-  onAnimationComplete?: () => void
-}>()
-
-let typewriter;
-
-onMounted(async () => {
-    const Typewriter = await useTypewriter()
-    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/composables/useTypewriter.ts

@@ -1,43 +0,0 @@
-// Dynamically load Typewriter from CDN
-let TypewriterClass: any = null
-let loadingPromise: Promise<any> | null = null
-
-export async function useTypewriter() {
-  // Return cached class if already loaded
-  if (TypewriterClass) {
-    return TypewriterClass
-  }
-
-  // Return existing loading promise if already loading
-  if (loadingPromise) {
-    return loadingPromise
-  }
-
-  // Start loading from CDN
-  loadingPromise = new Promise((resolve, reject) => {
-    // Check if already loaded globally
-    if ((window as any).Typewriter) {
-      TypewriterClass = (window as any).Typewriter
-      resolve(TypewriterClass)
-      return
-    }
-
-    // Create script tag to load from CDN
-    const script = document.createElement('script')
-    script.src = 'https://unpkg.com/typewriter-effect@2.22.0/dist/core.js'
-    script.async = true
-
-    script.onload = () => {
-      TypewriterClass = (window as any).Typewriter
-      resolve(TypewriterClass)
-    }
-
-    script.onerror = () => {
-      reject(new Error('Failed to load Typewriter from CDN'))
-    }
-
-    document.head.appendChild(script)
-  })
-
-  return loadingPromise
-}

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

package/style.css

@@ -1,346 +0,0 @@
-/**
- * Shared theme styles
- *
- * NOTE: This file does NOT import Tailwind itself.
- * The consuming project must import Tailwind first, then this file.
- */
-
-@plugin "@tailwindcss/typography";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Fonts */
-@font-face {
-    font-family: 'APK Protocol';
-    font-weight: 500;
-    src: url('./fonts/APK-Protocol-Medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka';
-    font-weight: 400;
-    src: url('./fonts/KHTeka-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka';
-    font-weight: 500;
-    src: url('./fonts/KHTeka-Medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka Mono';
-    font-weight: 400;
-    src: url('./fonts/KHTekaMono-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka Mono';
-    font-weight: 500;
-    src: url('./fonts/KHTekaMono-Medium.woff2') format('woff2');
-}
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-@theme {
-    --font-*: initial;
-    --font-heading: 'APK Protocol', sans-serif;
-    --font-sans: 'KH Teka', sans-serif;
-    --font-mono: 'KH Teka Mono', monospace;
-
-    --color-*: initial;
-    --color-white: #FFFFFF;
-    --color-primary: #08060D;
-    --color-beige: #F4F3EC;
-    --color-nickel: #3B3440;
-    --color-grey: #827A89;
-    --color-stroke: #E5E4E7;
-    --color-midnight: #0C0912;
-    --color-slate: #14121A;
-    --color-ruby: #863BFF;
-    --color-wine: #140033;
-    --color-violet: #140033;
-    --color-plum: #1D0033;
-    --color-electric: #6C3BFF;
-    --color-vite: #b39aff;
-    --color-space: #110033;
-    --color-zest: #22FF73;
-    --color-forest: #002611;
-    --color-fire: #FF5500;
-    --color-rust: #260001;
-    --color-aqua: #32F3E9;
-    --color-sea: #002624;
-}
-
-@layer base {
-
-    h1 {
-        @apply text-5xl md:text-6xl font-medium font-heading text-balance text-primary md:leading-[4.2rem] tracking-tighter;
-    }
-
-    h2 {
-        @apply text-3xl md:text-5xl font-medium font-heading tracking-tight text-balance text-primary;
-    }
-
-    h3 {
-        @apply text-3xl md:text-4xl font-medium font-heading text-balance text-primary;
-    }
-
-    h4 {
-        @apply text-xl md:text-3xl font-medium font-heading text-balance text-primary;
-    }
-
-    h5 {
-        @apply text-lg md:text-2xl font-medium font-heading md:leading-7 text-balance text-primary;
-    }
-
-    h6 {
-        @apply text-base md:text-xl font-medium font-heading md:leading-7 text-balance text-primary;
-    }
-
-    p, li {
-        @apply text-base md:text-lg text-grey;
-    }
-
-    code {
-        @apply font-mono text-space text-base px-1.5 py-0.5 outline outline-stroke rounded dark:outline-grey dark:text-white;
-    }
-
-}
-
-@layer components {
-
-    .wrapper {
-        @apply max-w-[calc(100vw-2rem)] xl:max-w-[80rem] mx-auto border-l border-r border-stroke dark:border-nickel divide-stroke dark:divide-nickel relative overflow-x-clip;
-    }
-
-    .wrapper--ticks::before, .tick-left::before {
-        content: '';
-        position: absolute;
-        top: -5px;
-        left: 0;
-        width: 0;
-        height: 0;
-        border-top: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid var(--color-stroke);
-    }
-
-    .wrapper--ticks::after, .tick-right::after {
-        content: '';
-        position: absolute;
-        top: -5px;
-        right: 0;
-        width: 0;
-        height: 0;
-        border-top: 5px solid transparent;
-        border-right: 5px solid var(--color-stroke);
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid transparent;
-    }
-
-    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
-        border-left-color: var(--color-nickel);
-    }
-
-    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
-        border-right-color: var(--color-nickel);
-    }
-
-    .button {
-        @apply select-none py-2 px-4 rounded-lg outline outline-stroke inline-flex items-center gap-2 overflow-hidden justify-center text-primary dark:text-white bg-white dark:bg-transparent dark:outline-nickel font-medium hover:shadow-md dark:hover:bg-white dark:hover:text-primary hover:scale-105 transition-all;
-
-        &.button--sm{
-            @apply text-base py-1.5 px-3 rounded;
-        }
-
-        &.button--primary {
-            @apply text-white relative overflow-visible outline-none transition-colors transform-gpu hover:scale-105 transition-transform;
-
-            &:hover {
-
-                &::before {
-                    filter: brightness(130%);
-                    transform: scaleX(1.0125) scaleY(1.025);
-                }
-
-                &::after {
-                    transform: scaleX(0.98) scaleY(0.96);
-                }
-            }
-
-            &::before {
-                content: '';
-                position: absolute;
-                top: -3px;
-                left: -3px;
-                right: -3px;
-                bottom: -3px;
-                background-color: #CCCCCC;
-                background-image: url('./assets/primary-button-background.jpg');
-                background-size: 150% 150%;
-                background-position: center;
-                border-radius: calc(0.5rem + 3px);
-                z-index: -2;
-                animation: move-background 16s ease-in-out infinite;
-                transition: all 200ms ease-in-out;
-            }
-
-            &::after {
-                content: '';
-                position: absolute;
-                inset: 0;
-                background: var(--color-primary);
-                z-index: -1;
-                border-radius: 0.5rem;
-                transition: all 300ms ease-in-out;
-            }
-
-            &.button--white {
-                @apply text-primary;
-
-                &::after {
-                    background: var(--color-white);
-                }
-            }
-
-
-        }
-    }
-
-    @keyframes move-background {
-        0%, 100% {
-            background-position: 40% 40%;
-        }
-        50% {
-            background-position: 60% 60%;
-        }
-    }
-
-    .stacked-blocks {
-        @apply flex items-center justify-start;
-
-        > *:not(:first-child) {
-            @apply -ml-2;
-        }
-
-        li, a {
-            @apply size-12 sm:size-14 relative bg-[#F9F8F5] rounded-xl outline-[3px] outline-offset-[-3px] outline-white overflow-hidden p-4 flex items-center justify-center;
-            transition: transform 0.2s ease;
-
-            &:hover {
-                transform: translateY(-4px);
-            }
-        }
-
-        > *:nth-child(1) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(-5deg);
-            }
-        }
-
-        > *:nth-child(2) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(5deg);
-            }
-        }
-
-        > *:nth-child(3) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(-5deg);
-            }
-        }
-
-        > *:nth-child(4) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(5deg);
-            }
-        }
-    }
-
-    .checkmark-list {
-        @apply list-none flex flex-col gap-3;
-
-        li {
-            @apply text-white text-base tracking-tight relative pl-8;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 20px;
-                height: 20px;
-                background-image: url('./assets/checkmark.svg');
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-position: center;
-            }
-        }
-    }
-
-    .project-icon {
-        @apply flex items-center gap-2;
-
-        figcaption {
-            @apply text-white text-base tracking-tight;
-        }
-    }
-
-    ul.nav {
-        @apply flex items-center gap-10;
-
-        li {
-            a {
-                @apply !text-primary text-base;
-            }
-        }
-    }
-
-    /* Reka UI tabs styling */
-    [role="tablist"] {
-        [data-reka-collection-item] {
-            @apply px-1.5 sm:px-2.5 py-1 rounded text-sm font-mono tracking-tight text-grey cursor-pointer hover:text-white transition-colors duration-75 select-none;
-        }
-
-        [data-reka-collection-item][data-state='active'] {
-            @apply bg-white text-primary;
-        }
-    }
-
-}
-
-html {
-    overflow-x: clip;
-    font-size: 16px;
-    color: var(--color-nickel);
-
-    [data-theme=dark] {
-        color: var(--color-white);
-    }
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    overflow-x: clip;
-    text-rendering: optimizeLegibility;
-    image-rendering: high-quality;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    &::-webkit-scrollbar {
-        width: 10px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background-color: #efefef;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: #000;
-    }
-}