React Slides

* Adds useState
* State
* useEffect
* Side Effects

12 files changed, 295 insertions, 0 deletions

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
new file mode 100644
index 0000000..255bf7e
--- /dev/null
+++ b/src/lib/components/code.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	type Lines = string | boolean | null
+	type Offset = string | null
+	type Language = string | null
+
+	export let id = 'code-animation'
+	export let lines: Lines = true
+	export let offset: Offset = null
+	export let lang: Language = null
+
+	delete $$restProps.class
+</script>
+
+<pre data-id={id} class={$$props.class || ''} {...$$restProps}>
+  <code
+		data-trim
+		data-line-numbers={lines || null}
+		data-ln-start-from={offset}
+		class="language-{lang}">
+<slot />
+  </code>
+</pre>
diff --git a/src/lib/components/fit.svelte b/src/lib/components/fit.svelte
new file mode 100644
index 0000000..8772061
--- /dev/null
+++ b/src/lib/components/fit.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let type = 'h2'
+
+	delete $$restProps.class
+</script>
+
+<svelte:element
+	this={type}
+	class="r-fit-text {$$props.class || ''}"
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..392800d
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1,25 @@
+import Code from './code.svelte'
+import FitText from './fit.svelte'
+import Markdown from './markdown.svelte'
+import Media from './media.svelte'
+import Notes from './notes.svelte'
+import Presentation from './presentation.svelte'
+import Slide from './slide.svelte'
+import Stack from './stack.svelte'
+import Step from './step.svelte'
+import Stretch from './stretch.svelte'
+import Vertical from './vertical.svelte'
+
+export {
+	Code,
+	FitText,
+	Markdown,
+	Media,
+	Notes,
+	Presentation,
+	Slide,
+	Stack,
+	Step,
+	Stretch,
+	Vertical,
+}
diff --git a/src/lib/components/markdown.svelte b/src/lib/components/markdown.svelte
new file mode 100644
index 0000000..204815b
--- /dev/null
+++ b/src/lib/components/markdown.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let file: string | null = null
+</script>
+
+{#if file}
+	<section data-markdown={file} />
+{:else}
+	<section data-markdown>
+		<div data-template>
+			<slot />
+		</div>
+	</section>
+{/if}
diff --git a/src/lib/components/media.svelte b/src/lib/components/media.svelte
new file mode 100644
index 0000000..ffa2633
--- /dev/null
+++ b/src/lib/components/media.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	type Bool = boolean | null
+	type Element = 'video' | 'img' | 'iframe'
+
+	export let type: Element
+	export let src: string
+	export let autoplay: Bool = null
+	export let preload: Bool = null
+
+	delete $$restProps.class
+</script>
+
+<svelte:element
+	this={type}
+	data-src={src}
+	data-autoplay={autoplay}
+	data-prelod={preload}
+	class={$$props.class || ''}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/notes.svelte b/src/lib/components/notes.svelte
new file mode 100644
index 0000000..198e18d
--- /dev/null
+++ b/src/lib/components/notes.svelte
@@ -0,0 +1,3 @@
+<aside class="notes">
+	<slot />
+</aside>
diff --git a/src/lib/components/presentation.svelte b/src/lib/components/presentation.svelte
new file mode 100644
index 0000000..c11010a
--- /dev/null
+++ b/src/lib/components/presentation.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import Reveal from 'reveal.js'
+	import options from '@config'
+
+	import 'reveal.js/dist/reveal.css'
+	import '@styles/theme.css'
+	import '@styles/code.css'
+
+	onMount(() => {
+		// create deck instance
+		const deck = new Reveal(options)
+
+		// custom event listeners
+		const inEvent = new CustomEvent('in')
+		const outEvent = new CustomEvent('out')
+
+		// keep track of current slide
+		deck.on('slidechanged', (event) => {
+			if ('currentSlide' in event) {
+				const currentSlideEl = event.currentSlide as HTMLElement
+				currentSlideEl.dispatchEvent(inEvent)
+			}
+
+			if ('previousSlide' in event) {
+				const currentPreviousEl = event.previousSlide as HTMLElement
+				currentPreviousEl.dispatchEvent(outEvent)
+			}
+		})
+
+		deck.on('fragmentshown', (event) => {
+			if ('fragment' in event) {
+				const fragmentEl = event.fragment as HTMLElement
+				fragmentEl.dispatchEvent(inEvent)
+			}
+		})
+
+		deck.on('fragmenthidden', (event) => {
+			if ('fragment' in event) {
+				const fragmentEl = event.fragment as HTMLElement
+				fragmentEl.dispatchEvent(outEvent)
+			}
+		})
+
+		deck.initialize().then(() => {
+			// we pass the language to the `<Code>` block
+			// and higlight code blocks after initialization
+			highlightCodeBlocks(deck)
+		})
+
+		// reload page after update to avoid HMR issues
+		// reloadPageAfterUpdate()
+	})
+
+	function highlightCodeBlocks(deck: Reveal.Api) {
+		const highlight = deck.getPlugin('highlight')
+		const codeBlocks = [...document.querySelectorAll('code')]
+		codeBlocks.forEach((block) => {
+			// @ts-ignore
+			highlight.highlightBlock(block)
+		})
+	}
+
+	function reloadPageAfterUpdate() {
+		if (import.meta.hot) {
+			import.meta.hot.on('vite:afterUpdate', () => {
+				location.reload()
+			})
+		}
+	}
+</script>
+
+<div class="reveal">
+	<div class="slides">
+		<slot />
+	</div>
+</div>
diff --git a/src/lib/components/slide.svelte b/src/lib/components/slide.svelte
new file mode 100644
index 0000000..439d312
--- /dev/null
+++ b/src/lib/components/slide.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	type Bool = boolean | null
+	type String = string | null
+	type Transition =
+		| 'none'
+		| 'fade'
+		| 'slide'
+		| 'convex'
+		| 'concave'
+		| 'zoom'
+		| null
+
+	export let animate: Bool = null
+	export let animateEasing: String = null
+	export let animateUnmatched: Bool = null
+	export let animateId: String = null
+	export let animateRestart: Bool = null
+	export let background: String = null
+	export let gradient: String = null
+	export let image: String = null
+	export let video: String = null
+	export let iframe: String = null
+	export let interactive: Bool = null
+	export let transition: Transition = null
+
+	delete $$restProps.class
+</script>
+
+<section
+	on:in
+	on:out
+	data-auto-animate={animate}
+	data-auto-animate-easing={animateEasing}
+	data-auto-animate-unmatched={animateUnmatched}
+	data-auto-animate-id={animateId}
+	data-auto-animate-restart={animateRestart}
+	data-background-color={background}
+	data-background-gradient={gradient}
+	data-background-image={image}
+	data-background-video={video}
+	data-background-iframe={iframe}
+	data-background-interactive={interactive}
+	data-transition={transition}
+	class={$$props.class || ''}
+	{...$$restProps}
+>
+	<slot />
+</section>
diff --git a/src/lib/components/stack.svelte b/src/lib/components/stack.svelte
new file mode 100644
index 0000000..a03d205
--- /dev/null
+++ b/src/lib/components/stack.svelte
@@ -0,0 +1,3 @@
+<div class="r-stack">
+	<slot />
+</div>
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
new file mode 100644
index 0000000..13c2f7c
--- /dev/null
+++ b/src/lib/components/step.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	export let order: string | null = null
+	export let fadeIn = false
+	export let fadeOut = false
+	export let fadeUp = false
+	export let fadeDown = false
+	export let fadeLeft = false
+	export let fadeRight = false
+	export let fadeInThenOut = false
+	export let currentVisible = false
+	export let fadeInThenSemiOut = false
+	export let semiFadeOut = false
+	export let highlightRed = false
+	export let highlightGreen = false
+	export let highlightBlue = false
+	export let highlightCurrentRed = false
+	export let highlightCurrentGreen = false
+	export let highlightCurrentBlue = false
+	export let grow = false
+	export let shrink = false
+	export let strike = false
+
+	delete $$restProps.class
+</script>
+
+<p
+	on:in
+	on:out
+	class:fade-in={fadeIn}
+	class:fade-out={fadeOut}
+	class:fade-up={fadeUp}
+	class:fade-down={fadeDown}
+	class:fade-left={fadeLeft}
+	class:fade-right={fadeRight}
+	class:fade-in-then-out={fadeInThenOut}
+	class:current-visible={currentVisible}
+	class:fade-in-then-semi-out={fadeInThenSemiOut}
+	class:semi-fade-out={semiFadeOut}
+	class:highlight-red={highlightRed}
+	class:highlight-green={highlightGreen}
+	class:highlight-blue={highlightBlue}
+	class:highlight-current-red={highlightCurrentRed}
+	class:highlight-current-green={highlightCurrentGreen}
+	class:highlight-current-blue={highlightCurrentBlue}
+	class:grow
+	class:shrink
+	class:strike
+	class="fragment {$$props.class || ''}"
+	data-fragment-index={order}
+	{...$$restProps}
+>
+	<slot />
+</p>
diff --git a/src/lib/components/stretch.svelte b/src/lib/components/stretch.svelte
new file mode 100644
index 0000000..be808d5
--- /dev/null
+++ b/src/lib/components/stretch.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let type = 'p'
+
+	delete $$restProps.class
+</script>
+
+<svelte:element
+	this={type}
+	class="r-stretch {$$props.class || ''}"
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/vertical.svelte b/src/lib/components/vertical.svelte
new file mode 100644
index 0000000..fb20c0a
--- /dev/null
+++ b/src/lib/components/vertical.svelte
@@ -0,0 +1,3 @@
+<section>
+	<slot />
+</section>