routes/+layout.svelte


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

<script lang="ts">
  import { assets } from '$app/paths'
  import AudioPlayer from '@hollowdark/lib/audio/AudioPlayer.svelte'
  import { highContrast, reduceMotion } from '@hollowdark/lib/accessibility/state'
  import { textSize, type TextSize } from '@hollowdark/lib/reading/state'

  let { children } = $props()

  const titleTrackSrc = `${assets}/audio/title/piano-relaxing.mp3`

  const ALL_TEXT_SIZE_CLASSES: readonly string[] = [
    'text-size-small',
    'text-size-medium',
    'text-size-large',
    'text-size-extra-large'
  ]

  function applyTextSize(size: TextSize): void {
    if (typeof document === 'undefined') return
    const root = document.documentElement
    root.classList.remove(...ALL_TEXT_SIZE_CLASSES)
    root.classList.add(`text-size-${size}`)
  }

  function applyFlag(className: string, active: boolean): void {
    if (typeof document === 'undefined') return
    document.documentElement.classList.toggle(className, active)
  }

  $effect(() => applyTextSize($textSize))
  $effect(() => applyFlag('reduce-motion', $reduceMotion))
  $effect(() => applyFlag('high-contrast', $highContrast))
</script>

<AudioPlayer src={titleTrackSrc} loop />

{@render children()}