fix: eslint errors
This commit is contained in:
@@ -24,4 +24,4 @@ export const [send, receive] = crossfade({
|
||||
`
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -4,4 +4,4 @@ import type { Easing } from 'motion'
|
||||
/**
|
||||
* Ease: Quart Out Array
|
||||
*/
|
||||
export const quartOut: Easing = [.165, .84, .44, 1]
|
||||
export const quartOut: Easing = [.165, .84, .44, 1]
|
||||
|
||||
@@ -42,4 +42,4 @@ export default (node: Element | any, {
|
||||
}, {
|
||||
amount: options.threshold,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,4 +57,4 @@ export const revealSplit = (node: HTMLElement, {
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,4 +12,4 @@
|
||||
}
|
||||
</script>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
</svelte:head>
|
||||
|
||||
@@ -34,4 +34,4 @@
|
||||
|
||||
<meta property="twitter:card" content={card} />
|
||||
<meta property="twitter:creator" content={creator} />
|
||||
</svelte:head>
|
||||
</svelte:head>
|
||||
|
||||
@@ -30,4 +30,4 @@
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,4 +35,4 @@
|
||||
<path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -34,4 +34,4 @@
|
||||
$smoothScroll.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
@@ -39,4 +38,4 @@
|
||||
<span class="char" style:--i-c={i}>{char}</span>
|
||||
{/each}
|
||||
</span>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -38,4 +38,4 @@
|
||||
ratio={1.5}
|
||||
{alt}
|
||||
/>
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
@@ -9,4 +9,4 @@
|
||||
|
||||
<div class="badge badge--{size}">
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,4 +18,4 @@
|
||||
<span class="text-label">
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
@@ -45,7 +45,6 @@
|
||||
href={url} class={classes}
|
||||
{target} {rel}
|
||||
data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
|
||||
{disabled}
|
||||
tabindex="0"
|
||||
on:click
|
||||
>
|
||||
@@ -57,4 +56,4 @@
|
||||
<slot />
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -24,4 +24,4 @@
|
||||
<span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
|
||||
{/if}
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,4 +41,4 @@
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -12,4 +12,4 @@
|
||||
Discover <strong>{count.photos} homes</strong><br>
|
||||
from <strong>{count.locations} places</strong>
|
||||
in <strong>{count.countries} countries</strong>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
@@ -7,4 +7,4 @@
|
||||
|
||||
<svg class={classes} aria-label={label} width="32" height="32">
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@@ -12,4 +12,4 @@
|
||||
class:arrow--flip={flip}
|
||||
>
|
||||
<use xlink:href="#arrow" />
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@@ -41,4 +41,4 @@
|
||||
</clipPath>
|
||||
</defs>
|
||||
{/if}
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
@@ -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:
|
||||
sizes ? [
|
||||
webp: 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:
|
||||
sizes ? [
|
||||
jpg: 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,
|
||||
@@ -83,4 +83,4 @@
|
||||
loading={lazy ? 'lazy' : undefined}
|
||||
{decoding}
|
||||
/>
|
||||
</picture>
|
||||
</picture>
|
||||
|
||||
@@ -69,4 +69,4 @@
|
||||
use:reveal={revealOptions}
|
||||
>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
</svelte:element>
|
||||
|
||||
@@ -34,4 +34,4 @@
|
||||
<span class="middle word-2">Of The</span>
|
||||
<span class="word-3">World</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -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}
|
||||
@@ -131,4 +131,4 @@
|
||||
alt={lastPreviewPhoto.title}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -66,4 +66,4 @@
|
||||
</svg>
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -103,4 +103,4 @@
|
||||
<p class="text-xsmall">{formMessages[formStatus.message]}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,4 +14,4 @@
|
||||
<div class="text text-medium">
|
||||
{@html text}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -63,4 +63,4 @@
|
||||
{index}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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) {
|
||||
@@ -48,9 +48,9 @@
|
||||
* Moving cursor over
|
||||
*/
|
||||
const offset = spring({ x: 0, y: 0 }, {
|
||||
stiffness: 0.075,
|
||||
damping: 0.9
|
||||
})
|
||||
stiffness: 0.075,
|
||||
damping: 0.9
|
||||
})
|
||||
const handleMouseMove = ({ clientX }: MouseEvent) => {
|
||||
const { width, left } = locationEl.getBoundingClientRect()
|
||||
const moveProgress = (clientX - left) / width // 0 to 1
|
||||
|
||||
@@ -30,4 +30,4 @@
|
||||
</dd>
|
||||
</dl>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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}>
|
||||
@@ -29,4 +30,4 @@
|
||||
<h3>{title}</h3>
|
||||
<p>{name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,4 +20,4 @@
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,4 +67,4 @@
|
||||
{lazy}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -45,4 +45,4 @@
|
||||
<li>{location}{region ? `, ${region}` : ''}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,4 +47,4 @@
|
||||
on:click={() => addToCart(product)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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" />
|
||||
@@ -48,4 +48,4 @@
|
||||
<div class="text text-xsmall">
|
||||
{@html text}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
@@ -48,4 +48,4 @@
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 })
|
||||
|
||||
@@ -42,4 +42,4 @@
|
||||
{/each}
|
||||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
</dl>
|
||||
|
||||
@@ -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
|
||||
@@ -30,11 +30,11 @@
|
||||
* Detect outside click
|
||||
*/
|
||||
const windowClick = ({ target }) => {
|
||||
if (!switcherEl.contains(target) && isOpen) {
|
||||
if (!switcherEl.contains(target) && isOpen) {
|
||||
// Close switcher
|
||||
toggleSwitcher()
|
||||
}
|
||||
}
|
||||
toggleSwitcher()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={windowClick} />
|
||||
@@ -70,4 +70,4 @@
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</aside>
|
||||
</aside>
|
||||
|
||||
@@ -39,4 +39,4 @@
|
||||
}}
|
||||
lazy={false}
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -127,4 +127,4 @@
|
||||
</svg>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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}
|
||||
{/if}
|
||||
|
||||
@@ -26,4 +26,4 @@
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -42,4 +42,4 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
@@ -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 },
|
||||
@@ -154,4 +154,4 @@
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,4 +21,4 @@
|
||||
|
||||
<ul class="list-cta" data-sveltekit-noscroll>
|
||||
<slot />
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
@@ -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
|
||||
@@ -89,4 +89,4 @@
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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">
|
||||
@@ -21,4 +21,4 @@
|
||||
|
||||
<EmailForm past={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -117,4 +117,4 @@
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -163,4 +163,4 @@
|
||||
<ShopLocationSwitcher />
|
||||
{/if}
|
||||
<ButtonCart />
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
@@ -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}
|
||||
@@ -90,4 +90,4 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,4 +53,4 @@ export const createPane = (ctx: any) => {
|
||||
max: 1,
|
||||
step: 0.01,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -40,4 +40,4 @@
|
||||
|
||||
<PostersGrid {posters} />
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -53,7 +53,7 @@ export const load = (async () => {
|
||||
}
|
||||
}`)
|
||||
|
||||
const { data: { shop, location, posters, settings }} = res
|
||||
const { data: { shop, location, posters, settings } } = res
|
||||
|
||||
|
||||
/**
|
||||
|
||||
@@ -47,4 +47,4 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
<slot />
|
||||
|
||||
@@ -37,4 +37,4 @@
|
||||
|
||||
<PostersGrid {posters} />
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -36,4 +36,4 @@
|
||||
|
||||
<PostersGrid {posters} />
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -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' })
|
||||
|
||||
@@ -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>
|
||||
@@ -365,4 +364,4 @@
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -93,10 +93,10 @@
|
||||
const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
|
||||
if (defaultPrevented) return
|
||||
switch (key) {
|
||||
case 'ArrowLeft': goToPrevious(); break;
|
||||
case 'ArrowRight': goToNext(); break;
|
||||
case 'Escape': closeViewer(); break;
|
||||
default: return;
|
||||
case 'ArrowLeft': goToPrevious(); break
|
||||
case 'ArrowRight': goToNext(); break
|
||||
case 'Escape': closeViewer(); break
|
||||
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': goToPrevious(); break;
|
||||
case '-y': goToNext(); break
|
||||
case 'y': goToPrevious(); break
|
||||
}
|
||||
}
|
||||
// Swipe left and right on larger screens
|
||||
else {
|
||||
switch (detail) {
|
||||
case '-x': goToNext(); break;
|
||||
case 'x': goToPrevious(); break;
|
||||
case '-x': goToNext(); 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 }}
|
||||
>
|
||||
@@ -398,4 +403,4 @@
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -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' })
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -399,4 +399,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -146,4 +146,4 @@
|
||||
|
||||
<InteractiveGlobe type="cropped" />
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
@@ -93,4 +93,4 @@ const render = (origin: string, products: any[]) => {
|
||||
`).join('')}
|
||||
</channel>
|
||||
</rss>`
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -39,4 +39,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -193,7 +193,7 @@
|
||||
}`,
|
||||
})
|
||||
|
||||
const { data: { photos }} = await res.json()
|
||||
const { data: { photos } } = await res.json()
|
||||
|
||||
if (photos) {
|
||||
// Return new photos
|
||||
@@ -496,4 +496,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -96,4 +96,4 @@
|
||||
|
||||
<InteractiveGlobe type="cropped" />
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -46,4 +46,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -82,4 +82,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -77,4 +77,4 @@
|
||||
|
||||
{#if browser}
|
||||
<Analytics domain={PUBLIC_ANALYTICS_DOMAIN} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@@ -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' })
|
||||
|
||||
@@ -167,4 +167,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</PageTransition>
|
||||
</PageTransition>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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()
|
||||
})
|
||||
);
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -87,28 +86,27 @@ async function fetchAndCache(request: Request) {
|
||||
url.port !== self.location.port) ||
|
||||
// ignore /_app/version.json
|
||||
url.pathname === '/_app/version.json'
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// always serve static files and bundler-generated assets from cache
|
||||
const isStaticAsset = url.host === self.location.host && cached.indexOf(url.pathname) > -1
|
||||
|
||||
if (event.request.cache === 'only-if-cached' && !isStaticAsset) {
|
||||
return
|
||||
}
|
||||
|
||||
// for everything else, try the network first, falling back to cache if the
|
||||
// user is offline. (If the pages never change, you might prefer a cache-first
|
||||
// approach to a network-first one.)
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
// always serve static files and bundler-generated assets from cache.
|
||||
// if your application has other URLs with data that will never change,
|
||||
// set this variable to true for them and they will only be fetched once.
|
||||
const cachedAsset = isStaticAsset && (await caches.match(event.request))
|
||||
return cachedAsset || fetchAndCache(event.request)
|
||||
})()
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
)
|
||||
|
||||
// always serve static files and bundler-generated assets from cache
|
||||
const isStaticAsset = url.host === self.location.host && cached.indexOf(url.pathname) > -1
|
||||
|
||||
if (event.request.cache === 'only-if-cached' && !isStaticAsset) {
|
||||
return
|
||||
}
|
||||
|
||||
// for everything else, try the network first, falling back to cache if the
|
||||
// user is offline. (If the pages never change, you might prefer a cache-first
|
||||
// approach to a network-first one.)
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
// always serve static files and bundler-generated assets from cache.
|
||||
// if your application has other URLs with data that will never change,
|
||||
// set this variable to true for them and they will only be fetched once.
|
||||
const cachedAsset = isStaticAsset && (await caches.match(event.request))
|
||||
return cachedAsset || fetchAndCache(event.request)
|
||||
})()
|
||||
)
|
||||
})
|
||||
|
||||
@@ -5,4 +5,4 @@ export const sendEvent = (action: string, props?: any) => {
|
||||
if (typeof plausible !== 'undefined') {
|
||||
plausible(action, props)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,4 +78,4 @@ export const photoFields = `
|
||||
// if (format) args += `&format=${format}`
|
||||
|
||||
// return `${API_URL}/assets/${id}?width=${width}&height=${height}&fit=${fit}${args}`
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -7,4 +7,4 @@ export const DELAY = {
|
||||
export const DURATION = {
|
||||
PAGE_IN: 400,
|
||||
PAGE_OUT: 400,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,4 +29,4 @@ export const addNotification = (notification: ShopNotification) => {
|
||||
*/
|
||||
export const dismissNotification = (id: number) => {
|
||||
cartNotifications.update((all) => all.filter((t) => t.id !== id))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,4 +73,4 @@ export const removeCartItem = async (productId: string) => {
|
||||
if (updatedCart) {
|
||||
return updatedCart
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,4 +32,4 @@ export const fetchSwell = async (path: string, options?: any) => {
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,4 +83,4 @@ export const swipe = (
|
||||
node.removeEventListener('pointerup', onUp)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
* Add tabindex outlines when navigating with keyboard
|
||||
* focus-visible polyfill: adds classes when tabbing
|
||||
*/
|
||||
import 'focus-visible'
|
||||
import 'focus-visible'
|
||||
|
||||
@@ -21,4 +21,4 @@ if (typeof localStorage !== 'undefined') {
|
||||
const parsedValue = JSON.parse(value)
|
||||
localStorage.setItem('seenLocations', JSON.stringify(parsedValue))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,4 +25,4 @@ export const cartIsUpdating: Writable<boolean> = writable(false)
|
||||
/** Amount of products present in cart */
|
||||
export const cartAmount: Readable<number> = derived(cartData, ($cart) => {
|
||||
return $cart && $cart.item_quantity > 0 ? $cart.item_quantity : 0
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user