title	Slide Template
titleTemplate	%s | progfay
author	progfay
info	## progfay's Slide Template Powered by Slidev Learn more at [Sli.dev](https://sli.dev)
duration	35min
transition
theme	./
class	text-center
mdc	true
htmlAttrs	lang ja
favicon	https://github.com/progfay.png
colorSchema	dark

progfay's Slide Template

YYYY.MM.DD | OPPORTUNITY | @progfay

---

layout: self-intro preload: true

---

• Web Frontend Engineer
• My hobby: follow web trends

---

transition: slide-up level: 2

---

Navigation

Hover on the bottom-left corner to see the navigation's controls panel, learn more

Keyboard Shortcuts

right / space	next animation or slide
left / shiftspace	previous animation or slide
up	previous slide
down	next slide

Here!

---

layout: two-cols layoutClass: gap-16

---

Table of contents

You can use the Toc component to generate a table of contents for your slides:

<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::

---

layout: image-right image: https://cover.sli.dev

---

Code

Use code snippets and get the highlighting directly, and even types hover!

// 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;

<<< @/layoutHelper.ts#resolveAssetUrl

Learn more

<style> .footnotes-sep { @apply mt-5 opacity-10; } .footnotes { @apply text-sm opacity-75; } .footnote-backref { display: none; } </style>

---

level: 2

Shiki Magic Move

Powered by shiki-magic-move, Slidev supports animations across multiple code snippets.

Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. For example:

```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

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.

<Counter :count="10" />

Check out the guides for more.

<Tweet id="1390115482657726468" />

---

Clicks Animations

You can add v-click to elements to add a click animation.

This shows up when you click the slide:

<div v-click>This shows up when you click the slide.</div>

The v-mark directive also allows you to add inline marks , powered by Rough Notation:

<span v-mark.underline.orange>inline markers</span>

Learn more

---

Diagrams

You can create diagrams / graphs from textual descriptions, directly in your Markdown.

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

Loading

graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Loading

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

Loading

@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

Learn more: Mermaid Diagrams and PlantUML Diagrams

---

Monaco Editor

Slidev provides built-in Monaco Editor support.

Add {monaco} to the code block to turn it into an editor:

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:

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 · GitHub · Showcases