refactor: migrate to Svelte 5

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

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -4,7 +4,6 @@
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'
-    import { onMount } from 'svelte'
     import { stagger, timeline } from 'motion'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
@@ -24,34 +23,33 @@
     import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
     import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
 
-    export let data
+    let { data } = $props()
+
+    let photos = $state<any[]>(data.photos)
+    let totalPhotos = $state(data.totalPhotos)
 
-    let { photos, totalPhotos }: { photos: any[], totalPhotos: number } = data
-    $: ({ photos, totalPhotos } = data)
     const { location, product = undefined }: { location: any, totalPhotos: number, product: any } = data
     const { params } = $page
 
     dayjs.extend(relativeTime)
 
-    let introEl: HTMLElement
-    let photosListEl: HTMLElement
-    let scrollY: number
+    let introEl = $state<HTMLElement>()
+    let photosListEl = $state<HTMLElement>()
+    let scrollY = $state<number>()
     let observerPhotos: IntersectionObserver
     let mutationPhotos: MutationObserver
-    let currentPage = 1
-    let ended: boolean
-    let currentPhotosAmount: number
-    let heroOffsetY = 0
+    let currentPage = $state(1)
+    let currentPhotosAmount = $derived(photos.length)
+    let heroOffsetY = $state(0)
 
-    $: latestPhoto = photos[0]
-    $: currentPhotosAmount = photos.length
-    $: ended = currentPhotosAmount === totalPhotos
+    const ended = $derived(currentPhotosAmount === totalPhotos)
+    const latestPhoto = $derived(photos[0])
 
 
     /**
      * Load photos
      */
-    // Load more photos from CTA
+    /** Load more photos from CTA */
     const loadMorePhotos = async () => {
         // Append more photos from API
         const newPhotos: any = await loadPhotos(currentPage + 1)
@@ -64,9 +62,6 @@
                 // Increment the current page
                 currentPage++
             }
-
-            // Increment the currently visible amount of photos
-            currentPhotosAmount += newPhotos.length
         }
     }
 
@@ -102,12 +97,14 @@
     /**
      * Add parallax on illustration when scrolling
      */
-    $: if (scrollY && scrollY < introEl.offsetHeight) {
-        heroOffsetY = scrollY * 0.1
-    }
+    $effect(() => {
+        if (scrollY && scrollY < introEl.offsetHeight) {
+            heroOffsetY = scrollY * 0.1
+        }
+    })
 
 
-    onMount(() => {
+    $effect(() => {
         // Define location's last seen state
         $seenLocations = JSON.stringify({
             // Add existing values
@@ -264,9 +261,7 @@
                     </Button>
 
                     {#if location.has_poster}
-                        <Button size="medium" url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
-                            <!-- <IconEarth /> -->
-                        </Button>
+                        <Button size="medium" url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small" />
                     {/if}
                 </div>
             </div>
@@ -309,7 +304,7 @@
                 ended={ended}
                 current={currentPhotosAmount}
                 total={totalPhotos}
-                on:click={() => !ended && loadMorePhotos()}
+                onclick={() => !ended && loadMorePhotos()}
             >
                 {#if !ended}
                     <p class="more">See more photos</p>