blob: c11010aeb5a6f34688d609c53dd99673ec4be1e2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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>
|
