Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alvarosabu/slidev-theme-penguin
A Penguin 🐧 theme for Slidev
https://github.com/alvarosabu/slidev-theme-penguin
penguin slidev slidev-theme theme
Last synced: 15 days ago
JSON representation
A Penguin 🐧 theme for Slidev
- Host: GitHub
- URL: https://github.com/alvarosabu/slidev-theme-penguin
- Owner: alvarosabu
- Created: 2021-05-30T15:50:47.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T09:36:03.000Z (3 months ago)
- Last Synced: 2024-05-01T15:50:40.815Z (about 2 months ago)
- Topics: penguin, slidev, slidev-theme, theme
- Language: Vue
- Homepage: https://slidev-theme-penguin.alvarosaburido.dev/
- Size: 26.3 MB
- Stars: 146
- Watchers: 3
- Forks: 48
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Lists
- my-awesome-stars - alvarosabu/slidev-theme-penguin - A Penguin 🐧 theme for Slidev (Vue)
- docsify-awesome-stars - alvarosabu/slidev-theme-penguin - A Penguin 🐧 theme for Slidev (Vue)
- awesome - alvarosabu/slidev-theme-penguin - A Penguin 🐧 theme for Slidev (Vue)
README
# slidev-theme-penguin
[](https://www.npmjs.com/package/slidev-theme-penguin)
A Penguin 🐧 theme for [Slidev](https://github.com/slidevjs/slidev).
This theme is based on my personal brand, but it can be easily use and customized for your own.
Live demo: [here](https://slidev-theme-penguin.alvarosaburido.dev/)
## You can help me keep working on this project 💚
- [Become a Sponsor on GitHub](https://github.com/sponsors/alvarosaburido)
- [One-time donation via PayPal](https://paypal.me/alvarosaburido)
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:
```js
import svgLoader from 'vite-svg-loader'
export default {
plugins: [svgLoader()],
}
```
Learn more about [how to use a theme](https://sli.dev/themes/use).
## 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:
```markdown
Say hi at @alvarosabu
```
### Console window `the-console`
```ts
See the Pen
Text Clock by Bill Searle (@searleb)
on CodePen.
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