{"id":13406983,"url":"https://github.com/alvarosabu/slidev-theme-penguin","last_synced_at":"2026-01-12T02:18:15.120Z","repository":{"id":39637917,"uuid":"372255174","full_name":"alvarosabu/slidev-theme-penguin","owner":"alvarosabu","description":"A Penguin 🐧   theme for Slidev","archived":false,"fork":false,"pushed_at":"2024-11-11T09:46:27.000Z","size":28151,"stargazers_count":190,"open_issues_count":12,"forks_count":55,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T02:45:53.188Z","etag":null,"topics":["penguin","slidev","slidev-theme","theme"],"latest_commit_sha":null,"homepage":"https://slidev-theme-penguin.alvarosaburido.dev/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alvarosabu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["alvarosabu"],"ko_fi":"alvarosaburido"}},"created_at":"2021-05-30T15:50:47.000Z","updated_at":"2025-09-21T14:48:39.000Z","dependencies_parsed_at":"2024-03-23T11:33:59.785Z","dependency_job_id":"d1d2a073-fc67-4b23-892d-bb57cd3c8e41","html_url":"https://github.com/alvarosabu/slidev-theme-penguin","commit_stats":null,"previous_names":["alvarosaburido/slidev-theme-penguin"],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/alvarosabu/slidev-theme-penguin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarosabu%2Fslidev-theme-penguin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarosabu%2Fslidev-theme-penguin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarosabu%2Fslidev-theme-penguin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarosabu%2Fslidev-theme-penguin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alvarosabu","download_url":"https://codeload.github.com/alvarosabu/slidev-theme-penguin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarosabu%2Fslidev-theme-penguin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28331930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["penguin","slidev","slidev-theme","theme"],"created_at":"2024-07-30T19:02:44.921Z","updated_at":"2026-01-12T02:18:15.106Z","avatar_url":"https://github.com/alvarosabu.png","language":"Vue","funding_links":["https://github.com/sponsors/alvarosabu","https://ko-fi.com/alvarosaburido","https://github.com/sponsors/alvarosaburido","https://paypal.me/alvarosaburido"],"categories":["Vue"],"sub_categories":[],"readme":"![repository-banner.png](https://res.cloudinary.com/alvarosaburido/image/upload/v1612193118/as-portfolio/Repo_Banner_kexozw.png)\n\n# slidev-theme-penguin\n\n[![NPM version](https://img.shields.io/npm/v/slidev-theme-penguin?color=3AB9D4\u0026label=)](https://www.npmjs.com/package/slidev-theme-penguin)\n\nA Penguin 🐧  theme for [Slidev](https://github.com/slidevjs/slidev).\n\nThis theme is based on my personal brand, but it can be easily use and customized for your own.\n\n\u003c!--\nrun `npm run dev` to check out the slides for more details of how to start writing a theme\n--\u003e\n\n\u003c!--\nput some screenshots here to demonstrate your theme,\n--\u003e\n\nLive demo: [here](https://slidev-theme-penguin.alvarosaburido.dev/)\n\n## You can help me keep working on this project 💚\n\n- [Become a Sponsor on GitHub](https://github.com/sponsors/alvarosaburido)\n- [One-time donation via PayPal](https://paypal.me/alvarosaburido)\n\n\u003ch4 align=\"center\"\u003eGenerous Unicorns 🦄\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/OmgImAlexis\" target=\"_blank\" rel=\"noopener noreferrer\" \"\u003e\n    \u003cimg src=\"https://avatars.githubusercontent.com/u/6525926?v=4\" height=\"72px\"  style=\"border-radius: 100%; overflow: hidden; border: 4px solid #5EDCAE\" alt=\"OmgImAlexis\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Install\n\nAdd the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.\n\n\u003cpre\u003e\u003ccode\u003e---\ntheme: \u003cb\u003epenguin\u003c/b\u003e\n---\u003c/code\u003e\u003c/pre\u003e\n\nIt is also required to install the npm package `vite-svg-loader` and adding a vite.config.js in your project with the following:\n\n```js\nimport svgLoader from 'vite-svg-loader'\n\nexport default {\n  plugins: [svgLoader()],\n}\n```\n\nLearn more about [how to use a theme](https://sli.dev/themes/use).\n\n## Layouts\n\nThis theme provides the following layouts:\n\n### Header and footer\n\nBy default any layout will not contain a header and a footer\n\nBut you can add this properties to add header and footer\n\n```\n---\nthemeConfig:\n  logoHeader: '/logo.svg'\n  eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'\n  eventUrl: 'https://vuejs.amsterdam/'\n  twitter: '@alvarosabu'\n  twitterUrl: 'https://twitter.com/alvarosabu'\n---\n```\nWith properties            | Without properties\n:-------------------------:|:-------------------------:\n![introDark](./screenshots/dark/intro.png) | ![introLight](./screenshots/dark/04.png)\n\n---\n\nDate on footer is automatic\n\n### Intro `intro`\n\nUsage:\n\n- Add `intro` in the layout field.\n\n```\n---\nlayout: intro\n---\n```\n\nDark                       | Light\n:-------------------------:|:-------------------------:\n![introDark](./screenshots/dark/intro.png) | ![introLight](./screenshots/light/intro.png)\n\n---\n\n### Presenter `presenter`\n\nUsage:\n\n- Add `presenter` in the layout field.\n- Add `presenterImage` for the speaker image.\n\n```\n---\nlayout: presenter\npresenterImage: 'https://res.cloudinary.com/alvarosaburido/image/upload/v1622370075/as-portfolio/alvaro_saburido.jpg'\n---\n```\n\nDark                       | Light\n:-------------------------:|:-------------------------:\n![presenterDark](./screenshots/dark/presenter.png) | ![presenterLight](./screenshots/light/presenter.png)\n\n---\n\n### New Section `new-section`\n\nUsage:\n\n- Add `new-section` in the layout field.\n\n```\n---\nlayout: new-section\n---\n```\n\nDark                       | Light\n:-------------------------:|:-------------------------:\n![newSectionDark](./screenshots/dark/new-section.png) | ![newSectionLight](./screenshots/light/new-section.png)\n\n---\n\n### Text Image `text-image`\n\nUsage:\n\n- Add `text-image` in the layout field and add the image url on the `media` field.\n\n```\n---\nlayout: text-image\nmedia: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'\n---\n```\n\nDark                       | Light\n:-------------------------:|:-------------------------:\n![textImageDark](./screenshots/dark/text-image.png) | ![textImageLight](./screenshots/light/text-image.png)\n\n- Add `reverse:true` to reverse the order of the layout\n\n```\n---\nlayout: text-image\nmedia: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'\nreverse: true\n---\n```\nDark                       | Light\n:-------------------------:|:-------------------------:\n![textImageDark](./screenshots/dark/text-image-reverse.png) | ![textImageLight](./screenshots/light/text-image-reverse.png)\n---\n\n### Text Window `text-window`\n\nUsage:\n\n- Add `text-window` in the layout field.\n\n```\n---\nlayout: text-window\n---\n```\n\nDark                       | Light\n:-------------------------:|:-------------------------:\n![textWindowDark](./screenshots/dark/text-window.png) | ![textWindowLight](./screenshots/light/text-window.png)\n\n- Add `reverse:true` to reverse the order of the layout\n\n```\n---\nlayout: text-window\nreverse: true\n---\n```\nDark                       | Light\n:-------------------------:|:-------------------------:\n![textWindowDark](./screenshots/dark/text-window-reverse.png) | ![textWindowLight](./screenshots/light/text-window-reverse.png)\n\nTo set the content inside the window console, just use the syntax sugar `::window::` for slot name:\n\n```\n---\nlayout: text-window\n---\n\n# Consoles\n\nUse code snippets and get the highlighting directly into a nice looking window!\n\n::window::\n\nI go inside the window\n\n```\n\n## Components\n\nThis theme provides the following components:\n\n### Auto-favicon fancy link `fancy-link`\n\n`FancyLink` Component will allow you to automatically add the favicon just aside your link.\n\n![auto-favicon](./screenshots/fancy-link-component.png)\n\nTo use it you just need to add it to your `examples.md` like this:\n\n```markdown\nSay hi at \u003cfancy-link href=\"https://twitter.com/alvarosabu\"\u003e@alvarosabu\u003c/fancy-link\u003e\n```\n\n### Console window `the-console`\n\n```html\n\u003cTheConsole\u003e\n  \u003ciframe\n    height=\"300\"\n    style=\"width: 100%\"\n    scrolling=\"no\"\n    title=\"Text Clock\"\n    src=\"https://codepen.io/searleb/embed/pvQaJB?default-tab=html%2Cresult\"\n    frameborder=\"no\"\n    loading=\"lazy\"\n    allowtransparency=\"true\"\n    allowfullscreen=\"true\"\n  \u003e\n    See the Pen \u003ca href=\"https://codepen.io/searleb/pen/pvQaJB\"\u003e Text Clock\u003c/a\u003e by Bill Searle (\u003ca\n      href=\"https://codepen.io/searleb\"\n      \u003e@searleb\u003c/a\n    \u003e) on \u003ca href=\"https://codepen.io\"\u003eCodePen\u003c/a\u003e.\n  \u003c/iframe\u003e\n\u003c/TheConsole\u003e\n```\n\n\u003e TODO:\n\n## Contributing\n\n- `npm install`\n- `npm run dev` to start theme preview of `example.md`\n- Edit the `example.md` and style to see the changes\n- `npm run export` to generate the preview PDF\n- `npm run screenshot` to generate the preview PNG\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarosabu%2Fslidev-theme-penguin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvarosabu%2Fslidev-theme-penguin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarosabu%2Fslidev-theme-penguin/lists"}