@troshab/slidev-theme-troshab 0.1.0

package/components/DeviceMockup.vue

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+/**
+ * DeviceMockup component - device frames for screenshots
+ *
+ * Usage:
+ * <DeviceMockup device="iphone" image="/screenshot.png" />
+ * <DeviceMockup device="browser" url="https://example.com">
+ *   <img src="/screenshot.png" />
+ * </DeviceMockup>
+ * <DeviceMockup device="macbook" :scale="0.8" />
+ */
+
+import { computed } from 'vue'
+
+const props = defineProps<{
+  device: 'iphone' | 'macbook' | 'browser' | 'tablet'
+  image?: string
+  url?: string
+  title?: string
+  scale?: number
+  placeholder?: string         // Renders a styled placeholder with text
+}>()
+
+const deviceClass = computed(() => {
+  return `device-mockup device-${props.device}`
+})
+
+const containerStyle = computed(() => {
+  const styles: Record<string, string> = {}
+  if (props.scale && props.scale !== 1) {
+    styles.zoom = `${props.scale}`
+  }
+  return styles
+})
+
+const displayUrl = computed(() => {
+  if (!props.url) return ''
+  try {
+    const url = new URL(props.url)
+    return url.hostname + (url.pathname !== '/' ? url.pathname : '')
+  } catch {
+    return props.url
+  }
+})
+</script>
+
+<template>
+  <div :class="deviceClass" :style="containerStyle">
+    <!-- iPhone -->
+    <template v-if="device === 'iphone'">
+      <div class="iphone-frame">
+        <div class="iphone-notch"></div>
+        <div class="iphone-screen">
+          <img v-if="image" :src="image" :alt="title || 'iPhone screenshot'" />
+          <div v-else-if="placeholder" class="device-mockup-placeholder">
+            <p>{{ placeholder }}</p>
+          </div>
+          <slot v-else />
+        </div>
+      </div>
+    </template>
+
+    <!-- MacBook -->
+    <template v-else-if="device === 'macbook'">
+      <div class="macbook-frame">
+        <div class="macbook-screen">
+          <div class="macbook-camera"></div>
+          <div class="macbook-display">
+            <img v-if="image" :src="image" :alt="title || 'MacBook screenshot'" />
+            <div v-else-if="placeholder" class="device-mockup-placeholder">
+              <p>{{ placeholder }}</p>
+            </div>
+            <slot v-else />
+          </div>
+        </div>
+        <div class="macbook-base">
+          <div class="macbook-notch"></div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Browser -->
+    <template v-else-if="device === 'browser'">
+      <div class="browser-frame">
+        <div class="browser-toolbar">
+          <div class="browser-buttons">
+            <span class="browser-btn browser-btn-close"></span>
+            <span class="browser-btn browser-btn-minimize"></span>
+            <span class="browser-btn browser-btn-maximize"></span>
+          </div>
+          <div class="browser-address">
+            <svg class="browser-lock" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V6H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-.5V4.5A3.5 3.5 0 0 0 8 1zm2.5 5V4.5a2.5 2.5 0 0 0-5 0V6h5z"/>
+            </svg>
+            <span class="browser-url">{{ displayUrl || 'example.com' }}</span>
+          </div>
+        </div>
+        <div class="browser-content" :class="{ 'browser-content-image': !!image }">
+          <img v-if="image" :src="image" :alt="title || 'Browser screenshot'" />
+          <div v-else-if="placeholder" class="device-mockup-placeholder">
+            <p>{{ placeholder }}</p>
+          </div>
+          <slot v-else />
+        </div>
+      </div>
+    </template>
+
+    <!-- Tablet -->
+    <template v-else-if="device === 'tablet'">
+      <div class="tablet-frame">
+        <div class="tablet-camera"></div>
+        <div class="tablet-screen">
+          <img v-if="image" :src="image" :alt="title || 'Tablet screenshot'" />
+          <div v-else-if="placeholder" class="device-mockup-placeholder">
+            <p>{{ placeholder }}</p>
+          </div>
+          <slot v-else />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+.device-mockup {
+  display: inline-block;
+}
+
+/* ============================================
+   iPhone
+   ============================================ */
+.iphone-frame {
+  position: relative;
+  width: 280px;
+  height: 580px;
+  background-color: var(--color-drac-fg-900);
+  border-radius: 40px;
+  padding: 12px;
+  box-shadow:
+    0 0 0 2px var(--color-drac-fg-700),
+    0 20px 40px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.dark .iphone-frame {
+  background-color: var(--color-drac-fg-800);
+  box-shadow:
+    0 0 0 2px var(--color-drac-fg-600),
+    0 20px 40px color-mix(in srgb, var(--color-black) 50%, transparent);
+}
+
+.iphone-notch {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 120px;
+  height: 28px;
+  background-color: var(--color-drac-fg-900);
+  border-radius: 0 0 16px 16px;
+  z-index: 10;
+}
+
+.dark .iphone-notch {
+  background-color: var(--color-drac-fg-800);
+}
+
+.iphone-screen {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-bg);
+  border-radius: 28px;
+  overflow: hidden;
+}
+
+.iphone-screen img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ============================================
+   MacBook
+   ============================================ */
+.macbook-frame {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.macbook-screen {
+  position: relative;
+  width: 560px;
+  background-color: var(--color-drac-fg-900);
+  border-radius: 12px 12px 0 0;
+  padding: 8px 8px 0 8px;
+  box-shadow: 0 -2px 20px color-mix(in srgb, var(--color-black) 20%, transparent);
+}
+
+.dark .macbook-screen {
+  background-color: var(--color-drac-fg-800);
+}
+
+.macbook-camera {
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-drac-fg-700);
+  border-radius: 50%;
+  margin: 4px auto 8px auto;
+}
+
+.dark .macbook-camera {
+  background-color: var(--color-drac-fg-600);
+}
+
+.macbook-display {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  background-color: var(--color-bg);
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+}
+
+.macbook-display img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.macbook-base {
+  width: 620px;
+  height: 14px;
+  background: linear-gradient(to bottom, var(--color-drac-fg-300) 0%, var(--color-drac-fg-400) 100%);
+  border-radius: 0 0 8px 8px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.dark .macbook-base {
+  background: linear-gradient(to bottom, var(--color-drac-fg-600) 0%, var(--color-drac-fg-700) 100%);
+}
+
+.macbook-notch {
+  width: 80px;
+  height: 4px;
+  background-color: var(--color-drac-fg-500);
+  border-radius: 0 0 4px 4px;
+}
+
+.dark .macbook-notch {
+  background-color: var(--color-drac-fg-500);
+}
+
+/* ============================================
+   Browser
+   ============================================ */
+.browser-frame {
+  width: 100%;
+  max-width: 640px;
+  background-color: var(--color-bg-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-black) 10%, transparent);
+}
+
+.dark .browser-frame {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.browser-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background-color: var(--color-bg-muted);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.browser-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.browser-btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.browser-btn-close {
+  background-color: var(--color-drac-red-500);
+}
+
+.browser-btn-minimize {
+  background-color: var(--color-drac-orange-400);
+}
+
+.browser-btn-maximize {
+  background-color: var(--color-drac-green-500);
+}
+
+.browser-address {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: var(--color-bg);
+  border-radius: 6px;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.browser-lock {
+  width: 12px;
+  height: 12px;
+  opacity: 0.6;
+}
+
+.browser-url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-content {
+  background-color: var(--color-bg);
+  overflow: hidden;
+}
+
+.browser-content-image {
+  aspect-ratio: 16 / 9;
+}
+
+.browser-content img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ============================================
+   Tablet (landscape)
+   ============================================ */
+.tablet-frame {
+  position: relative;
+  width: 500px;
+  height: 360px;
+  background-color: var(--color-drac-fg-900);
+  border-radius: 20px;
+  padding: 16px;
+  box-shadow:
+    0 0 0 2px var(--color-drac-fg-700),
+    0 20px 40px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.dark .tablet-frame {
+  background-color: var(--color-drac-fg-800);
+  box-shadow:
+    0 0 0 2px var(--color-drac-fg-600),
+    0 20px 40px color-mix(in srgb, var(--color-black) 50%, transparent);
+}
+
+.tablet-camera {
+  position: absolute;
+  left: 50%;
+  top: 6px;
+  transform: translateX(-50%);
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-drac-fg-700);
+  border-radius: 50%;
+}
+
+.dark .tablet-camera {
+  background-color: var(--color-drac-fg-600);
+}
+
+.tablet-screen {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-bg);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.tablet-screen img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

package/components/Funnel.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * Funnel widget — conversion funnel visualization.
+ *
+ * Displays stages as vertically stacked bars with decreasing widths,
+ * forming a classic funnel/trapezoid shape.
+ *
+ * <Funnel :stages="[
+ *   { label: 'Visitors', value: '10,000' },
+ *   { label: 'Leads', value: '2,500' },
+ *   { label: 'Customers', value: '100' }
+ * ]" />
+ */
+
+import type { SemanticColor } from '../composables/useColors'
+import { semanticColorVar, semanticForegroundVar } from '../composables/useColors'
+
+const props = withDefaults(defineProps<{
+  stages: Array<{ label: string; value: string }>
+  colors?: string[]
+}>(), {
+  colors: () => ['primary', 'info', 'success'],
+})
+
+function stageColor(index: number): string {
+  const c = props.colors[index % props.colors.length] as SemanticColor
+  return semanticColorVar[c] || semanticColorVar.primary
+}
+
+function stageForeground(index: number): string {
+  const c = props.colors[index % props.colors.length] as SemanticColor
+  return semanticForegroundVar[c] || semanticForegroundVar.primary
+}
+
+function stageWidth(index: number): number {
+  const total = props.stages.length
+  if (total <= 1) return 100
+  const minRatio = 0.35
+  return 100 * (1 - index * (1 - minRatio) / (total - 1))
+}
+</script>
+
+<template>
+  <div class="funnel">
+    <div
+      v-for="(stage, i) in stages"
+      :key="i"
+      class="funnel-stage"
+      :style="{
+        width: stageWidth(i) + '%',
+        background: stageColor(i),
+        color: stageForeground(i),
+      }"
+    >
+      <span class="funnel-stage-value">{{ stage.value }}</span>
+      <span class="funnel-stage-label">{{ stage.label }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.funnel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: var(--space-sm);
+}
+
+.funnel-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  border-radius: 0.5rem;
+  padding: 0.5rem var(--space-md);
+}
+
+.funnel-stage-value {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+}
+
+.funnel-stage-label {
+  font-weight: var(--font-weight-semibold);
+}
+</style>

package/components/Icon.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/**
+ * Icon primitive — Phosphor icon wrapper with theme-aware sizing and color.
+ *
+ * Renders SVG directly from @iconify-json/ph data via @iconify/utils.
+ * No runtime component resolution needed.
+ *
+ * Usage:
+ *   <Icon name="ph-check-circle" size="xl" color="success" />
+ *   <Icon name="ph-rocket-bold" size="lg" />
+ */
+
+import { computed } from 'vue'
+import { getIconData, iconToSVG } from '@iconify/utils'
+import phIcons from '@iconify-json/ph/icons.json'
+import type { ColorWithInherit } from '../composables/useColors'
+import { textColorVar } from '../composables/useColors'
+
+const props = defineProps<{
+  name: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  color?: ColorWithInherit
+}>()
+
+const sizeMap: Record<string, string> = {
+  sm: '1rem',
+  md: '1.5rem',
+  lg: '2rem',
+  xl: '3rem',
+}
+
+const iconSvg = computed(() => {
+  const iconName = props.name.replace(/^ph-/, '')
+  const data = getIconData(phIcons as any, iconName)
+  if (!data) return null
+  return iconToSVG(data)
+})
+</script>
+
+<template>
+  <span
+    class="icon-wrapper"
+    :style="{
+      fontSize: sizeMap[size || 'md'],
+      color: color && color !== 'inherit' ? textColorVar[color] : undefined,
+    }"
+  >
+    <svg
+      v-if="iconSvg"
+      xmlns="http://www.w3.org/2000/svg"
+      :width="iconSvg.attributes.width"
+      :height="iconSvg.attributes.height"
+      :viewBox="iconSvg.attributes.viewBox"
+      fill="currentColor"
+      v-html="iconSvg.body"
+    />
+  </span>
+</template>
+
+<style scoped>
+.icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.icon-wrapper svg {
+  width: 1em;
+  height: 1em;
+}
+</style>

package/components/Iframe.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * Iframe primitive - embeds external content with proper sizing.
+ *
+ * In bg slots: auto-fills the area (parent CSS handles sizing).
+ * In content: specify height for proper display.
+ *
+ * Usage:
+ *   ::bg::
+ *   <Iframe src="https://sli.dev" />
+ *
+ *   <Iframe src="https://codepen.io/..." height="400px" />
+ */
+
+defineProps<{
+  src: string
+  height?: string
+  allow?: string
+}>()
+</script>
+
+<template>
+  <iframe
+    :src="src"
+    :allow="allow"
+    :style="{ height: height || undefined }"
+    class="iframe-embed"
+    frameborder="0"
+    allowfullscreen
+  />
+</template>
+
+<style>
+.iframe-embed {
+  width: 100%;
+  border: 0;
+}
+</style>

package/components/Image.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * Image primitive — content image with caption, border, and sizing.
+ * Things markdown ![](url) can't express.
+ */
+
+defineProps<{
+  src: string
+  alt?: string
+  caption?: string
+  fit?: 'cover' | 'contain' | 'none'
+  border?: boolean
+  shadow?: boolean
+  rounded?: boolean
+  width?: string
+}>()
+</script>
+
+<template>
+  <figure class="image-figure" :style="width ? { width } : undefined">
+    <img
+      :src="src"
+      :alt="alt || ''"
+      class="image-img"
+      :class="{
+        'image-border': border,
+        'image-shadow': shadow,
+        'image-rounded': rounded,
+      }"
+      :style="fit && fit !== 'none' ? { objectFit: fit, width: '100%', height: '100%' } : undefined"
+    />
+    <figcaption v-if="caption" class="image-caption">{{ caption }}</figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.image-figure {
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+
+.image-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.image-border {
+  border: 1px solid var(--color-border);
+}
+
+.image-shadow {
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 15%, transparent);
+}
+
+.image-rounded {
+  border-radius: 0.5rem;
+}
+
+.image-caption {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  margin-top: var(--space-xs);
+  text-align: center;
+}
+</style>