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