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

2
apps/website/package.json
View File

@@ -45,7 +45,7 @@
"postcss-preset-env": "^9.6.0",
"postcss-sort-media-queries": "^5.2.0",
"sass": "^1.77.8",
"svelte": "^4.2.18",
"svelte": "^5.0.0-next.205",
"svelte-check": "^3.8.5",
"svelte-preprocess": "^6.0.2",
"tslib": "^2.6.3",

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>

24
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>

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>

68
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>
{#if tag === 'a'}
<a href={url} class={classes} tabindex="0" aria-label={label} on:click>
{#snippet content()}
{#if clone}
{#each Array(2) as _}
<slot />
{@render children()}
{/each}
{:else}
<slot />
{@render children()}
{/if}
{/snippet}
{#if tag === 'a'}
<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">

51
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}

57
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
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
const isLarger = $derived<boolean>(titleEl && titleEl.offsetWidth >= innerWidth)
$effect(() => {
// Define default values
$: if (titleEl && !offsetStart && !offsetEnd) {
if (titleEl && !offsetStart && !offsetEnd) {
offsetStart = titleEl.offsetTop - innerHeight * (innerWidth < 768 ? 0.2 : 0.75)
offsetEnd = titleEl.offsetTop + innerHeight * (innerWidth < 768 ? 0.5 : 0.5)
}
// Check if title is larger than viewport to translate it
$: isLarger = titleEl && titleEl.offsetWidth >= innerWidth
// Calculate the parallax value
$: if (titleEl) {
if (titleEl) {
const toTranslate = 100 - (innerWidth / titleEl.offsetWidth * 100)
parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
}
})
$: classes = cx(
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">

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

@@ -3,31 +3,37 @@
</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) {
$effect(() => {
if (latestPhoto) {
const dateUpdated = dayjs(latestPhoto.date_created)
// Detect if location has new content
@@ -43,6 +49,7 @@
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>

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

@@ -3,38 +3,38 @@
</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"
class:is-hovered={hovered}
on:mouseenter={() => sendHover(true)}
on:focus={() => sendHover(true)}
on:mouseout={() => sendHover(false)}
on:blur={() => sendHover(false)}
>
{#if url}
<div class="photo-card__content">
<a href={url} data-sveltekit-noscroll>
{#snippet image()}
<Image
{id}
sizeKey="postcard"
@@ -43,6 +43,22 @@
{alt}
{lazy}
/>
{/snippet}
<div
class="photo-card"
class:is-hovered={hovered}
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>
{@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>

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

@@ -4,20 +4,28 @@
<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] }}
>

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

@@ -1,28 +1,36 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
interface Option {
let {
id,
name,
options,
value,
onchange,
children,
}: {
id: string
name: string
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) {
$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>

47
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: {
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
} = undefined
export let images: { id: string, title: string }[] = undefined
export let show = false
$: if (browser) {
show = !localStorage.getItem(`toast-${id}`)
}
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" />

58
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,17 +52,29 @@
}
onMount(async () => {
$effect(() => {
// Init Swell
initSwell()
// Fetch cart
const cart = await getCart()
if (cart) {
getCart().then(cart => {
// Store cart data
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>
{#if $cartOpen}
@@ -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>

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

@@ -14,14 +14,17 @@
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) => {
/**
* 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
@@ -30,13 +33,13 @@
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}
>

33
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)
}

15
apps/website/src/routes/(shop)/shop/+layout.svelte
View File

@@ -9,11 +9,14 @@
import Cart from '$components/organisms/Cart/Cart.svelte'
import NotificationCart from '$components/molecules/NotificationCart/NotificationCart.svelte'
export let data
let {
data,
children,
} = $props()
const { shop, locations, posters, shopProducts, settings } = data
let scrollY: number
let scrollY = $state<number>()
// Locations with an existing poster product
const shopLocations = locations.filter(({ slug }: any) => {
@@ -38,12 +41,8 @@
<div class="notifications" class:is-top={scrollY <= 100}>
{#each $cartNotifications as { id, title, name, image } (id)}
<NotificationCart
title={title}
name={name}
image={image}
/>
<NotificationCart {title} {name} {image} />
{/each}
</div>
<slot />
{@render children()}

2
apps/website/src/routes/(shop)/shop/+page.svelte
View File

@@ -8,7 +8,7 @@
import ShopHeader from '$components/organisms/ShopBanner/ShopBanner.svelte'
import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'
export let data
let { data } = $props()
const { product, shopProduct }: { product: any, shopProduct: any } = data
const { posters, settings }: any = getContext('shop')

2
apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte
View File

@@ -9,7 +9,7 @@
import PostersGrid from '$components/organisms/PostersGrid/PostersGrid.svelte'
import PosterLayout from '$components/layouts/PosterLayout/PosterLayout.svelte'
export let data
let { data } = $props()
const { posters }: any = getContext('shop')

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

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

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

@@ -3,10 +3,9 @@
</style>
<script lang="ts">
import { browser } from '$app/environment'
import { page, navigating } from '$app/stores'
import { goto } from '$app/navigation'
import { onMount, tick } from 'svelte'
import { goto, replaceState } from '$app/navigation'
import { tick } from 'svelte'
import { fade, scale } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import dayjs from 'dayjs'
@@ -24,70 +23,74 @@
import IconArrow from '$components/atoms/IconArrow.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
export let data
let { photos, currentIndex }: { photos: any[], currentIndex: number } = data
let { data } = $props()
const { location, countPhotos, limit, offset }: { location: any, countPhotos: number, limit: number, offset: number } = data
enum directions { PREV, NEXT }
let innerWidth: number
let fullscreenEl: HTMLElement
let globalOffset = offset
let isLoading = false
let isFullscreen = false
let hasNext = offset + limit < countPhotos
let hasPrev = offset > 0
let innerWidth = $state<number>()
let fullscreenEl = $state<HTMLElement>()
let photos = $state<any[]>(data.photos)
let currentIndex = $state(data.currentIndex)
let globalOffset = $state(offset)
let isLoading = $state(false)
let isFullscreen = $state(false)
let hasNext = $state(offset + limit < countPhotos)
let hasPrev = $state(offset > 0)
// Define if we can navigate depending on loading state, existing photos and index being first or last
$: canGoPrev = !isLoading && (hasNext || currentIndex !== photos.length - 1)
$: canGoNext = !isLoading && (hasPrev || currentIndex !== 0)
const canGoPrev = $derived(!isLoading && (hasNext || currentIndex !== photos.length - 1))
const canGoNext = $derived(!isLoading && (hasPrev || currentIndex !== 0))
// Define current photo
$: currentPhoto = photos[currentIndex]
$: currentPhotoIndex = globalOffset + currentIndex + 1
const currentPhoto = $derived(photos[currentIndex])
const currentPhotoIndex = $derived(globalOffset + currentIndex + 1)
// Take 7 photos in the global photos array (5 for current, 1 before first and 1 after last)
// Start one index before the current image since the first one will be invisible
$: sliceStart = Math.max(currentIndex - 1, 0)
$: visiblePhotos = photos.slice(sliceStart, sliceStart + 7)
const sliceStart = $derived(Math.max(currentIndex - 1, 0))
const visiblePhotos = $derived(photos.slice(sliceStart, sliceStart + 7))
$effect(() => {
// Load previous photos
$: if (browser && currentIndex === 0 && hasPrev) {
if (currentIndex === 0 && hasPrev) {
loadPhotos(photos[0].id)
}
// Load next photos
$: if (browser && currentIndex === photos.length - 5 && hasNext) {
if (currentIndex === photos.length - 5 && hasNext) {
loadPhotos(photos[photos.length - 1].id, directions.NEXT)
}
// Change URL to current photo slug
$: if (browser && currentPhoto) {
window.history.replaceState(null, '', $page.url.pathname.replace($page.params.photo, currentPhoto.slug))
if (currentPhoto) {
replaceState('', $page.url.pathname.replace($page.params.photo, currentPhoto.slug))
}
})
// Define previous URL
$: previousUrl = $previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`
const previousUrl = $derived($previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`)
/**
* Photo navigation
*/
// Go to next photo
/** Go to next photo */
const goToNext = throttle(() => {
canGoPrev && currentIndex++
}, 200)
// Go to previous photo
/** Go to previous photo */
const goToPrevious = throttle(() => {
canGoNext && (currentIndex = Math.max(currentIndex - 1, 0))
}, 200)
// Close viewer and go to previous page
/** Close viewer and go to previous page */
const closeViewer = () => {
goto(previousUrl, { replaceState: false, noScroll: true, keepFocus: true })
}
// Enable navigation with keyboard
/** Enable navigation with keyboard */
const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
if (defaultPrevented) return
switch (key) {
@@ -98,7 +101,7 @@
}
}
// Enable swipe gestures
/** Enable swipe gestures */
const handleSwipe = ({ detail }: CustomEvent<string>) => {
// Swipe up and down on mobile/small screens
if (innerWidth < 992) {
@@ -214,7 +217,7 @@
}
onMount(() => {
$effect(() => {
/**
* Animations
*/
@@ -289,7 +292,7 @@
})
</script>
<svelte:window bind:innerWidth on:keydown={handleKeydown} />
<svelte:window bind:innerWidth onkeydown={handleKeydown} />
{#if currentPhoto}
<Metas
@@ -317,10 +320,11 @@
</ButtonCircle>
<div class="photo-page__carousel">
<div class="photo-page__images"
<div
use:swipe
on:swipe={handleSwipe}
on:tap={toggleFullscreen}
class="photo-page__images"
onswipe={handleSwipe}
ontap={toggleFullscreen}
>
{#each visiblePhotos as { id, image, title }, index (id)}
<div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
@@ -340,10 +344,10 @@
{/each}
<div class="photo-page__controls">
<ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
<ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} onclick={goToPrevious}>
<IconArrow color="pink" flip={true} />
</ButtonCircle>
<ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} on:click={goToNext}>
<ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} onclick={goToNext}>
<IconArrow color="pink" />
</ButtonCircle>
</div>
@@ -378,10 +382,13 @@
</div>
{#if isFullscreen}
<div class="photo-page__fullscreen" bind:this={fullscreenEl}
on:click={toggleFullscreen} on:keydown
<div
bind:this={fullscreenEl}
class="photo-page__fullscreen"
onclick={toggleFullscreen}
in:fade={{ easing: quartOut, duration: 1000 }}
out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
role="presentation"
>
<div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
<Image

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

@@ -4,7 +4,6 @@
<script lang="ts">
import { navigating } from '$app/stores'
import { onMount, afterUpdate } from 'svelte'
import { quartOut as quartOutSvelte } from 'svelte/easing'
import { fade, fly } from 'svelte/transition'
import { animate, inView, stagger, timeline } from 'motion'
@@ -22,23 +21,30 @@
import ProcessStep from '$components/molecules/ProcessStep/ProcessStep.svelte'
import Banner from '$components/organisms/Banner/Banner.svelte'
export let data
const { about, photos } = data
let { data } = $props()
let scrollY: number, innerWidth: number, innerHeight: number
let photosGridEl: HTMLElement
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
let currentStep = 0
let emailCopied: string = null
let scrollY = $state<number>()
let innerWidth = $state<number>()
let innerHeight = $state<number>()
let photosGridEl = $state<HTMLElement>()
let photosGridOffset = $state<number>()
let currentStep = $state(0)
let emailCopied = $state<string>()
let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
$: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
$: fadedPhotosIndexes = innerWidth > 768
const parallaxPhotos = $derived(photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true))
const fadedPhotosIndexes = $derived(
innerWidth > 768
? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
: [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43]
)
$effect(() => {
// Update photos grid top offset
photosGridOffset = photosGridEl.offsetTop
onMount(() => {
/**
* Animations
*/
@@ -163,20 +169,14 @@
// Run animation
requestAnimationFrame(animation.play)
})
afterUpdate(() => {
// Update photos grid top offset
photosGridOffset = photosGridEl.offsetTop
})
</script>
<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
<Metas
title={about.seo_title}
description={about.seo_description}
image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null}
title={data.data.about.seo_title}
description={data.about.seo_description}
image={data.about.seo_image ? getAssetUrlKey(data.about.seo_image.id, 'share-image') : null}
/>
@@ -191,13 +191,13 @@
<section class="about__introduction">
<div class="container grid">
<h2 class="title-small">{about.intro_title}</h2>
<h2 class="title-small">{data.about.intro_title}</h2>
<div class="heading text-big">
{@html about.intro_heading}
{@html data.about.intro_heading}
</div>
<div class="text text-small">
{@html about.intro_text}
{@html data.about.intro_text}
</div>
</div>
</section>
@@ -207,8 +207,8 @@
<figure class="first-photo">
<Image
class="picture shadow-box-dark"
id={about.intro_firstphoto.id}
alt={about.intro_firstphoto.title}
id={data.about.intro_firstphoto.id}
alt={data.about.intro_firstphoto.title}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
@@ -218,29 +218,29 @@
ratio={1.5}
/>
<figcaption class="text-info">
{about.intro_firstphoto_caption}<br>
{data.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')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
<a href="/{data.about.intro_firstlocation.country.slug}/{data.about.intro_firstlocation.slug}" data-sveltekit-noscroll>
<img src={getAssetUrlKey(data.about.intro_firstlocation.country.flag.id, 'square-small')} width="32" height="32" alt={data.about.intro_firstlocation.country.flag.title}>
<span>Naarm Australia (Melbourne)</span>
</a>
</figcaption>
</figure>
<h2 class="title-small" data-reveal>{about.creation_title}</h2>
<h2 class="title-small" data-reveal>{data.about.creation_title}</h2>
<div class="heading text-huge" data-reveal>
{@html about.creation_heading}
{@html data.about.creation_heading}
</div>
<div class="text text-small" data-reveal>
{@html about.creation_text}
{@html data.about.creation_text}
</div>
<figure class="picture portrait-photo" data-reveal-image>
<Image
class="shadow-box-dark"
id={about.creation_portrait.id}
alt={about.creation_portrait.title}
id={data.about.creation_portrait.id}
alt={data.about.creation_portrait.title}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
@@ -250,7 +250,7 @@
/>
</figure>
<span class="portrait-photo__caption text-info">
{about.creation_portrait_caption}
{data.about.creation_portrait_caption}
</span>
</div>
</section>
@@ -260,8 +260,8 @@
<figure class="picture" data-reveal-image>
<Image
class="shadow-box-dark"
id={about.present_image.id}
alt={about.present_image.title}
id={data.about.present_image.id}
alt={data.about.present_image.title}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
@@ -272,26 +272,26 @@
/>
</figure>
<h2 class="title-small" data-reveal>{about.present_title}</h2>
<h2 class="title-small" data-reveal>{data.about.present_title}</h2>
<div class="text text-small" data-reveal>
<p>{about.present_text}</p>
<p>{data.about.present_text}</p>
</div>
<div class="heading text-big" data-reveal>
{@html about.present_heading}
{@html data.about.present_heading}
</div>
<div class="conclusion text-small" data-reveal>
<p>{about.present_conclusion}</p>
<p>{data.about.present_conclusion}</p>
</div>
</div>
</section>
{#if about.image_showcase}
{#if data.about.image_showcase}
<div class="about__showcase container grid">
<Image
id={about.image_showcase.id}
alt={about.image_showcase.title}
id={data.about.image_showcase.id}
alt={data.about.image_showcase.title}
sizeKey="showcase"
sizes={{
small: { width: 400 },
@@ -307,15 +307,18 @@
<div class="container grid">
<aside>
<div class="heading">
<h2 class="title-medium">{about.process_title}</h2>
<p class="text-xsmall">{about.process_subtitle}</p>
<h2 class="title-medium">{data.about.process_title}</h2>
<p class="text-xsmall">{data.about.process_subtitle}</p>
</div>
<ol>
{#each about.process_steps as { title }, index}
{#each data.about.process_steps as { title }, index}
<li class:is-active={index === currentStep}>
<a href="#step-{index + 1}" class="title-big"
on:click|preventDefault={() => {
<a
class="title-big"
href="#step-{index + 1}"
onclick={(event) => {
event.preventDefault()
currentStep = index
sendEvent('aboutStepSwitch')
}}
@@ -328,7 +331,7 @@
</aside>
<div class="steps">
{#each about.process_steps as { text, image, video_mp4, video_webm }, index}
{#each data.about.process_steps as { text, image, video_mp4, video_webm }, index}
{#if index === currentStep}
<ProcessStep
{index} {text}
@@ -347,8 +350,9 @@
<section class="about__photos" bind:this={photosGridEl}>
<div class="container-wide">
<div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
{#each photos as { image: { id }, title }, index}
<AboutGridPhoto class="grid-photo"
{#each data.photos as { image: { id }, title }, index}
<AboutGridPhoto
class="grid-photo"
{id}
alt={title}
disabled={fadedPhotosIndexes.includes(index)}
@@ -360,9 +364,9 @@
<section class="about__interest container grid">
<div class="container grid">
<h2 class="title-xl">{about.contact_title}</h2>
<h2 class="title-xl">{data.about.contact_title}</h2>
<div class="blocks">
{#each about.contact_blocks as { title, text, link, button }}
{#each data.about.contact_blocks as { title, text, link, button }}
<div class="block">
<h3 class="text-label">{title}</h3>
<div class="text text-normal">
@@ -375,8 +379,8 @@
in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
out:fade={{ duration: 250, easing: quartOutSvelte }}
use:mailtoClipboard
on:copied={({ detail }) => {
emailCopied = detail.email
oncopied={(email: string) => {
emailCopied = email
// Clear timeout and add timeout to hide message
clearTimeout(emailCopiedTimeout)
emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)

5
apps/website/src/routes/(site)/credits/+page.svelte
View File

@@ -4,7 +4,6 @@
<script lang="ts">
import { navigating } from '$app/stores'
import { onMount } from 'svelte'
import { stagger, timeline } from 'motion'
import { DELAY } from '$utils/constants'
import { quartOut } from 'svelte/easing'
@@ -14,11 +13,11 @@
import Heading from '$components/molecules/Heading/Heading.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
export let data
let { data } = $props()
const { credit } = data
onMount(() => {
$effect(() => {
/**
* Animations
*/

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

@@ -5,7 +5,7 @@
<script lang="ts">
import { page, navigating } from '$app/stores'
import { goto } from '$app/navigation'
import { getContext, onMount } from 'svelte'
import { getContext } from 'svelte'
import { fly } from 'svelte/transition'
import { quartOut as quartOutSvelte } from 'svelte/easing'
import dayjs from 'dayjs'
@@ -13,7 +13,6 @@
import { stagger, timeline } from 'motion'
import { DELAY } from '$utils/constants'
import { map, lerp } from 'utils/math'
import { throttle } from 'utils/actions'
import { getAssetUrlKey } from '$utils/api'
import { quartOut } from '$animations/easings'
import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
@@ -30,64 +29,53 @@
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
export let data
let { data } = $props()
let { photos, totalPhotos }: { photos: any[], totalPhotos: number } = data
$: ({ photos, totalPhotos } = data)
let photos = $state<any[]>(data.photos)
const totalPhotos = $derived<number>(data.totalPhotos)
const { filteredCountryExists, settings }: { filteredCountryExists: boolean, settings: any } = data
const { countries, locations }: any = getContext('global')
dayjs.extend(relativeTime)
let photosGridEl: HTMLElement
let photosGridEl = $state<HTMLElement>()
let observerPhotos: IntersectionObserver
let mutationPhotos: MutationObserver
let scrollY: number
let innerWidth: number, innerHeight: number
let scrollY = $state<number>()
let innerWidth = $state<number>()
let innerHeight = $state<number>()
/**
* Filters
*/
const defaultCountry: string = PUBLIC_FILTERS_DEFAULT_COUNTRY
const defaultSort: string = PUBLIC_FILTERS_DEFAULT_SORT
const defaultCountry = PUBLIC_FILTERS_DEFAULT_COUNTRY
const defaultSort = PUBLIC_FILTERS_DEFAULT_SORT
const urlFiltersParams = new URLSearchParams()
let filtered: boolean
let filterCountry = $page.url.searchParams.get('country') || defaultCountry
let filterSort = $page.url.searchParams.get('sort') || defaultSort
let countryFlagId: string
$: filtered = filterCountry !== defaultCountry || filterSort !== defaultSort
$: latestPhoto = photos && photos[0]
$: currentCountry = countries.find((country: any) => country.slug === filterCountry)
let filterCountry = $state($page.url.searchParams.get('country') || defaultCountry)
let filterSort = $state($page.url.searchParams.get('sort') || defaultSort)
const filtered = $derived(filterCountry !== defaultCountry || filterSort !== defaultSort)
const latestPhoto = $derived(photos && photos[0])
const currentCountry = $derived(countries.find((country: any) => country.slug === filterCountry))
// Pages related informations
let currentPage = 1
let ended: boolean
let currentPhotosAmount: number
$: currentPhotosAmount = photos && photos.length
$: ended = currentPhotosAmount === totalPhotos
let currentPage = $state(1)
const currentPhotosAmount = $derived(photos?.length)
const ended = $derived(currentPhotosAmount === totalPhotos)
/**
* Container margins
*/
let scrollProgress: number
let sideMargins: number = innerWidth < 1200 ? 16 : 8
$: viewportScroll = (innerHeight / innerWidth) <= 0.6 ? innerHeight * 1.5 : innerHeight
// Define sides margin on scroll
const setSidesMargin = throttle(() => {
if (window.innerWidth >= 992) {
scrollProgress = map(scrollY, 0, viewportScroll, 0, 1, true)
sideMargins = lerp(innerWidth < 1200 ? 16 : 8, 30, scrollProgress)
}
}, 50)
const viewportScroll = $derived((innerHeight / innerWidth) <= 0.6 ? innerHeight * 1.5 : innerHeight)
const scrollProgress = $derived(map(scrollY, 0, viewportScroll, 0, 1, true))
const sideMargins = $derived(lerp(innerWidth < 1200 ? 16 : 8, 30, scrollProgress))
/**
* Handle URL query params
*/
$: countryFlagId = currentCountry ? currentCountry.flag.id : undefined
const countryFlagId = $derived(currentCountry ? currentCountry.flag.id : undefined)
// Update URL filtering params from filter values
const applyFilters = () => {
@@ -103,7 +91,7 @@
* Define small photo size from index
* With different grid patterns depending on window width
*/
$: isSmall = (index: number) => {
const isSmall = (index: number) => {
let modulo = index % 5
let notOn = [0]
@@ -122,21 +110,21 @@
/**
* Filters change events
*/
// Country select
/** Country select */
const handleCountryChange = ({ detail: value }) => {
filterCountry = value === defaultCountry ? defaultCountry : value
currentPage = 1
applyFilters()
}
// Sort select
/** Sort select */
const handleSortChange = ({ detail: value }) => {
filterSort = value === defaultSort ? defaultSort : value
currentPage = 1
applyFilters()
}
// Reset filters
/** Reset filters */
const resetFiltered = () => {
filterCountry = defaultCountry
filterSort = defaultSort
@@ -148,7 +136,7 @@
/**
* Load photos
*/
// [function] Load photos helper
/** Load photos helper */
const loadPhotos = async (page: number) => {
const res = await fetch('/api/data', {
method: 'POST',
@@ -194,7 +182,7 @@
}
}
// Load more photos from CTA
/** Load more photos from CTA */
const loadMorePhotos = async () => {
// Append more photos from API including options and page
const newPhotos: any = await loadPhotos(currentPage + 1)
@@ -207,14 +195,11 @@
// Increment the current page
currentPage++
}
// Increment the currently visible amount of photos
currentPhotosAmount += newPhotos.length
}
}
onMount(() => {
$effect(() => {
/**
* Observers
*/
@@ -290,15 +275,12 @@
image={getAssetUrlKey(settings.seo_image_photos.id, 'share-image')}
/>
<svelte:window
bind:scrollY bind:innerWidth bind:innerHeight
on:scroll={setSidesMargin}
/>
<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
<main class="photos-page">
<section class="photos-page__intro">
<ScrollingTitle tag="h1" text="Houses">
<ScrollingTitle tag="h1" label="Houses">
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
@@ -324,7 +306,7 @@
selected: filterCountry === slug,
}))
]}
on:change={handleCountryChange}
onchange={handleCountryChange}
value={filterCountry}
>
{#if countryFlagId}
@@ -356,7 +338,7 @@
selected: filterSort === 'oldest'
},
]}
on:change={handleSortChange}
onchange={handleSortChange}
value={filterSort}
>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-label="Sort icon">
@@ -368,8 +350,9 @@
<div class="filters__actions">
{#if filtered}
<button class="reset button-link"
on:click={resetFiltered}
<button
class="reset button-link"
onclick={resetFiltered}
transition:fly={{ y: 4, duration: 600, easing: quartOutSvelte }}
>
Reset
@@ -422,7 +405,7 @@
size="large"
color="beige"
text={!ended ? 'See more photos' : "You've seen it all!"}
on:click={loadMorePhotos}
onclick={loadMorePhotos}
disabled={ended}
/>

12
apps/website/src/routes/(site)/subscribe/+page.svelte
View File

@@ -4,7 +4,6 @@
<script lang="ts">
import { navigating } from '$app/stores'
import { onMount } from 'svelte'
import { stagger, timeline } from 'motion'
import { DELAY } from '$utils/constants'
import { quartOut } from '$animations/easings'
@@ -15,13 +14,12 @@
import NewsletterIssue from '$components/molecules/NewsletterIssue/NewsletterIssue.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe/InteractiveGlobe.svelte'
export let data
let { data } = $props()
const { issues } = data
const latestIssue = issues[0]
const latestIssue = $derived(data.issues[0])
onMount(() => {
$effect(() => {
/**
* Animations
*/
@@ -79,10 +77,10 @@
<NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
</div>
{#if issues.length > 1}
{#if data.issues.length > 1}
<h2 class="title-small">Past Issues</h2>
<ul>
{#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
{#each data.issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
<li class="issue-container">
<NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
</li>

7
apps/website/src/routes/(site)/terms/+page.svelte
View File

@@ -9,8 +9,7 @@
import Metas from '$components/Metas.svelte'
import Heading from '$components/molecules/Heading/Heading.svelte'
export let data
const { legal } = data
let { data } = $props()
dayjs.extend(relativeTime)
</script>
@@ -26,7 +25,7 @@
<section class="terms__categories">
<div class="container grid">
{#each legal.terms as { title, text }, index}
{#each data.legal.terms as { title, text }, index}
<article class="terms__section grid">
<h2 class="title-small">{index + 1}. {title}</h2>
<div class="text text-info">
@@ -37,7 +36,7 @@
<footer>
<p class="text-info">
Updated: <time datetime={dayjs(legal.date_updated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(legal.date_updated))}</time>
Updated: <time datetime={dayjs(data.legal.date_updated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(data.legal.date_updated))}</time>
</p>
</footer>
</div>

24
apps/website/src/routes/+layout.svelte
View File

@@ -21,7 +21,7 @@
import { page } from '$app/stores'
import { beforeNavigate, afterNavigate } from '$app/navigation'
import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
import { setContext, onMount } from 'svelte'
import { setContext } from 'svelte'
import { fade } from 'svelte/transition'
import { DELAY, DURATION } from '$utils/constants'
import { pageLoading, previousPage } from '$utils/stores'
@@ -35,10 +35,9 @@
import Toast from '$components/molecules/Toast/Toast.svelte'
import Footer from '$components/organisms/Footer/Footer.svelte'
export let data
let { data, children } = $props()
let innerHeight: number
$: innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
let innerHeight = $state<number>()
// Fonts to preload
const fonts = [
@@ -77,17 +76,18 @@
}
})
$: if (browser) {
$effect(() => {
// Set viewport height
innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
// Avoid FOUC
document.body.style.opacity = '1'
// Define page loading
document.body.classList.toggle('is-loading', $pageLoading)
// Block scroll on certain conditions
// document.body.classList.toggle('block-scroll', condition)
}
onMount(() => {
// Avoid FOUC
document.body.style.opacity = '1'
})
</script>
@@ -109,7 +109,7 @@
in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<slot />
{@render children()}
{#if !$page.params.photo}
<Footer />

38
apps/website/src/routes/+page.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 { timeline, stagger } from 'motion'
import { DELAY } from '$utils/constants'
import { smoothScroll } from '$utils/stores'
@@ -26,15 +26,15 @@
import ShopModule from '$components/organisms/ShopModule/ShopModule.svelte'
import NewsletterModule from '$components/organisms/NewsletterModule/NewsletterModule.svelte'
export let data
let { data } = $props()
const { photos } = data
const { settings, locations }: any = getContext('global')
let scrollY: number, innerHeight: number
let scrollY = $state<number>()
let innerHeight = $state<number>()
onMount(() => {
$effect(() => {
/**
* Animations
*/
@@ -81,7 +81,8 @@
<main class="homepage">
<section class="homepage__intro"
<section
class="homepage__intro"
use:reveal={{
animation: { opacity: [0, 1] },
options: {
@@ -108,7 +109,7 @@
size="medium"
url="#locations"
text="Explore locations"
on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}
onclick={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}
>
<IconEarth animate={true} />
</Button>
@@ -116,7 +117,7 @@
</section>
<section class="homepage__photos">
<Collage {photos} />
<Collage photos={data.photos} />
</section>
<div class="homepage__ctas">
@@ -124,28 +125,13 @@
<ListCTAs>
<li>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
<BoxCTA url="/photos" icon="photos" label="Browse all photos" alt="Photos" />
</li>
<li>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
<BoxCTA url="/shop" icon="bag" label="Shop our products" alt="Shopping bag" />
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
<BoxCTA url="/about" icon="compass" label="Learn about the project" alt="Compass" />
</li>
</ListCTAs>
</div>

4
apps/website/src/utils/functions/index.ts
View File

@@ -14,9 +14,7 @@ export const mailtoClipboard = (node: HTMLElement) => {
navigator.clipboard.writeText(emailAddress)
// Send event
node.dispatchEvent(new CustomEvent('copied', {
detail: { email: emailAddress }
}))
node.dispatchEvent(new CustomEvent('copied', emailAddress))
// Record event in analytics
sendEvent('emailCopy')

BIN
bun.lockb
View File

Binary file not shown.