aadil/autonomic-proposal-template
0
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

create new theme

Browse Source
This commit is contained in:
Aadil Ayub
2025-08-28 19:57:21 +05:00
parent 71522ef88d
commit 10499b1d01
16 changed files with 1579 additions and 1731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,4 +4,5 @@ dist
*.local *.local
.vite-inspect .vite-inspect
.remote-assets .remote-assets
.idea/
components.d.ts components.d.ts

1
.npmrc
View File

@ -1,3 +1,2 @@
# for pnpm # for pnpm
shamefully-hoist=true shamefully-hoist=true
auto-install-peers=true

53
README.md
View File

@ -1,11 +1,50 @@
# Welcome to [Slidev](https://github.com/slidevjs/slidev)! # slidev-theme-autonomic-slidev-theme
To start the slide show: [![NPM version](https://img.shields.io/npm/v/slidev-theme-autonomic-slidev-theme?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-autonomic-slidev-theme)
- `pnpm install` A (...) theme for [Slidev](https://github.com/slidevjs/slidev).
- `pnpm dev`
- visit <http://localhost:3030>
Edit the [slides.md](./slides.md) to see the changes. <!--
Learn more about how to write a theme:
https://sli.dev/guide/write-theme.html
--->
Learn more about Slidev at the [documentation](https://sli.dev/). <!--
run `npm run dev` to check out the slides for more details of how to start writing a theme
-->
<!--
Put some screenshots here to demonstrate your theme
Live demo: [...]
-->
## Install
Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
<pre><code>---
theme: <b>autonomic-slidev-theme</b>
---</code></pre>
Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
## Layouts
This theme provides the following layouts:
> TODO:
## Components
This theme provides the following components:
> TODO:
## Contributing
- `npm install`
- `npm run dev` to start theme preview of `example.md`
- Edit the `example.md` and style to see the changes
- `npm run export` to generate the preview PDF
- `npm run screenshot` to generate the preview PNG

0
components/.gitkeep Normal file
View File

37
components/Counter.vue
View File

@ -1,37 +0,0 @@
<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>

433
example.md Normal file
View File

@ -0,0 +1,433 @@
---
# try also 'default' to start simple
theme: ./
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# apply any unocss classes to the current slide
class: 'text-center'
# some information about the slides, markdown enabled
info: |
## Slidev Starter Template
Presentation slides for developers.
Learn more at [Sli.dev](https://sli.dev)
transition: slide-left
title: Welcome to Slidev
mdc: 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" flex="~ justify-center items-center gap-2" hover="bg-white bg-opacity-10">
Press Space for next page <div class="i-carbon:arrow-right inline-block"/>
</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">
<div class="i-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 slide maker and accompanying presentation tool designed for developers. It consists of the following features:
- 📝 **Text-based** - focus on the content with Markdown, and apply styles later
- 🎨 **Themable** - themes can be shared and used as npm packages
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
- 🤹 **Interactive** - embedding Vue components to enhance your slides
- 🎥 **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 Slidev in [Why Slidev?](https://sli.dev/guide/why)
<!--
You can have `style` tags in markdown to override the style for the current page.
Learn more: https://sli.dev/guide/syntax#embedded-styles
-->
<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.
-->
---
layout: default
---
# Table of contents
```html
<Toc minDepth="1" maxDepth="1"></Toc>
```
<Toc maxDepth="1"></Toc>
---
transition: slide-up
level: 2
---
# Navigation
Hover on the bottom-left corner to see the navigation's control panel, [learn more](https://sli.dev/guide/navigation.html)
## 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: image-right
image: https://cover.sli.dev
---
# Code
Use code snippets and get automatic highlighting, and even types hover![^1]
```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 -->
[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
<!-- Inline style -->
<style>
.footnotes-sep {
@apply mt-5 opacity-10;
}
.footnotes {
@apply text-sm opacity-75;
}
.footnote-backref {
display: none;
}
</style>
---
# 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. Adding your own 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 notes with **bold**, *italic*, and ~~strike~~ 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. Switch between themes on a per-slide basis with just **one change** 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).
---
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"
alt=""
/>
<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"
alt=""
/>
<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"
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 affect the 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
$$ {1|3|all}
\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-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 effectivness<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](https://sli.dev/guide/syntax.html#diagrams)
---
layout: center
class: text-center
---
# Learn More
[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)

7
layouts/cover.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div class="slidev-layout cover">
<div class="my-auto w-full">
<slot />
</div>
</div>
</template>

7
layouts/intro.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div class="slidev-layout intro">
<div class="my-auto">
<slot />
</div>
</div>
</template>

39
package.json
View File

@ -1,16 +1,35 @@
{ {
"name": "autonomic-proposal-template", "name": "slidev-theme-autonomic-slidev-theme",
"version": "0.0.0",
"type": "module", "type": "module",
"private": true, "keywords": [
"slidev-theme",
"slidev"
],
"engines": {
"node": ">=18.0.0"
},
"scripts": { "scripts": {
"build": "slidev build", "build": "slidev build example.md",
"dev": "slidev --open", "dev": "slidev example.md --open",
"export": "slidev export" "export": "slidev export example.md",
"screenshot": "slidev export example.md --format png"
}, },
"dependencies": { "dependencies": {
"@slidev/cli": "^52.0.0", "@slidev/theme-seriph": "^0.25.0",
"@slidev/theme-default": "latest", "@slidev/types": "^52.1.0"
"@slidev/theme-seriph": "latest", },
"vue": "^3.5.17" "devDependencies": {
"@slidev/cli": "^52.1.0"
},
"//": "Learn more: https://sli.dev/guide/write-theme.html",
"slidev": {
"colorSchema": "light",
"defaults": {
"fonts": {
"sans": "Nunito Sans",
"mono": "Fira Code"
}
}
} }
} }

27
pages/imported-slides.md
View File

@ -1,27 +0,0 @@
# 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)

2017
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

11
setup/shiki.ts Normal file
View File

@ -0,0 +1,11 @@
import type { ShikiSetupReturn } from '@slidev/types'
import { defineShikiSetup } from '@slidev/types'
export default defineShikiSetup((): ShikiSetupReturn => {
return {
themes: {
dark: 'vitesse-dark',
light: 'vitesse-light',
},
}
})

638
slides.md
View File

@ -1,638 +0,0 @@
---
# 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
# some information about your slides (markdown enabled)
title: Welcome to Slidev
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
# open graph
# seoMeta:
# ogImage: https://cover.sli.dev
---
# Welcome to Slidev
Presentation slides for developers
<div @click="$slidev.nav.next" class="mt-12 py-1" hover:bg="white op-10">
Press Space for next page <carbon:arrow-right />
</div>
<div class="abs-br m-6 text-xl">
<button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="slidev-icon-btn">
<carbon:edit />
</button>
<a href="https://github.com/slidevjs/slidev" target="_blank" class="slidev-icon-btn">
<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" />
```
The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter.
::right::
<Toc text-sm minDepth="1" maxDepth="2" />
---
layout: image-right
image: https://cover.sli.dev
---
# Code
Use code snippets and get the highlighting directly, and even types hover!
```ts [filename-example.ts] {all|4|6|6-7|9|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="342" 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>
<div class="i-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
View File

@ -1,12 +0,0 @@
/* 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')
}

3
styles/index.ts Normal file
View File

@ -0,0 +1,3 @@
// inherit from base layouts, remove it to get full customizations
import '@slidev/client/styles/layouts-base.css'
import './layout.css'

24
styles/layout.css Normal file
View File

@ -0,0 +1,24 @@
:root {
/* default theme color */
/* can be overrided by uses `themeConfig` option */
--slidev-theme-primary: #5d8392;
}
.slidev-layout.cover,
.slidev-layout.intro {
@apply h-full grid;
h1 {
@apply text-6xl leading-20;
}
h1 + p {
@apply -mt-2 opacity-50 mb-4;
}
p + h2,
ul + h2,
table + h2 {
@apply mt-10;
}
}