@troshab/slidev-theme-troshab 0.1.0

package/setup/main.ts

@@ -0,0 +1,107 @@
+/**
+ * slidev-theme-troshab — Main Setup
+ *
+ * Smart automatic image preloading for smoother transitions.
+ *
+ * Strategy:
+ * 1. Startup: immediately preload current + ahead slides (parallel)
+ * 2. Background: sequentially preload remaining slides
+ * 3. Navigation: ensure upcoming slides are ready
+ */
+
+import { defineAppSetup } from '@slidev/types'
+import { watch } from 'vue'
+
+const loaded = new Set<string>()
+const loading = new Set<string>()
+
+function extractImages(content: string): string[] {
+  if (!content) return []
+  const urls: string[] = []
+  const imgExt = /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico)$/i
+  let m
+
+  const md = /!\[[^\]]*\]\(([^)\s"']+)/g
+  while ((m = md.exec(content))) urls.push(m[1])
+
+  const html = /<img[^>]+:?src=["']([^"']+)/gi
+  while ((m = html.exec(content))) urls.push(m[1])
+
+  const css = /url\(["']?([^"')]+)/g
+  while ((m = css.exec(content))) if (imgExt.test(m[1])) urls.push(m[1])
+
+  return urls.filter(u => u && !u.startsWith('data:'))
+}
+
+function getSlideImages(slide: any): string[] {
+  const urls: string[] = []
+  if (slide?.content) urls.push(...extractImages(slide.content))
+  if (slide?.source?.raw) urls.push(...extractImages(slide.source.raw))
+
+  const fm = slide?.frontmatter || slide?.meta || {}
+  for (const key of ['image', 'background', 'backgroundImage', 'src', 'cover']) {
+    if (typeof fm[key] === 'string') urls.push(fm[key])
+  }
+  return [...new Set(urls)]
+}
+
+function preload(url: string): Promise<void> {
+  if (loaded.has(url) || loading.has(url)) return Promise.resolve()
+  loading.add(url)
+  return new Promise(resolve => {
+    const img = new Image()
+    img.onload = () => { loading.delete(url); loaded.add(url); resolve() }
+    img.onerror = () => { loading.delete(url); resolve() }
+    img.src = url
+  })
+}
+
+async function preloadSlide(images: string[]): Promise<void> {
+  await Promise.all(images.filter(u => !loaded.has(u)).map(preload))
+}
+
+async function preloadSequentially(slideImages: string[][]): Promise<void> {
+  for (const images of slideImages) {
+    if (images.length > 0) await preloadSlide(images)
+    await new Promise(r => setTimeout(r, 50))
+  }
+}
+
+export default defineAppSetup(({ router }) => {
+  router.isReady().then(async () => {
+    const slidev = (window as any).__slidev__
+    if (!slidev?.nav) return
+
+    const config = slidev.configs?.preloadImages ?? {}
+    if (config.enabled === false) return
+
+    const ahead = config.ahead ?? 3
+    const slides: any[] = slidev.nav.slides || []
+    const current = (slidev.nav.currentSlideNo ?? 1) - 1
+    const slideImages: string[][] = slides.map(getSlideImages)
+
+    if (import.meta.env?.DEV) {
+      console.log(`[theme] Preloading images from ${slides.length} slides`)
+    }
+
+    // Phase 1: Priority slides (parallel)
+    const priorityEnd = Math.min(current + ahead + 1, slides.length)
+    await Promise.all(slideImages.slice(current, priorityEnd).map(preloadSlide))
+
+    // Phase 2: Remaining slides (sequential)
+    preloadSequentially(slideImages.slice(priorityEnd))
+
+    // Phase 3: On navigation - preload upcoming slides
+    watch(
+      () => slidev.nav.currentSlideNo,
+      async (newSlide: number) => {
+        for (let i = 0; i <= ahead; i++) {
+          const idx = newSlide - 1 + i
+          if (idx < slideImages.length) {
+            await preloadSlide(slideImages[idx].filter(u => !loaded.has(u)))
+          }
+        }
+      }
+    )
+  })
+})

package/setup/mermaid.ts

@@ -0,0 +1,237 @@
+import { defineMermaidSetup } from '@slidev/types'
+
+/**
+ * Mermaid theme configuration for slidev-theme-troshab
+ *
+ * Reads colors from CSS custom properties at runtime for consistency
+ * with the Tailwind palette system defined in styles/colors.css.
+ * No fallback hex values - colors.css is the single source of truth.
+ *
+ * Note: Theme detection happens at page load. If you toggle theme
+ * mid-presentation (T key), diagrams won't update — reload the page.
+ */
+export default defineMermaidSetup(() => {
+  // SSR guard — no DOM available during server-side rendering
+  if (typeof document === 'undefined') return {}
+
+  // Runtime check for dark mode
+  const isDark = document.documentElement.classList.contains('dark')
+
+  /**
+   * Get CSS custom property value from :root.
+   * Throws if variable is not found (no fallbacks - colors.css is the source of truth).
+   */
+  const getCssVar = (name: string): string => {
+    const value = getComputedStyle(document.documentElement)
+      .getPropertyValue(name)
+      .trim()
+    if (!value) {
+      throw new Error(`CSS variable ${name} is empty - check styles/colors.css`)
+    }
+    return value
+  }
+
+  // Read colors from CSS custom properties (no fallbacks)
+  const colors = {
+    bg: getCssVar('--color-bg'),
+    bgSoft: getCssVar('--color-bg-soft'),
+    bgMuted: getCssVar('--color-bg-muted'),
+    text: getCssVar('--color-text'),
+    textSecondary: getCssVar('--color-text-secondary'),
+    textTertiary: getCssVar('--color-text-tertiary'),
+    border: getCssVar('--color-border'),
+    borderStrong: getCssVar('--color-border-strong'),
+    primary: getCssVar('--color-primary'),
+    primarySoft: getCssVar('--color-primary-soft'),
+    success: getCssVar('--color-success'),
+    warning: getCssVar('--color-warning'),
+    danger: getCssVar('--color-danger'),
+    info: getCssVar('--color-info'),
+    chart1: getCssVar('--chart-1'),
+    chart2: getCssVar('--chart-2'),
+    chart3: getCssVar('--chart-3'),
+    chart4: getCssVar('--chart-4'),
+    chart5: getCssVar('--chart-5'),
+    chart6: getCssVar('--chart-6'),
+    chart7: getCssVar('--chart-7'),
+    chart8: getCssVar('--chart-8'),
+  }
+
+  return {
+    theme: 'base',
+    darkMode: isDark,
+    themeVariables: {
+      // Background
+      background: colors.bg,
+
+      // Primary colors
+      primaryColor: colors.primarySoft,
+      primaryTextColor: colors.text,
+      primaryBorderColor: colors.primary,
+
+      // Secondary
+      secondaryColor: colors.bgSoft,
+      secondaryTextColor: colors.textSecondary,
+      secondaryBorderColor: colors.border,
+
+      // Tertiary (explicit — prevents hue-shift derivation from secondaryColor)
+      tertiaryColor: colors.bgMuted,
+      tertiaryTextColor: colors.textTertiary,
+      tertiaryBorderColor: colors.borderStrong,
+
+      // Lines & arrows
+      lineColor: colors.textSecondary,
+      arrowheadColor: colors.textSecondary,
+
+      // Text
+      textColor: colors.text,
+
+      // Nodes (flowchart)
+      nodeBkg: colors.bgSoft,
+      nodeBorder: colors.primary,
+      nodeTextColor: colors.text,
+
+      // Cluster (flowchart subgraphs)
+      mainBkg: colors.bgSoft,
+      clusterBkg: colors.bgMuted,
+      clusterBorder: colors.borderStrong,
+      titleColor: colors.textTertiary,
+
+      // Edge labels (flowchart, ER, class)
+      edgeLabelBackground: colors.bgMuted,
+
+      // Notes (sequence)
+      noteBkgColor: colors.bgSoft,
+      noteTextColor: colors.text,
+      noteBorderColor: colors.border,
+
+      // Sequence diagram
+      actorBkg: colors.bgSoft,
+      actorBorder: colors.primary,
+      actorTextColor: colors.text,
+      actorLineColor: colors.textSecondary,
+      signalColor: colors.textSecondary,
+      signalTextColor: colors.text,
+      labelBoxBkgColor: colors.bgMuted,
+      labelBoxBorderColor: colors.border,
+      labelTextColor: colors.text,
+      loopTextColor: colors.textSecondary,
+      activationBkgColor: colors.primarySoft,
+      activationBorderColor: colors.primary,
+      sequenceNumberColor: colors.bg,
+
+      // State diagram
+      labelColor: colors.text,
+      labelBackgroundColor: colors.bgMuted,
+      stateLabelColor: colors.text,
+
+      // ER diagram
+      attributeBackgroundColorOdd: colors.bgSoft,
+      attributeBackgroundColorEven: colors.bgMuted,
+      // ER styling handled by CSS overrides in base.css
+
+      // Pie chart — 8 colors (segments beyond 8 use Mermaid defaults)
+      pie1: colors.chart1,
+      pie2: colors.chart2,
+      pie3: colors.chart3,
+      pie4: colors.chart4,
+      pie5: colors.chart5,
+      pie6: colors.chart6,
+      pie7: colors.chart7,
+      pie8: colors.chart8,
+      pieStrokeColor: colors.bg,
+      pieStrokeWidth: '2px',
+      pieTitleTextColor: colors.text,
+      pieSectionTextColor: colors.bg,
+      pieLegendTextColor: colors.text,
+      pieOuterStrokeWidth: '2px',
+      pieOuterStrokeColor: colors.borderStrong,
+      pieOpacity: '1',
+
+      // XY Chart
+      xyChart: {
+        backgroundColor: 'transparent',
+        titleColor: colors.text,
+        xAxisTitleColor: colors.textSecondary,
+        yAxisTitleColor: colors.textSecondary,
+        xAxisLabelColor: colors.textSecondary,
+        yAxisLabelColor: colors.textSecondary,
+        xAxisTickColor: colors.borderStrong,
+        yAxisTickColor: colors.borderStrong,
+        xAxisLineColor: colors.borderStrong,
+        yAxisLineColor: colors.borderStrong,
+        plotColorPalette: `${colors.chart3},${colors.chart5},${colors.chart4},${colors.chart6},${colors.chart1},${colors.chart2}`,
+      },
+
+      // Git Graph — branch labels are TEXT on colored circles (git0-7)
+      // Light: chart colors are dark shades → light text (colors.bg = white)
+      // Dark: chart colors are light shades → dark text (colors.bg = dark)
+      git0: colors.chart1,
+      git1: colors.chart2,
+      git2: colors.chart3,
+      git3: colors.chart4,
+      git4: colors.chart5,
+      git5: colors.chart6,
+      git6: colors.chart7,
+      git7: colors.chart8,
+      gitBranchLabel0: colors.bg,
+      gitBranchLabel1: colors.bg,
+      gitBranchLabel2: colors.bg,
+      gitBranchLabel3: colors.bg,
+      gitBranchLabel4: colors.bg,
+      gitBranchLabel5: colors.bg,
+      gitBranchLabel6: colors.bg,
+      gitBranchLabel7: colors.bg,
+      commitLabelColor: colors.text,
+      commitLabelBackground: colors.bgMuted,
+      commitLabelFontSize: '12px',
+      tagLabelColor: colors.text,
+      tagLabelBackground: colors.bgSoft,
+      tagLabelBorder: colors.borderStrong,
+      tagLabelFontSize: '12px',
+
+      // Timeline & Mindmap — both use cScale/cScaleLabel (not mindmap* vars)
+      // Text on colored blocks: colors.bg contrasts in both themes
+      cScale0: colors.chart1,
+      cScale1: colors.chart2,
+      cScale2: colors.chart3,
+      cScale3: colors.chart4,
+      cScale4: colors.chart5,
+      cScale5: colors.chart6,
+      cScale6: colors.chart7,
+      cScale7: colors.chart8,
+      cScaleLabel0: colors.bg,
+      cScaleLabel1: colors.bg,
+      cScaleLabel2: colors.bg,
+      cScaleLabel3: colors.bg,
+      cScaleLabel4: colors.bg,
+      cScaleLabel5: colors.bg,
+      cScaleLabel6: colors.bg,
+      cScaleLabel7: colors.bg,
+
+      // Gantt
+      sectionBkgColor: 'transparent',
+      sectionBkgColor2: 'transparent',
+      altSectionBkgColor: 'transparent',
+      gridColor: colors.borderStrong,
+      doneTaskBkgColor: colors.success,
+      doneTaskBorderColor: colors.success,
+      activeTaskBkgColor: colors.primary,
+      activeTaskBorderColor: colors.primary,
+      critBkgColor: colors.danger,
+      critBorderColor: colors.danger,
+      taskBkgColor: colors.bgSoft,
+      taskBorderColor: colors.borderStrong,
+      taskTextColor: colors.text,
+      taskTextDarkColor: colors.bg,
+      taskTextLightColor: colors.text,
+      taskTextOutsideColor: colors.text,
+      taskTextClickableColor: colors.primary,
+      todayLineColor: colors.danger,
+      excludeBkgColor: colors.bgMuted,
+
+      // Fonts
+      fontFamily: 'IBM Plex Sans, Arial, sans-serif',
+    },
+  }
+})

package/setup/shiki.ts

@@ -0,0 +1,40 @@
+import { defineShikiSetup } from '@slidev/types'
+import { createCssVariablesTheme } from 'shiki'
+import type { ShikiTransformer } from 'shiki'
+
+/**
+ * Shiki theme using CSS variables from colors.css.
+ * Token colors auto-adapt to light/dark via our semantic CSS vars.
+ * No hardcoded colors - fully customizable through the theme's color system.
+ */
+const theme = createCssVariablesTheme({
+  name: 'troshab',
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
+  fontStyle: true,
+})
+
+/**
+ * Transformer that adds `data-lang` attribute to <pre> elements.
+ * CSS in base.css uses `::before { content: attr(data-lang) }` to render
+ * a language label bar above every code block.
+ */
+const langLabelTransformer: ShikiTransformer = {
+  name: 'lang-label',
+  pre(node) {
+    const lang = this.options.lang
+    if (lang && lang !== 'text') {
+      node.properties['data-lang'] = lang
+    }
+  },
+}
+
+export default defineShikiSetup(() => {
+  return {
+    themes: {
+      light: theme,
+      dark: theme,
+    },
+    transformers: [langLabelTransformer],
+  }
+})

package/snippets/demo.ts

@@ -0,0 +1,26 @@
+// Example TypeScript snippet for import demo
+// This file demonstrates the <<< import syntax
+
+interface ApiResponse<T> {
+  data: T
+  status: number
+  message: string
+}
+
+export async function fetchData<T>(
+  endpoint: string
+): Promise<ApiResponse<T>> {
+  const response = await fetch(endpoint)
+  const data = await response.json()
+  return {
+    data,
+    status: response.status,
+    message: response.ok ? 'Success' : 'Error'
+  }
+}
+
+// #region example
+export const greeting = (name: string) => {
+  return `Hello, ${name}!`
+}
+// #endregion example