@troshab/slidev-theme-troshab 0.1.0

package/example_slides/046-qrcode.md

@@ -0,0 +1,26 @@
+---
+layout: slide
+cols: '5-7'
+---
+
+# QRCode Component
+
+::col1::
+
+<QRCode data="https://sli.dev" :size="200" color="accent" />
+
+<StyledText color="secondary" align="center">sli.dev</StyledText>
+
+::col2::
+
+### Usage
+
+```vue
+<QRCode data="https://sli.dev" />
+<QRCode data="..." :size="150" />
+<QRCode data="..." color="accent" />
+```
+
+**Props:** `data`, `size`, `color`
+
+Color accepts semantic names: `primary`, `accent`, `success`, etc.

package/example_slides/047-countdown.md

@@ -0,0 +1,14 @@
+---
+layout: slide
+cols: 2
+---
+
+# Countdown
+
+::col1::
+### Timer
+<Countdown :duration="120" showProgress />
+
+::col2::
+### Short Timer
+<Countdown :duration="60" showProgress />

package/example_slides/048-typewriter.md

@@ -0,0 +1,8 @@
+---
+layout: slide
+mode: fullscreen
+---
+
+# Typewriter Effect
+
+## <Typewriter :text="['Build beautiful slides', 'Ship with confidence', 'Present like a pro']" :speed="60" loop color="primary" />

package/example_slides/049-confetti.md

@@ -0,0 +1,16 @@
+---
+layout: slide
+mode: fullscreen
+---
+
+::bg::
+<Background :gradient="'accent'" />
+<Confetti :particleCount="100" />
+
+::default::
+
+# Confetti
+
+Background celebration effect with v-click
+
+Place `<Confetti />` in the `::bg::` slot

package/example_slides/050-image-compare.md

@@ -0,0 +1,13 @@
+---
+layout: slide
+---
+
+# ImageCompare Component
+
+<ImageCompare
+  before="https://picsum.photos/seed/compare-a/800/400"
+  after="https://picsum.photos/seed/compare-b/800/400"
+  :target="100"
+  height="18rem"
+  :animDuration="1500"
+/>

package/example_slides/051-code-diff.md

@@ -0,0 +1,24 @@
+---
+layout: slide
+---
+
+# CodeDiff Component
+
+<CodeDiff mode="split">
+  <pre filename="utils.js" lang="javascript">
+function add(a, b) {
+  return a + b;
+}
+function greet(name) {
+  return 'Hello, ' + name;
+}
+  </pre>
+  <pre filename="utils.ts" lang="typescript">
+function add(a: number, b: number) {
+  return a + b;
+}
+function greet(name: string) {
+  return 'Hello, ' + name;
+}
+  </pre>
+</CodeDiff>

package/example_slides/052-quote-block.md

@@ -0,0 +1,8 @@
+---
+layout: slide
+mode: fullscreen
+---
+
+<QuoteBlock author="Steve Jobs" source="Stanford Commencement, 2005">
+Stay hungry. Stay foolish.
+</QuoteBlock>

package/example_slides/053-testimonial.md

@@ -0,0 +1,26 @@
+---
+layout: slide
+cols: 2
+---
+
+# Testimonial Component
+
+::col1::
+
+<Testimonial
+  quote="Transformed our team collaboration. 40% productivity increase."
+  author="Sarah Johnson"
+  role="Engineering Manager"
+  company="TechCorp"
+  :rating="5"
+/>
+
+::col2::
+
+<Testimonial
+  quote="Clean API design makes integration easy. Our team shipped in half the time."
+  author="Michael Chen"
+  role="CTO"
+  company="StartupXYZ"
+  :rating="4"
+/>

package/example_slides/054-testimonial-featured.md

@@ -0,0 +1,16 @@
+---
+layout: slide
+mode: fullscreen
+---
+
+::default::
+
+# Featured Testimonial
+
+<Testimonial
+  quote="Best investment this year. Simple, powerful, and well-supported."
+  author="Michael Chen"
+  role="CTO"
+  company="StartupXYZ"
+  variant="featured"
+/>

package/example_slides/055-funnel.md

@@ -0,0 +1,12 @@
+---
+layout: slide
+---
+
+# Funnel Component
+
+<Funnel :stages="[
+  { label: 'Visitors', value: '100K' },
+  { label: 'Sign-ups', value: '25K' },
+  { label: 'Active', value: '8K' },
+  { label: 'Paying', value: '2K' }
+]" />

package/example_slides/056-pyramid.md

@@ -0,0 +1,13 @@
+---
+layout: slide
+---
+
+# Pyramid Component
+
+<Pyramid :levels="[
+  { label: 'Vision', description: 'Strategic direction' },
+  { label: 'Goals', description: 'Measurable objectives' },
+  { label: 'Strategy', description: 'Action plans' },
+  { label: 'Tactics', description: 'Daily execution' },
+  { label: 'Tasks', description: 'Individual work items' }
+]" />

package/example_slides/057-pricing-table.md

@@ -0,0 +1,9 @@
+---
+layout: slide
+---
+
+<PricingTable :plans="[
+  { name: 'Free', price: '$0', features: ['3 members', '1GB storage'] },
+  { name: 'Pro', price: '$29/mo', features: ['25 members', '100GB', 'Priority support'], highlighted: true },
+  { name: 'Team', price: '$99/mo', features: ['Unlimited', '1TB', 'Dedicated support'] }
+]" />

package/example_slides/058-swot-grid.md

@@ -0,0 +1,12 @@
+---
+layout: slide
+---
+
+# SwotGrid Component
+
+<SwotGrid
+  :strengths="['Strong brand', 'Experienced team', 'Proprietary tech']"
+  :weaknesses="['Limited reach', 'High acquisition cost']"
+  :opportunities="['Emerging markets', 'New partnerships']"
+  :threats="['More competition', 'Regulatory changes']"
+/>

package/example_slides/059-matrix-grid.md

@@ -0,0 +1,12 @@
+---
+layout: slide
+---
+
+# MatrixGrid Component
+
+<MatrixGrid :cells="[
+  { title: 'Quick Wins', items: ['Fix critical bug', 'Update docs'] },
+  { title: 'Major Projects', items: ['New API', 'Performance overhaul'] },
+  { title: 'Fill-Ins', items: ['Code cleanup', 'Minor tweaks'] },
+  { title: 'Thankless Tasks', items: ['Legacy migration', 'Complex refactor'] }
+]" />

package/example_slides/060-case-study.md

@@ -0,0 +1,11 @@
+---
+layout: slide
+---
+
+# CaseStudy Component
+
+<CaseStudy :sections="[
+  { title: 'Problem', content: 'Manual processes taking 40+ hours weekly. Data scattered across systems.', color: 'danger' },
+  { title: 'Solution', content: 'Automated workflows with centralized dashboard. Real-time validation.', color: 'primary' },
+  { title: 'Result', content: '75% time savings. 99.9% accuracy. $500K annual cost reduction.', color: 'success' }
+]" />

package/example_slides/061-definition.md

@@ -0,0 +1,15 @@
+---
+layout: slide
+---
+
+<Definition term="API" pronunciation="/ei.pi.ai/" partOfSpeech="noun">
+
+A set of protocols that allows software applications to communicate with each other.
+
+1. Defines methods and data formats
+2. Enables system integration
+3. Abstracts complexity
+
+Related: `REST`, `GraphQL`, `WebSocket`, `SDK`
+
+</Definition>

package/example_slides/062-mermaid-intro.md

@@ -0,0 +1,34 @@
+---
+layout: slide
+cols: 2
+---
+
+# Mermaid Charts
+
+::col1::
+
+Use `<MermaidChart>` wrapper for semantic typing and captions.
+
+````vue
+<MermaidChart type="flowchart"
+  direction="LR">
+
+```mermaid
+graph LR
+  A --> B
+```
+
+</MermaidChart>
+````
+
+::col2::
+
+### Supported Types
+
+flowchart, sequence, xychart, pie, class, state, er, gantt, timeline, mindmap, gitgraph
+
+### Rules
+
+- Max 8 nodes / 4 participants
+- Labels: 2-10 characters
+- No `title` in xychart

package/example_slides/063-mermaid-flowchart.md

@@ -0,0 +1,19 @@
+---
+layout: slide
+---
+
+## Flowchart
+
+<MermaidChart type="flowchart" direction="LR" caption="Directions: LR, TD, BT, RL">
+
+```mermaid
+graph LR
+    A[App] --> B[LB]
+    B --> C[GW]
+    C --> D[Auth]
+    C --> E[API]
+    D --> F[DB]
+    E --> F
+```
+
+</MermaidChart>

package/example_slides/064-mermaid-sequence.md

@@ -0,0 +1,17 @@
+---
+layout: slide
+---
+
+## Sequence Diagram
+
+<MermaidChart type="sequence" caption="Max 4 participants, short names">
+
+```mermaid
+sequenceDiagram
+    App->>API: Login
+    API->>Auth: Check
+    Auth-->>API: Token
+    API-->>App: 200 OK
+```
+
+</MermaidChart>

package/example_slides/065-mermaid-xy-chart.md

@@ -0,0 +1,16 @@
+---
+layout: slide
+---
+
+## XY Chart
+
+<MermaidChart type="xychart" caption="+850% growth in nine months">
+
+```mermaid
+xychart-beta
+    x-axis [Jan, Mar, May, Jul, Sep]
+    y-axis "Users (k)" 0 --> 100
+    bar [10, 35, 55, 75, 95]
+```
+
+</MermaidChart>

package/example_slides/066-mermaid-pie.md

@@ -0,0 +1,17 @@
+---
+layout: slide
+---
+
+## Pie Chart
+
+<MermaidChart type="pie" caption="Max 5 segments, short labels">
+
+```mermaid
+pie
+    "TypeScript" : 45
+    "JavaScript" : 30
+    "Python" : 15
+    "Go" : 10
+```
+
+</MermaidChart>

package/example_slides/067-mermaid-class.md

@@ -0,0 +1,19 @@
+---
+layout: slide
+---
+
+## Class Diagram
+
+<MermaidChart type="class">
+
+```mermaid
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal : +int age
+    Animal : +move()
+    Duck : +swim()
+    Fish : +eat()
+```
+
+</MermaidChart>

package/example_slides/068-mermaid-state.md

@@ -0,0 +1,19 @@
+---
+layout: slide
+---
+
+## State Diagram
+
+<MermaidChart type="state">
+
+```mermaid
+stateDiagram-v2
+    [*] --> Idle
+    Idle --> Load : fetch
+    Load --> OK : done
+    Load --> Err : fail
+    OK --> Idle : reset
+    Err --> Idle : retry
+```
+
+</MermaidChart>

package/example_slides/069-mermaid-er.md

@@ -0,0 +1,22 @@
+---
+layout: slide
+---
+
+## ER Diagram
+
+<MermaidChart type="er" caption="2-3 fields max per entity for slides">
+
+```mermaid
+erDiagram
+    USER ||--o{ ORDER : places
+    USER {
+        int id
+        string name
+    }
+    ORDER {
+        int id
+        int userId
+    }
+```
+
+</MermaidChart>

package/example_slides/070-mermaid-gantt.md

@@ -0,0 +1,24 @@
+---
+layout: slide
+---
+
+## Gantt Chart
+
+<MermaidChart type="gantt">
+
+```mermaid
+gantt
+    dateFormat YYYY-MM-DD
+    axisFormat %b
+    section Plan
+        Research :done, a0, 2024-01-01, 14d
+        Design   :done, a1, after a0, 21d
+    section Dev
+        Backend  :active, a2, after a1, 45d
+        Frontend :active, a3, after a1, 60d
+    section QA
+        Test     :a4, after a3, 30d
+        Ship     :active, a5, after a4, 14d
+```
+
+</MermaidChart>

package/example_slides/071-mermaid-timeline.md

@@ -0,0 +1,17 @@
+---
+layout: slide
+---
+
+## Timeline
+
+<MermaidChart type="timeline" caption="For colored stages, use the Timeline component">
+
+```mermaid
+timeline
+    2020 : Founded : First product
+    2021 : Series A : 10 employees
+    2022 : Series B : 50 employees
+    2023 : IPO : 100 employees
+```
+
+</MermaidChart>

package/example_slides/072-mermaid-mindmap.md

@@ -0,0 +1,21 @@
+---
+layout: slide
+---
+
+## Mindmap
+
+<MermaidChart type="mindmap">
+
+```mermaid
+mindmap
+  root((App))
+    UI
+      Vue
+      CSS
+    API
+      REST
+    Data
+      SQL
+```
+
+</MermaidChart>

package/example_slides/073-mermaid-gitgraph.md

@@ -0,0 +1,20 @@
+---
+layout: slide
+---
+
+## Git Graph
+
+<MermaidChart type="gitgraph">
+
+```mermaid
+gitGraph
+    commit id: "init"
+    branch develop
+    commit id: "feat-1"
+    commit id: "feat-2"
+    checkout main
+    merge develop id: "v1.0"
+    commit id: "hotfix"
+```
+
+</MermaidChart>

package/example_slides/074-mermaid-split.md

@@ -0,0 +1,30 @@
+---
+layout: slide
+mode: split
+split: [7, 5]
+---
+
+::left::
+
+<MermaidChart type="flowchart" direction="LR">
+
+```mermaid
+graph LR
+    A[Client] --> B[CDN]
+    B --> C[Server]
+    C --> D[(DB)]
+```
+
+</MermaidChart>
+
+::right::
+
+## Architecture
+
+Request flow from client to database:
+
+1. **CDN** caches static assets
+2. **Server** handles API logic
+3. **DB** stores persistent data
+
+Average latency: < 50ms

package/example_slides/075-mermaid-columns.md

@@ -0,0 +1,32 @@
+---
+layout: slide
+cols: 2
+---
+
+# Side-by-Side Diagrams
+
+::col1::
+
+<MermaidChart type="pie">
+
+```mermaid
+pie
+    "Frontend" : 40
+    "Backend" : 35
+    "DevOps" : 25
+```
+
+</MermaidChart>
+
+::col2::
+
+<MermaidChart type="pie">
+
+```mermaid
+pie
+    "React" : 50
+    "Vue" : 30
+    "Svelte" : 20
+```
+
+</MermaidChart>

package/example_slides/076-section-addons.md

@@ -0,0 +1,14 @@
+---
+layout: slide
+mode: fullscreen
+transition: fade
+---
+
+::bg::
+<Background :gradient="'subtle'" />
+
+::default::
+
+# Addons
+
+3 bundled extensions

package/example_slides/077-asciinema.md

@@ -0,0 +1,27 @@
+---
+layout: slide
+cols: '5-7'
+---
+
+# Asciinema
+
+::col1::
+
+Terminal recordings via [asciinema-player](https://docs.asciinema.org/manual/player/).
+
+```md
+<Asciinema
+  src="/casts/demo.cast"
+  :playerProps="{ autoPlay: true,
+    loop: true, speed: 2 }" />
+```
+
+::col2::
+
+**playerProps:**
+
+- `rows` / `cols` - terminal size
+- `autoPlay` - start on enter
+- `loop` - loop playback
+- `speed` - playback speed
+- `fit` - `width`, `height`, `both`, `none`

package/example_slides/078-fancyarrow.md

@@ -0,0 +1,31 @@
+---
+layout: slide
+cols: '5-7'
+---
+
+## FancyArrow
+
+::col1::
+
+Hand-drawn arrows via [slidev-addon-fancy-arrow](https://github.com/whitphx/slidev-addon-fancy-arrow).
+
+```md
+<FancyArrow
+  from="[data-id=a]@right"
+  to="[data-id=b]@left"
+  color="var(--color-primary)"
+  :width="2" arc="0.3" />
+```
+
+::col2::
+
+**Props:**
+
+- `from/to` - selector `@` anchor
+- `x1/y1/x2/y2` - absolute (px)
+- `color` - arrow color
+- `width` - line width (default: 2)
+- `arc` - curvature
+- `roughness` - hand-drawn feel
+- `duration/delay` - animation (ms)
+- `two-way` - bidirectional