@troshab/slidev-theme-troshab 0.1.0

package/components/Testimonial.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+/**
+ * Testimonial component - customer quote with avatar
+ *
+ * Usage:
+ * <Testimonial quote="Great product!" author="John Doe" />
+ * <Testimonial
+ *   quote="This changed everything for us."
+ *   author="Jane Smith"
+ *   role="CTO"
+ *   company="Acme Inc"
+ *   avatar="/avatars/jane.jpg"
+ *   :rating="5"
+ * />
+ * <Testimonial quote="Amazing!" author="Bob" variant="featured" />
+ */
+
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  quote: string
+  author: string
+  role?: string
+  company?: string
+  avatar?: string
+  rating?: number              // 0-5 stars
+  variant?: 'card' | 'minimal' | 'featured'
+}>(), {
+  rating: 0,
+  variant: 'card'
+})
+
+const authorInitial = computed(() => {
+  return props.author.charAt(0).toUpperCase()
+})
+
+const stars = computed(() => {
+  return Array.from({ length: 5 }, (_, i) => i < props.rating)
+})
+
+const attribution = computed(() => {
+  const parts = []
+  if (props.role) parts.push(props.role)
+  if (props.company) parts.push(props.company)
+  return parts.join(' at ')
+})
+</script>
+
+<template>
+  <div class="testimonial" :class="`testimonial-${variant}`">
+    <!-- Quote icon for featured variant -->
+    <div v-if="variant === 'featured'" class="testimonial-quote-icon">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+      </svg>
+    </div>
+
+    <!-- Quote text -->
+    <blockquote class="testimonial-quote">
+      <p>{{ quote }}</p>
+    </blockquote>
+
+    <!-- Rating stars -->
+    <div v-if="rating > 0" class="testimonial-rating">
+      <span
+        v-for="(filled, idx) in stars"
+        :key="idx"
+        class="testimonial-star"
+        :class="{ 'testimonial-star-filled': filled }"
+      >★</span>
+    </div>
+
+    <!-- Author info -->
+    <div class="testimonial-author">
+      <div class="testimonial-avatar">
+        <img v-if="avatar" :src="avatar" :alt="author" />
+        <span v-else class="testimonial-initial">{{ authorInitial }}</span>
+      </div>
+      <div class="testimonial-info">
+        <div class="testimonial-name">{{ author }}</div>
+        <div v-if="attribution" class="testimonial-role">{{ attribution }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.testimonial {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+/* Card variant (default) */
+.testimonial-card {
+  background-color: var(--color-bg-soft);
+  border-radius: 0.5rem;
+  padding: var(--space-lg);
+  border: 1px solid var(--color-border);
+}
+
+/* Minimal variant */
+.testimonial-minimal {
+  padding: var(--space-md) 0;
+  border-left: 4px solid var(--color-primary);
+  padding-left: var(--space-md);
+}
+
+/* Featured variant */
+.testimonial-featured {
+  background: var(--gradient-primary);
+  color: var(--color-primary-foreground);
+  border-radius: 0.75rem;
+  padding: var(--space-xl);
+  text-align: center;
+  align-items: center;
+}
+
+.testimonial-featured .testimonial-quote p {
+  color: inherit;
+}
+
+.testimonial-featured .testimonial-role {
+  opacity: 0.8;
+}
+
+.testimonial-featured .testimonial-initial {
+  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
+  color: inherit;
+}
+
+/* Quote icon */
+.testimonial-quote-icon {
+  width: 48px;
+  height: 48px;
+  opacity: 0.3;
+  margin-bottom: var(--space-sm);
+}
+
+.testimonial-quote-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Quote — override global blockquote border */
+.testimonial .testimonial-quote {
+  margin: 0;
+  padding: 0;
+  border: none;
+  max-width: none;
+  color: inherit;
+}
+
+.testimonial-quote p {
+  margin: 0;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-body);
+  color: var(--color-text);
+  font-style: normal;
+}
+
+.testimonial-featured .testimonial-quote p {
+  font-size: var(--font-size-h2);
+  line-height: 1.3;
+}
+
+/* Rating */
+.testimonial-rating {
+  display: flex;
+  gap: 0.25em;
+}
+
+.testimonial-star {
+  font-size: 1.25rem;
+  color: var(--color-border);
+}
+
+.testimonial-star-filled {
+  color: var(--color-warning);
+}
+
+/* Author */
+.testimonial-author {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.testimonial-featured .testimonial-author {
+  flex-direction: column;
+  text-align: center;
+}
+
+.testimonial-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.testimonial-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.testimonial-initial {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: var(--font-weight-semibold);
+  background: var(--gradient-primary);
+  color: var(--color-primary-foreground);
+}
+
+.testimonial-card .testimonial-initial,
+.testimonial-minimal .testimonial-initial {
+  background: var(--gradient-primary);
+}
+
+.testimonial-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.testimonial-name {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+.testimonial-featured .testimonial-name {
+  color: inherit;
+}
+
+.testimonial-role {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+}
+</style>

package/components/Typewriter.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+/**
+ * Typewriter component - text typing animation effect
+ *
+ * Usage:
+ * <Typewriter text="Hello, World!" />
+ * <Typewriter :text="['First line', 'Second line']" loop />
+ * <Typewriter text="Fast typing" :speed="30" />
+ * <Typewriter text="With cursor" cursor="|" />
+ */
+
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import type { ColorWithInherit } from '../composables/useColors'
+import { textColorVar } from '../composables/useColors'
+
+const props = withDefaults(defineProps<{
+  text: string | string[]
+  speed?: number              // ms per character
+  deleteSpeed?: number        // ms per character when deleting
+  delay?: number              // initial delay before typing
+  pauseBetween?: number       // pause between strings (for arrays)
+  cursor?: boolean | string
+  loop?: boolean
+  autostart?: boolean
+  color?: ColorWithInherit
+}>(), {
+  speed: 50,
+  deleteSpeed: 30,
+  delay: 0,
+  pauseBetween: 1500,
+  cursor: true,
+  loop: false,
+  autostart: true,
+  color: 'inherit',
+})
+
+const emit = defineEmits<{
+  (e: 'complete'): void
+  (e: 'typed', text: string): void
+}>()
+
+const displayText = ref('')
+const isTyping = ref(false)
+const cursorVisible = ref(true)
+
+let timeoutId: ReturnType<typeof setTimeout> | null = null
+let cursorIntervalId: ReturnType<typeof setInterval> | null = null
+
+const texts = computed(() => {
+  return Array.isArray(props.text) ? props.text : [props.text]
+})
+
+const cursorChar = computed(() => {
+  if (props.cursor === false) return ''
+  if (typeof props.cursor === 'string') return props.cursor
+  return '|'
+})
+
+async function sleep(ms: number) {
+  return new Promise(resolve => {
+    timeoutId = setTimeout(resolve, ms)
+  })
+}
+
+async function typeText(text: string) {
+  for (let i = 0; i <= text.length; i++) {
+    displayText.value = text.slice(0, i)
+    await sleep(props.speed)
+  }
+  emit('typed', text)
+}
+
+async function deleteText() {
+  const currentLength = displayText.value.length
+  for (let i = currentLength; i >= 0; i--) {
+    displayText.value = displayText.value.slice(0, i)
+    await sleep(props.deleteSpeed)
+  }
+}
+
+async function runAnimation() {
+  isTyping.value = true
+
+  if (props.delay > 0) {
+    await sleep(props.delay)
+  }
+
+  do {
+    for (let i = 0; i < texts.value.length; i++) {
+      await typeText(texts.value[i])
+
+      // If not the last text or looping, delete and continue
+      if (i < texts.value.length - 1 || props.loop) {
+        await sleep(props.pauseBetween)
+        await deleteText()
+        await sleep(props.speed * 5)
+      }
+    }
+  } while (props.loop)
+
+  isTyping.value = false
+  emit('complete')
+}
+
+function start() {
+  stop()
+  displayText.value = ''
+  runAnimation()
+}
+
+function stop() {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+  isTyping.value = false
+}
+
+// Cursor blink effect
+function startCursorBlink() {
+  if (props.cursor) {
+    cursorIntervalId = setInterval(() => {
+      cursorVisible.value = !cursorVisible.value
+    }, 530)
+  }
+}
+
+onMounted(() => {
+  startCursorBlink()
+  if (props.autostart) {
+    start()
+  }
+})
+
+onUnmounted(() => {
+  stop()
+  if (cursorIntervalId) {
+    clearInterval(cursorIntervalId)
+  }
+})
+
+// Watch for text changes
+watch(() => props.text, () => {
+  if (props.autostart) {
+    start()
+  }
+})
+
+// Expose for external control
+defineExpose({ start, stop })
+</script>
+
+<template>
+  <span class="typewriter" :style="{ color: color !== 'inherit' ? textColorVar[color] : undefined }">
+    <span class="typewriter-text">{{ displayText }}</span>
+    <span
+      v-if="cursor"
+      class="typewriter-cursor"
+      :class="{ 'typewriter-cursor-visible': cursorVisible }"
+    >{{ cursorChar }}</span>
+  </span>
+</template>
+
+<style>
+.typewriter {
+  display: inline;
+}
+
+.typewriter-text {
+  white-space: pre-wrap;
+}
+
+.typewriter-cursor {
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.typewriter-cursor-visible {
+  opacity: 1;
+}
+</style>

package/components_base/AnimatedCounter.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * AnimatedCounter component - animated number counting up
+ *
+ * Smart v-click integration:
+ *   - No `at` prop (default): auto-registers one click slot, animates on click
+ *   - `at="0"`: animates on slide enter (no click registration)
+ *   - `at="-1"`: manual only (call animate()/resetToStart() via ref)
+ *
+ * Usage:
+ * <AnimatedCounter :value="1000" />                    <!-- auto v-click -->
+ * <AnimatedCounter :value="50000" prefix="$" separator="," />
+ * <AnimatedCounter :value="3.14" :decimals="2" :at="0" />   <!-- on slide enter -->
+ */
+
+import { ref, unref, computed, watch, watchEffect, inject, onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+
+const defaultClicksContext = { current: 0 }
+const defaultNav = { currentSlideNo: -1 }
+
+const props = withDefaults(defineProps<{
+  value: number
+  from?: number
+  duration?: number          // ms
+  prefix?: string
+  suffix?: string
+  decimals?: number
+  separator?: string         // thousands separator
+  easing?: 'linear' | 'easeOut' | 'easeInOut'
+  at?: number                // undefined = auto-register click, 0 = on slide enter, -1 = manual
+}>(), {
+  from: 0,
+  duration: 2000,
+  prefix: '',
+  suffix: '',
+  decimals: 0,
+  separator: '',
+  easing: 'easeOut',
+})
+
+const clicksContext = inject<Ref<{ current: number }>>('$$slidev-clicks-context', ref(defaultClicksContext))
+const slidevContext = inject<{ nav: { currentSlideNo: number } }>('$$slidev-context', { nav: defaultNav })
+const slidePage = inject<Ref<number>>('$$slidev-page', ref(-1))
+
+const rootEl = ref<HTMLElement | null>(null)
+const currentValue = ref(props.from)
+const isAutoRegistered = ref(false)
+let animationFrameId: number | null = null
+let hasAnimated = false
+
+const formattedValue = computed(() => {
+  let num = currentValue.value.toFixed(props.decimals)
+
+  if (props.separator) {
+    const parts = num.split('.')
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, props.separator)
+    num = parts.join('.')
+  }
+
+  return `${props.prefix}${num}${props.suffix}`
+})
+
+const easingFunctions = {
+  linear: (t: number) => t,
+  easeOut: (t: number) => 1 - Math.pow(1 - t, 3),
+  easeInOut: (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+}
+
+function cancelAnimation() {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
+  }
+}
+
+function animate() {
+  cancelAnimation()
+
+  const startValue = props.from
+  const endValue = props.value
+  const startTime = performance.now()
+  const easingFn = easingFunctions[props.easing]
+
+  function step(currentTime: number) {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / props.duration, 1)
+    const easedProgress = easingFn(progress)
+
+    currentValue.value = startValue + (endValue - startValue) * easedProgress
+
+    if (progress < 1) {
+      animationFrameId = requestAnimationFrame(step)
+    } else {
+      currentValue.value = endValue
+      animationFrameId = null
+    }
+  }
+
+  requestAnimationFrame(step)
+}
+
+function resetToStart() {
+  cancelAnimation()
+  currentValue.value = props.from
+}
+
+// Slidev keeps all slides in DOM (no KeepAlive). Detect slide activation
+// by watching nav.currentSlideNo and comparing to this slide's page number.
+onMounted(() => {
+  // Auto v-click registration: when at is undefined (default), register with click system
+  if (props.at === undefined) {
+    const ctx = clicksContext.value
+    if (ctx?.calculate && rootEl.value) {
+      const info = ctx.calculate('+1')
+      if (info) {
+        ctx.register(rootEl.value, info)
+        isAutoRegistered.value = true
+
+        const isActiveRef = info.isActive
+
+        watchEffect(() => {
+          const active = isActiveRef.value
+          if (active && !hasAnimated) {
+            hasAnimated = true
+            animate()
+          } else if (!active && hasAnimated) {
+            hasAnimated = false
+            resetToStart()
+          }
+        })
+      }
+    }
+  }
+
+  // Fallback for non-Slidev contexts
+  if (unref(slidePage) < 0) {
+    if (props.at === undefined || props.at === 0) {
+      hasAnimated = true
+      animate()
+    }
+  }
+})
+
+onUnmounted(() => {
+  cancelAnimation()
+  if (isAutoRegistered.value && clicksContext.value?.unregister && rootEl.value) {
+    clicksContext.value.unregister(rootEl.value)
+  }
+})
+
+watch(() => slidevContext.nav?.currentSlideNo, (currentNo, prevNo) => {
+  const myPage = unref(slidePage)
+  if (myPage < 0) return // non-Slidev context
+
+  const isActive = currentNo + 1 === myPage
+  const wasActive = prevNo !== undefined && prevNo + 1 === myPage
+
+  if (isActive && !wasActive) {
+    // Slide just became active: reset and trigger
+    hasAnimated = false
+    resetToStart()
+    if (props.at === 0) {
+      hasAnimated = true
+      animate()
+    }
+  } else if (!isActive && wasActive) {
+    // Slide deactivated: cancel animation
+    cancelAnimation()
+  }
+}, { immediate: true })
+
+// Watch clicks: passive fallback for explicit at > 0 (rare)
+watch(() => clicksContext.value?.current, (current) => {
+  if (isAutoRegistered.value || props.at === undefined || props.at <= 0) return
+  const cur = current ?? 0
+
+  if (cur >= props.at && !hasAnimated) {
+    hasAnimated = true
+    animate()
+  } else if (cur < props.at && hasAnimated) {
+    hasAnimated = false
+    resetToStart()
+  }
+})
+
+// Watch for value changes (re-animate if already triggered)
+watch(() => props.value, () => {
+  if (hasAnimated) {
+    animate()
+  }
+})
+
+defineExpose({ animate, resetToStart })
+</script>
+
+<template>
+  <span ref="rootEl" class="animated-counter">
+    {{ formattedValue }}
+  </span>
+</template>
+
+<style>
+.animated-counter {
+  font-variant-numeric: tabular-nums;
+  display: inline-block;
+}
+</style>