-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: revert change to starter template
- Loading branch information
Showing
3 changed files
with
621 additions
and
20 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,323 @@ | ||
# Page 1 | ||
--- | ||
# try also 'default' to start simple | ||
theme: seriph | ||
# random image from a curated Unsplash collection by Anthony | ||
# like them? see https://unsplash.com/collections/94734566/slidev | ||
background: https://source.unsplash.com/collection/94734566/1920x1080 | ||
# apply any windi css classes to the current slide | ||
class: 'text-center' | ||
# https://sli.dev/custom/highlighters.html | ||
highlighter: shiki | ||
# some information about the slides, markdown enabled | ||
info: | | ||
## Slidev Starter Template | ||
Presentation slides for developers. | ||
Learn more at [Sli.dev](https://sli.dev) | ||
--- | ||
|
||
# Welcome to Slidev | ||
|
||
Presentation slides for developers | ||
|
||
Hello World | ||
<div class="pt-12"> | ||
<span @click="$slidev.nav.next" class="px-2 p-1 rounded cursor-pointer" hover="bg-white bg-opacity-10"> | ||
Press Space for next page <carbon:arrow-right class="inline"/> | ||
</span> | ||
</div> | ||
|
||
<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" | ||
class="abs-br m-6 text-xl icon-btn opacity-50 !border-none !hover:text-white"> | ||
<carbon-logo-github /> | ||
</a> | ||
|
||
<!-- | ||
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) | ||
--> | ||
|
||
--- | ||
|
||
# Page 2 | ||
# 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** - theme can be shared and used with npm packages | ||
- 🧑💻 **Developer Friendly** - code highlighting, live coding with autocompletion | ||
- 🤹 **Interactive** - embedding Vue components to enhance your expressions | ||
- 🎥 **Recording** - built-in recording and camera view | ||
- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA | ||
- 🛠 **Hackable** - anything possible on a webpage | ||
|
||
<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/guide/syntax#embedded-styles | ||
--> | ||
|
||
```html | ||
<style> | ||
p { | ||
color: red; | ||
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> | ||
``` | ||
|
||
`<p>` should have a green border, but no red text | ||
|
||
<style> | ||
p { | ||
border: 1px solid green; | ||
--- | ||
|
||
# Navigation | ||
|
||
Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html) | ||
|
||
### Keyboard Shortcuts | ||
|
||
| | | | ||
| --- | --- | | ||
| <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide | | ||
| <kbd>left</kbd> | previous animation or slide | | ||
| <kbd>up</kbd> | previous slide | | ||
| <kbd>down</kbd> | next slide | | ||
|
||
<img | ||
v-click | ||
class="absolute -bottom-9 -left-7 w-80 opacity-50" | ||
src="https://sli.dev/assets/arrow-bottom-left.svg" | ||
/> | ||
<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p> | ||
|
||
|
||
--- | ||
layout: image-right | ||
image: https://source.unsplash.com/collection/94734566/1920x1080 | ||
--- | ||
|
||
# Code | ||
|
||
Use code snippets and get the highlighting directly! | ||
|
||
```ts {all|2|1-6|9|all} | ||
interface User { | ||
id: number | ||
firstName: string | ||
lastName: string | ||
role: string | ||
} | ||
</style> | ||
|
||
function updateUser(id: number, update: Partial<User>) { | ||
const user = getUser(id) | ||
const newUser = {...user, ...update} | ||
saveUser(id, newUser) | ||
} | ||
``` | ||
|
||
--- | ||
|
||
# Page 3 | ||
# 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 use. And add your custom components are also super easy. | ||
|
||
```html | ||
<Counter :count="10" /> | ||
``` | ||
|
||
<!-- ./components/Counter.vue --> | ||
<Counter :count="10" m="t-4" /> | ||
|
||
Check out [the guides](https://sli.dev/custom/#components) for more. | ||
|
||
</div> | ||
<div> | ||
|
||
```html | ||
<div>{{$slidev.nav.currentPage}}</div> | ||
<Tweet id="1390115482657726468" /> | ||
``` | ||
|
||
<Tweet id="1390115482657726468" scale="0.65" /> | ||
|
||
</div> | ||
</div> | ||
|
||
|
||
--- | ||
class: px-20 | ||
--- | ||
|
||
# Themes | ||
|
||
Slidev comes with powerful theming support. Themes are able to 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 | ||
--- | ||
``` | ||
|
||
Current Page: {{$slidev.nav.currentPage}} | ||
```yaml | ||
--- | ||
theme: seriph | ||
--- | ||
``` | ||
|
||
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true"> | ||
|
||
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true"> | ||
|
||
</div> | ||
|
||
Read more about [How to use a theme](https://sli.dev/themes/use.html) and | ||
check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html). | ||
|
||
--- | ||
preload: false | ||
--- | ||
|
||
# Animations | ||
|
||
Animations are powered by [@vueuse/motion](https://motion.vueuse.org/). | ||
|
||
```html | ||
<div | ||
v-motion | ||
:initial="{ x: -80 }" | ||
:enter="{ x: 0 }"> | ||
Slidev | ||
</div> | ||
``` | ||
|
||
<div class="w-60 relative mt-6"> | ||
<div class="relative w-40 h-40"> | ||
<img | ||
v-motion | ||
:initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }" | ||
:enter="final" | ||
class="absolute top-0 left-0 right-0 bottom-0" | ||
src="https://sli.dev/logo-square.png" | ||
/> | ||
<img | ||
v-motion | ||
:initial="{ y: 500, x: -100, scale: 2 }" | ||
:enter="final" | ||
class="absolute top-0 left-0 right-0 bottom-0" | ||
src="https://sli.dev/logo-circle.png" | ||
/> | ||
<img | ||
v-motion | ||
:initial="{ x: 600, y: 400, scale: 2, rotate: 100 }" | ||
:enter="final" | ||
class="absolute top-0 left-0 right-0 bottom-0" | ||
src="https://sli.dev/logo-triangle.png" | ||
/> | ||
</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: 40, 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/). | ||
|
||
<br> | ||
|
||
Inline $\sqrt{3x-1}+(1+x)^2$ | ||
|
||
Block | ||
$$ | ||
\begin{array}{c} | ||
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & | ||
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ | ||
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ | ||
\nabla \cdot \vec{\mathbf{B}} & = 0 | ||
\end{array} | ||
$$ | ||
|
||
<br> | ||
|
||
[Learn more](https://sli.dev/guide/syntax#latex) | ||
|
||
--- | ||
|
||
# Diagrams | ||
|
||
You can create diagrams / graphs from textual descriptions, directly in your Markdown. | ||
|
||
<div class="grid grid-cols-2 gap-4 pt-4 -mb-6"> | ||
|
||
```mermaid {scale: 0.9} | ||
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] | ||
``` | ||
|
||
</div> | ||
|
||
[Learn More](https://sli.dev/guide/syntax.html#diagrams) | ||
|
||
|
||
--- | ||
layout: center | ||
class: text-center | ||
--- | ||
|
||
# Learn More | ||
|
||
[Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev) |
Oops, something went wrong.