slidev-theme-penguin v2.3.1
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 💚
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 themedia
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 ofexample.md
- Edit the
example.md
and style to see the changes npm run export
to generate the preview PDFnpm run screenshot
to generate the preview PNG
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago