Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajasegar/svelte-slides
A Reveal.js boilerplate with Svelte, TailwindCSS and Vite
https://github.com/rajasegar/svelte-slides
presentation slides svelte tailwindcss vitejs
Last synced: 3 months ago
JSON representation
A Reveal.js boilerplate with Svelte, TailwindCSS and Vite
- Host: GitHub
- URL: https://github.com/rajasegar/svelte-slides
- Owner: rajasegar
- Created: 2022-07-26T05:10:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-25T08:50:22.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T23:02:05.181Z (4 months ago)
- Topics: presentation, slides, svelte, tailwindcss, vitejs
- Language: Svelte
- Homepage: https://svelte-slides-three.vercel.app
- Size: 300 KB
- Stars: 122
- Watchers: 3
- Forks: 14
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Reveal.js + Svelte + Vite + TailwindCSS
This template should help get you started creating awesome slide decks using [Reveal.js](https://revealjs.com) with Svelte in Vite.
You can also use [TailwindCSS](https://tailwindcss.com) utility classes to style your slide contents.
## How does it work?
- Your slides are both Svelte components and Reveal.js slides.
- You can have one or more slides (using ``) within a single Svelte component.
- Create new slides as Svelte components under `src/slides`
- Just import and include your components inside the `src/Presentation.svelte` component
- That's it, you are good to go.
## Configuring Reveal.js
You can customize the `Reveal.js` setup in `src/config.js`.
## Sample slide
### src/Title.svelte
You can insert code blocks using template literals inside `
` and `` elements.
```html
This is a sample slide
- Apples
- Oranges
- Grapes
Sample code
{`
const name = "hello world";
if(name === 'hello') {
console.log('world');
}
`}
```
### src/Presentation.svelte
The slide order is the order in which you layout your Svelte components.
```html
import Title from './slides/Title.svelte';
import Love from './slides/Love.svelte';
import GettingStarted from './slides/GettingStarted.svelte';
const partner = ['Svelte', 'Reveal.js'];
```
## Built-in Components
### Slide
A component for slide with all the options supported
```html
This is a sample slide
- Apples
- Oranges
- Grapes
```
Please refer to [src/lib/Slide.svelte](src/lib/Slide.svelte) for more information about the props.
### Code
A component to render code blocks
```html
{`
const name = "hello world";
if(name === 'hello') {
console.log('world');
}
`}
```
Please refer to [/src/lib/Code.svelte](/src/lib/Code.svelte) for more information about the props.
### Notes
A component for speaker notes
```html
Hello Everyone, I am using svelte-slides for this presentation
```
### Youtube
A component embedding YouTube videos
```
```
Please refer to [/src/lib/Youtube.svelte](/src/lib/Youtube.svelte) for more information about the props.
## Inspiration
This project is inspired by [svelte-reveal-boilerplate](https://github.com/micschwarz/svelte-reveal-boilerplate/)
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
## References
- [Svelte](https://svelte.dev)
- [Vite.js](https://vitejs.dev)
- [Reveal.js](https://revealjs.com)