slides
This commit is contained in:
Norman Köhring
commit
27a1deac0b
12 changed files with 7408 additions and 0 deletions
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
*.local
|
||||||
|
.vite-inspect
|
||||||
|
.remote-assets
|
||||||
|
components.d.ts
|
||||||
3
.npmrc
Normal file
3
.npmrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# for pnpm
|
||||||
|
shamefully-hoist=true
|
||||||
|
auto-install-peers=true
|
||||||
11
README.md
Normal file
11
README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
|
||||||
|
|
||||||
|
To start the slide show:
|
||||||
|
|
||||||
|
- `npm install`
|
||||||
|
- `npm run dev`
|
||||||
|
- visit <http://localhost:3030>
|
||||||
|
|
||||||
|
Edit the [slides.md](./slides.md) to see the changes.
|
||||||
|
|
||||||
|
Learn more about Slidev at the [documentation](https://sli.dev/).
|
||||||
37
components/Counter.vue
Normal file
37
components/Counter.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
count: {
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const counter = ref(props.count)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div flex="~" w="min" border="~ main rounded-md">
|
||||||
|
<button
|
||||||
|
border="r main"
|
||||||
|
p="2"
|
||||||
|
font="mono"
|
||||||
|
outline="!none"
|
||||||
|
hover:bg="gray-400 opacity-20"
|
||||||
|
@click="counter -= 1"
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</button>
|
||||||
|
<span m="auto" p="2">{{ counter }}</span>
|
||||||
|
<button
|
||||||
|
border="l main"
|
||||||
|
p="2"
|
||||||
|
font="mono"
|
||||||
|
outline="!none"
|
||||||
|
hover:bg="gray-400 opacity-20"
|
||||||
|
@click="counter += 1"
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
16
netlify.toml
Normal file
16
netlify.toml
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
[build]
|
||||||
|
publish = "dist"
|
||||||
|
command = "npm run build"
|
||||||
|
|
||||||
|
[build.environment]
|
||||||
|
NODE_VERSION = "20"
|
||||||
|
|
||||||
|
[[redirects]]
|
||||||
|
from = "/.well-known/*"
|
||||||
|
to = "/.well-known/:splat"
|
||||||
|
status = 200
|
||||||
|
|
||||||
|
[[redirects]]
|
||||||
|
from = "/*"
|
||||||
|
to = "/index.html"
|
||||||
|
status = 200
|
||||||
17
package.json
Normal file
17
package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"name": "2024_10_workshop_five_minutes",
|
||||||
|
"type": "module",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "slidev build",
|
||||||
|
"dev": "slidev --open",
|
||||||
|
"export": "slidev export"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@slidev/cli": "^0.50.0-beta.3",
|
||||||
|
"@slidev/theme-default": "latest",
|
||||||
|
"@slidev/theme-seriph": "latest",
|
||||||
|
"@slidev/theme-shibainu": "^0.25.0",
|
||||||
|
"vue": "^3.5.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
27
pages/imported-slides.md
Normal file
27
pages/imported-slides.md
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
# Imported Slides
|
||||||
|
|
||||||
|
You can split your slides.md into multiple files and organize them as you want using the `src` attribute.
|
||||||
|
|
||||||
|
#### `slides.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Page 1
|
||||||
|
|
||||||
|
Page 2 from main entry.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## src: ./subpage.md
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
#### `subpage.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Page 2
|
||||||
|
|
||||||
|
Page 2 from another file.
|
||||||
|
```
|
||||||
|
|
||||||
|
[Learn more](https://sli.dev/guide/syntax.html#importing-slides)
|
||||||
6287
pnpm-lock.yaml
Normal file
6287
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
342
slides.md
Normal file
342
slides.md
Normal file
|
|
@ -0,0 +1,342 @@
|
||||||
|
---
|
||||||
|
theme: shibainu
|
||||||
|
background: #443322
|
||||||
|
title: What to talk about in five minutes
|
||||||
|
info: |
|
||||||
|
## What to talk about in five minutes
|
||||||
|
Five minutes is too short and too long at the same time.
|
||||||
|
|
||||||
|
# apply unocss classes to the current slide
|
||||||
|
class: text-center
|
||||||
|
drawings:
|
||||||
|
persist: false
|
||||||
|
transition: slide-left
|
||||||
|
mdc: true
|
||||||
|
overviewSnapshots: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# What to talk about
|
||||||
|
|
||||||
|
...if you have only five minutes?
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# The Challenge
|
||||||
|
|
||||||
|
<v-clicks>
|
||||||
|
|
||||||
|
* Wait... he is not talking about coffee?
|
||||||
|
|
||||||
|
* But everyone expected a talk about coffee!
|
||||||
|
|
||||||
|
* Okay, some people might have expected Zig.
|
||||||
|
|
||||||
|
* ...or Rust!
|
||||||
|
|
||||||
|
</v-clicks>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The challenges of five minute talks:
|
||||||
|
|
||||||
|
* **Five minutes is short!**
|
||||||
|
Better don't pick a topic where you tend to nerd out too much. It will be very hard to pick only five minutes worth of information.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* **Five minutes are long!**
|
||||||
|
It shounds like nothing, but if you have no idea what to say, five minutes can be very long. So better prepare something.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* **Engagement**
|
||||||
|
The time to engage your audience and make a lasting impression is limited. Be catchy and informative at the same time.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* **Structuring the talk**
|
||||||
|
Not only do you have to fit all the information and engage your audience, but you also need to keep a clear structure while not rushing.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* **Preparation and practice**
|
||||||
|
The limited time gives also less room for recovering from mistakes and less room for multimedia fillers. Carefully preparing and practicing the talk is important to ensure precise delivery and timing, without sounding robotic.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Types of Five-Minute Presentations
|
||||||
|
|
||||||
|
<div mt-4 v-click>
|
||||||
|
|
||||||
|
* **Elevator Pitch** - Sell an idea
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
➡️ Why a Zig rewrite is the only way.
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<div mt-4 v-click>
|
||||||
|
|
||||||
|
* **Lightning Talk** - Rapidly share an idea or concept
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
➡️ Roasting coffee at home, yay or nay?
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<div mt-4 v-click>
|
||||||
|
|
||||||
|
* **Micro Learning Session** - Showcase a specific skill or piece of knowledge
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
➡️ How to brew the perfect cup of Joe.
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<div mt-4 v-click>
|
||||||
|
|
||||||
|
* **Ignite Talk** - Inspire or provoke thought on a topic
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
➡️ Things I hate about Javascript
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Types of Five-Minute Presentations, which of course also work for different durations most of the time.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Elevator Pitch - If you want to **Sell an idea**
|
||||||
|
|
||||||
|
* **Purpose:** To quickly sell an idea, product, or yourself
|
||||||
|
* **Characteristics:** Concise, persuasive and focused on key benefits
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Often used in business or networking contexts, so better don't try this format on your friends wedding.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Lightning Talk - If you want to share an idea or concept
|
||||||
|
|
||||||
|
* **Purpose:** To share a focused idea or concept in a rapid fashion
|
||||||
|
* **Characteristics:** Fast-paced, often part of a series of short talks
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Common in tech conferences, academic settings, or meetups like the Vuejs//Berlin meetup.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Micro Learning Session - If you want to showcase something
|
||||||
|
|
||||||
|
* **Purpose:** To teach a specific skill or piece of knowledge
|
||||||
|
* **Characteristics:** Practical, actionable and focused on one key takeaway
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Popular in professional development or educational settings. Also works well at Meetups like the Vuejs//Berlin meetup.
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Ignite Talk - Inspire or provoke thought
|
||||||
|
|
||||||
|
* **Purpose:** To inspire or provoke thought on a topic
|
||||||
|
* **Characteristics:** Auto-advancing slides, comes from the TED talk environment
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Requires precise timing and rehearsal, because the slides are automatically advancing every 15 seconds?!
|
||||||
|
|
||||||
|
Fun Fact: There is a similar format called *PechaKucha* (japanese for "chit-chat"), for visual story telling.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# Effective Topics for Short Presentations
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **A single, focused Idea**
|
||||||
|
➡️ like coffee roasting, instead of coffee in general
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **A Personal anecdote or experience**
|
||||||
|
➡️ a failed coffee roasting experiment
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **A provocative question or thought**
|
||||||
|
➡️ Salt as the answer to bitter coffee?
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div mt-8 columns-2 v-click>
|
||||||
|
|
||||||
|
* Life Hacks
|
||||||
|
* Recent Discoveries
|
||||||
|
* Cultural Insights
|
||||||
|
* Passion Projects
|
||||||
|
* Myth Busting
|
||||||
|
* Future Predictions
|
||||||
|
* Unexpected Connections
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Effective topics for short presentations are typically those that are focussed, engaging, and can be meaningfully explored in a short time frame.
|
||||||
|
|
||||||
|
For example:
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* A specific concept or theory
|
||||||
|
* A particular problem and its solution
|
||||||
|
* A unique perspective
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* A life-changing moment
|
||||||
|
* An important lesson learned
|
||||||
|
* A surprising encounter or discovery
|
||||||
|
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
* "What if..." scenarios
|
||||||
|
* Ethical dilemmas
|
||||||
|
* Challenging commonly held beliefs
|
||||||
|
|
||||||
|
**CLICK**
|
||||||
|
|
||||||
|
Need more? Here is a list...
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Structure and Delivery Tips
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **Start Strong**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* Have a **clear beginning, middle and end**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **Speak clearly and Concisely**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **Use Effective Body Language**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* ➡️ ☕ 🍺 🥨
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **Practice content and timing**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **Engage the Audience**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
* **Show Confidence**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Delivery is crucial in a five-minute presentation. Some tips to make a short presentation impactful:
|
||||||
|
|
||||||
|
* Start Strong - Some provocative hook or a funny anectode maybe?
|
||||||
|
* Maintain a clear structure - We are in the middle part, btw.
|
||||||
|
* Speak clearly and concisely - Simple language, avoid jargon and speak at a moderate pace.
|
||||||
|
* Use effective body language - Maintain eye contact, use purposeful gestures (>> gesture filling a cup of coffee <<)
|
||||||
|
* Leverage visual aids wisely - Keep slides simple and impactful, images or key phrases instead of dense text, consider props or demonstrations for memorability
|
||||||
|
* Practice Timing Rigorously - I didn't practice this at all, whoops.
|
||||||
|
* Engage the Audience - with rhetorical questions, brief interactions, relatable examples
|
||||||
|
* Show Confidence - stand tall and take up space, avoid filler words (uhm, uh)
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Examples and Conclusion
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
* The Most Important Lession I've Learned
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<v-click>...is that five minutes is short *and* long!</v-click>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
* One Technology That Will Change Everything
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<v-click>We all know, it is Zig!</v-click>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
* Why $CommonBelief Is Wrong
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<v-click>Salt, in small amounts, is actually making coffee taste better.</v-click>
|
||||||
|
|
||||||
|
<v-click>It's true.</v-click>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Finally some examples:
|
||||||
|
|
||||||
|
**CLICK through examples**
|
||||||
|
|
||||||
|
Remember: In a five-minute presentation, every second counts. If you want to make a lasting impression, your delivery should be polished, focused and engaging all the way. As a last resort, if you need to hide your lack of competency: Use humour. Fulfill expectations in a witty way.
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
<PoweredBySlidev mt-10 />
|
||||||
642
slides.md.bak
Normal file
642
slides.md.bak
Normal file
|
|
@ -0,0 +1,642 @@
|
||||||
|
---
|
||||||
|
# You can also start simply with 'default'
|
||||||
|
theme: seriph
|
||||||
|
# random image from a curated Unsplash collection by Anthony
|
||||||
|
# like them? see https://unsplash.com/collections/94734566/slidev
|
||||||
|
# background: https://cover.sli.dev
|
||||||
|
background: #443322
|
||||||
|
# some information about your slides (markdown enabled)
|
||||||
|
title: What to talk about in five minutes
|
||||||
|
info: |
|
||||||
|
## Slidev Starter Template
|
||||||
|
Presentation slides for developers.
|
||||||
|
|
||||||
|
Learn more at [Sli.dev](https://sli.dev)
|
||||||
|
# apply unocss classes to the current slide
|
||||||
|
class: text-center
|
||||||
|
# https://sli.dev/features/drawing
|
||||||
|
drawings:
|
||||||
|
persist: false
|
||||||
|
# slide transition: https://sli.dev/guide/animations.html#slide-transitions
|
||||||
|
transition: slide-left
|
||||||
|
# enable MDC Syntax: https://sli.dev/features/mdc
|
||||||
|
mdc: true
|
||||||
|
# take snapshot for each slide in the overview
|
||||||
|
overviewSnapshots: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# Welcome to Slidev
|
||||||
|
|
||||||
|
Presentation slides for developers
|
||||||
|
|
||||||
|
<div class="pt-12">
|
||||||
|
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
|
||||||
|
Press Space for next page <carbon:arrow-right class="inline"/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="abs-br m-6 flex gap-2">
|
||||||
|
<button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
|
||||||
|
<carbon:edit />
|
||||||
|
</button>
|
||||||
|
<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
|
||||||
|
class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
|
||||||
|
<carbon-logo-github />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
transition: fade-out
|
||||||
|
---
|
||||||
|
|
||||||
|
# What is Slidev?
|
||||||
|
|
||||||
|
Slidev is a slides maker and presenter designed for developers, consist of the following features
|
||||||
|
|
||||||
|
- 📝 **Text-based** - focus on the content with Markdown, and then style them later
|
||||||
|
- 🎨 **Themable** - themes can be shared and re-used as npm packages
|
||||||
|
- 🧑💻 **Developer Friendly** - code highlighting, live coding with autocompletion
|
||||||
|
- 🤹 **Interactive** - embed Vue components to enhance your expressions
|
||||||
|
- 🎥 **Recording** - built-in recording and camera view
|
||||||
|
- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
|
||||||
|
- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Read more about [Why Slidev?](https://sli.dev/guide/why)
|
||||||
|
|
||||||
|
<!--
|
||||||
|
You can have `style` tag in markdown to override the style for the current page.
|
||||||
|
Learn more: https://sli.dev/features/slide-scope-style
|
||||||
|
-->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
background-color: #2B90B6;
|
||||||
|
background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
|
||||||
|
background-size: 100%;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-moz-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-moz-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Here is another comment.
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
transition: slide-up
|
||||||
|
level: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
# Navigation
|
||||||
|
|
||||||
|
Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/ui#navigation-bar)
|
||||||
|
|
||||||
|
## Keyboard Shortcuts
|
||||||
|
|
||||||
|
| | |
|
||||||
|
| --- | --- |
|
||||||
|
| <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide |
|
||||||
|
| <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
|
||||||
|
| <kbd>up</kbd> | previous slide |
|
||||||
|
| <kbd>down</kbd> | next slide |
|
||||||
|
|
||||||
|
<!-- https://sli.dev/guide/animations.html#click-animation -->
|
||||||
|
<img
|
||||||
|
v-click
|
||||||
|
class="absolute -bottom-9 -left-7 w-80 opacity-50"
|
||||||
|
src="https://sli.dev/assets/arrow-bottom-left.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: two-cols
|
||||||
|
layoutClass: gap-16
|
||||||
|
---
|
||||||
|
|
||||||
|
# Table of contents
|
||||||
|
|
||||||
|
You can use the `Toc` component to generate a table of contents for your slides:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Toc minDepth="1" maxDepth="1"></Toc>
|
||||||
|
```
|
||||||
|
|
||||||
|
The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter.
|
||||||
|
|
||||||
|
::right::
|
||||||
|
|
||||||
|
<Toc v-click minDepth="1" maxDepth="2"></Toc>
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: image-right
|
||||||
|
image: https://cover.sli.dev
|
||||||
|
---
|
||||||
|
|
||||||
|
# Code
|
||||||
|
|
||||||
|
Use code snippets and get the highlighting directly, and even types hover!
|
||||||
|
|
||||||
|
```ts {all|5|7|7-8|10|all} twoslash
|
||||||
|
// TwoSlash enables TypeScript hover information
|
||||||
|
// and errors in markdown code blocks
|
||||||
|
// More at https://shiki.style/packages/twoslash
|
||||||
|
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
const doubled = computed(() => count.value * 2)
|
||||||
|
|
||||||
|
doubled.value = 2
|
||||||
|
```
|
||||||
|
|
||||||
|
<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
|
||||||
|
|
||||||
|
<!-- This allow you to embed external code blocks -->
|
||||||
|
<<< @/snippets/external.ts#snippet
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
|
||||||
|
[Learn more](https://sli.dev/features/line-highlighting)
|
||||||
|
|
||||||
|
<!-- Inline style -->
|
||||||
|
<style>
|
||||||
|
.footnotes-sep {
|
||||||
|
@apply mt-5 opacity-10;
|
||||||
|
}
|
||||||
|
.footnotes {
|
||||||
|
@apply text-sm opacity-75;
|
||||||
|
}
|
||||||
|
.footnote-backref {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Notes can also sync with clicks
|
||||||
|
|
||||||
|
[click] This will be highlighted after the first click
|
||||||
|
|
||||||
|
[click] Highlighted with `count = ref(0)`
|
||||||
|
|
||||||
|
[click:3] Last click (skip two clicks)
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
level: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
# Shiki Magic Move
|
||||||
|
|
||||||
|
Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
|
||||||
|
|
||||||
|
Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
|
||||||
|
|
||||||
|
````md magic-move {lines: true}
|
||||||
|
```ts {*|2|*}
|
||||||
|
// step 1
|
||||||
|
const author = reactive({
|
||||||
|
name: 'John Doe',
|
||||||
|
books: [
|
||||||
|
'Vue 2 - Advanced Guide',
|
||||||
|
'Vue 3 - Basic Guide',
|
||||||
|
'Vue 4 - The Mystery'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts {*|1-2|3-4|3-4,8}
|
||||||
|
// step 2
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
author: {
|
||||||
|
name: 'John Doe',
|
||||||
|
books: [
|
||||||
|
'Vue 2 - Advanced Guide',
|
||||||
|
'Vue 3 - Basic Guide',
|
||||||
|
'Vue 4 - The Mystery'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// step 3
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
author: {
|
||||||
|
name: 'John Doe',
|
||||||
|
books: [
|
||||||
|
'Vue 2 - Advanced Guide',
|
||||||
|
'Vue 3 - Basic Guide',
|
||||||
|
'Vue 4 - The Mystery'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Non-code blocks are ignored.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<!-- step 4 -->
|
||||||
|
<script setup>
|
||||||
|
const author = {
|
||||||
|
name: 'John Doe',
|
||||||
|
books: [
|
||||||
|
'Vue 2 - Advanced Guide',
|
||||||
|
'Vue 3 - Basic Guide',
|
||||||
|
'Vue 4 - The Mystery'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Components
|
||||||
|
|
||||||
|
<div grid="~ cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
You can use Vue components directly inside your slides.
|
||||||
|
|
||||||
|
We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Counter :count="10" />
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- ./components/Counter.vue -->
|
||||||
|
<Counter :count="10" m="t-4" />
|
||||||
|
|
||||||
|
Check out [the guides](https://sli.dev/builtin/components.html) for more.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Tweet id="1390115482657726468" />
|
||||||
|
```
|
||||||
|
|
||||||
|
<Tweet id="1390115482657726468" scale="0.65" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Presenter note with **bold**, *italic*, and ~~striked~~ text.
|
||||||
|
|
||||||
|
Also, HTML elements are valid:
|
||||||
|
<div class="flex w-full">
|
||||||
|
<span style="flex-grow: 1;">Left content</span>
|
||||||
|
<span>Right content</span>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
---
|
||||||
|
class: px-20
|
||||||
|
---
|
||||||
|
|
||||||
|
# Themes
|
||||||
|
|
||||||
|
Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
|
||||||
|
|
||||||
|
<div grid="~ cols-2 gap-2" m="t-2">
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
theme: default
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
theme: seriph
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
|
||||||
|
|
||||||
|
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
|
||||||
|
check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Clicks Animations
|
||||||
|
|
||||||
|
You can add `v-click` to elements to add a click animation.
|
||||||
|
|
||||||
|
<div v-click>
|
||||||
|
|
||||||
|
This shows up when you click the slide:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div v-click>This shows up when you click the slide.</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
The <span v-mark.red="3"><code>v-mark</code> directive</span>
|
||||||
|
also allows you to add
|
||||||
|
<span v-mark.circle.orange="4">inline marks</span>
|
||||||
|
, powered by [Rough Notation](https://roughnotation.com/):
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span v-mark.underline.orange>inline markers</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
<div mt-20 v-click>
|
||||||
|
|
||||||
|
[Learn more](https://sli.dev/guide/animations#click-animation)
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Motions
|
||||||
|
|
||||||
|
Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ x: -80 }"
|
||||||
|
:enter="{ x: 0 }"
|
||||||
|
:click-3="{ x: 80 }"
|
||||||
|
:leave="{ x: 1000 }"
|
||||||
|
>
|
||||||
|
Slidev
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
<div class="w-60 relative">
|
||||||
|
<div class="relative w-40 h-40">
|
||||||
|
<img
|
||||||
|
v-motion
|
||||||
|
:initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
|
||||||
|
:enter="final"
|
||||||
|
class="absolute inset-0"
|
||||||
|
src="https://sli.dev/logo-square.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-motion
|
||||||
|
:initial="{ y: 500, x: -100, scale: 2 }"
|
||||||
|
:enter="final"
|
||||||
|
class="absolute inset-0"
|
||||||
|
src="https://sli.dev/logo-circle.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-motion
|
||||||
|
:initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
|
||||||
|
:enter="final"
|
||||||
|
class="absolute inset-0"
|
||||||
|
src="https://sli.dev/logo-triangle.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
|
||||||
|
v-motion
|
||||||
|
:initial="{ x: -80, opacity: 0}"
|
||||||
|
:enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
|
||||||
|
Slidev
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
|
||||||
|
<script setup lang="ts">
|
||||||
|
const final = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
rotate: 0,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 10,
|
||||||
|
stiffness: 20,
|
||||||
|
mass: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ x:35, y: 30, opacity: 0}"
|
||||||
|
:enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
|
||||||
|
|
||||||
|
[Learn more](https://sli.dev/guide/animations.html#motion)
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# LaTeX
|
||||||
|
|
||||||
|
LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/).
|
||||||
|
|
||||||
|
<div h-3 />
|
||||||
|
|
||||||
|
Inline $\sqrt{3x-1}+(1+x)^2$
|
||||||
|
|
||||||
|
Block
|
||||||
|
$$ {1|3|all}
|
||||||
|
\begin{aligned}
|
||||||
|
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||||
|
\nabla \cdot \vec{B} &= 0 \\
|
||||||
|
\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
|
||||||
|
\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
|
||||||
|
\end{aligned}
|
||||||
|
$$
|
||||||
|
|
||||||
|
[Learn more](https://sli.dev/features/latex)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Diagrams
|
||||||
|
|
||||||
|
You can create diagrams / graphs from textual descriptions, directly in your Markdown.
|
||||||
|
|
||||||
|
<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
|
||||||
|
|
||||||
|
```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
|
||||||
|
sequenceDiagram
|
||||||
|
Alice->John: Hello John, how are you?
|
||||||
|
Note over Alice,John: A typical interaction
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid {theme: 'neutral', scale: 0.8}
|
||||||
|
graph TD
|
||||||
|
B[Text] --> C{Decision}
|
||||||
|
C -->|One| D[Result 1]
|
||||||
|
C -->|Two| E[Result 2]
|
||||||
|
```
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
mindmap
|
||||||
|
root((mindmap))
|
||||||
|
Origins
|
||||||
|
Long history
|
||||||
|
::icon(fa fa-book)
|
||||||
|
Popularisation
|
||||||
|
British popular psychology author Tony Buzan
|
||||||
|
Research
|
||||||
|
On effectiveness<br/>and features
|
||||||
|
On Automatic creation
|
||||||
|
Uses
|
||||||
|
Creative techniques
|
||||||
|
Strategic planning
|
||||||
|
Argument mapping
|
||||||
|
Tools
|
||||||
|
Pen and paper
|
||||||
|
Mermaid
|
||||||
|
```
|
||||||
|
|
||||||
|
```plantuml {scale: 0.7}
|
||||||
|
@startuml
|
||||||
|
|
||||||
|
package "Some Group" {
|
||||||
|
HTTP - [First Component]
|
||||||
|
[Another Component]
|
||||||
|
}
|
||||||
|
|
||||||
|
node "Other Groups" {
|
||||||
|
FTP - [Second Component]
|
||||||
|
[First Component] --> FTP
|
||||||
|
}
|
||||||
|
|
||||||
|
cloud {
|
||||||
|
[Example 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
database "MySql" {
|
||||||
|
folder "This is my folder" {
|
||||||
|
[Folder 3]
|
||||||
|
}
|
||||||
|
frame "Foo" {
|
||||||
|
[Frame 4]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[Another Component] --> [Example 1]
|
||||||
|
[Example 1] --> [Folder 3]
|
||||||
|
[Folder 3] --> [Frame 4]
|
||||||
|
|
||||||
|
@enduml
|
||||||
|
```
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
|
||||||
|
|
||||||
|
---
|
||||||
|
foo: bar
|
||||||
|
dragPos:
|
||||||
|
square: 691,32,167,_,-16
|
||||||
|
---
|
||||||
|
|
||||||
|
# Draggable Elements
|
||||||
|
|
||||||
|
Double-click on the draggable elements to edit their positions.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
###### Directive Usage
|
||||||
|
|
||||||
|
```md
|
||||||
|
<img v-drag="'square'" src="https://sli.dev/logo.png">
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
###### Component Usage
|
||||||
|
|
||||||
|
```md
|
||||||
|
<v-drag text-3xl>
|
||||||
|
<carbon:arrow-up />
|
||||||
|
Use the `v-drag` component to have a draggable container!
|
||||||
|
</v-drag>
|
||||||
|
```
|
||||||
|
|
||||||
|
<v-drag pos="663,206,261,_,-15">
|
||||||
|
<div text-center text-3xl border border-main rounded>
|
||||||
|
Double-click me!
|
||||||
|
</div>
|
||||||
|
</v-drag>
|
||||||
|
|
||||||
|
<img v-drag="'square'" src="https://sli.dev/logo.png">
|
||||||
|
|
||||||
|
###### Draggable Arrow
|
||||||
|
|
||||||
|
```md
|
||||||
|
<v-drag-arrow two-way />
|
||||||
|
```
|
||||||
|
|
||||||
|
<v-drag-arrow pos="67,452,253,46" two-way op70 />
|
||||||
|
|
||||||
|
---
|
||||||
|
src: ./pages/imported-slides.md
|
||||||
|
hide: false
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Monaco Editor
|
||||||
|
|
||||||
|
Slidev provides built-in Monaco Editor support.
|
||||||
|
|
||||||
|
Add `{monaco}` to the code block to turn it into an editor:
|
||||||
|
|
||||||
|
```ts {monaco}
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { emptyArray } from './external'
|
||||||
|
|
||||||
|
const arr = ref(emptyArray(10))
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
|
||||||
|
|
||||||
|
```ts {monaco-run}
|
||||||
|
import { version } from 'vue'
|
||||||
|
import { emptyArray, sayHello } from './external'
|
||||||
|
|
||||||
|
sayHello()
|
||||||
|
console.log(`vue ${version}`)
|
||||||
|
console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: center
|
||||||
|
class: text-center
|
||||||
|
---
|
||||||
|
|
||||||
|
# Learn More
|
||||||
|
|
||||||
|
[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases)
|
||||||
|
|
||||||
|
<PoweredBySlidev mt-10 />
|
||||||
12
snippets/external.ts
Normal file
12
snippets/external.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* eslint-disable no-console */
|
||||||
|
|
||||||
|
// #region snippet
|
||||||
|
// Inside ./snippets/external.ts
|
||||||
|
export function emptyArray<T>(length: number) {
|
||||||
|
return Array.from<T>({ length })
|
||||||
|
}
|
||||||
|
// #endregion snippet
|
||||||
|
|
||||||
|
export function sayHello() {
|
||||||
|
console.log('Hello from snippets/external.ts')
|
||||||
|
}
|
||||||
7
vercel.json
Normal file
7
vercel.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"rewrites": [
|
||||||
|
{ "source": "/(.*)", "destination": "/index.html" }
|
||||||
|
],
|
||||||
|
"buildCommand": "npm run build",
|
||||||
|
"outputDirectory": "dist"
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue