generated from vincenzopalazzo/talks
|
||
---|---|---|
dist | ||
public | ||
src | ||
.gitignore | ||
LICENSE | ||
README.md | ||
bun.lockb | ||
flake.lock | ||
flake.nix | ||
index.html | ||
jsconfig.json | ||
justfile | ||
package.json | ||
vite.config.js |
README.md
Reveal.js + Svelte + Vite
This template should help get you started creating awesome slide decks using Reveal.js 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.
<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.
<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