slidev-theme-purplin

A (...) theme for Slidev.

Live demo: https://slidev-theme-purplin.netlify.app/

Install

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

---
theme: purplin
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

quote

Usage:

---
layout: quote
position: center
---

# "layout: quote"
position: center

'position' variants: left (default), center, right

image-x

Usage:

---
layout: image-x
image: 'https://source.unsplash.com/collection/94734566/600x600'
imageOrder: 1
---

# layout: image-x

imageOrder: 1

image 600x600

---
layout: image-x
image: 'https://source.unsplash.com/collection/94734566/1080x1920'
imageOrder: 2
---

# layout: image-x

imageOrder: 2

image 1080x1920

Components

This theme provides the following components:

`<BarBottom />`

This component displays a bar at the bottom of the slide.

The component needs to be added to each slide where we want to display it.

Receives a title prop that is the text displayed on the left.

This component uses slots to add items on the right. Exist an <Item /> component that receives a text prop and uses slots to add the icon/image.

Exist a large list of icon collections available that you can use. These icons are imported automatically by slidev, you don't need to configure anything else to use them.

Usage:

---
layout: intro
---

# Slidev Theme Purplin

Presentation slides for developers

<div class="pt-12">
  <span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
    Press Space for next page <carbon:arrow-right class="inline"/>
  </span>
</div>

<BarBottom  title="Slidev theme purplin">
  <Item text="slidevjs/slidev">
    <carbon:logo-github />
  </Item>
  <Item text="Slidevjs">
    <carbon:logo-twitter />
  </Item>
  <Item text="sli.dev">
    <carbon:link />
  </Item>
</BarBottom>

This example uses carbon collection.

How to use other available icons

You have to go to the icon list and select a collection, click on an icon a copy its name. You don't need to do anything else, only copy the name and use an <Item /> component and the icon will be automatically imported from the collections.

How to use custom icon/image

You can use your own icons/images if you want, you only need to add an <Item /> component and use slots features.

Also, you can use Windi CSS to add style to the icon, for example, adjust the width o height.

Usage:

---
layout: intro
---

# Slidev Theme Purplin

Presentation slides for developers

<div class="pt-12">
  <span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
    Press Space for next page <carbon:arrow-right class="inline"/>
  </span>
</div>

<BarBottom  title="Slidev theme purplin">
  <Item text="slidevjs/slidev">
    <carbon:logo-github />
  </Item>
  <Item text="Slidevjs">
    <carbon:logo-twitter />
  </Item>
  <Item text="sli.dev">
    <img
      src="https://d33wubrfki0l68.cloudfront.net/273aa82ec83b3e4357492a201fb68048af1c3e6a/8f657/logo.svg"
      class="w-4"
    />
  </Item>
</BarBottom>

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 genreate the preview PDF
npm run screenshot to genrate the preview PNG