diff --git a/slidev/pages/01-flight-to-entebbe.md b/slidev/pages/01-flight-to-entebbe.md new file mode 100644 index 0000000..88fbdcc --- /dev/null +++ b/slidev/pages/01-flight-to-entebbe.md @@ -0,0 +1,10 @@ +```yaml +# The first yaml block will be treated as the frontmatter of that slide +layout: center +``` +
+ +
diff --git a/assets/pictures/Uganda/2023-12-13 09.11.35.jpg b/slidev/public/assets/pictures/Uganda/2023-12-13 09.11.35.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-13 09.11.35.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-13 09.11.35.jpg diff --git a/assets/pictures/Uganda/2023-12-13 17.20.42.jpg b/slidev/public/assets/pictures/Uganda/2023-12-13 17.20.42.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-13 17.20.42.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-13 17.20.42.jpg diff --git a/assets/pictures/Uganda/2023-12-14 01.48.30.jpg b/slidev/public/assets/pictures/Uganda/2023-12-14 01.48.30.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-14 01.48.30.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-14 01.48.30.jpg diff --git a/assets/pictures/Uganda/2023-12-14 02.15.31.jpg b/slidev/public/assets/pictures/Uganda/2023-12-14 02.15.31.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-14 02.15.31.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-14 02.15.31.jpg diff --git a/assets/pictures/Uganda/2023-12-14 05.15.34.jpg b/slidev/public/assets/pictures/Uganda/2023-12-14 05.15.34.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-14 05.15.34.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-14 05.15.34.jpg diff --git a/assets/pictures/Uganda/2023-12-14 12.13.44.jpg b/slidev/public/assets/pictures/Uganda/2023-12-14 12.13.44.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-14 12.13.44.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-14 12.13.44.jpg diff --git a/assets/pictures/Uganda/2023-12-14 12.33.21.jpg b/slidev/public/assets/pictures/Uganda/2023-12-14 12.33.21.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-14 12.33.21.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-14 12.33.21.jpg diff --git a/assets/pictures/Uganda/2023-12-14 17.44.43.jpg b/slidev/public/assets/pictures/Uganda/2023-12-14 17.44.43.jpg similarity index 100% rename from assets/pictures/Uganda/2023-12-14 17.44.43.jpg rename to slidev/public/assets/pictures/Uganda/2023-12-14 17.44.43.jpg diff --git a/assets/pictures/Uganda/Tausi_Coaches_Bus_Terminal.JPG b/slidev/public/assets/pictures/Uganda/Tausi_Coaches_Bus_Terminal.JPG similarity index 100% rename from assets/pictures/Uganda/Tausi_Coaches_Bus_Terminal.JPG rename to slidev/public/assets/pictures/Uganda/Tausi_Coaches_Bus_Terminal.JPG diff --git a/assets/videos/Uganda Rundreise.mp4 b/slidev/public/assets/videos/Uganda Rundreise.mp4 similarity index 100% rename from assets/videos/Uganda Rundreise.mp4 rename to slidev/public/assets/videos/Uganda Rundreise.mp4 diff --git a/slidev/slides.md b/slidev/slides.md index bfd16de..25d146c 100644 --- a/slidev/slides.md +++ b/slidev/slides.md @@ -1,444 +1,20 @@ ---- -theme: seriph -background: https://source.unsplash.com/collection/94734566/1920x1080 -class: text-center -highlighter: shikiji -lineNumbers: false -info: | - ## Slidev Starter Template - Presentation slides for developers. - - Learn more at [Sli.dev](https://sli.dev) -drawings: - persist: false -transition: slide-left -title: Welcome to Slidev -mdc: true ---- - -# Welcome to Slidev - -Presentation slides for developers - -
- - Press Space for next page - -
- -
- - - - -
- - - ---- -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** - 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 - -
-
- -Read more about [Why Slidev?](https://sli.dev/guide/why) - - - - - - - ---- -layout: default ---- - -# Table of contents - -```html - -``` - - - ---- -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/navigation.html) - -## Keyboard Shortcuts - -| | | -| --- | --- | -| right / space| next animation or slide | -| left / shiftspace | previous animation or slide | -| up | previous slide | -| down | next slide | - - - -

Here!

- ---- -layout: image-right -image: https://source.unsplash.com/collection/94734566/1920x1080 ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover![^1] - -```ts {all|5|1-6|9|all} twoslash -// TwoSlash enables TypeScript hover information and errors in markdown code blocks -// Learn more at https://www.typescriptlang.org/dev/twoslash/ -function getUser(id: number): User { - return undefined as any -} -function saveUser(id: number, user: User) { - // ... -} -// ---cut--- -interface User { - id: number - firstName: string - lastName: string - role: string -// ^? -} - -function updateUser(id: number, update: User) { - const user = getUser(id) - const newUser = { ...user, ...update } - saveUser(id, newUser) -} -``` - - - -[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) - - - ---- - -# Components - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. - -```html - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - -``` - - - -
-
- - - ---- -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: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -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 -
- Slidev -
-``` - -
-
- - - -
- -
- Slidev -
-
- - - - -
- -[Learn More](https://sli.dev/guide/animations.html#motion) - -
- ---- - -# LaTeX - -LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). - -
- -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} -$$ - -
- -[Learn more](https://sli.dev/guide/syntax#latex) - ---- - -# Diagrams - -You can create diagrams / graphs from textual descriptions, directly in your Markdown. - -
- -```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
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 -``` - -
- -[Learn More](https://sli.dev/guide/syntax.html#diagrams) - ---- -src: ./pages/multiple-entries.md -hide: false ---- - ---- -layout: center -class: text-center ---- - -# Learn More - -[Documentations](https://sli.dev) ยท [GitHub](https://github.com/slidevjs/slidev) ยท [Showcases](https://sli.dev/showcases.html) +```yaml +layout: cover +``` + +# Slidev + +This is the cover page. +--- + +```yaml +layout: image +image: '/assets/pictures/Uganda/Tausi_Coaches_Bus_Terminal.JPG' +``` + +# Page 2 +

This is a page with the layout `center` and a background image.

+ +--- +src: ./pages/01-flight-to-entebbe.md +--- \ No newline at end of file diff --git a/slidev/slides_example.md b/slidev/slides_example.md new file mode 100644 index 0000000..bfd16de --- /dev/null +++ b/slidev/slides_example.md @@ -0,0 +1,444 @@ +--- +theme: seriph +background: https://source.unsplash.com/collection/94734566/1920x1080 +class: text-center +highlighter: shikiji +lineNumbers: false +info: | + ## Slidev Starter Template + Presentation slides for developers. + + Learn more at [Sli.dev](https://sli.dev) +drawings: + persist: false +transition: slide-left +title: Welcome to Slidev +mdc: true +--- + +# Welcome to Slidev + +Presentation slides for developers + +
+ + Press Space for next page + +
+ +
+ + + + +
+ + + +--- +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** - 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 + +
+
+ +Read more about [Why Slidev?](https://sli.dev/guide/why) + + + + + + + +--- +layout: default +--- + +# Table of contents + +```html + +``` + + + +--- +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/navigation.html) + +## Keyboard Shortcuts + +| | | +| --- | --- | +| right / space| next animation or slide | +| left / shiftspace | previous animation or slide | +| up | previous slide | +| down | next slide | + + + +

Here!

+ +--- +layout: image-right +image: https://source.unsplash.com/collection/94734566/1920x1080 +--- + +# Code + +Use code snippets and get the highlighting directly, and even types hover![^1] + +```ts {all|5|1-6|9|all} twoslash +// TwoSlash enables TypeScript hover information and errors in markdown code blocks +// Learn more at https://www.typescriptlang.org/dev/twoslash/ +function getUser(id: number): User { + return undefined as any +} +function saveUser(id: number, user: User) { + // ... +} +// ---cut--- +interface User { + id: number + firstName: string + lastName: string + role: string +// ^? +} + +function updateUser(id: number, update: User) { + const user = getUser(id) + const newUser = { ...user, ...update } + saveUser(id, newUser) +} +``` + + + +[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) + + + +--- + +# Components + +
+
+ +You can use Vue components directly inside your slides. + +We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. + +```html + +``` + + + + +Check out [the guides](https://sli.dev/builtin/components.html) for more. + +
+
+ +```html + +``` + + + +
+
+ + + +--- +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: + +
+ +```yaml +--- +theme: default +--- +``` + +```yaml +--- +theme: seriph +--- +``` + + + + + +
+ +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 +
+ Slidev +
+``` + +
+
+ + + +
+ +
+ Slidev +
+
+ + + + +
+ +[Learn More](https://sli.dev/guide/animations.html#motion) + +
+ +--- + +# LaTeX + +LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). + +
+ +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} +$$ + +
+ +[Learn more](https://sli.dev/guide/syntax#latex) + +--- + +# Diagrams + +You can create diagrams / graphs from textual descriptions, directly in your Markdown. + +
+ +```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
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 +``` + +
+ +[Learn More](https://sli.dev/guide/syntax.html#diagrams) + +--- +src: ./pages/multiple-entries.md +hide: false +--- + +--- +layout: center +class: text-center +--- + +# Learn More + +[Documentations](https://sli.dev) ยท [GitHub](https://github.com/slidevjs/slidev) ยท [Showcases](https://sli.dev/showcases.html)