Skip to content

Latest commit

 

History

History
277 lines (213 loc) · 7.35 KB

example.md

File metadata and controls

277 lines (213 loc) · 7.35 KB
Raw
theme colorSchema layout highlighter title themeConfig
./
auto
intro
shiki
Slidev Penguin Theme

A penguin Slidev Theme

🐧 slides for developers

Press Space for next page

layout: presenter eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' eventUrl: 'https://vuejs.amsterdam/' twitter: '@alvarosabu'

twitterUrl: 'https://twitter.com/alvarosabu' presenterImage: 'https://res.cloudinary.com/alvarosaburido/image/upload/v1666351649/b_w_egfb4v.png'

Alvaro Saburido

DX at Storyblok

layout: text-image media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif' caption: 'I am a penguin'

This is a peguin 🐧

Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita?

  • Cacique panita sit Se prendio la labia gravida Praesent tequeño.
  • Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi;

layout: text-image reverse: true media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'

This is a reverse peguin

Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta mierdaa menool ladilla chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita? Cacique ladilla sit Se prendio el peo labia gravida Praesent tequeño. Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi;

What is Slidev?

Slidev is a slides maker and presenter designed for developers devs, 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?

Navigation

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

Keyboard Shortcuts
space / tab / right next animation or slide
left previous animation or slide
up previous slide
down next slide

layout: new-section

New wild section appeared

penguin-work

eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' eventUrl: 'https://vuejs.amsterdam/' twitter: '@alvarosabu' twitterUrl: 'https://twitter.com/alvarosabu'

Code

Use code snippets and get the highlighting directly!

<script setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas
    clear-color="”#82DBC5”"
    window-size
  >
    <TresPerspectiveCamera />
    <TresMesh
      @click="onClick"
    >
      <TresBoxGeometry :args="[1, 1, 1]" />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>

layout: two-cols

Awiwiiw

// Model.vue
<script setup lang="ts">
import { useAnimations, useGLTF } from '@tresjs/cientos'

const { scene: model, animations } = await useGLTF(
  'models/ugly-bunny.gltf',
)

const { actions, mixer } = useAnimations(animations, model)
const currentAction = ref(actions.Greeting)
currentAction.value.play()
</script>

<template>
  <primitive :object="model" />
</template>

::right::

<template>
  <TresCanvas
    clear-color="”#82DBC5”"
    window-size
  >
    <TresPerspectiveCamera />
    <Suspense>
      <Model />
    </Suspense>
  </TresCanvas>
</template>

layout: two-thirds

Awiwiiw

// Model.vue
<script setup lang="ts">
import { useAnimations, useGLTF } from '@tresjs/cientos'

const { scene: model, animations } = await useGLTF(
  'models/ugly-bunny.gltf',
)

const { actions, mixer } = useAnimations(animations, model)
const currentAction = ref(actions.Greeting)
currentAction.value.play()
</script>

<template>
  <primitive :object="model" />
</template>

::right::

<template>
  <TresCanvas
    clear-color="”#82DBC5”"
    window-size
  >
    <TresPerspectiveCamera />
    <Suspense>
      <Model />
    </Suspense>
  </TresCanvas>
</template>

layout: text-window

Consoles

Use code snippets and get the highlighting directly into a nice looking window!

::window::

// main.ts

import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
import { createApp } from 'vue'

const VueDynamicForms = createDynamicForms({
  // Global Options go here
})

export const app = createApp(App)

app.use(VueDynamicForms)

layout: text-window reverse: true logoHeader: '/logo.svg' eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png' eventUrl: 'https://vuejs.amsterdam/' twitter: '@alvarosabu' twitterUrl: 'https://twitter.com/alvarosabu'

Embedded stuff

Use window to show a live demo of any page, or even a sub component!

::window::

<iframe height="300" style="width: 100%;" scrolling="no" title="Text Clock" src="https://codepen.io/searleb/embed/pvQaJB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Text Clock by Bill Searle (@searleb) on CodePen. </iframe>
--- class: 'grid text-center align-self-center justify-self-center' ---

Gracias totales

Documentations / GitHub Repo