React Slides

* Adds useState
* State
* useEffect
* Side Effects

1 files changed, 77 insertions, 0 deletions

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>