Fix eslint error and update svelte related stuff

apps/website/package.json

@@ -12,7 +12,7 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint --ignore-path .gitignore ."
+    "lint": "eslint ."
   },
   "dependencies": {
     "@studio-freight/lenis": "^0.2.28",

apps/website/src/app.d.ts

@@ -57,7 +57,7 @@ declare interface smoothScrollOptions {
     hash: string
     changeHash?: boolean
     event?: MouseEvent
-    callback?: Function
+    callback?: () => void
 }
 
 
@@ -87,4 +87,4 @@ declare type TransitionOptions = {
     stagger?: number
     delay?: number
     easing?: string | Easing
-}
+}

apps/website/src/components/Analytics.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let domain: string
-    export let enabled: boolean = !import.meta.env.DEV
+    export let enabled = !import.meta.env.DEV
 </script>
 
 <svelte:head>

apps/website/src/components/Metas.svelte

@@ -8,8 +8,8 @@
     export let description: string = undefined
     export let image: string = getAssetUrlKey(settings.seo_image.id, 'share-image')
     export let url: string = undefined
-    export let type: string = 'website'
+    export let type = 'website'
-    export let card: string = 'summary_large_image'
+    export let card = 'summary_large_image'
     export let creator: string = undefined
 </script>
 

apps/website/src/components/SplitText.svelte

@@ -3,7 +3,7 @@
 
     export let text: string
     export let mode: string = undefined
-    export let clone: boolean = false
+    export let clone = false
 
     $: split = splitText(text, mode)
 

apps/website/src/components/atoms/AboutGridPhoto.svelte

@@ -3,9 +3,9 @@
 
     export let id: string
     export let alt: string
-    export let disabled: boolean = false
+    export let disabled = false
 
-    let hovering: boolean = false
+    let hovering = false
     let timer: ReturnType<typeof setTimeout> | number = null
 
     $: classes = [

apps/website/src/components/atoms/Badge.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     export let text: string
-    export let size: string = 'small'
+    export let size = 'small'
 </script>
 
 <div class="badge badge--{size}">

apps/website/src/components/atoms/Button.svelte

@@ -5,14 +5,14 @@
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'
 
-    export let tag: string = 'a'
+    export let tag = 'a'
     export let text: string
     export let url: string = undefined
     export let color: string = undefined
     export let size: string = undefined
-    export let effect: string = 'link-3d'
+    export let effect = 'link-3d'
     export let disabled: boolean = undefined
-    export let slotPosition: string = 'before'
+    export let slotPosition = 'before'
 
     const className = 'button'
     const classes = [

apps/website/src/components/atoms/ButtonCircle.svelte

@@ -3,12 +3,12 @@
 </style>
 
 <script lang="ts">
-    export let tag: string = 'button'
+    export let tag = 'button'
     export let url: string = undefined
     export let color: string = undefined
     export let size: string = undefined
-    export let type: string = undefined
+    export let type: 'button' | 'reset' | 'submit' = undefined
-    export let clone: boolean = false
+    export let clone = false
     export let disabled: boolean = undefined
     export let label: string = undefined
 

apps/website/src/components/atoms/IconArrow.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     export let color: string = undefined
-    export let flip: boolean = false
+    export let flip = false
 </script>
 
 <svg width="12" height="14"

apps/website/src/components/atoms/IconEarth.svelte

@@ -7,7 +7,7 @@
 </style>
 
 <script lang="ts">
-    export let animate: boolean = false
+    export let animate = false
 
     const classes = ['icon-earth', $$props.class].join(' ').trim()
 </script>

apps/website/src/components/atoms/Image.svelte

@@ -9,7 +9,7 @@
     export let height: number = sizes && sizes.medium && sizes.medium.height
     export let ratio: number = undefined
     export let alt: string
-    export let lazy: boolean = true
+    export let lazy = true
     export let decoding: "auto" | "sync" | "async" = "auto"
 
     interface Sizes {

apps/website/src/components/atoms/ScrollingTitle.svelte

@@ -16,7 +16,7 @@
     export let parallax: number = undefined
     export let offsetStart: number = undefined
     export let offsetEnd: number = undefined
-    export let animate: boolean = true
+    export let animate = true
 
     let scrollY: number
     let innerWidth: number

apps/website/src/components/atoms/SiteTitle.svelte

@@ -7,8 +7,8 @@
     import reveal from '$animations/reveal'
     import { DURATION } from '$utils/constants'
 
-    export let variant: string = 'lines'
+    export let variant = 'lines'
-    export let tag: string = 'h1'
+    export let tag = 'h1'
 </script>
 
 {#if tag === 'h1'}

apps/website/src/components/molecules/EmailForm.svelte

@@ -10,7 +10,7 @@
     import IconArrow from '$components/atoms/IconArrow.svelte'
     import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
-    export let past: boolean = false
+    export let past = false
 
     let inputInFocus = false
     let formStatus: FormStatus = null

apps/website/src/components/molecules/Pagination.svelte

@@ -3,7 +3,7 @@
 </style>
 
 <script lang="ts">
-    export let ended: boolean = false
+    export let ended = false
     export let current: number
     export let total: number
 </script>

apps/website/src/components/molecules/PhotoCard.svelte

@@ -12,8 +12,8 @@
     export let title: string = undefined
     export let location: any = undefined
     export let city: string = undefined
-    export let hovered: boolean = false
+    export let hovered = false
-    export let lazy: boolean = true
+    export let lazy = true
 
     const dispatch = createEventDispatcher()
     const sizes = {

apps/website/src/components/molecules/ShopLocationSwitcher.svelte

@@ -8,7 +8,7 @@
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     import { smoothScroll } from '$utils/stores'
 
-    export let isOver: boolean = false
+    export let isOver = false
 
     const { shopLocations }: any = getContext('shop')
 
@@ -22,7 +22,7 @@
     // Quick location change
     const quickLocationChange = async ({ target: { value }}: any) => {
         const pathTo = `/shop/poster-${value}`
-        goto(pathTo, { replaceState: true, noscroll: true, keepfocus: true })
+        goto(pathTo, { replaceState: true, noScroll: true, keepFocus: true })
 
         // Scroll to anchor
         await tick()

apps/website/src/components/organisms/Banner.svelte

@@ -8,7 +8,7 @@
 
     export let title: string
     export let image: any
-    export let back: boolean = false
+    export let back = false
 </script>
 
 <section class="banner">

apps/website/src/components/organisms/Carousel.svelte

@@ -20,7 +20,7 @@
 
 
     /** Navigate to specific slide */
-    const goToSlide = (index: number = 0) => carousel.scrollTo(index)
+    const goToSlide = (index = 0) => carousel.scrollTo(index)
 
     /** Move and change arrow direction when moving */
     const arrowPosition = writable({ x: 0, y: 0 })
@@ -89,6 +89,7 @@
         <div class="carousel__viewport" bind:this={carouselEl}
             on:mousemove={handleArrowMove}
             on:click={handleArrowClick}
+            on:keydown
         >
             <div class="carousel__slides">
                 {#each slides as { id, alt }}

apps/website/src/components/organisms/InteractiveGlobe.svelte

@@ -15,10 +15,10 @@
     const isDev = import.meta.env.DEV
 
     export let type: string = undefined
-    export let autoRotate: boolean = true
+    export let autoRotate = true
-    export let enableMarkers: boolean = true
+    export let enableMarkers = true
-    export let enableMarkersLinks: boolean = true
+    export let enableMarkersLinks = true
-    export let speed: number = 0.1
+    export let speed = 0.1
     export let pane: boolean = isDev
     export let width: number = undefined
 

apps/website/src/components/organisms/NewsletterModule.svelte

@@ -7,7 +7,7 @@
     // Components
     import EmailForm from '$components/molecules/EmailForm.svelte'
 
-    export let theme: string = 'default'
+    export let theme = 'default'
 
     const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
 </script>

apps/website/src/components/organisms/PostersGrid.svelte

@@ -21,7 +21,7 @@
 
 
     /** Navigate to specific slide */
-    const goToSlide = (index: number = 0) => {
+    const goToSlide = (index = 0) => {
         carousel.scrollTo(index)
     }
 

apps/website/src/components/organisms/ShopModule.svelte

@@ -21,9 +21,9 @@
     export let title: string = shop.module_title
     export let text: string = shop.module_text
     export let textBottom: string = undefined
-    export let buttonText: string = 'Shop'
+    export let buttonText = 'Shop'
-    export let url: string = '/shop'
+    export let url = '/shop'
-    export let enabled: boolean = true
+    export let enabled = true
 
     if (textBottom !== null) {
         textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`

apps/website/src/modules/globe/index.ts

@@ -364,7 +364,7 @@ export type Marker = {
  */
 function WebGLSupport () {
     try {
-        var canvas = document.createElement('canvas')
+        const canvas = document.createElement('canvas')
         return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
     } catch(e) {
         return false

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

@@ -86,7 +86,7 @@
 
     // Close viewer and go to previous page
     const closeViewer = () => {
-        goto(previousUrl, { replaceState: false, noscroll: true, keepfocus: true })
+        goto(previousUrl, { replaceState: false, noScroll: true, keepFocus: true })
     }
 
     // Enable navigation with keyboard

apps/website/src/routes/(site)/about/+page.svelte

@@ -29,7 +29,7 @@
     let scrollY: number, innerWidth: number, innerHeight: number
     let photosGridEl: HTMLElement
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
-    let currentStep: number = 0
+    let currentStep = 0
     let emailCopied: string = null
     let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 

apps/website/src/routes/(site)/photos/+page.svelte

@@ -104,7 +104,7 @@
         urlFiltersParams.set('sort', filterSort)
 
         let path = `${$page.url.pathname}?${urlFiltersParams.toString()}`
-        goto(path, { replaceState: true, keepfocus: true, noscroll: true })
+        goto(path, { replaceState: true, keepFocus: true, noScroll: true })
     }
 
 

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

@@ -3,7 +3,7 @@
 </style>
 
 <script lang="ts">
-    import { navigating, page } from '$app/stores'
+    import { navigating } from '$app/stores'
     import type { PageData } from './$types'
     import { getContext, onMount } from 'svelte'
     import { timeline, stagger } from 'motion'

apps/website/src/utils/functions/index.ts

@@ -2,27 +2,32 @@ import { sendEvent } from '$utils/analytics'
 
 
 /**
- * Throttle function
+ * Debounce a function with a given amount of time
+ * @description  For scrolling or other resource demanding behaviors
  */
-export const throttle = (func: Function, timeout: number) => {
+export const debounce = (callback: (...args: any[]) => any, wait: number, immediate = false) => {
-    let ready: boolean = true
+    let timeout: ReturnType<typeof setTimeout> | number = 0
-    return (...args: any) => {
+    return (...args: any[]) => {
-        if (!ready) return
+        const callNow: boolean = immediate && !timeout
-        ready = false
+        const next = () => callback(...args)
-        func(...args)
+        clearTimeout(timeout)
-        setTimeout(() => ready = true, timeout)
+        timeout = setTimeout(next, wait)
+        if (callNow) next()
     }
 }
 
 
 /**
- * Debounce function
+ * Throttle a function by a given amount of time
+ * @description Throttling enforces a maximum number of times a function can be called over time, as in 'execute this function at most once every 100 milliseconds
  */
-export const debounce = (func: Function, timeout: number) => {
+export const throttle = (fn: (...args: any[]) => any, delay: number) => {
-    let timer: NodeJS.Timeout
+    let lastCall = 0
-    return (...args: any) => {
+    return (...args: unknown[]) => {
-        clearTimeout(timer)
+        const now = performance.now()
-        timer = setTimeout(() => func(...args), timeout)
+        if (now - lastCall < delay) return
+        lastCall = now
+        requestAnimationFrame(() => fn(...args))
     }
 }
 
@@ -32,7 +37,7 @@ export const debounce = (func: Function, timeout: number) => {
  * @description Split a string into words or characters
  * @returns string[]
  */
-export const splitText = (text: string, mode: string = 'words'): string[] => {
+export const splitText = (text: string, mode = 'words'): string[] => {
     // Split by words
     if (mode === 'words') {
         const words = text
@@ -105,23 +110,27 @@ export const clamp = (num: number, a: number, b: number) => {
 
 
 /**
- * Return a random element from an array
+ * Return random elements from an array
  */
-export const getRandomItem = <T extends unknown> (array: T[]): T => {
+export const getRandomItems = <T> (array: T[], amount: number): T[] => {
-    const randomItemIndex = ~~(array.length * Math.random())
+    const shuffled = array.slice()
-    return array[randomItemIndex]
+    for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
+    }
+    return shuffled.slice(0, amount)
 }
 
 
 /**
- * Return random elements from an array
+ * Return a random element from an array
  */
-export const getRandomItems = <T extends unknown> (array: any[], amount: number): T[] => {
+export const getRandomItem = <T extends Array<unknown>> (array: T): T[0] => {
-    const shuffled = Array.from(array).sort(() => 0.5 - Math.random())
+    return getRandomItems(array, 1)[0]
-    return shuffled.slice(0, amount)
 }
 
 
+
 /**
  * Scroll back to top after page transition
  */
@@ -143,7 +152,7 @@ export const mailtoClipboard = (node: HTMLElement) => {
     const links = node.querySelectorAll('a[href^="mailto:"]')
 
     const clickToCopy = (event) => {
-        let emailAddress = event.currentTarget.href.split('mailto:')[1].split('?')[0]
+        const emailAddress = event.currentTarget.href.split('mailto:')[1].split('?')[0]
 
         // Copy email to clipboard
         navigator.clipboard.writeText(emailAddress)
@@ -166,4 +175,4 @@ export const mailtoClipboard = (node: HTMLElement) => {
             links && links.forEach(link => link.removeEventListener('click', clickToCopy, true))
         }
     }
-}
+}

apps/website/src/utils/functions/shop.ts

@@ -25,7 +25,7 @@ export const getCart = async () => {
 /**
  * Add a product to a cart
  */
-export const addToCart = async (product: any, quantity: number = 1) => {
+export const addToCart = async (product: any, quantity = 1) => {
     const updatedCart = await swell.cart.addItem({
         product_id: product.id,
         quantity,