refactor: migrate to Svelte 5

use runes ($props, $state, $derived, $effect, etc)

apps/website/src/routes/+layout.svelte

@@ -21,7 +21,7 @@
     import { page } from '$app/stores'
     import { beforeNavigate, afterNavigate } from '$app/navigation'
     import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
-    import { setContext, onMount } from 'svelte'
+    import { setContext } from 'svelte'
     import { fade } from 'svelte/transition'
     import { DELAY, DURATION } from '$utils/constants'
     import { pageLoading, previousPage } from '$utils/stores'
@@ -35,10 +35,9 @@
     import Toast from '$components/molecules/Toast/Toast.svelte'
     import Footer from '$components/organisms/Footer/Footer.svelte'
 
-    export let data
+    let { data, children } = $props()
 
-    let innerHeight: number
-    $: innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
+    let innerHeight = $state<number>()
 
     // Fonts to preload
     const fonts = [
@@ -77,17 +76,18 @@
         }
     })
 
-    $: if (browser) {
+
+    $effect(() => {
+        // Set viewport height
+        innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
+
+        // Avoid FOUC
+        document.body.style.opacity = '1'
+
         // Define page loading
         document.body.classList.toggle('is-loading', $pageLoading)
         // Block scroll on certain conditions
         // document.body.classList.toggle('block-scroll', condition)
-    }
-
-
-    onMount(() => {
-        // Avoid FOUC
-        document.body.style.opacity = '1'
     })
 </script>
 
@@ -109,7 +109,7 @@
         in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
         out:fade={{ duration: DURATION.PAGE_OUT }}
     >
-        <slot />
+        {@render children()}
 
         {#if !$page.params.photo}
             <Footer />