fix: eslint errors

apps/website/src/components/SplitText.svelte

@@ -17,7 +17,6 @@
                 <span class="text-split__line" aria-hidden={index === 1}>
                     {#each split as word, i}
                         <span class="word" style:--i-w={i}>{word}</span>{#if word.includes('\n')}<br>{/if}
-                        <!-- svelte-ignore empty-block -->
                         {#if i < split.length - 1}{/if}
                     {/each}
                 </span>

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

@@ -45,7 +45,6 @@
         href={url} class={classes}
         {target} {rel}
         data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
-        {disabled}
         tabindex="0"
         on:click
     >

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

@@ -10,7 +10,7 @@
     export let ratio: number = undefined
     export let alt: string
     export let lazy = true
-    export let decoding: "auto" | "sync" | "async" = "auto"
+    export let decoding: 'auto' | 'sync' | 'async' = 'auto'
 
     interface Sizes {
         small?: { width?: number, height?: number }
@@ -50,16 +50,16 @@
     $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
     $: srcSet = {
         // WebP
-        webp:
+        webp: sizes
-            sizes ? [
+            ? [
                 `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
                 sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
                 sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
             ]
             : [getAssetUrlKey(id, `${sizeKey}-webp`)],
         // JPG
-        jpg:
+        jpg: sizes
-            sizes ? [
+            ? [
                 `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
                 sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
                 sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,

apps/website/src/components/layouts/PosterLayout.svelte

@@ -97,7 +97,7 @@
 
     {#if product.photos_preview.length}
         <div class="poster-layout__images grid container">
-            {#each product.photos_preview.slice(0, 3) as { directus_files_id}, index}
+            {#each product.photos_preview.slice(0, 3) as { directus_files_id }, index}
                 <Image
                     class="image image--{index + 1} photo shadow-box-light"
                     id={directus_files_id.id}

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

@@ -31,7 +31,7 @@
 
         // Detect if location has new content
         const seenLocationDate = dayjs(parsedSeenLocations[location.id])
-        const isLocationSeen = parsedSeenLocations?.hasOwnProperty(location.id)
+        const isLocationSeen = location.id in parsedSeenLocations
 
         // Define if location is has new photos
         if (seenLocationDate && isLocationSeen) {

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

@@ -19,8 +19,9 @@
 </script>
 
 <div class="notification-cart shadow-small"
-    on:click={closeNotification}
     transition:fly={{ y: 20, duration: 700, easing: quartOut }}
+    on:click={closeNotification}
+    on:keydown
 >
     <div class="notification-cart__left">
         <img src={image} width={58} height={88} alt={title}>

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

@@ -36,7 +36,7 @@
                 alt={image.title}
             />
         {:else if video && video.mp4 && video.webm}
-            <video muted loop playsinline autoplay allow="autoplay">
+            <video muted loop playsinline autoplay>
                 <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
                 <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
                 <track kind="captions" />

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher } from 'svelte'
 
     interface Option {
         value: string
@@ -28,7 +28,7 @@
     /**
      * When changing select value
      */
-    const handleChange = ({ target: { value }}: any) => {
+    const handleChange = ({ target: { value } }: any) => {
         const option = options.find(option => option.value === value)
 
         // Dispatch event to parent

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

@@ -20,7 +20,7 @@
 
 
     // Quick location change
-    const quickLocationChange = async ({ target: { value }}: any) => {
+    const quickLocationChange = async ({ target: { value } }: any) => {
         const pathTo = `/shop/poster-${value}`
         goto(pathTo, { replaceState: true, noScroll: true, keepFocus: true })
 

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

@@ -10,7 +10,7 @@
     // Components
     import Icon from '$components/atoms/Icon.svelte'
 
-    const { settings: { switcher_links }}: any = getContext('global')
+    const { settings: { switcher_links } }: any = getContext('global')
 
     let switcherEl: HTMLElement
     let isOpen = false

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

@@ -10,12 +10,12 @@
     import { smoothScroll } from '$utils/stores'
     import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
     import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
+    import { sendEvent } from '$utils/analytics'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Icon from '$components/atoms/Icon.svelte'
     import CartItem from '$components/molecules/CartItem.svelte'
     import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
-    import { sendEvent } from '$utils/analytics';
 
 
     // Block scroll if cart is open
@@ -140,7 +140,7 @@
                             text="Checkout"
                             color="pink"
                             size="small"
-                            on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount }})}
+                            on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
                         />
                     </div>
                 {/if}
@@ -151,5 +151,6 @@
     <div class="cart-overlay"
         transition:fade={{ duration: 600, easing: quartOut }}
         on:click={handleCloseCart}
+        on:keydown
     />
 {/if}

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

@@ -8,7 +8,7 @@
     import SplitText from '$components/SplitText.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
 
-    const { settings: { instagram, footer_links }}: any = getContext('global')
+    const { settings: { instagram, footer_links } }: any = getContext('global')
 </script>
 
 

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

@@ -31,7 +31,7 @@
 
     const { continents, locations }: any = getContext('global')
     const randomContinent: any = getRandomItem(continents)
-    const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}): Marker => ({
+    const markers = locations.map(({ name, slug, country, coordinates: { coordinates } }): Marker => ({
         name,
         slug,
         country: { ...country },

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

@@ -16,12 +16,12 @@
 
     export let locations: any[]
 
-    const { continents, settings: { explore_list }}: any = getContext('global')
+    const { continents, settings: { explore_list } }: any = getContext('global')
 
     // Continents filtering logic
     let currentContinent: string = undefined
 
-    $: filteredLocations = locations.filter(({ country: { continent }}: any) => {
+    $: filteredLocations = locations.filter(({ country: { continent } }: any) => {
         if (!currentContinent) {
             // Show all locations by default
             return true

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

@@ -9,7 +9,7 @@
 
     export let theme = 'default'
 
-    const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
+    const { settings: { newsletter_text, newsletter_subtitle } }: any = getContext('global')
 </script>
 
 <div class="newsletter newsletter--{theme} shadow-box-dark">

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

@@ -63,7 +63,7 @@
         <div class="shop__images">
             {#if images}
             <a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll>
-                {#each images as { directus_files_id: { id, title }}, index}
+                {#each images as { directus_files_id: { id, title } }, index}
                     <Image
                         class={index === currentImageIndex ? 'is-visible' : null}
                         {id}

apps/website/src/routes/(shop)/shop/+error.svelte

@@ -15,7 +15,7 @@
         },
         500: {
             title: 'Server error',
-            message: "That is embarassing, the problem is on our side.",
+            message: 'That is embarassing, the problem is on our side.',
         },
     }
 </script>

apps/website/src/routes/(shop)/shop/+layout.server.ts

@@ -53,7 +53,7 @@ export const load = (async () => {
             }
         }`)
 
-        const { data: { shop, location, posters, settings }} = res
+        const { data: { shop, location, posters, settings } } = res
 
 
         /**

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

@@ -70,10 +70,10 @@ export const load = (async ({ params, setHeaders }) => {
             }
         }`)
 
-        const { data: { location: location, photos, total_published, product }} = res
+        const { data: { location: location, photos, total_published, product } } = res
 
         if (!location.length || location.length && params.country !== location[0].country.slug) {
-            throw error(404, "This location is not available… yet!")
+            throw error(404, 'This location is not available… yet!')
         }
 
         setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })

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

@@ -91,7 +91,7 @@
                 }
             }`,
         })
-        const { data: { photos }} = await res.json()
+        const { data: { photos } } = await res.json()
 
         if (photos) {
             // Return new photos
@@ -219,7 +219,6 @@
 />
 
 
-
 <PageTransition>
     <main class="location-page">
         <section class="location-page__intro grid" bind:this={introEl}>
@@ -241,7 +240,7 @@
                     <div class="info">
                         <p class="text-label">
                             Photos by
-                            {#each location.credits as { credit_id: { name, website }}}
+                            {#each location.credits as { credit_id: { name, website } }}
                                 {#if website}
                                     <a href={website} target="_blank" rel="noopener external">
                                         {name}
@@ -302,7 +301,7 @@
                         location={location.name}
                         ratio={width / height}
                         date={date_taken}
-                        index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                        index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}"
                     />
                 {/each}
             </section>
@@ -312,7 +311,7 @@
                     ended={ended}
                     current={currentPhotosAmount}
                     total={totalPhotos}
-                    on:click={!ended && loadMorePhotos}
+                    on:click={() => !ended && loadMorePhotos()}
                 >
                     {#if !ended}
                         <p class="more">See more photos</p>

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

@@ -93,10 +93,10 @@
     const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
         if (defaultPrevented) return
         switch (key) {
-            case 'ArrowLeft': goToPrevious(); break;
+            case 'ArrowLeft': goToPrevious(); break
-            case 'ArrowRight': goToNext(); break;
+            case 'ArrowRight': goToNext(); break
-            case 'Escape': closeViewer(); break;
+            case 'Escape': closeViewer(); break
-            default: return;
+            default: return
         }
     }
 
@@ -105,15 +105,15 @@
         // Swipe up and down on mobile/small screens
         if (innerWidth < 992) {
             switch (detail) {
-                case '-y': goToNext(); break;
+                case '-y': goToNext(); break
-                case 'y': goToPrevious(); break;
+                case 'y': goToPrevious(); break
             }
         }
         // Swipe left and right on larger screens
         else {
             switch (detail) {
-                case '-x': goToNext(); break;
+                case '-x': goToNext(); break
-                case 'x': goToPrevious(); break;
+                case 'x': goToPrevious(); break
             }
         }
     }
@@ -174,7 +174,7 @@
                 }
             }`,
         })
-        const { data: { photos: newPhotos }} = await res.json()
+        const { data: { photos: newPhotos } } = await res.json()
 
         // Not loading anymore
         isLoading = false
@@ -320,7 +320,11 @@
             </ButtonCircle>
 
             <div class="photo-page__carousel">
-                <div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
+                <div class="photo-page__images"
+                    use:swipe
+                    on:swipe={handleSwipe}
+                    on:tap={toggleFullscreen}
+                >
                     {#each visiblePhotos as { id, image, title }, index (id)}
                         <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
                             <Image
@@ -377,7 +381,8 @@
         </div>
 
         {#if isFullscreen}
-            <div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
+            <div class="photo-page__fullscreen" bind:this={fullscreenEl}
+                on:click={toggleFullscreen} on:keydown
                 in:fade={{ easing: quartOut, duration: 1000 }}
                 out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
             >

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

@@ -70,7 +70,7 @@ export const load = (async ({ setHeaders }) => {
                 seo_image { id }
             }
         }`)
-        const { data: { about, photos: photosIds }} = res
+        const { data: { about, photos: photosIds } } = res
 
         // Get random photos
         const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id)
@@ -89,7 +89,7 @@ export const load = (async ({ setHeaders }) => {
         }`)
 
         if (photosRes) {
-            const { data: { photo: photos }} = photosRes
+            const { data: { photo: photos } } = photosRes
 
             setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })
 

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

@@ -3,7 +3,7 @@
 </style>
 
 <script lang="ts">
-    import { navigating, page } from '$app/stores'
+    import { navigating } from '$app/stores'
     import { onMount, afterUpdate } from 'svelte'
     import { quartOut as quartOutSvelte } from 'svelte/easing'
     import { fade, fly } from 'svelte/transition'
@@ -12,6 +12,7 @@
     import { mailtoClipboard, map } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/constants'
+    import { sendEvent } from '$utils/analytics'
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -21,7 +22,6 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import ProcessStep from '$components/molecules/ProcessStep.svelte'
     import Banner from '$components/organisms/Banner.svelte'
-    import { sendEvent } from '$utils/analytics';
 
     export let data: PageData
     const { about, photos } = data
@@ -223,7 +223,7 @@
                         {about.intro_firstphoto_caption}<br>
                         in
                         <a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
-                            <img src="{getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')}" width="32" height="32" alt="{about.intro_firstlocation.country.flag.title}">
+                            <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
                             <span>Naarm Australia (Melbourne)</span>
                         </a>
                     </figcaption>

apps/website/src/routes/(site)/feed/products.xml/+server.ts

@@ -47,7 +47,7 @@ export const GET = (async ({ url, setHeaders }) => {
                     slug: siteProduct.location.slug,
                     description: siteProduct.description,
                     price: product.price,
-                    images: siteProduct.photos_product.map(({ directus_files_id: { id }}: any) => getAssetUrlKey(id, `product-large-jpg`)),
+                    images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large-jpg`)),
                     gCategory: category.value,
                     gType: category.type,
                 })

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

@@ -14,7 +14,7 @@
     import Heading from '$components/molecules/Heading.svelte'
 
     const { locations }: any = getContext('global')
-    const text = "Explore the globe to discover unique locations across the world"
+    const text = 'Explore the globe to discover unique locations across the world'
 </script>
 
 <Metas

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

@@ -193,7 +193,7 @@
             }`,
         })
 
-        const { data: { photos }} = await res.json()
+        const { data: { photos } } = await res.json()
 
         if (photos) {
             // Return new photos

apps/website/src/routes/+layout.server.ts

@@ -88,7 +88,7 @@ export const load = (async () => {
         }`)
 
         if (res) {
-            const { data: { countPhotos, countLocations, countCountries, ...rest }} = res
+            const { data: { countPhotos, countLocations, countCountries, ...rest } } = res
 
             return {
                 ...rest,

apps/website/src/routes/+page.server.ts

@@ -18,7 +18,7 @@ export const load = (async ({ setHeaders }) => {
                 id
             }
         }`)
-        const { data: { photo: photosIds }} = totalRes
+        const { data: { photo: photosIds } } = totalRes
 
         // Get random photos
         const randomPhotosIds = [...getRandomItems(photosIds, 11)].map(({ id }) => id)
@@ -41,7 +41,7 @@ export const load = (async ({ setHeaders }) => {
                 image { id }
             }
         }`)
-        const { data: { photo: photos }} = photosRes
+        const { data: { photo: photos } } = photosRes
 
         if (photos) {
             setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=599' })

apps/website/src/routes/sitemap.xml/+server.ts

@@ -54,7 +54,7 @@ export const GET = (async ({ url, setHeaders }) => {
             })),
 
             // Products
-            ...products.map(({ location: { slug }}) => ({
+            ...products.map(({ location: { slug } }) => ({
                 path: `/shop/poster-${slug}`,
                 priority: 0.7,
                 frequency: 'monthly',

apps/website/src/service-workers.ts

@@ -15,12 +15,11 @@ const cached = build.concat(files);
             .then(cache => cache.addAll(cached))
             .then(() => {
                 // if you use typescript:
-                (self as unknown as ServiceWorkerGlobalScope).skipWaiting();
+                (self as unknown as ServiceWorkerGlobalScope).skipWaiting()
                 // self.skipWaiting();
             })
-        );
+    )
-    }
+});
-);
 
 // self.addEventListener(
 // if you use typescript:
@@ -38,7 +37,7 @@ const cached = build.concat(files);
             (self as unknown as ServiceWorkerGlobalScope).clients.claim()
             // self.clients.claim()
         })
-    );
+    )
 })
 
 
@@ -110,5 +109,4 @@ async function fetchAndCache(request: Request) {
             return cachedAsset || fetchAndCache(event.request)
         })()
     )
-    }
+})
-)

apps/website/src/utils/polyfills.ts

@@ -2,4 +2,4 @@
  * Add tabindex outlines when navigating with keyboard
  * focus-visible polyfill: adds classes when tabbing
  */
- import 'focus-visible'
+import 'focus-visible'

packages/config/eslintrc.config.cjs

@@ -39,7 +39,7 @@ module.exports = {
         ========================================= */
         // Use spaces over tabs
         'no-tabs': 'error',
-        indent: ['error', 4],
+        indent: ['error', 4, { SwitchCase: 1 }],
         // Use single quote in javascript
         quotes: ['error', 'single', {
             avoidEscape: true,