A Penguin 🐧 theme for Slidev

Overview

repository-banner.png

slidev-theme-penguin

NPM version

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

Install

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

---
theme: penguin
---

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

---
eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
eventUrl: 'https://vuejs.amsterdam/'
twitter: '@alvaro_code'
twitterUrl: 'https://twitter.com/alvaro_code'
---
With properties Without properties
introDark introLight

Date on footer is automatic

Intro intro

Usage:

  • Add intro in the layout field.
---
layout: intro
---
Dark Light
introDark introLight

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
presenterDark presenterLight

New Section new-section

Usage:

  • Add new-section in the layout field.
---
layout: new-section
---
Dark Light
newSectionDark newSectionLight

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.

auto-favicon

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

@alvaro_code ">
Say hi at @alvaro_code

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
Comments
  • fix: the corner curves overlap the content in default template

    fix: the corner curves overlap the content in default template

    Screenshot_20220518_192922

    As you can see in above image, the corner curves is positioned above the contents. It is because the z-10 in the content wrapper does not give an effect due to the unpositioned element. So I added relative class and it solved.

    <CornerCurves class="absolute transform bottom-0 right-0 flip-x" />
    <div class="my-auto z-10 relative">
          <slot />
    </div>
    
    released 
    opened by zuramai 1
  • Failed to import svg figures from theme

    Failed to import svg figures from theme

    [vite] Internal server error: Failed to resolve import "/public/curve-big.svg" from "node_modules/slidev-theme-penguin/components/CornerCurves.vue". Does the file exist?
      Plugin: vite:import-analysis
      File: /Users/x400048/Projects/talks/vue-3-workshop-porsche/node_modules/slidev-theme-penguin/components/CornerCurves.vue
      1  |  
      2  |  import { defineComponent as _defineComponent } from "vue";
      3  |  import CurveBig from "/public/curve-big.svg";
         |                        ^
      4  |  import CurveSmall from "/public/curve-small.svg";
      5  |  const _sfc_main = _defineComponent({
    
    bug released 
    opened by alvarosabu 1
  • docs: update README for a functional theme setup

    docs: update README for a functional theme setup

    Thanks for developing this lovely theme. I needed to follow this suggested advice I found in one of the open issues in order to get it to actually work.

    opened by lirantal 0
  • automatically added to the last line in the code block.

    automatically added to the last line in the code block.

    When I use a code block in a slide, a blank line is automatically added to the last line in the code block.

    Is there any way to disable this?

    This is sample code and preview.

    ---
    layout: center
    ---
    
    # install VS Code extension
    
    ```bash
    code --install-extension antfu.slidev
    ```
    

    localhost_3030_10(FHD)

    opened by YuheiFUJITA 0
  • Thank you!

    Thank you!

    I am opening this issue just to say thank you for the nice theme (i am going use it for my talk tomorrow).

    And in particular for this funny reference to the last concert of Soda Estereo.

    image

    Nada mas queda.

    opened by greyblake 0
  • Failed to resolve import

    Failed to resolve import "uno.css"

    I used yarn gloally add this theme.And Slidev run fine and 'theme' shows slidev-theme-penguin correctly。 But Slidev doesn't render my slides properly,and Terminal prompts me that the uno.css file is missing. How can I fix it? image P.S. I try to find this file in my computer by everything,however,I can't find it.

    opened by ShinlorLi 2
  • How to customize?

    How to customize?

    Firstly I really love your theme and thank you for sharing.

    Since 2022 feature and switch to unocss. I'm a bit lost on how can I customize theme/css.

    Do you have any clues/tips for that? I'd like to change primary color for example.

    opened by kakawait 0
  • [vite] Internal server error: Unknown layout

    [vite] Internal server error: Unknown layout "presenter"

    fresh install Slidev v0.27.18 and copy your example.md:

    yarn run v1.22.17 warning ../../../package.json: No license field $ slidev --open

    ●■▲ Slidev v0.27.18

    theme none entry /Users/zhonglun/Google Drive/web/fastzhong-about/slides.md

    slide show > http://localhost:3030/ presenter mode > http://localhost:3030/presenter remote control > pass --remote to enable

    shortcuts > restart | open | edit

    3:19:42 PM [vite] Internal server error: Unknown layout "presenter" Plugin: slidev:layout-transform:pre File: /@slidev/slides/2.md at transformMarkdown (/Users/zhonglun/Google Drive/web/fastzhong-about/node_modules/@slidev/cli/dist/chunk-DVHCB7TL.js:604:13) at processTicksAndRejections (node:internal/process/task_queues:96:5) 3:19:43 PM [vite] Internal server error: Unknown layout "new-section" Plugin: slidev:layout-transform:pre File: /@slidev/slides/5.md at transformMarkdown (/Users/zhonglun/Google Drive/web/fastzhong-about/node_modules/@slidev/cli/dist/chunk-DVHCB7TL.js:604:13) at processTicksAndRejections (node:internal/process/task_queues:96:5)

    opened by fastzhong 2
Releases(v1.6.1)
Owner
Alvaro Saburido
Creative Telecommunications Engineer | Front-end | IoT | Entrepreneur | Penguin Ninja | Electronic Guru
Alvaro Saburido
A Unicorn theme for Slidev slides based on dawntraoz.com design.

slidev-theme-unicorn A Unicorn theme for Slidev. This theme is based on dawntraoz.com website design

Alba Silvente Fuentes 44 Nov 16, 2022
A Slidev Theme for my talks about Vue.js

slidev-theme-vuetiful A Vue-inspired theme for Slidev. Live demo: https://slidev-theme-vuetiful.netlify.app/ Features Pretty Vue Theme Subtle Animatio

Thorsten Lünborg 57 Dec 23, 2022
A VuePress 1.x theme that supports a dark theme, multiple color themes, and other useful features.

Yuu A VuePress theme that supports a dark theme, multiple color themes, and other useful features. Extended upon the default VuePress theme with some

Sanctuary 72 Dec 26, 2022
🖼️ An Elegant VuePress Theme, inspired by @vue/theme.

VT An Elegant VuePress Theme, inspired by @vue/theme . ?? Live Documentation ?? VuePress Docs With This Theme Features Compatibility: fully compatible

ULIVZ 58 Dec 11, 2022
VitePress theme base on @vue/theme, more practical and comprehensive.

VitePress theme base on @vue/theme, more practical and comprehensive.

alex.wei 4 Sep 1, 2022
Documentation for Slidev

sli.dev Documentation for Slidev Translations Repo Site Maintainers English docs sli.dev @antfu 简体中文 docs-cn cn.sli.dev @QC-L @Ivocin Français docs-fr

Slidev 84 Dec 8, 2022
💥 A simple and beautiful vuepress Blog & Doc theme.

?? A simple and beautiful vuepress Blog & Doc theme.

vuepress-reco 264 Jan 3, 2023
A theme for VuePress 2

vuepress-theme-mix About The Project VuePress Theme Mix is a minimalistic theme that is designed and developed for VuePress 2. It's deeply customized

Gavin 49 Jan 5, 2023
LightDM theme inspired in Void Linux (without any reason)

LightDM Void Theme I tried Void Linux and got super excited to create a lightdm theme inspired in Void. There's actually no relation with Void Linux,

Jezer Mejía 16 Jan 3, 2023
A front-end multi-theme solution based on sass

A front-end multi-theme solution based on sass

Tom McFly 1 May 13, 2022
A custom vuepress theme with mermaid and plantuml, katex and vue components.

Personal Documentation Theme for VuePress Currently, completely refactoring code for vuepress v1, all components should be compatible. This is the Vue

David Li 58 Oct 10, 2022
A minimalist vuepress theme, compatible with hexo YAML front matter syntax.

A minimalist vuepress theme, compatible with hexo YAML front matter syntax.

BLANK 19 Dec 14, 2022
Personal Documentation Theme for VuePress

Personal Documentation Theme for VuePress Currently, completely refactoring code for vuepress v1, all components should be compatible. This is the Vue

CH 0 Jul 30, 2019
A blog theme for VuePress by Ktquez 🤘

vuepress-theme-ktquez A blog theme for VuePress by Ktquez ?? ?? Vuepress does not yet have native support for blogs, but this theme has some practices

Alan Ktquez 331 Dec 27, 2022
Shopify Foundation Theme is modern Shopify theme built with Shopify Theme Lab, Vue and Tailwind CSS.

Modern Shopify theme using Shopify Theme Lab, Liquid, Vue and Tailwind CSS ??

UI Crooks 218 Jan 4, 2023
A Unicorn theme for Slidev slides based on dawntraoz.com design.

slidev-theme-unicorn A Unicorn theme for Slidev. This theme is based on dawntraoz.com website design

Alba Silvente Fuentes 44 Nov 16, 2022
A Slidev Theme for my talks about Vue.js

slidev-theme-vuetiful A Vue-inspired theme for Slidev. Live demo: https://slidev-theme-vuetiful.netlify.app/ Features Pretty Vue Theme Subtle Animatio

Thorsten Lünborg 57 Dec 23, 2022
A light and Elegant theme for Slidev

A light and Elegant theme for Slidev. This theme contains collection of amazing & light-weighted icons called the light-icons.

Light Vue 35 Dec 5, 2022
Giraffe is a complete application theme, Giraffe theme built with Vuetify created by HeroUI.

?? Free news, blogs or magazines application theme, built with Vuetify created by HeroUI.

Yan Lee 62 Dec 29, 2022
Content-theme-blog-minimal is a standalone theme for creating your blog within minutes!

content-theme-blog-minimal content-theme-blog-minimal is a standalone theme for creating your blog within minutes! Demo: https://dumptyd.github.io/con

Saad 12 Aug 28, 2022