Skip to content

Latest commit

 

History

History
139 lines (109 loc) · 3.07 KB

example.md

File metadata and controls

139 lines (109 loc) · 3.07 KB
Raw
theme colorSchema layout logoHeader website handle introImage
./
light
intro
/logo.svg
dawntraoz.com
dawntraoz

Unicorn slidev theme

Presentation slides for developers

Press Space for next page

logoHeader: '/logo.svg' website: 'dawntraoz.com' handle: 'dawntraoz' layout: cover-logos logos: [ 'https://img2.storyblok.com/256x0/filters:format(webp)/f/86387/x/4cf6a70a8c/logo-white-text.svg', '/nuxt-emoji-white.png', '/storyblok.png' ]

Frontend Developer Consultant at @passionpeopleNL Blogger, speaker and open source lover

Ambassador at @nuxt_js and @storyblok

logoHeader: '/logo.svg' website: 'dawntraoz.com' handle: 'dawntraoz' layout: table-contents gradientColors: ['#A21CAF', '#5B21B6']

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
  • 🎨 Themable - create your theme
  • 🧑‍💻 Developer Friendly - code highlighting, live coding
  • 🤹 Interactive - embedding Vue components
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or even a host it
  • 🛠 Hackable - anything possible on a webpage

logoHeader: '/logo.svg' website: 'dawntraoz.com' handle: 'dawntraoz' layout: new-section sectionImage: 'https://images.unsplash.com/photo-1711091189179-53ec364d4bf3?q=80&w=3054&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

This is a new section

Some content to explain

logoHeader: '/logo.svg' website: 'dawntraoz.com' handle: 'dawntraoz'

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

logoHeader: '/logo.svg' website: 'dawntraoz.com' handle: 'dawntraoz' layout: image-center image: 'https://source.unsplash.com/collection/94734566/1920x1080' imageWidth: '450' imageHeight: '950'

Image centered

Making use of image-center layout.

logoHeader: '/logo.svg' website: 'dawntraoz.com' handle: 'dawntraoz' layout: cover

Code

Use code snippets and get the highlighting directly!

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = {...user, ...update}  
  saveUser(id, newUser)
}

layout: center

Thank you

Documentations / GitHub Repo