generated from vincenzopalazzo/talks
80 lines
1.9 KiB
Markdown
80 lines
1.9 KiB
Markdown
# Reveal.js + Svelte + Vite
|
|
|
|
|
|
|
|
This template should help get you started creating awesome slide decks using [Reveal.js](https://revealjs.com) with Svelte in Vite.
|
|
|
|
## How does it work?
|
|
|
|
- Your slides are both Svelte components and Reveal.js slides.
|
|
- You can have one or more slides (using `<section/>`) 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 `<pre>` and `<code>` elements.
|
|
|
|
```html
|
|
<section>
|
|
<h1>This is a sample slide</h1>
|
|
<ul>
|
|
<li>Apples</li>
|
|
<li>Oranges</li>
|
|
<li>Grapes</li>
|
|
</ul>
|
|
|
|
<h2>Sample code</h2>
|
|
|
|
<pre>
|
|
<code data-line-numbers data-trim data-no-escape>
|
|
{`
|
|
const name = "hello world";
|
|
if(name === 'hello') {
|
|
console.log('world');
|
|
}
|
|
`}
|
|
</code>
|
|
</pre>
|
|
</section>
|
|
```
|
|
|
|
### src/Presentation.svelte
|
|
|
|
The slide order is the order in which you layout your Svelte components.
|
|
|
|
```html
|
|
<script>
|
|
import Title from "./slides/Title.svelte";
|
|
import Love from "./slides/Love.svelte";
|
|
import GettingStarted from "./slides/GettingStarted.svelte";
|
|
|
|
const partner = ["Svelte", "Reveal.js"];
|
|
</script>
|
|
|
|
<title />
|
|
<Love {partner} />
|
|
<GettingStarted />
|
|
```
|
|
|
|
## 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)
|