flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor: migrate to Svelte 5

Browse Source 
use runes ($props, $state, $derived, $effect, etc)
This commit is contained in:
Félix Péault
2024-08-02 17:50:16 +02:00
parent 245049222b
commit 6f8a619af2
60 changed files with 1120 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/website/src/components/Analytics.svelte
View File

@@ -1,6 +1,11 @@
<script lang="ts">
export let domain: string
export let enabled = !import.meta.env.DEV
let {
domain,
enabled = !import.meta.env.DEV,
}: {
domain: string
enabled?: boolean
} = $props()
</script>
<svelte:head>

34
apps/website/src/components/Metas.svelte
View File

@@ -4,13 +4,23 @@
const { settings }: any = getContext('global')
export let title: string
export let description: string = undefined
export let image: string = getAssetUrlKey(settings.seo_image.id, 'share-image')
export let url: string = undefined
export let type = 'website'
export let card = 'summary_large_image'
export let creator: string = undefined
let {
title,
description,
image = getAssetUrlKey(settings.seo_image.id, 'share-image'),
url,
type = 'website',
card = 'summary_large_image',
creator,
}: {
title: string
description?: string
image?: string
url?: string
type?: string
card?: string
creator?: string
} = $props()
</script>
<svelte:head>
@@ -20,16 +30,16 @@
<meta property="og:title" content={title} />
<meta name="twitter:title" content={title} />
{#if description}
<meta property="og:description" content={description} />
<meta name="twitter:description" content={description} />
<meta property="og:description" content={description} />
<meta name="twitter:description" content={description} />
{/if}
<meta property="og:type" content={type} />
{#if image}
<meta property="og:image" content={image} />
<meta name="twitter:image" content={image} />
<meta property="og:image" content={image} />
<meta name="twitter:image" content={image} />
{/if}
{#if url}
<meta property="og:url" content={url} />
<meta property="og:url" content={url} />
{/if}
<meta property="twitter:card" content={card} />

5
apps/website/src/components/SmoothScroll.svelte
View File

@@ -1,11 +1,10 @@
<script lang="ts">
import { onMount } from 'svelte'
import Lenis from 'lenis'
import { smoothScroll } from '$utils/stores'
let smoothScrollRAF = 0
let smoothScrollRAF = $state(0)
onMount(() => {
$effect(() => {
// Setup smooth scroll
$smoothScroll = new Lenis({
duration: 1.2,

23
apps/website/src/components/SplitText.svelte
View File

@@ -2,16 +2,23 @@
import { cx } from 'classix'
import { splitText } from 'utils/text'
export let text: string
export let mode: string = undefined
export let clone = false
let {
text,
mode,
clone = false,
...props
}: {
text: string
mode?: string
clone?: boolean
class?: string
} = $props()
$: split = splitText(text, mode)
$: classes = cx(
const split = $derived(splitText(text, mode))
const classes = $derived(cx(
'text-split',
$$props.class,
)
props.class,
))
</script>
{#if clone}

36
apps/website/src/components/atoms/AboutGridPhoto.svelte
View File

@@ -2,20 +2,31 @@
import { cx } from 'classix'
import Image from './Image.svelte'
export let id: string
export let alt: string
export let disabled = false
let {
id,
alt,
disabled = false,
...props
}: {
id: string
alt: string
disabled?: boolean
class?: string
} = $props()
let hovering = false
let timer: ReturnType<typeof setTimeout> | number = null
let hovering = $state(false)
let timer: ReturnType<typeof setTimeout>
$: classes = cx(
const classes = $derived(cx(
hovering ? 'is-hovered' : undefined,
disabled ? 'is-disabled' : undefined,
$$props.class
)
props.class,
))
// Hovering functions
/**
* Hovering functions
*/
const handleMouseEnter = () => {
clearTimeout(timer)
hovering = true
@@ -26,9 +37,10 @@
}
</script>
<figure class={classes}
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
<figure
class={classes}
onmouseenter={handleMouseEnter}
onmouseleave={handleMouseLeave}
>
<Image
{id}

9
apps/website/src/components/atoms/Badge.svelte
View File

@@ -23,8 +23,13 @@
</style>
<script lang="ts">
export let text: string
export let size = 'small'
let {
text,
size = 'small',
}: {
text: string
size?: string
} = $props()
</script>
<div class="badge badge--{size}">

2
apps/website/src/components/atoms/BoxCTA/BoxCTA.scss
View File

@@ -42,7 +42,7 @@
margin-left: 20px;
color: $color-secondary-light;
text-align: left;
font-weight: 300;
font-weight: 400;
@include bp (sm) {
margin-left: 0;

15
apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte
View File

@@ -5,10 +5,17 @@
<script lang="ts">
import Icon from '$components/atoms/Icon.svelte'
export let icon: string
export let alt: string
export let label: string
export let url: string
let {
icon,
alt,
label,
url,
}: {
icon: string
alt: string
label: string
url: string
} = $props()
</script>
<a href={url} class="box-cta">

75
apps/website/src/components/atoms/Button/Button.svelte
View File

@@ -6,56 +6,71 @@
import { cx } from 'classix'
import SplitText from '$components/SplitText.svelte'
export let text: string
export let url: string = undefined
export let color: string = undefined
export let size: 'xsmall' | 'small' | 'medium' | 'large'
export let effect = 'link-3d'
export let disabled: boolean = undefined
export let slotPosition = 'before'
let {
text,
url,
color,
size,
effect = 'link-3d',
disabled,
slotPosition = 'before',
onclick,
children,
...props
}: {
text: string
url?: string
color?: string
size: 'xsmall' | 'small' | 'medium' | 'large'
effect?: string
disabled?: boolean
slotPosition?: 'before' | 'after'
onclick?: any
children?: any
class?: string
} = $props()
let tag: 'a' | 'button'
$: tag = url ? 'a' : 'button'
$: classes = cx(
const tag = $derived(url ? 'a' : 'button')
const classes = $derived(cx(
'button',
effect ? effect : undefined,
effect,
...[color, size].map(variant => variant && `button--${variant}`),
Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
$$props.class,
)
children && `has-icon-${slotPosition}`,
props.class,
))
// Define external links
$: isExternal = /^(http|https):\/\//i.test(url)
$: isProtocol = /^(mailto|tel):/i.test(url)
$: rel = isExternal ? 'external noopener' : null
$: target = isExternal ? '_blank' : null
const isExternal = $derived(/^(http|https):\/\//i.test(url))
const isProtocol = $derived(/^(mailto|tel):/i.test(url))
const rel = $derived(isExternal ? 'external noopener' : null)
const target = $derived(isExternal ? '_blank' : null)
</script>
{#if tag === 'button'}
<button class={classes} tabindex="0" {disabled} on:click>
{#if slotPosition === 'before'}
<slot />
<button class={classes} tabindex="0" {disabled} {onclick}>
{#if children && slotPosition === 'before'}
{@render children()}
{/if}
<SplitText {text} clone={true} />
{#if slotPosition === 'after'}
<slot />
{#if children && slotPosition === 'after'}
{@render children()}
{/if}
</button>
{:else if tag === 'a'}
<a
href={url} class={classes}
href={url}
class={classes}
{target} {rel}
data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
tabindex="0"
on:click
{onclick}
>
{#if slotPosition === 'before'}
<slot />
{#if children && slotPosition === 'before'}
{@render children()}
{/if}
<SplitText {text} clone={true} />
{#if slotPosition === 'after'}
<slot />
{#if children && slotPosition === 'after'}
{@render children()}
{/if}
</a>
{/if}

2
apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte
View File

@@ -18,7 +18,7 @@
</script>
<div class="button-cart">
<ButtonCircle color="purple" on:click={openCart}>
<ButtonCircle color="purple" onclick={openCart}>
<Icon icon="bag" label="Cart icon" />
{#if $cartAmount > 0}
<span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>

76
apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte
View File

@@ -5,42 +5,58 @@
<script lang="ts">
import { cx } from 'classix'
export let tag = 'button'
export let url: string = undefined
export let color: string = undefined
export let size: string = undefined
export let type: 'button' | 'reset' | 'submit' = undefined
export let clone = false
export let disabled: boolean = undefined
export let label: string = undefined
let {
tag = 'button',
url,
color,
size,
type,
clone = false,
disabled,
label,
children,
onclick,
...props
}: {
tag?: string
url?: string
color?: string
size?: string
type?: 'button' | 'reset' | 'submit'
clone?: boolean
disabled?: boolean
label?: string
children?: any
onclick?: any
class?: string
} = $props()
const className = 'button-circle'
$: classes = cx(
className,
...[color, size].map(variant => variant && `${className}--${variant}`),
const buttonClass = 'button-circle'
const classes = $derived(cx(
buttonClass,
...[color, size].map(variant => variant && `${buttonClass}--${variant}`),
clone ? 'has-clone' : null,
$$props.class
)
props.class,
))
</script>
{#snippet content()}
{#if clone}
{#each Array(2) as _}
{@render children()}
{/each}
{:else}
{@render children()}
{/if}
{/snippet}
{#if tag === 'a'}
<a href={url} class={classes} tabindex="0" aria-label={label} on:click>
{#if clone}
{#each Array(2) as _}
<slot />
{/each}
{:else}
<slot />
{/if}
<a href={url} class={classes} tabindex="0" aria-label={label} {onclick}>
{@render content()}
</a>
{:else}
<button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} on:click>
{#if clone}
{#each Array(2) as _}
<slot />
{/each}
{:else}
<slot />
{/if}
<button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} {onclick}>
{@render content()}
</button>
{/if}

17
apps/website/src/components/atoms/Icon.svelte
View File

@@ -1,12 +1,15 @@
<script lang="ts">
import { cx } from 'classix'
export let icon: string
export let label: string = undefined
$: classes = cx($$props.class)
let {
icon,
label,
...props
}: {
icon: string
label?: string
class?: string
} = $props()
</script>
<svg class={classes} aria-label={label} width="32" height="32">
<svg class={props.class} aria-label={label} width="32" height="32">
<use xlink:href="#icon-{icon}" />
</svg>

12
apps/website/src/components/atoms/IconArrow.svelte
View File

@@ -18,11 +18,17 @@
</style>
<script lang="ts">
export let color: string = undefined
export let flip = false
let {
color,
flip = false,
}: {
color?: string
flip?: boolean
} = $props()
</script>
<svg width="12" height="14"
<svg
width="12" height="14"
class="arrow arrow--{color}"
class:arrow--flip={flip}
>

14
apps/website/src/components/atoms/IconEarth.svelte
View File

@@ -9,12 +9,18 @@
<script lang="ts">
import { cx } from 'classix'
export let animate = false
let {
animate = false,
...props
}: {
animate?: boolean
class?: string
} = $props()
$: classes = cx(
const classes = $derived(cx(
'icon-earth',
$$props.class,
)
props.class,
))
</script>
<svg class={classes} width="48" height="48" viewBox="0 0 48 48" fill="none">

53
apps/website/src/components/atoms/Image.svelte
View File

@@ -1,16 +1,31 @@
<script lang="ts">
import { getAssetUrlKey } from '$utils/api'
export let src: string = undefined
export let id: string = undefined
export let sizeKey: string = undefined
export let sizes: Sizes = undefined
export let width: number = sizes?.medium?.width
export let height: number = sizes?.medium?.height
export let ratio: number = undefined
export let alt: string
export let lazy = true
export let decoding: 'auto' | 'sync' | 'async' = 'auto'
let {
src,
id,
sizeKey,
sizes,
width = sizes?.medium?.width,
height = sizes?.medium?.height,
ratio,
alt,
lazy = true,
decoding,
...props
}: {
src?: string
id?: string
sizeKey?: string
sizes?: Sizes
width?: number
height?: number
ratio?: number
alt: string
lazy?: boolean
decoding?: 'auto' | 'sync' | 'async'
class?: string
} = $props()
interface Sizes {
small?: { width?: number; height?: number }
@@ -29,19 +44,19 @@
}
}
$: imgWidth = sizes?.small?.width || width
$: imgHeight = sizes?.small?.height || height
$: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small`) : src
$: srcSet = sizes
? [
const imgWidth = $derived(sizes?.small?.width || width)
const imgHeight = $derived(sizes?.small?.height || height)
const imgSrc = $derived(id ? getAssetUrlKey(id, `${sizeKey}-small`) : src)
const srcSet = $derived(
sizes ? [
`${getAssetUrlKey(id, `${sizeKey}-small`)} 345w`,
sizes.medium && `${getAssetUrlKey(id, `${sizeKey}-medium`)} 768w`,
sizes.large && `${getAssetUrlKey(id, `${sizeKey}-large`)} 1280w`,
]
: [getAssetUrlKey(id, sizeKey)]
] : [getAssetUrlKey(id, sizeKey)]
)
</script>
<picture class={$$props.class}>
<picture class={props.class}>
<img
src={imgSrc}
sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : undefined}
@@ -52,4 +67,4 @@
loading={lazy ? 'lazy' : undefined}
{decoding}
/>
</picture>
</picture>

71
apps/website/src/components/atoms/ScrollingTitle.svelte
View File

@@ -12,39 +12,53 @@
import { map } from 'utils/math'
import reveal from '$animations/reveal'
export let tag: string
export let label: string = undefined
export let parallax: number = undefined
export let offsetStart: number = undefined
export let offsetEnd: number = undefined
export let animate = true
let {
tag,
label,
parallax,
offsetStart,
offsetEnd,
animate = true,
children,
...props
}: {
tag: string
label?: string
parallax?: number
offsetStart?: number
offsetEnd?: number
animate?: boolean
class?: string
children?: any
} = $props()
let scrollY: number
let innerWidth: number
let innerHeight: number
let titleEl: HTMLElement
let isLarger: boolean
// Define default values
$: if (titleEl && !offsetStart && !offsetEnd) {
offsetStart = titleEl.offsetTop - innerHeight * (innerWidth < 768 ? 0.2 : 0.75)
offsetEnd = titleEl.offsetTop + innerHeight * (innerWidth < 768 ? 0.5 : 0.5)
}
let scrollY = $state<number>()
let innerWidth = $state<number>()
let innerHeight = $state<number>()
let titleEl = $state<HTMLElement>()
// Check if title is larger than viewport to translate it
$: isLarger = titleEl && titleEl.offsetWidth >= innerWidth
const isLarger = $derived<boolean>(titleEl && titleEl.offsetWidth >= innerWidth)
// Calculate the parallax value
$: if (titleEl) {
const toTranslate = 100 - (innerWidth / titleEl.offsetWidth * 100)
parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
}
$effect(() => {
// Define default values
if (titleEl && !offsetStart && !offsetEnd) {
offsetStart = titleEl.offsetTop - innerHeight * (innerWidth < 768 ? 0.2 : 0.75)
offsetEnd = titleEl.offsetTop + innerHeight * (innerWidth < 768 ? 0.5 : 0.5)
}
$: classes = cx(
// Calculate the parallax value
if (titleEl) {
const toTranslate = 100 - (innerWidth / titleEl.offsetWidth * 100)
parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
}
})
const classes = $derived(cx(
'scrolling-title',
'title-huge',
$$props.class
)
props.class,
))
const revealOptions = animate ? {
children: '.char',
@@ -65,9 +79,10 @@
<svelte:element this={tag}
bind:this={titleEl}
class={classes} aria-label={label}
class={classes}
aria-label={label}
style:--parallax-x="{parallax}%"
use:reveal={revealOptions}
>
<slot />
{@render children()}
</svelte:element>

9
apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte
View File

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

24
apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte
View File

@@ -12,20 +12,16 @@
import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte'
import Carousel from '$components/organisms/Carousel/Carousel.svelte'
export let product: any
export let shopProduct: any
let {
product,
shopProduct,
}: {
product: any
shopProduct: any
} = $props()
$: hasStock = shopProduct.stock_level > 0
/**
* Preview photos specs
*/
let lastPreviewPhoto: any = undefined
$: if (product && product.photos_preview.length) {
lastPreviewPhoto = product.photos_preview[product.photos_preview.length - 1].directus_files_id
}
const hasStock = $derived(shopProduct.stock_level > 0)
const lastPreviewPhoto = $derived<any>(product?.photos_preview[product.photos_preview.length - 1]?.directus_files_id)
// Images sizes
const photosPreview = [
@@ -82,7 +78,7 @@
text={hasStock ? 'Add to cart' : 'Sold out'}
color="pinklight"
disabled={!hasStock}
on:click={() => addToCart(shopProduct)}
onclick={() => addToCart(shopProduct)}
/>
</div>

38
apps/website/src/components/molecules/CartItem/CartItem.svelte
View File

@@ -3,29 +3,28 @@
</style>
<script lang="ts">
import { createEventDispatcher } from 'svelte'
// Components
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
import Select from '$components/molecules/Select.svelte'
export let item: any
let {
item,
quantityLimit = 5,
onUpdatedQuantity,
onremoved,
}: {
item: any
quantityLimit?: number
onUpdatedQuantity?: any
onremoved?: any
} = $props()
const dispatch = createEventDispatcher()
const quantityLimit = 5
// When changing item quantity
const updateQuantity = ({ detail }: any) => {
dispatch('updatedQuantity', {
/** Handle item quantity change */
const updateQuantity = (value: string) => {
onUpdatedQuantity({
id: item.id,
quantity: Number(detail)
quantity: Number(value)
})
}
// When removing item
const removeItem = () => {
dispatch('removed', item.id)
}
</script>
<div class="cart-item shadow-small">
@@ -50,16 +49,17 @@
selected: index + 1 === item.quantity,
}
})}
on:change={updateQuantity}
onchange={updateQuantity}
value={String(item.quantity)}
>
<span>Quantity:</span>
</Select>
{/if}
<ButtonCircle class="remove"
<ButtonCircle
class="remove"
size="tiny" color="gray"
on:click={removeItem}
onclick={() => onremoved(item.id)}
>
<svg width="8" height="8">
<use xlink:href="#cross" />

22
apps/website/src/components/molecules/EmailForm/EmailForm.svelte
View File

@@ -10,10 +10,10 @@
import IconArrow from '$components/atoms/IconArrow.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
export let past = false
let { past = false }: { past?: boolean } = $props()
let inputInFocus = false
let formStatus: FormStatus = null
let inputInFocus = $state(false)
let formStatus = $state<FormStatus>()
let formMessageTimeout: ReturnType<typeof setTimeout> | number
interface FormStatus {
@@ -27,13 +27,15 @@
INVALID_EMAIL: `Woops. This email doesn't seem to be valid.`,
}
$: isSuccess = formStatus && formStatus.success
const isSuccess = $derived(formStatus && formStatus.success)
// Toggle input focus
const toggleFocus = () => inputInFocus = !inputInFocus
// Handle form submission
async function handleForm (event: Event | HTMLFormElement) {
event.preventDefault()
const data = new FormData(this)
const email = data.get('email')
@@ -61,13 +63,16 @@
<div class="newsletter-form">
{#if !isSuccess}
<form method="POST" action="/api/newsletter" on:submit|preventDefault={handleForm}
<form
method="POST"
action="/api/newsletter"
onsubmit={handleForm}
out:fly|local={{ y: -8, easing: quartOut, duration: 600 }}
>
<div class="email" class:is-focused={inputInFocus}>
<input type="email" placeholder="Your email address" name="email" id="newsletter_email" required
on:focus={toggleFocus}
on:blur={toggleFocus}
onfocus={toggleFocus}
onblur={toggleFocus}
>
<ButtonCircle
type="submit"
@@ -94,7 +99,8 @@
{/if}
{#if formStatus && formStatus.message}
<div class="message shadow-small"
<div
class="message shadow-small"
class:is-error={!isSuccess}
class:is-success={isSuccess}
in:fly|local={{ y: 8, easing: quartOut, duration: 600, delay: isSuccess ? 600 : 0 }}

2
apps/website/src/components/molecules/Heading/Heading.svelte
View File

@@ -5,7 +5,7 @@
<script lang="ts">
import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'
export let text: string
let { text }: { text: string } = $props()
</script>
<section class="heading">

30
apps/website/src/components/molecules/House/House.svelte
View File

@@ -8,15 +8,27 @@
import Image from '$components/atoms/Image.svelte'
import Icon from '$components/atoms/Icon.svelte'
export let url: string
export let photoId: string
export let photoAlt: string
export let title: string
export let index: string
export let ratio: number
export let date: string = undefined
export let city: string = undefined
export let location: string
let {
url,
photoId,
photoAlt,
title,
index,
ratio,
date,
city,
location,
}: {
url: string
photoId: string
photoAlt: string
title: string
index: string
ratio: number
date?: string
city?: string
location: string
} = $props()
</script>
<div class="house grid">

54
apps/website/src/components/molecules/Location/Location.svelte
View File

@@ -3,46 +3,53 @@
</style>
<script lang="ts">
import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
import { getContext } from 'svelte'
import { spring } from 'svelte/motion'
import dayjs from 'dayjs'
import { cx } from 'classix'
import { lerp } from 'utils/math'
import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
import { seenLocations } from '$utils/stores'
// Components
import Image from '$components/atoms/Image.svelte'
import Badge from '$components/atoms/Badge.svelte'
export let location: any
export let latestPhoto: any
let {
location,
latestPhoto,
}: {
location: any
latestPhoto: any
} = $props()
const { settings }: any = getContext('global')
let locationEl: HTMLElement
let photoIndex = 0
let locationEl = $state<HTMLElement>()
let photoIndex = $state(0)
// Location date limit
let isNew = false
let isNew = $state(false)
const dateNowOffset = dayjs().subtract(settings.limit_new, 'day')
const parsedSeenLocations = JSON.parse($seenLocations)
$: if (latestPhoto) {
const dateUpdated = dayjs(latestPhoto.date_created)
$effect(() => {
if (latestPhoto) {
const dateUpdated = dayjs(latestPhoto.date_created)
// Detect if location has new content
const seenLocationDate = dayjs(parsedSeenLocations[location.id])
const isLocationSeen = location.id in parsedSeenLocations
// Detect if location has new content
const seenLocationDate = dayjs(parsedSeenLocations[location.id])
const isLocationSeen = location.id in parsedSeenLocations
// Define if location is has new photos
if (seenLocationDate && isLocationSeen) {
// A more recent photo has been added (if has been seen and has a seen date)
isNew = dateUpdated.isAfter(dateNowOffset) && dateUpdated.isAfter(seenLocationDate)
} else {
// The photo is after the offset
isNew = dateUpdated.isAfter(dateNowOffset)
// Define if location is has new photos
if (seenLocationDate && isLocationSeen) {
// A more recent photo has been added (if has been seen and has a seen date)
isNew = dateUpdated.isAfter(dateNowOffset) && dateUpdated.isAfter(seenLocationDate)
} else {
// The photo is after the offset
isNew = dateUpdated.isAfter(dateNowOffset)
}
}
}
})
/**
@@ -66,7 +73,7 @@
photoIndex = Math.round(lerp(0, Number(PUBLIC_PREVIEW_COUNT) - 1, moveProgress))
}
// Leaving mouseover
/** Leaving mouseover */
const handleMouseLeave = () => {
offset.update($c => ({
x: $c.x,
@@ -80,9 +87,10 @@
style:--offset-y="{$offset.y}px"
style:--rotate="{$offset.x * 0.125}deg"
>
<a href="/{location.country.slug}/{location.slug}"
on:mousemove={handleMouseMove}
on:mouseleave={handleMouseLeave}
<a
href="/{location.country.slug}/{location.slug}"
onmousemove={handleMouseMove}
onmouseleave={handleMouseLeave}
tabindex="0"
>
<Image

21
apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte
View File

@@ -6,12 +6,21 @@
import dayjs from 'dayjs'
import Image from '$components/atoms/Image.svelte'
export let title: string
export let issue: number
export let date: string
export let link: string
export let thumbnail: { id: string }
export let size: string = undefined
let {
title,
issue,
date,
link,
thumbnail,
size,
}: {
title: string
issue: number
date: string
link: string
thumbnail: { id: string }
size?: string
} = $props()
</script>
<div class="issue" class:is-large={size === 'large'}>

18
apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte
View File

@@ -7,9 +7,15 @@
import { quartOut } from 'svelte/easing'
import { cartOpen } from '$utils/stores/shop'
export let title: string
export let name: string
export let image: string
let {
image,
name,
title,
}: {
image: string
name: string
title: string
} = $props()
const closeNotification = () => {
@@ -18,10 +24,10 @@
}
</script>
<div class="notification-cart shadow-small"
<div
class="notification-cart shadow-small"
transition:fly={{ y: 20, duration: 700, easing: quartOut }}
on:click={closeNotification}
on:keydown
onclick={closeNotification}
role="presentation"
>
<div class="left">

23
apps/website/src/components/molecules/Pagination/Pagination.svelte
View File

@@ -3,23 +3,32 @@
</style>
<script lang="ts">
export let ended = false
export let current: number
export let total: number
let {
ended = false,
current,
total,
onclick,
children,
}: {
ended?: boolean
current: number
total: number
onclick?: any
children?: any
} = $props()
</script>
<div
class="pagination"
class:is-disabled={ended ? ended : undefined}
role="button" tabindex="0"
on:click
on:keydown
role="presentation"
{onclick}
>
<div class="pagination__progress">
<span class="current">{current}</span>
<span>/</span>
<span class="total">{total}</span>
<slot />
{@render children()}
</div>
</div>

75
apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte
View File

@@ -3,46 +3,62 @@
</style>
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import Image from '$components/atoms/Image.svelte'
export let id: string
export let alt: string
export let url: string = undefined
export let title: string = undefined
export let location: any = undefined
export let city: string = undefined
export let hovered = false
export let lazy = true
let {
id,
alt,
url,
title,
location,
city,
hovered = false,
lazy = true,
onhover,
}: {
id: string
alt: string
url?: string
title?: string
location?: any
city?: string
hovered?: boolean
lazy?: boolean
onhover?: any
} = $props()
const dispatch = createEventDispatcher()
const sizes = {
small: { width: 224 },
medium: { width: 464 },
large: { width: 864 },
}
const sendHover = (hover: boolean) => dispatch('hover', hover)
</script>
<div class="photo-card"
{#snippet image()}
<Image
{id}
sizeKey="postcard"
{sizes}
ratio={1.5}
{alt}
{lazy}
/>
{/snippet}
<div
class="photo-card"
class:is-hovered={hovered}
on:mouseenter={() => sendHover(true)}
on:focus={() => sendHover(true)}
on:mouseout={() => sendHover(false)}
on:blur={() => sendHover(false)}
onmouseenter={() => onhover(true)}
onfocus={() => onhover(true)}
onmouseout={() => onhover(false)}
onblur={() => onhover(false)}
role="presentation"
>
{#if url}
<div class="photo-card__content">
<a href={url} data-sveltekit-noscroll>
<Image
{id}
sizeKey="postcard"
{sizes}
ratio={1.5}
{alt}
{lazy}
/>
{@render image()}
{#if title && location}
<div class="photo-card__info">
<Image
@@ -58,13 +74,6 @@
</a>
</div>
{:else}
<Image
{id}
sizeKey="postcard"
{sizes}
ratio={1.5}
{alt}
{lazy}
/>
{@render image()}
{/if}
</div>

35
apps/website/src/components/molecules/PostCard/PostCard.svelte
View File

@@ -6,19 +6,30 @@
import { cx } from 'classix'
import Image from '$components/atoms/Image.svelte'
export let street: string
export let location: string
export let region: string = undefined
export let country: string
export let flagId: string
export let size: string = undefined
let {
street,
location,
region,
country,
flagId,
size,
...props
}: {
street: string
location: string
region?: string
country: string
flagId: string
size?: string
class?: string
} = $props()
const className = 'postcard'
$: classes = cx(
className,
...[size].map(variant => variant && `${className}--${variant}`),
$$props.class
)
const cardClass = 'postcard'
const classes = $derived(cx(
cardClass,
...[size].map(variant => variant && `${cardClass}--${variant}`),
props.class,
))
</script>
<div class={classes}>

22
apps/website/src/components/molecules/Poster/Poster.svelte
View File

@@ -9,15 +9,23 @@
import Button from '$components/atoms/Button/Button.svelte'
import Image from '$components/atoms/Image.svelte'
export let product: any
export let location: { name: string, slug: string }
export let image: any
let {
product,
location,
image,
}: {
product: any
location: { name: string, slug: string }
image: any
} = $props()
</script>
<div class="poster">
{#if image}
<a href="/shop/poster-{location.slug}" data-sveltekit-noscroll
on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
<a
href="/shop/poster-{location.slug}"
onclick={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
data-sveltekit-noscroll
>
<Image
id={image.id}
@@ -37,13 +45,13 @@
size="xsmall"
url="/shop/poster-{location.slug}"
text="View"
on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
onclick={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
/>
<Button
size="xsmall"
text="Add to cart"
color="pink"
on:click={() => addToCart(product)}
onclick={() => addToCart(product)}
/>
</div>
</div>

64
apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte
View File

@@ -4,45 +4,53 @@
<script lang="ts">
import { scaleFade } from '$animations/transitions'
// Components
import Image from '$components/atoms/Image.svelte'
import { getAssetUrlKey } from '$utils/api'
export let index: number
export let text: string
export let image: any = undefined
export let video: any = undefined
let {
index,
text,
image,
video,
}: {
index: number
text: string
image?: any
video?: any
} = $props()
const imageRatio = image ? image.width / image.height : undefined
const imageRatio = $derived(image ? image.width / image.height : undefined)
</script>
<div class="step grid" style:--index={index}
<div
class="step grid"
style:--index={index}
in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
>
{#if image || video}
<div class="media">
{#if image}
<Image
class="image shadow-box-dark"
id={image.id}
sizeKey="product"
sizes={{
small: { width: 400 },
medium: { width: 600 },
}}
ratio={imageRatio}
alt={image.title}
/>
{:else if video && video.mp4 && video.webm}
<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" />
</video>
{/if}
</div>
<div class="media">
{#if image}
<Image
class="image shadow-box-dark"
id={image.id}
sizeKey="product"
sizes={{
small: { width: 400 },
medium: { width: 600 },
}}
ratio={imageRatio}
alt={image.title}
/>
{:else if video && video.mp4 && video.webm}
<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" />
</video>
{/if}
</div>
{/if}
<div class="text text-xsmall">

52
apps/website/src/components/molecules/Select.svelte
View File

@@ -1,28 +1,36 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
interface Option {
value: string
let {
id,
name,
options,
value,
onchange,
children,
}: {
id: string
name: string
default?: boolean
selected?: boolean
}
options: {
value: string
name: string
default?: boolean
selected?: boolean
}[]
value?: string
onchange?: any
children?: any
} = $props()
export let id: string
export let name: string
export let options: Option[]
export let value: string = undefined
const dispatch = createEventDispatcher()
const defaultOption = options.find(option => option.default)
let selected = value || options[0].value
$: currentOption = options.find(option => option.value === selected)
let selected = $state(value || options[0].value)
const currentOption = $derived(options.find(option => option.value === selected))
// Redefine value from parent (when reset)
$: if (value === defaultOption.value) {
selected = defaultOption.value
}
$effect(() => {
if (value === defaultOption.value) {
selected = defaultOption.value
}
})
/**
@@ -31,17 +39,17 @@
const handleChange = ({ target: { value } }: any) => {
const option = options.find(option => option.value === value)
// Dispatch event to parent
dispatch('change', option.value)
// Send value to parent
onchange(option.value)
}
</script>
<div class="select">
<slot />
{@render children()}
<span>{currentOption.name}</span>
<select {name} {id} bind:value={selected} on:change={handleChange}>
<select {name} {id} bind:value={selected} onchange={handleChange}>
{#each options as { value, name }}
<option {value} selected={value === selected}>
{name}

20
apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte
View File

@@ -9,18 +9,26 @@
import { shopCurrentProductSlug } from '$utils/stores/shop'
import { smoothScroll } from '$utils/stores'
export let isOver = false
let {
isOver = false,
...props
}: {
isOver?: boolean
class?: string
} = $props()
const { shopLocations }: any = getContext('shop')
const classes = cx(
const classes = $derived(cx(
'shop-locationswitcher',
isOver && 'is-over',
$$props.class
)
props.class,
))
// Quick location change
/**
* Quick location change
*/
const quickLocationChange = async ({ target: { value } }: any) => {
const pathTo = `/shop/poster-${value}`
goto(pathTo, { replaceState: true, noScroll: true, keepFocus: true })
@@ -37,7 +45,7 @@
<svg width="18" height="18">
<use xlink:href="#icon-map-pin" />
</svg>
<select on:change={quickLocationChange}>
<select onchange={quickLocationChange}>
{#each shopLocations as { name, slug }}
<option value={slug} selected={slug === $shopCurrentProductSlug}>{name}</option>
{/each}

21
apps/website/src/components/molecules/Switcher/Switcher.svelte
View File

@@ -12,8 +12,8 @@
const { settings: { switcher_links } }: any = getContext('global')
let switcherEl: HTMLElement
let isOpen = false
let switcherEl = $state<HTMLElement>()
let isOpen = $state(false)
/**
@@ -37,9 +37,11 @@
}
</script>
<svelte:window on:click={windowClick} />
<svelte:window onclick={windowClick} />
<aside class="switcher" bind:this={switcherEl}
<aside
bind:this={switcherEl}
class="switcher"
class:is-open={isOpen}
use:reveal={{
animation: { y: [24, 0], opacity: [0, 1] },
@@ -50,12 +52,15 @@
},
}}
>
<button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
on:click={toggleSwitcher}
<button
class="switcher__button"
title="{!isOpen ? 'Open' : 'Close'} menu"
tabindex="0"
onclick={toggleSwitcher}
>
<span>
{#each Array(3) as _}
<i />
<i></i>
{/each}
</span>
</button>
@@ -63,7 +68,7 @@
<ul class="switcher__links" data-sveltekit-noscroll>
{#each switcher_links as { text, url, icon, icon_label }}
<li class:is-active={$page.url.pathname === url}>
<a href={url} on:click={toggleSwitcher} tabindex="0">
<a href={url} onclick={toggleSwitcher} tabindex="0">
<Icon class="icon" icon={icon} label={icon_label} />
<span>{text}</span>
</a>

55
apps/website/src/components/molecules/Toast/Toast.svelte
View File

@@ -3,7 +3,6 @@
</style>
<script lang="ts">
import { onMount } from 'svelte'
import { fade, fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { browser } from '$app/environment'
@@ -12,25 +11,33 @@
import Button from '$components/atoms/Button/Button.svelte'
import Image from '$components/atoms/Image.svelte'
export let id: string
export let type: 'global' | 'local'
export let text: string
export let cta: {
label: string
url: string
color: string
} = undefined
export let images: { id: string, title: string }[] = undefined
export let show = false
$: if (browser) {
show = !localStorage.getItem(`toast-${id}`)
}
let {
id,
type,
text,
cta,
images,
show = false,
loopDuration = 3000,
...props
}: {
id: string
type: 'global' | 'local'
text: string
cta?: {
label: string
url: string
color: string
}
images?: { id: string, title: string }[]
show?: boolean
loopDuration?: number
class?: string
} = $props()
// Image rotation
let imagesLoop: ReturnType<typeof setTimeout>
let currentImageIndex = 0
const loopDuration = 3000
let currentImageIndex = $state(0)
const incrementCurrentImageIndex = () => {
currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
@@ -43,15 +50,19 @@
show = false
}
$: classes = cx(
const classes = $derived(cx(
'toast',
`toast--${type}`,
'shadow-small',
$$props.class,
)
props.class,
))
onMount(() => {
$effect(() => {
if (browser) {
show = !localStorage.getItem(`toast-${id}`)
}
if (images.length > 1) {
imagesLoop = setTimeout(incrementCurrentImageIndex, loopDuration)
}
@@ -103,7 +114,7 @@
{/if}
</div>
<button class="close" on:click={close} title="Close">
<button class="close" onclick={close} title="Close">
<svg width="10" height="10">
<use xlink:href="#cross" />
</svg>

12
apps/website/src/components/organisms/Banner/Banner.svelte
View File

@@ -6,9 +6,15 @@
// Components
import Image from '$components/atoms/Image.svelte'
export let title: string
export let image: any
export let back = false
let {
title,
image,
back = false,
}: {
title: string
image: any
back?: boolean
} = $props()
</script>
<section class="banner">

41
apps/website/src/components/organisms/Carousel/Carousel.svelte
View File

@@ -3,20 +3,27 @@
</style>
<script lang="ts">
import { onMount } from 'svelte'
import { writable } from 'svelte/store'
import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
import cx from 'classix'
// Components
import Image from '$components/atoms/Image.svelte'
export let slides: any
let {
slides,
...props
}: {
slides: any[]
class?: string
} = $props()
let carouselEl: HTMLElement
let carouselEl = $state<HTMLElement>()
let carousel: EmblaCarouselType
let currentSlide = 0
let arrowDirection: string = null
$: isFirstSlide = currentSlide === 0
$: isLastSlide = currentSlide === slides.length - 1
let currentSlide = $state(0)
let arrowDirection = $state<'next' | 'prev'>()
const isFirstSlide = $derived(currentSlide === 0)
const isLastSlide = $derived(currentSlide === slides.length - 1)
/** Navigate to specific slide */
@@ -65,7 +72,7 @@
}
onMount(() => {
$effect(() => {
// Init carousel
carousel = EmblaCarousel(carouselEl, {
loop: false
@@ -82,12 +89,13 @@
})
</script>
<div class="carousel {$$props.class ?? ''}">
<div class={cx('carousel', props.class)}>
{#if slides.length}
<div class="carousel__viewport" bind:this={carouselEl}
on:mousemove={handleArrowMove}
on:click={handleArrowClick}
on:keydown
<div
bind:this={carouselEl}
class="carousel__viewport"
onmousemove={handleArrowMove}
onclick={handleArrowClick}
role="presentation"
>
<div class="carousel__slides">
@@ -111,15 +119,16 @@
<ul class="carousel__dots">
{#each slides as _, index}
<li class:is-active={index === currentSlide}>
<button on:click={() => goToSlide(index)} aria-label="Go to slide #{index + 1}" />
<button onclick={() => goToSlide(index)} aria-label="Go to slide #{index + 1}"></button>
</li>
{/each}
</ul>
<span class="carousel__arrow"
<span
class="carousel__arrow"
class:is-flipped={arrowDirection === 'prev' && !isFirstSlide || isLastSlide}
style:--x="{$arrowPosition.x}px"
style:--y="{$arrowPosition.y}px"
class:is-flipped={arrowDirection === 'prev' && !isFirstSlide || isLastSlide}
>
<svg width="29" height="32">
<use xlink:href="#arrow" />

60
apps/website/src/components/organisms/Cart/Cart.svelte
View File

@@ -3,8 +3,6 @@
</style>
<script lang="ts">
import { browser } from '$app/environment'
import { onMount } from 'svelte'
import { fade, fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { smoothScroll } from '$utils/stores'
@@ -18,24 +16,12 @@
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'
// Block scroll if cart is open
$: if (browser && $smoothScroll) {
if ($cartOpen) {
$smoothScroll.stop()
} else {
$smoothScroll.start()
}
document.documentElement.classList.toggle('block-scroll', $cartOpen)
}
// Closing the cart
/** Closing the cart */
const handleCloseCart = () => {
$cartOpen = false
}
// Item quantity changed
/** Item quantity changed */
const changedQuantity = async ({ detail: { id, quantity } }) => {
// Cart is now updating
$cartIsUpdating = true
@@ -50,7 +36,7 @@
}
}
// Item removed
/** Item removed */
const removedItem = async ({ detail: id }) => {
// Cart is now updating
$cartIsUpdating = true
@@ -66,15 +52,27 @@
}
onMount(async () => {
$effect(() => {
// Init Swell
initSwell()
// Fetch cart
const cart = await getCart()
if (cart) {
getCart().then(cart => {
// Store cart data
$cartData = cart
if (cart) {
$cartData = cart
}
})
// Block scroll if cart is open
if ($smoothScroll) {
if ($cartOpen) {
$smoothScroll.stop()
} else {
$smoothScroll.start()
}
document.documentElement.classList.toggle('block-scroll', $cartOpen)
}
})
</script>
@@ -84,21 +82,22 @@
<ShopLocationSwitcher isOver={true} />
</div>
<aside class="cart shadow-box-dark"
<aside
class="cart shadow-box-dark"
class:is-updating={$cartIsUpdating}
transition:fly={{ x: 48, duration: 600, easing: quartOut }}
>
<header class="cart__heading">
<h2>Cart</h2>
<button class="text-label" on:click={handleCloseCart}>Close</button>
<button class="text-label" onclick={handleCloseCart}>Close</button>
</header>
<div class="cart__content">
{#if $cartAmount > 0}
{#each $cartData.items as item}
<CartItem {item}
on:updatedQuantity={changedQuantity}
on:removed={removedItem}
onUpdatedQuantity={changedQuantity}
onremoved={removedItem}
/>
{/each}
{:else}
@@ -140,7 +139,7 @@
url={$cartData && $cartData.checkout_url}
text="Checkout"
color="pink"
on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
onclick={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
/>
</div>
{/if}
@@ -148,9 +147,10 @@
</footer>
</aside>
<div class="cart-overlay"
<div
class="cart-overlay"
transition:fade={{ duration: 600, easing: quartOut }}
on:click={handleCloseCart}
on:keydown
/>
onclick={handleCloseCart}
role="presentation"
></div>
{/if}

6
apps/website/src/components/organisms/Collage/Collage.svelte
View File

@@ -5,9 +5,9 @@
<script lang="ts">
import PhotoCard from '$components/molecules/PhotoCard/PhotoCard.svelte'
export let photos: any[] = []
let { photos }: { photos: any[] } = $props()
let hovered: number = null
let hovered = $state<number>(null)
</script>
{#if photos}
@@ -22,7 +22,7 @@
city={city}
hovered={hovered === index}
lazy={false}
on:hover={({ detail }) => hovered = detail ? index : null}
onhover={(id: number) => hovered = id ? index : null}
/>
{/each}
</div>

77
apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte
View File

@@ -3,7 +3,7 @@
</style>
<script lang="ts">
import { getContext, onMount } from 'svelte'
import { getContext } from 'svelte'
import { fade, fly as flySvelte } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { Globe, type Marker } from '$modules/globe'
@@ -15,20 +15,31 @@
const isDev = import.meta.env.DEV
export let type: string = undefined
export let autoRotate = true
export let enableMarkers = true
export let enableMarkersLinks = true
export let speed = 0.1
export let pane: boolean = isDev
export let width: number = undefined
let {
type,
autoRotate = true,
enableMarkers = true,
enableMarkersLinks = true,
speed = 0.1,
pane = isDev,
width,
}: {
type?: string
autoRotate?: boolean
enableMarkers?: boolean
enableMarkersLinks?: boolean
speed?: number
pane?: boolean
width?: number
} = $props()
let innerWidth: number
let globeParentEl: HTMLElement, globeEl: HTMLElement
let globe: any
let innerWidth = $state<number>()
let globeParentEl = $state<HTMLElement>()
let globeEl = $state<HTMLElement>()
let globe = $state<any>()
let observer: IntersectionObserver
let animation: number
let hoveredMarker: { name: string, country: string } = null
let animation = $state<number>()
let hoveredMarker: { name: string, country: string } = $state()
const { continents, locations }: any = getContext('global')
const randomContinent: any = getRandomItem(continents)
@@ -41,7 +52,7 @@
}))
onMount(() => {
$effect(() => {
const globeResolution = innerWidth > 1440 && window.devicePixelRatio > 1 ? 4 : 2
globe = new Globe({
@@ -92,51 +103,56 @@
})
/**
* Methods
*/
// Update
/** Update rendering */
const update = () => {
animation = requestAnimationFrame(update)
globe.render()
}
// Stop
/** Stop rendering */
const stop = () => {
cancelAnimationFrame(animation)
}
// Resize
/** Handle resize */
const resize = debounce(() => {
globe.resize()
}, 100)
// Destroy
/** Destroy globe */
const destroy = () => {
stop()
globe.destroy()
}
</script>
<svelte:window bind:innerWidth
on:resize={resize}
<svelte:window
bind:innerWidth
onresize={resize}
/>
<div class="globe" bind:this={globeParentEl}
<div
bind:this={globeParentEl}
class="globe"
class:is-cropped={type === 'cropped'}
style:--width={width ? `${width}px` : null}
>
<div class="globe__canvas" bind:this={globeEl}
<div
bind:this={globeEl}
class="globe__canvas"
class:is-faded={hoveredMarker}
>
<ul class="globe__markers">
{#each markers as { name, slug, country, lat, lng }}
<li class="globe__marker" data-location={slug} data-lat={lat} data-lng={lng}>
<a href="/{country.slug}/{slug}" aria-label={name} data-sveltekit-noscroll
on:mouseenter={() => hoveredMarker = { name, country: country.name }}
on:mouseleave={() => hoveredMarker = null}
<a
href="/{country.slug}/{slug}"
aria-label={name}
data-sveltekit-noscroll
onmouseenter={() => hoveredMarker = { name, country: country.name }}
onmouseleave={() => hoveredMarker = null}
>
<i />
<i></i>
<span>{name}</span>
</a>
</li>
@@ -145,7 +161,8 @@
</div>
{#if hoveredMarker}
<div class="globe__location"
<div
class="globe__location"
in:revealSplit={{ duration: 1 }}
out:fade={{ duration: 300, easing: quartOut }}
>

6
apps/website/src/components/organisms/ListCTAs.svelte
View File

@@ -19,6 +19,10 @@
}
</style>
<script lang="ts">
let { children }: { children: any } = $props()
</script>
<ul class="list-cta" data-sveltekit-noscroll>
<slot />
{@render children()}
</ul>

36
apps/website/src/components/organisms/Locations/Locations.svelte
View File

@@ -14,29 +14,32 @@
import Button from '$components/atoms/Button/Button.svelte'
import Location from '$components/molecules/Location/Location.svelte'
export let locations: any[]
let { locations }: { locations: any[] } = $props()
const { continents, settings: { explore_list } }: any = getContext('global')
// Continents filtering logic
let currentContinent: string = undefined
$: filteredLocations = locations.filter(({ country: { continent } }: any) => {
if (!currentContinent) {
// Show all locations by default
return true
} else {
// Location's continent matches the clicked continent
return continent.slug === currentContinent
}
/**
* Continents filtering logic
*/
let currentContinent = $state<string>()
const filteredLocations = $derived.by(() => {
return locations.filter(({ country: { continent } }: any) => {
if (!currentContinent) {
// Show all locations by default
return true
} else {
// Location's continent matches the clicked continent
return continent.slug === currentContinent
}
})
})
/**
* Filter locations from continent
*/
/* Filter locations from continent */
const filterLocation = throttle((continent: string) => {
currentContinent = continent !== currentContinent ? continent : null
sendEvent('filterContinent')
}, 600)
</script>
@@ -53,10 +56,7 @@
text={name}
slotPosition="after"
class={'is-disabled'}
on:click={() => {
filterLocation(slug)
sendEvent('filterContinent')
}}
onclick={() => filterLocation(slug)}
>
<svg width="12" height="12">
<use xlink:href="#cross" />

2
apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte
View File

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

24
apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
View File

@@ -3,19 +3,23 @@
</style>
<script lang="ts">
import { getContext, onMount } from 'svelte'
import { getContext } from 'svelte'
import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
// Components
import Poster from '$components/molecules/Poster/Poster.svelte'
import { debounce } from 'utils/actions'
export let posters: any = []
let {
posters,
}: {
posters: any[]
} = $props()
let innerWidth: number
let carouselEl: HTMLElement
let carousel: EmblaCarouselType
let currentSlide = 0
let carouselDots = []
let innerWidth = $state<number>()
let carouselEl = $state<HTMLElement>()
let carousel = $state<EmblaCarouselType>()
let currentSlide = $state(0)
let carouselDots = $state([])
const { shopProducts }: any = getContext('shop')
@@ -72,7 +76,7 @@
const handleResize = debounce(initCarousel, 200)
onMount(() => {
$effect(() => {
if (innerWidth < 1200) {
initCarousel()
}
@@ -88,7 +92,7 @@
<svelte:window
bind:innerWidth
on:resize={handleResize}
onresize={handleResize}
/>
<section class="shop-page__posters grid">
@@ -110,7 +114,7 @@
<ul class="set__dots">
{#each carouselDots as _, index}
<li class:is-active={index === currentSlide}>
<button on:click={() => goToSlide(index)} aria-label="Go to slide #{index + 1}" />
<button onclick={() => goToSlide(index)} aria-label="Go to slide #{index + 1}"></button>
</li>
{/each}
</ul>

20
apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte
View File

@@ -4,7 +4,7 @@
<script lang="ts">
import { navigating } from '$app/stores'
import { getContext, onMount } from 'svelte'
import { getContext } from 'svelte'
import { stagger, timeline } from 'motion'
import { smoothScroll } from '$utils/stores'
import { cartOpen } from '$utils/stores/shop'
@@ -15,17 +15,18 @@
import ButtonCart from '$components/atoms/ButtonCart/ButtonCart.svelte'
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte'
export let product: any = undefined
let { product }: { product?: any } = $props()
const { shop, shopLocations }: any = getContext('shop')
let innerWidth: number
let innerWidth = $state<number>()
let navObserver: IntersectionObserver
let introEl: HTMLElement, navChooseEl: HTMLElement
let scrolledPastIntro = false
let introEl = $state<HTMLElement>()
let navChooseEl = $state<HTMLElement>()
let scrolledPastIntro = $state(false)
onMount(() => {
$effect(() => {
// Reveal the nav past the Intro
navObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
@@ -111,7 +112,7 @@
<section class="shop-banner" bind:this={introEl}>
<div class="top container">
<a href="/" class="back" data-sveltekit-noscroll>
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="5" height="8" viewBox="0 0 5 8" fill="none">
<path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Back to Houses Of</span>
@@ -129,7 +130,7 @@
<ul bind:this={navChooseEl} data-sveltekit-noscroll>
{#each shopLocations as { name, slug }}
<li class:is-active={product && slug === product.location.slug}>
<a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>
<a href="/shop/poster-{slug}" onclick={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>
{name}
</a>
</li>
@@ -155,7 +156,8 @@
/>
</section>
<nav class="shop-quicknav"
<nav
class="shop-quicknav"
class:is-visible={scrolledPastIntro}
class:is-overlaid={$cartOpen}
>

61
apps/website/src/components/organisms/ShopModule/ShopModule.svelte
View File

@@ -3,7 +3,7 @@
</style>
<script lang="ts">
import { getContext, onMount } from 'svelte'
import { getContext } from 'svelte'
// Components
import Button from '$components/atoms/Button/Button.svelte'
import Image from '$components/atoms/Image.svelte'
@@ -17,13 +17,25 @@
// Return name only
.map((loc: Location) => loc.name)
export let images: any[] = shop.module_images
export let title: string = shop.module_title
export let text: string = shop.module_text
export let textBottom: string = undefined
export let buttonText = 'Shop'
export let url = '/shop'
export let enabled = true
let {
images = shop.module_images,
title = shop.module_title,
text = shop.module_text,
textBottom,
buttonText = 'Shop',
url = '/shop',
enabled = true,
loopDuration = 3000,
}: {
images?: any[]
title?: string
text?: string
textBottom?: string
buttonText?: string
url?: string
enabled?: boolean
loopDuration?: number
} = $props()
if (textBottom !== null) {
textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`
@@ -37,15 +49,14 @@
// Image rotation
let imagesLoop: ReturnType<typeof setTimeout>
let currentImageIndex = 0
const loopDuration = 3000
let currentImageIndex = $state(0)
const incrementCurrentImageIndex = () => {
currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), loopDuration)
}
onMount(() => {
$effect(() => {
if (images.length > 1) {
imagesLoop = setTimeout(incrementCurrentImageIndex, loopDuration)
}
@@ -63,20 +74,20 @@
<div class="content">
<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}
<Image
class={index === currentImageIndex ? 'is-visible' : null}
{id}
sizeKey="square"
sizes={{
small: { width: 400, height: 400 },
large: { width: 800, height: 800 },
}}
alt={title}
/>
{/each}
</a>
<a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll>
{#each images as { directus_files_id: { id, title } }, index}
<Image
class={index === currentImageIndex ? 'is-visible' : null}
{id}
sizeKey="square"
sizes={{
small: { width: 400, height: 400 },
large: { width: 800, height: 800 },
}}
alt={title}
/>
{/each}
</a>
{/if}
</div>