feat: add showcase deck and enhance demo slides
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+99
-11
@@ -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
|
||||
|
||||
@@ -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>
|
||||
+2
-2
@@ -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>';
|
||||
|
||||
@@ -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": [],
|
||||
|
||||
Reference in New Issue
Block a user