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

Generous Unicorns 🦄

Install

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

---
theme: penguin
---

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

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

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