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
|
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**
|
<v-clicks>
|
||||||
- Markdown-based
|
|
||||||
- Ready to go
|
|
||||||
|
|
||||||
<!--
|
- **Markdown-based** — focus on content, not formatting
|
||||||
Presenter notes: everything is working!
|
- **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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Slides</h1>
|
<h1>Slide Decks</h1>
|
||||||
<div class="deck-list" id="decks">
|
<div class="deck-list" id="decks">
|
||||||
<p class="empty">Loading...</p>
|
<p class="empty">Loading...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
const decks = ['demo'];
|
const decks = ['demo', 'showcase'];
|
||||||
const container = document.getElementById('decks');
|
const container = document.getElementById('decks');
|
||||||
if (decks.length === 0) {
|
if (decks.length === 0) {
|
||||||
container.innerHTML = '<p class="empty">No slide decks yet.</p>';
|
container.innerHTML = '<p class="empty">No slide decks yet.</p>';
|
||||||
|
|||||||
@@ -6,8 +6,10 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "slidev decks/demo/slides.md",
|
"dev": "slidev decks/demo/slides.md",
|
||||||
"dev:demo": "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": "bash scripts/build.sh",
|
||||||
"build:demo": "slidev build decks/demo/slides.md --base /demo/ --out dist/demo",
|
"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"
|
"export": "slidev export"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
|
|||||||
Reference in New Issue
Block a user