slidev-theme-penguin

A Penguin 🐧 theme for Slidev.

This theme is based on my personal brand, but it can be easily use and customized for your own.

Live demo: here

You can help me keep working on this project 💚

• Become a Sponsor on GitHub
• One-time donation via PayPal

Install

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

It is also required to install the npm package vite-svg-loader and adding a vite.config.js in your project with the following:

import svgLoader from 'vite-svg-loader'

export default {
  plugins: [svgLoader()],
}

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Header and footer

By default any layout will not contain a header and a footer

But you can add this properties to add header and footer

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

With properties | Without properties :-------------------------:|:-------------------------: |

Date on footer is automatic

Intro intro

Usage:

• Add intro in the layout field.

---
layout: intro
---

Dark | Light :-------------------------:|:-------------------------: |

Presenter presenter

Usage:

• Add presenter in the layout field.
• Add presenterImage for the speaker image.

---
layout: presenter
presenterImage: 'https://res.cloudinary.com/alvarosaburido/image/upload/v1622370075/as-portfolio/alvaro_saburido.jpg'
---

Dark | Light :-------------------------:|:-------------------------: |

New Section new-section

Usage:

• Add new-section in the layout field.

---
layout: new-section
---

Dark | Light :-------------------------:|:-------------------------: |

Text Image text-image

Usage:

• Add text-image in the layout field and add the image url on the media field.

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

Dark | Light :-------------------------:|:-------------------------: |

• Add reverse:true to reverse the order of the layout

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

Dark | Light :-------------------------:|:-------------------------: |

Text Window text-window

Usage:

• Add text-window in the layout field.

---
layout: text-window
---

Dark | Light :-------------------------:|:-------------------------: |

• Add reverse:true to reverse the order of the layout

---
layout: text-window
reverse: true
---

Dark | Light :-------------------------:|:-------------------------: |

To set the content inside the window console, just use the syntax sugar ::window:: for slot name:

---
layout: text-window
---

# Consoles

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

::window::

I go inside the window

Components

This theme provides the following components:

Auto-favicon fancy link fancy-link

FancyLink Component will allow you to automatically add the favicon just aside your link.

To use it you just need to add it to your examples.md like this:

Say hi at <fancy-link href="https://twitter.com/alvarosabu">@alvarosabu</fancy-link>

Console window the-console

<the-console>
  <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 <a href="https://codepen.io/searleb/pen/pvQaJB">
    Text Clock</a> by Bill Searle (<a href="https://codepen.io/searleb">@searleb</a>)
    on <a href="https://codepen.io">CodePen</a>.
  </iframe>
</the-console>s

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