dev-slides

---
theme: default
title: My Presentation
---
 
# Welcome
 
This is the first slide
 
---
 
# Second Slide
 
Content here

---   # New horizontal slide
 
---   # Another slide
layout: center
---
 
# Centered Content

---
layout: cover
---
# Title Slide
 
---
layout: intro
---
# Introduction
 
---
layout: center
---
# Centered
 
---
layout: two-cols
---
# Left
::right::
# Right
 
---
layout: image-right
image: ./image.png
---
# Content with Image

# Code Example
 
\`\`\`ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = \`Hello, \${name}!\`
console.log(greeting)
// Outputs: Hello, Slidev!
\`\`\`
 
<!-- Lines highlighted step by step -->

\`\`\`ts {monaco}
// Editable code block
function add(a: number, b: number) {
  return a + b
}
\`\`\`
 
\`\`\`ts {monaco-run}
// Runnable code
console.log('Hello from Slidev!')
\`\`\`

\`\`\`mermaid
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action 1]
  B -->|No| D[Action 2]
\`\`\`
 
\`\`\`mermaid
sequenceDiagram
  Client->>Server: Request
  Server-->>Client: Response
\`\`\`

<Counter :count="10" />
 
<Tweet id="1390115482657726468" />
 
<!-- Custom component -->
<MyComponent v-click />

<v-click>
 
This appears on click
 
</v-click>
 
<v-clicks>
 
- Item 1
- Item 2
- Item 3
 
</v-clicks>
 
<!-- Or with v-click directive -->
<div v-click>Animated content</div>

---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
  persist: false
css: unocss
---

---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
---
 
# REST API Workshop
 
Building Modern APIs with Node.js
 
<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer">
    Press Space for next page <carbon:arrow-right />
  </span>
</div>
 
---
layout: two-cols
---
 
# What We'll Cover
 
<v-clicks>
 
- RESTful principles
- Express.js basics
- Authentication
- Error handling
- Testing
 
</v-clicks>
 
::right::
 
\`\`\`ts
// Preview
const app = express()
app.get('/api/users', getUsers)
app.listen(3000)
\`\`\`
 
---
 
# Live Demo
 
\`\`\`ts {monaco-run}
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]
 
console.log(JSON.stringify(users, null, 2))
\`\`\`
 
---
layout: center
---
 
# Questions?
 
[GitHub](https://github.com) · [Documentation](https://docs.example.com)

npm init slidev@latest