Dev Slides

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

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

---layout: cover---# Title Slide
---layout: intro---# Introduction
---layout: center---# Centered
---layout: two-cols---# Left::right::# Right
---layout: image-rightimage: ./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 blockfunction add(a: number, b: number) {  return a + b}\`\`\`
\`\`\`ts {monaco-run}// Runnable codeconsole.log('Hello from Slidev!')\`\`\`

\`\`\`mermaidgraph LR  A[Start] --> B{Decision}  B -->|Yes| C[Action 1]  B -->|No| D[Action 2]\`\`\`
\`\`\`mermaidsequenceDiagram  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: seriphbackground: https://source.unsplash.com/collection/94734566/1920x1080class: 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// Previewconst 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)