From a2bdfcafc57fadc7e7ad08e7da12d8ff5ca1ea42 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Wed, 27 May 2026 11:43:19 +0800
Subject: [PATCH] feat: add showcase deck and enhance demo slides

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 decks/demo/slides.md     | 110 +++++++++++++++++++++++++++++----
 decks/showcase/slides.md | 130 +++++++++++++++++++++++++++++++++++++++
 index.html               |   4 +-
 package.json             |   2 +
 4 files changed, 233 insertions(+), 13 deletions(-)
 create mode 100644 decks/showcase/slides.md

diff --git a/decks/demo/slides.md b/decks/demo/slides.md
index 8b604e9..bbee1ad 100644
--- a/decks/demo/slides.md
+++ b/decks/demo/slides.md
@@ -1,22 +1,110 @@
 ---
 theme: default
-title: Slide Demo
+title: Quick Start
+layout: cover
 ---
 
-# Slide Demo
+# Quick Start
 
-Minimal Slidev test
+Slidev in 3 minutes
+
+<div class="abs-br m-6">
+  <a href="https://github.com/slidevjs/slidev" target="_blank" class="text-sm opacity-50 !border-none">
+    GitHub
+  </a>
+</div>
 
 ---
 
-# Hello World
+# What is Slidev?
 
-This is a minimal slide deck.
+A presentation tool for developers
 
-- Built with **Slidev**
-- Markdown-based
-- Ready to go
+<v-clicks>
 
-<!--
-Presenter notes: everything is working!
--->
+- **Markdown-based** — focus on content, not formatting
+- **Developer-friendly** — code highlighting, Monaco editor, terminal
+- **Beautiful** — themes, animations, transitions
+- **Extensible** — Vue components, UnoCSS, MDC syntax
+
+</v-clicks>
+
+---
+
+# Getting Started
+
+::left::
+
+### Create
+
+```bash
+pnpm create slidev
+```
+
+### Develop
+
+```bash
+pnpm run dev
+```
+
+### Build
+
+```bash
+pnpm run build
+```
+
+::right::
+
+<v-click>
+
+### Project Structure
+
+```
+my-slides/
+├── slides.md      # Entry
+├── pages/         # Extra slides
+├── public/        # Assets
+└── components/    # Vue components
+```
+
+</v-click>
+
+---
+
+# Write Slides
+
+```md
+---
+theme: default
+---
+
+# My Slide
+
+Content here with **Markdown**.
+
+---
+
+# Next Slide
+
+Use `---` to separate slides.
+```
+
+<v-clicks>
+
+- First block is headmatter (deck config)
+- `---` separates slides
+- `<!-- -->` for presenter notes
+
+</v-clicks>
+
+---
+layout: center
+---
+
+# Try It Now
+
+```bash
+pnpm run dev
+```
+
+Open http://localhost:3030
diff --git a/decks/showcase/slides.md b/decks/showcase/slides.md
new file mode 100644
index 0000000..99b7485
--- /dev/null
+++ b/decks/showcase/slides.md
@@ -0,0 +1,130 @@
+---
+theme: default
+title: Slidev Showcase
+transition: slide-left
+mdc: true
+---
+
+# Slidev Showcase
+
+Explore the powerful features of Slidev
+
+<div class="abs-br m-6 text-sm opacity-50">
+  Press <kbd>Space</kbd> to navigate
+</div>
+
+---
+layout: center
+---
+
+# Click Animations
+
+<v-clicks>
+
+- Elements appear one by one
+- Supports nested lists
+- Great for step-by-step explanations
+
+</v-clicks>
+
+---
+
+# Two-Column Layout
+
+::left::
+
+### Features
+
+<v-clicks>
+
+- Markdown-based
+- Vue components
+- Code highlighting
+- Diagrams & Math
+
+</v-clicks>
+
+::right::
+
+<v-click>
+
+```ts
+// It's just Markdown!
+interface Slide {
+  content: string
+  layout?: string
+  transition?: string
+}
+```
+
+</v-click>
+
+---
+
+# Code Highlighting
+
+```ts {2-3|5-7|all}
+function fibonacci(n: number): number {
+  if (n <= 1) return n
+  return fibonacci(n - 1) + fibonacci(n - 2)
+}
+
+// Click through to reveal lines
+const result = fibonacci(10)
+console.log(`fib(10) = ${result}`)
+```
+
+<br>
+
+<v-click>
+
+> Use `|` separator to highlight lines per click
+
+</v-click>
+
+---
+
+# Mermaid Diagrams
+
+```mermaid
+graph LR
+    A[Markdown] --> B[Slidev]
+    B --> C[Vite]
+    B --> D[Vue]
+    C --> E[SPA]
+    D --> E
+    E --> F[Deploy]
+```
+
+---
+
+# Math Equations
+
+Inline math: $E = mc^2$
+
+Block math:
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+
+<br>
+
+<v-click>
+
+Powered by **KaTeX** — fast and beautiful math rendering
+
+</v-click>
+
+---
+layout: center
+class: text-center
+---
+
+# That's Slidev
+
+Write slides in Markdown, present with style.
+
+<div class="mt-8 text-sm opacity-60">
+  <a href="https://sli.dev" target="_blank">sli.dev</a>
+</div>
diff --git a/index.html b/index.html
index 16fb37e..0bc288a 100644
--- a/index.html
+++ b/index.html
@@ -20,13 +20,13 @@
 </head>
 <body>
   <div class="container">
-    <h1>Slides</h1>
+    <h1>Slide Decks</h1>
     <div class="deck-list" id="decks">
       <p class="empty">Loading...</p>
     </div>
   </div>
   <script>
-    const decks = ['demo'];
+    const decks = ['demo', 'showcase'];
     const container = document.getElementById('decks');
     if (decks.length === 0) {
       container.innerHTML = '<p class="empty">No slide decks yet.</p>';
diff --git a/package.json b/package.json
index b248b44..57887dc 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
   "scripts": {
     "dev": "slidev decks/demo/slides.md",
     "dev:demo": "slidev decks/demo/slides.md",
+    "dev:showcase": "slidev decks/showcase/slides.md",
     "build": "bash scripts/build.sh",
     "build:demo": "slidev build decks/demo/slides.md --base /demo/ --out dist/demo",
+    "build:showcase": "slidev build decks/showcase/slides.md --base /showcase/ --out dist/showcase",
     "export": "slidev export"
   },
   "keywords": [],