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

refactor: use global page transition in main layout

Browse Source
This commit is contained in:
Félix Péault
2023-05-26 23:49:23 +02:00
parent 685d4fd244
commit d991dad294
17 changed files with 864 additions and 908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/website/src/components/PageTransition.svelte
View File

@@ -1,33 +0,0 @@
<script lang="ts">
import { page } from '$app/stores'
import { afterUpdate } from 'svelte'
import { fade } from 'svelte/transition'
import { scrollToTop } from 'utils/scroll'
import { pageLoading } from '$utils/stores'
import { DELAY, DURATION } from '$utils/constants'
let loadingTimeout: ReturnType<typeof setTimeout> | number = null
$: doNotScroll = !$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')
// Hide page loading indicator on page update
afterUpdate(() => {
clearTimeout(loadingTimeout)
loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
})
</script>
<div class="page"
in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
out:fade={{ duration: DURATION.PAGE_OUT }}
on:outrostart={() => {
// Show page loading indicator
$pageLoading = true
}}
on:outroend={() => {
// Scroll back to top
doNotScroll && requestAnimationFrame(() => scrollToTop())
}}
>
<slot />
</div>

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

@@ -3,7 +3,6 @@
import { page } from '$app/stores' import { page } from '$app/stores'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import ShopHeader from '$components/organisms/ShopBanner.svelte' import ShopHeader from '$components/organisms/ShopBanner.svelte'
import PostersGrid from '$components/organisms/PostersGrid.svelte' import PostersGrid from '$components/organisms/PostersGrid.svelte'
@@ -25,19 +24,17 @@
/> />
<PageTransition> <main class="shop-page">
<main class="shop-page"> <ShopHeader />
<ShopHeader />
<section class="shop-page__error"> <section class="shop-page__error">
<div class="container grid"> <div class="container grid">
<div class="inner"> <div class="inner">
<h2 class="title-big">Uh oh!</h2> <h2 class="title-big">Uh oh!</h2>
<p class="text-medium">{errors[$page.status].message}</p> <p class="text-medium">{errors[$page.status].message}</p>
</div>
</div> </div>
</section> </div>
</section>
<PostersGrid {posters} /> <PostersGrid {posters} />
</main> </main>
</PageTransition>

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

@@ -3,7 +3,6 @@
import { getAssetUrlKey } from '$utils/api' import { getAssetUrlKey } from '$utils/api'
import { shopCurrentProductSlug } from '$utils/stores/shop' import { shopCurrentProductSlug } from '$utils/stores/shop'
// Components // Components
import PageTransition from '$components/PageTransition.svelte'
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PostersGrid from '$components/organisms/PostersGrid.svelte' import PostersGrid from '$components/organisms/PostersGrid.svelte'
import ShopHeader from '$components/organisms/ShopBanner.svelte' import ShopHeader from '$components/organisms/ShopBanner.svelte'
@@ -25,15 +24,13 @@
/> />
<PageTransition> <main class="shop-page">
<main class="shop-page"> <ShopHeader {product} />
<ShopHeader {product} />
<PosterLayout <PosterLayout
product={product} product={product}
shopProduct={shopProduct} shopProduct={shopProduct}
/> />
<PostersGrid {posters} /> <PostersGrid {posters} />
</main> </main>
</PageTransition>

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

@@ -4,7 +4,6 @@
import { shopCurrentProductSlug } from '$utils/stores/shop' import { shopCurrentProductSlug } from '$utils/stores/shop'
import { capitalizeFirstLetter } from 'utils/string' import { capitalizeFirstLetter } from 'utils/string'
// Components // Components
import PageTransition from '$components/PageTransition.svelte'
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import ShopHeader from '$components/organisms/ShopBanner.svelte' import ShopHeader from '$components/organisms/ShopBanner.svelte'
import PostersGrid from '$components/organisms/PostersGrid.svelte' import PostersGrid from '$components/organisms/PostersGrid.svelte'
@@ -24,15 +23,13 @@
/> />
<PageTransition> <main class="shop-page">
<main class="shop-page"> <ShopHeader product={data.product} />
<ShopHeader product={data.product} />
<PosterLayout <PosterLayout
product={data.product} product={data.product}
shopProduct={data.shopProduct} shopProduct={data.shopProduct}
/> />
<PostersGrid {posters} /> <PostersGrid {posters} />
</main> </main>
</PageTransition>

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

@@ -16,7 +16,6 @@
import { PUBLIC_LIST_INCREMENT } from '$env/static/public' import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte' import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -218,149 +217,147 @@
/> />
<PageTransition> <main class="location-page">
<main class="location-page"> <section class="location-page__intro grid" bind:this={introEl}>
<section class="location-page__intro grid" bind:this={introEl}> <h1 class="title" class:is-short={location.name.length <= 4}>
<h1 class="title" class:is-short={location.name.length <= 4}> <span class="housesof mask">
<span class="housesof mask"> <strong class="word">Houses</strong>
<strong class="word">Houses</strong> <span class="of">of</span>
<span class="of">of</span> </span>
</span> <strong class="city mask">
<strong class="city mask"> <span class="word">{location.name}</span>
<span class="word">{location.name}</span> </strong>
</strong> </h1>
</h1>
<div class="location-page__description grid"> <div class="location-page__description grid">
<div class="wrap"> <div class="wrap">
<div class="text-medium"> <div class="text-medium">
Houses of {location.name} {location.description ?? 'has no description yet'} Houses of {location.name} {location.description ?? 'has no description yet'}
</div> </div>
<div class="info"> <div class="info">
<p class="text-label"> <p class="text-label">
Photos by Photos by
{#each location.credits as { credit_id: { name, website } }} {#each location.credits as { credit_id: { name, website } }}
{#if website} {#if website}
<a href={website} target="_blank" rel="noopener external"> <a href={website} target="_blank" rel="noopener external">
{name} {name}
</a> </a>
{:else} {:else}
<span>{name}</span> <span>{name}</span>
{/if} {/if}
{/each} {/each}
</p>
{#if latestPhoto}
&middot;
<p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
Updated <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>
{dayjs().to(dayjs(latestPhoto.date_created))}
</time>
</p> </p>
{#if latestPhoto} {/if}
&middot; </div>
<p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
Updated <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>
{dayjs().to(dayjs(latestPhoto.date_created))}
</time>
</p>
{/if}
</div>
<div class="ctas"> <div class="ctas">
<Button url="/locations" text="Change location" class="shadow-small"> <Button url="/locations" text="Change location" class="shadow-small">
<IconEarth /> <IconEarth />
</Button>
{#if location.has_poster}
<Button url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
<!-- <IconEarth /> -->
</Button> </Button>
{/if}
{#if location.has_poster}
<Button url="/shop/poster-{location.slug}" text="Buy the poster" color="pinklight" class="shadow-small">
<!-- <IconEarth /> -->
</Button>
{/if}
</div>
</div> </div>
</div> </div>
</div>
{#if hasIllustration} {#if hasIllustration}
<picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px"> <picture class="location-page__illustration" style:--parallax-y="{illustrationOffsetY}px">
<source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}> <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
<source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}> <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
<img <img
src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')} src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
width={320} width={320}
height={824} height={824}
alt="Illustration for {location.name}" alt="Illustration for {location.name}"
decoding="async" decoding="async"
/> />
</picture> </picture>
{/if} {/if}
</section>
{#if photos.length}
<section class="location-page__houses" bind:this={photosListEl} data-sveltekit-noscroll>
{#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
<House
{title}
photoId={id}
photoAlt={alt}
url="/{params.country}/{params.location}/{slug}"
{city}
location={location.name}
ratio={width / height}
date={date_taken}
index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}"
/>
{/each}
</section> </section>
{#if photos.length} <section class="location-page__next container">
<section class="location-page__houses" bind:this={photosListEl} data-sveltekit-noscroll> <Pagination
{#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} ended={ended}
<House current={currentPhotosAmount}
{title} total={totalPhotos}
photoId={id} on:click={() => !ended && loadMorePhotos()}
photoAlt={alt} >
url="/{params.country}/{params.location}/{slug}" {#if !ended}
{city} <p class="more">See more photos</p>
location={location.name} {:else}
ratio={width / height} <p>You've seen it all!</p>
date={date_taken} {/if}
index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}" </Pagination>
/>
{/each}
</section>
<section class="location-page__next container"> {#if ended}
<Pagination <div class="grid-modules">
ended={ended} <div class="container grid">
current={currentPhotosAmount} <div class="wrap">
total={totalPhotos} {#if location.has_poster}
on:click={() => !ended && loadMorePhotos()} <ShopModule
> title="Poster available"
{#if !ended} text="Houses of {location.name} is available as a poster on our shop."
<p class="more">See more photos</p> images={product.photos_product}
{:else} textBottom={null}
<p>You've seen it all!</p> buttonText="Buy"
{/if} url="/shop/poster-{location.slug}"
</Pagination> />
{:else}
{#if ended} <ShopModule />
<div class="grid-modules"> {/if}
<div class="container grid"> <NewsletterModule theme="light" />
<div class="wrap">
{#if location.has_poster}
<ShopModule
title="Poster available"
text="Houses of {location.name} is available as a poster on our shop."
images={product.photos_product}
textBottom={null}
buttonText="Buy"
url="/shop/poster-{location.slug}"
/>
{:else}
<ShopModule />
{/if}
<NewsletterModule theme="light" />
</div>
</div> </div>
</div> </div>
{/if} </div>
{/if}
{#if location.acknowledgement} {#if location.acknowledgement}
<div class="acknowledgement"> <div class="acknowledgement">
<Image <Image
class="flag" class="flag"
id={location.country.flag.id} id={location.country.flag.id}
sizeKey="square-small" sizeKey="square-small"
width={32} height={32} width={32} height={32}
alt="Flag of {location.country.name}" alt="Flag of {location.country.name}"
/> />
<p>{location.acknowledgement}</p> <p>{location.acknowledgement}</p>
</div> </div>
{/if} {/if}
</section> </section>
{:else} {:else}
<div class="location-page__message"> <div class="location-page__message">
<p> <p>
No photos available for {location.name}.<br> No photos available for {location.name}.<br>
Come back later! Come back later!
</p> </p>
</div> </div>
{/if} {/if}
</main> </main>
</PageTransition>

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

@@ -19,7 +19,6 @@
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import SplitText from '$components/SplitText.svelte' import SplitText from '$components/SplitText.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Icon from '$components/atoms/Icon.svelte' import Icon from '$components/atoms/Icon.svelte'
import IconArrow from '$components/atoms/IconArrow.svelte' import IconArrow from '$components/atoms/IconArrow.svelte'
@@ -301,105 +300,103 @@
{/if} {/if}
<PageTransition> <main class="photo-page">
<main class="photo-page"> <div class="container grid">
<div class="container grid"> <p class="photo-page__notice text-label">Tap for fullscreen</p>
<p class="photo-page__notice text-label">Tap for fullscreen</p>
<ButtonCircle <ButtonCircle
tag="a" tag="a"
url={previousUrl} url={previousUrl}
color="purple" color="purple"
class="close shadow-box-dark" class="close shadow-box-dark"
label="Close" label="Close"
>
<svg width="12" height="12">
<use xlink:href="#cross">
</svg>
</ButtonCircle>
<div class="photo-page__carousel">
<div class="photo-page__images"
use:swipe
on:swipe={handleSwipe}
on:tap={toggleFullscreen}
> >
<svg width="12" height="12"> {#each visiblePhotos as { id, image, title }, index (id)}
<use xlink:href="#cross"> <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
</svg> <Image
</ButtonCircle> class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
id={image.id}
<div class="photo-page__carousel"> alt={title}
<div class="photo-page__images" sizeKey="photo-list"
use:swipe sizes={{
on:swipe={handleSwipe} small: { width: 500 },
on:tap={toggleFullscreen} medium: { width: 850 },
> large: { width: 1280 },
{#each visiblePhotos as { id, image, title }, index (id)} }}
<div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}"> ratio={1.5}
<Image />
class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
id={image.id}
alt={title}
sizeKey="photo-list"
sizes={{
small: { width: 500 },
medium: { width: 850 },
large: { width: 1280 },
}}
ratio={1.5}
/>
</div>
{/each}
<div class="photo-page__controls">
<ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
<IconArrow color="pink" flip={true} />
</ButtonCircle>
<ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} on:click={goToNext}>
<IconArrow color="pink" />
</ButtonCircle>
</div> </div>
{/each}
<div class="photo-page__controls">
<div class="photo-page__index title-index"> <ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
<SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" /> <IconArrow color="pink" flip={true} />
</div> </ButtonCircle>
<ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} on:click={goToNext}>
<IconArrow color="pink" />
</ButtonCircle>
</div> </div>
<div class="photo-page__info">
<h1 class="title-medium">{currentPhoto.title}</h1>
<div class="detail text-info"> <div class="photo-page__index title-index">
<a href="/{location.country.slug}/{location.slug}" data-sveltekit-noscroll> <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
<Icon class="icon" icon="map-pin" label="Map pin" /> </div>
<span> </div>
{#if currentPhoto.city}
{currentPhoto.city}, {location.name}, {location.country.name} <div class="photo-page__info">
{:else} <h1 class="title-medium">{currentPhoto.title}</h1>
{location.name}, {location.country.name}
{/if} <div class="detail text-info">
</span> <a href="/{location.country.slug}/{location.slug}" data-sveltekit-noscroll>
</a> <Icon class="icon" icon="map-pin" label="Map pin" />
{#if currentPhoto.date_taken} <span>
<span class="sep">&middot;</span> {#if currentPhoto.city}
<time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM YYYY')}</time> {currentPhoto.city}, {location.name}, {location.country.name}
{/if} {:else}
</div> {location.name}, {location.country.name}
{/if}
</span>
</a>
{#if currentPhoto.date_taken}
<span class="sep">&middot;</span>
<time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM YYYY')}</time>
{/if}
</div> </div>
</div> </div>
</div> </div>
</div>
{#if isFullscreen} {#if isFullscreen}
<div class="photo-page__fullscreen" bind:this={fullscreenEl} <div class="photo-page__fullscreen" bind:this={fullscreenEl}
on:click={toggleFullscreen} on:keydown on:click={toggleFullscreen} on:keydown
in:fade={{ easing: quartOut, duration: 1000 }} in:fade={{ easing: quartOut, duration: 1000 }}
out:fade={{ easing: quartOut, duration: 1000, delay: 300 }} out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
> >
<div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}> <div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
<Image <Image
id={currentPhoto.image.id} id={currentPhoto.image.id}
sizeKey="photo-grid-large" sizeKey="photo-grid-large"
width={1266} width={1266}
height={844} height={844}
alt={currentPhoto.title} alt={currentPhoto.title}
/> />
<ButtonCircle color="gray-medium" class="close"> <ButtonCircle color="gray-medium" class="close">
<svg width="18" height="18" viewBox="0 0 18 18" fill="#fff" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.751 0c4.274 0 7.752 3.477 7.752 7.751 0 1.846-.65 3.543-1.73 4.875l3.99 3.991a.81.81 0 1 1-1.146 1.146l-3.99-3.991a7.714 7.714 0 0 1-4.876 1.73C3.477 15.503 0 12.027 0 7.753 0 3.476 3.477 0 7.751 0Zm0 1.62a6.138 6.138 0 0 0-6.13 6.131 6.138 6.138 0 0 0 6.13 6.132 6.138 6.138 0 0 0 6.131-6.132c0-3.38-2.75-6.13-6.13-6.13Zm2.38 5.321a.81.81 0 1 1 0 1.62h-4.76a.81.81 0 1 1 0-1.62h4.76Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.751 0c4.274 0 7.752 3.477 7.752 7.751 0 1.846-.65 3.543-1.73 4.875l3.99 3.991a.81.81 0 1 1-1.146 1.146l-3.99-3.991a7.714 7.714 0 0 1-4.876 1.73C3.477 15.503 0 12.027 0 7.753 0 3.476 3.477 0 7.751 0Zm0 1.62a6.138 6.138 0 0 0-6.13 6.131 6.138 6.138 0 0 0 6.13 6.132 6.138 6.138 0 0 0 6.131-6.132c0-3.38-2.75-6.13-6.13-6.13Zm2.38 5.321a.81.81 0 1 1 0 1.62h-4.76a.81.81 0 1 1 0-1.62h4.76Z" />
</svg> </svg>
</ButtonCircle> </ButtonCircle>
</div>
</div> </div>
{/if} </div>
</main> {/if}
</PageTransition> </main>

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

@@ -16,7 +16,6 @@
import { quartOut } from '$animations/easings' import { quartOut } from '$animations/easings'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte' import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
@@ -181,222 +180,220 @@
/> />
<PageTransition> <main class="about">
<main class="about"> <Banner
<Banner title="About"
title="About" image={{
image={{ id: '699b4050-6bbf-4a40-be53-d84aca484f9d',
id: '699b4050-6bbf-4a40-be53-d84aca484f9d', alt: 'Photo caption',
alt: 'Photo caption', }}
}} />
/>
<section class="about__introduction"> <section class="about__introduction">
<div class="container grid"> <div class="container grid">
<h2 class="title-small">{about.intro_title}</h2> <h2 class="title-small">{about.intro_title}</h2>
<div class="heading text-big"> <div class="heading text-big">
{@html about.intro_heading} {@html about.intro_heading}
</div>
<div class="text text-small">
{@html about.intro_text}
</div>
</div> </div>
</section>
<section class="about__creation"> <div class="text text-small">
<div class="container grid"> {@html about.intro_text}
<figure class="first-photo">
<Image
class="picture shadow-box-dark"
id={about.intro_firstphoto.id}
alt={about.intro_firstphoto.title}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
medium: { width: 600 },
large: { width: 800 },
}}
ratio={1.5}
/>
<figcaption class="text-info">
{about.intro_firstphoto_caption}<br>
in
<a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
<img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
<span>Naarm Australia (Melbourne)</span>
</a>
</figcaption>
</figure>
<h2 class="title-small" data-reveal>{about.creation_title}</h2>
<div class="heading text-huge" data-reveal>
{@html about.creation_heading}
</div>
<div class="text text-small" data-reveal>
{@html 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}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
medium: { width: 750 },
}}
ratio={1.425}
/>
</figure>
<span class="portrait-photo__caption text-info">
{about.creation_portrait_caption}
</span>
</div> </div>
</section> </div>
</section>
<section class="about__present"> <section class="about__creation">
<div class="container grid"> <div class="container grid">
<figure class="picture" data-reveal-image> <figure class="first-photo">
<Image
class="shadow-box-dark"
id={about.present_image.id}
alt={about.present_image.title}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
medium: { width: 600 },
large: { width: 800 },
}}
ratio={1.5}
/>
</figure>
<h2 class="title-small" data-reveal>{about.present_title}</h2>
<div class="text text-small" data-reveal>
<p>{about.present_text}</p>
</div>
<div class="heading text-big" data-reveal>
{@html about.present_heading}
</div>
<div class="conclusion text-small" data-reveal>
<p>{about.present_conclusion}</p>
</div>
</div>
</section>
{#if about.image_showcase}
<div class="about__showcase container grid">
<Image <Image
id={about.image_showcase.id} class="picture shadow-box-dark"
alt={about.image_showcase.title} id={about.intro_firstphoto.id}
sizeKey="showcase" alt={about.intro_firstphoto.title}
sizeKey="photo-list"
sizes={{ sizes={{
small: { width: 400 }, small: { width: 400 },
medium: { width: 1000 }, medium: { width: 600 },
large: { width: 1800 }, large: { width: 800 },
}} }}
ratio={1.2} ratio={1.5}
/> />
<figcaption class="text-info">
{about.intro_firstphoto_caption}<br>
in
<a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
<img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
<span>Naarm Australia (Melbourne)</span>
</a>
</figcaption>
</figure>
<h2 class="title-small" data-reveal>{about.creation_title}</h2>
<div class="heading text-huge" data-reveal>
{@html about.creation_heading}
</div> </div>
{/if}
<section class="about__process"> <div class="text text-small" data-reveal>
<div class="container grid"> {@html about.creation_text}
<aside> </div>
<div class="heading">
<h2 class="title-medium">{about.process_title}</h2>
<p class="text-xsmall">{about.process_subtitle}</p>
</div>
<ol> <figure class="picture portrait-photo" data-reveal-image>
{#each about.process_steps as { title }, index} <Image
<li class:is-active={index === currentStep}> class="shadow-box-dark"
<a href="#step-{index + 1}" class="title-big" id={about.creation_portrait.id}
on:click|preventDefault={() => { alt={about.creation_portrait.title}
currentStep = index sizeKey="photo-list"
sendEvent('aboutStepSwitch') sizes={{
small: { width: 400 },
medium: { width: 750 },
}}
ratio={1.425}
/>
</figure>
<span class="portrait-photo__caption text-info">
{about.creation_portrait_caption}
</span>
</div>
</section>
<section class="about__present">
<div class="container grid">
<figure class="picture" data-reveal-image>
<Image
class="shadow-box-dark"
id={about.present_image.id}
alt={about.present_image.title}
sizeKey="photo-list"
sizes={{
small: { width: 400 },
medium: { width: 600 },
large: { width: 800 },
}}
ratio={1.5}
/>
</figure>
<h2 class="title-small" data-reveal>{about.present_title}</h2>
<div class="text text-small" data-reveal>
<p>{about.present_text}</p>
</div>
<div class="heading text-big" data-reveal>
{@html about.present_heading}
</div>
<div class="conclusion text-small" data-reveal>
<p>{about.present_conclusion}</p>
</div>
</div>
</section>
{#if about.image_showcase}
<div class="about__showcase container grid">
<Image
id={about.image_showcase.id}
alt={about.image_showcase.title}
sizeKey="showcase"
sizes={{
small: { width: 400 },
medium: { width: 1000 },
large: { width: 1800 },
}}
ratio={1.2}
/>
</div>
{/if}
<section class="about__process">
<div class="container grid">
<aside>
<div class="heading">
<h2 class="title-medium">{about.process_title}</h2>
<p class="text-xsmall">{about.process_subtitle}</p>
</div>
<ol>
{#each about.process_steps as { title }, index}
<li class:is-active={index === currentStep}>
<a href="#step-{index + 1}" class="title-big"
on:click|preventDefault={() => {
currentStep = index
sendEvent('aboutStepSwitch')
}}
>
<span>{title}</span>
</a>
</li>
{/each}
</ol>
</aside>
<div class="steps">
{#each about.process_steps as { text, image, video_mp4, video_webm }, index}
{#if index === currentStep}
<ProcessStep
{index} {text}
image={image ?? undefined}
video={{
mp4: video_mp4?.id,
webm: video_webm?.id
}}
/>
{/if}
{/each}
</div>
</div>
</section>
<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"
{id}
alt={title}
disabled={fadedPhotosIndexes.includes(index)}
/>
{/each}
</div>
</div>
</section>
<section class="about__interest container grid">
<div class="container grid">
<h2 class="title-xl">{about.contact_title}</h2>
<div class="blocks">
{#each about.contact_blocks as { title, text, link, button }}
<div class="block">
<h3 class="text-label">{title}</h3>
<div class="text text-normal">
{@html text}
</div>
<div class="button-container">
{#if link}
{#key emailCopied === link}
<div class="wrap"
in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
out:fade={{ duration: 250, easing: quartOutSvelte }}
use:mailtoClipboard
on:copied={({ detail }) => {
emailCopied = detail.email
// Clear timeout and add timeout to hide message
clearTimeout(emailCopiedTimeout)
emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
}} }}
> >
<span>{title}</span> {#if emailCopied !== link}
</a> <Button size="small" url="mailto:{link}" text={button} />
</li> {:else}
{/each} <span class="clipboard">Email copied in clipboard</span>
</ol> {/if}
</aside> </div>
{/key}
<div class="steps"> {/if}
{#each about.process_steps as { text, image, video_mp4, video_webm }, index}
{#if index === currentStep}
<ProcessStep
{index} {text}
image={image ?? undefined}
video={{
mp4: video_mp4?.id,
webm: video_webm?.id
}}
/>
{/if}
{/each}
</div>
</div>
</section>
<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"
{id}
alt={title}
disabled={fadedPhotosIndexes.includes(index)}
/>
{/each}
</div>
</div>
</section>
<section class="about__interest container grid">
<div class="container grid">
<h2 class="title-xl">{about.contact_title}</h2>
<div class="blocks">
{#each about.contact_blocks as { title, text, link, button }}
<div class="block">
<h3 class="text-label">{title}</h3>
<div class="text text-normal">
{@html text}
</div>
<div class="button-container">
{#if link}
{#key emailCopied === link}
<div class="wrap"
in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
out:fade={{ duration: 250, easing: quartOutSvelte }}
use:mailtoClipboard
on:copied={({ detail }) => {
emailCopied = detail.email
// Clear timeout and add timeout to hide message
clearTimeout(emailCopiedTimeout)
emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
}}
>
{#if emailCopied !== link}
<Button size="small" url="mailto:{link}" text={button} />
{:else}
<span class="clipboard">Email copied in clipboard</span>
{/if}
</div>
{/key}
{/if}
</div>
</div> </div>
{/each} </div>
</div> {/each}
</div> </div>
</section> </div>
</main> </section>
</PageTransition> </main>

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

@@ -10,7 +10,6 @@
import { quartOut } from 'svelte/easing' import { quartOut } from 'svelte/easing'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Heading from '$components/molecules/Heading.svelte' import Heading from '$components/molecules/Heading.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -66,44 +65,18 @@
/> />
<PageTransition> <main class="credits">
<main class="credits"> <Heading
<Heading text={data.credits.text}
text={data.credits.text} />
/>
<section class="credits__list">
<div class="grid container">
{#each data.credits.list as { title, credits }}
<div class="credits__category grid">
<h2 class="title-small">{title}</h2>
<ul>
{#each credits as { name, role, website }}
<li>
<dl>
<dt>
{#if website}
<h3>
<a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
</h3>
{:else}
<h3>{name}</h3>
{/if}
</dt>
<dd>
{role}
</dd>
</dl>
</li>
{/each}
</ul>
</div>
{/each}
<section class="credits__list">
<div class="grid container">
{#each data.credits.list as { title, credits }}
<div class="credits__category grid"> <div class="credits__category grid">
<h2 class="title-small">Photography</h2> <h2 class="title-small">{title}</h2>
<ul> <ul>
{#each credit as { name, website, location }} {#each credits as { name, role, website }}
<li> <li>
<dl> <dl>
<dt> <dt>
@@ -116,33 +89,57 @@
{/if} {/if}
</dt> </dt>
<dd> <dd>
<ul data-sveltekit-noscroll> {role}
{#each location as loc}
{#if loc.location_id}
<li>
<a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
<Image
id={loc.location_id.country.flag.id}
sizeKey="square-small"
width={16}
height={16}
alt="Flag of {loc.location_id.country.slug}"
/>
<span>{loc.location_id.name}</span>
</a>
</li>
{/if}
{/each}
</ul>
</dd> </dd>
</dl> </dl>
</li> </li>
{/each} {/each}
</ul> </ul>
</div> </div>
</div> {/each}
</section>
<InteractiveGlobe type="cropped" /> <div class="credits__category grid">
</main> <h2 class="title-small">Photography</h2>
</PageTransition> <ul>
{#each credit as { name, website, location }}
<li>
<dl>
<dt>
{#if website}
<h3>
<a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
</h3>
{:else}
<h3>{name}</h3>
{/if}
</dt>
<dd>
<ul data-sveltekit-noscroll>
{#each location as loc}
{#if loc.location_id}
<li>
<a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
<Image
id={loc.location_id.country.flag.id}
sizeKey="square-small"
width={16}
height={16}
alt="Flag of {loc.location_id.country.slug}"
/>
<span>{loc.location_id.name}</span>
</a>
</li>
{/if}
{/each}
</ul>
</dd>
</dl>
</li>
{/each}
</ul>
</div>
</div>
</section>
<InteractiveGlobe type="cropped" />
</main>

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

@@ -6,7 +6,6 @@
import { getContext } from 'svelte' import { getContext } from 'svelte'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
import Locations from '$components/organisms/Locations.svelte' import Locations from '$components/organisms/Locations.svelte'
import ShopModule from '$components/organisms/ShopModule.svelte' import ShopModule from '$components/organisms/ShopModule.svelte'
@@ -23,20 +22,18 @@
/> />
<PageTransition> <main class="explore">
<main class="explore"> <Heading {text} />
<Heading {text} />
<section class="explore__locations"> <section class="explore__locations">
<InteractiveGlobe /> <InteractiveGlobe />
<Locations {locations} /> <Locations {locations} />
</section> </section>
<section class="grid-modules is-spaced grid"> <section class="grid-modules is-spaced grid">
<div class="wrap"> <div class="wrap">
<ShopModule /> <ShopModule />
<NewsletterModule /> <NewsletterModule />
</div> </div>
</section> </section>
</main> </main>
</PageTransition>

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

@@ -19,7 +19,6 @@
import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public' import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import SplitText from '$components/SplitText.svelte' import SplitText from '$components/SplitText.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte' import IconEarth from '$components/atoms/IconEarth.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
@@ -336,164 +335,162 @@
/> />
<PageTransition> <main class="photos-page">
<main class="photos-page"> <section class="photos-page__intro"
<section class="photos-page__intro" class:is-passed={scrolledPastIntro}
class:is-passed={scrolledPastIntro} >
<ScrollingTitle tag="h1" text="Houses">
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
<DiscoverText />
<div class="filters"
class:is-over={filtersOver}
class:is-transitioning={filtersTransitioning}
class:is-visible={filtersVisible}
> >
<ScrollingTitle tag="h1" text="Houses"> <div class="filters__bar">
<SplitText text="Houses" mode="chars" /> <span class="text-label filters__label">Filter photos</span>
</ScrollingTitle> <ul>
<li>
<Select
name="country" id="filter_country"
options={[
{
value: defaultCountry,
name: 'Worldwide',
default: true,
selected: filterCountry === defaultCountry,
},
...countries.map(({ slug, name }) => ({
value: slug,
name,
selected: filterCountry === slug,
}))
]}
on:change={handleCountryChange}
value={filterCountry}
>
{#if countryFlagId}
<Image
class="icon"
id={countryFlagId}
sizeKey="square-small"
width={26} height={26}
alt="{filterCountry} flag"
/>
{:else}
<IconEarth class="icon" />
{/if}
</Select>
</li>
<li>
<Select
name="sort" id="filter_sort"
options={[
{
value: 'latest',
name: 'Latest',
default: true,
selected: filterSort === defaultSort
},
{
value: 'oldest',
name: 'Oldest',
selected: filterSort === 'oldest'
},
]}
on:change={handleSortChange}
value={filterSort}
>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
</svg>
</Select>
</li>
</ul>
<DiscoverText /> <div class="filters__actions">
{#if filtered}
<div class="filters" <button class="reset button-link"
class:is-over={filtersOver} on:click={resetFiltered}
class:is-transitioning={filtersTransitioning} transition:fly={{ y: 4, duration: 600, easing: quartOutSvelte }}
class:is-visible={filtersVisible} >
> Reset
<div class="filters__bar"> </button>
<span class="text-label filters__label">Filter photos</span> {/if}
<ul>
<li>
<Select
name="country" id="filter_country"
options={[
{
value: defaultCountry,
name: 'Worldwide',
default: true,
selected: filterCountry === defaultCountry,
},
...countries.map(({ slug, name }) => ({
value: slug,
name,
selected: filterCountry === slug,
}))
]}
on:change={handleCountryChange}
value={filterCountry}
>
{#if countryFlagId}
<Image
class="icon"
id={countryFlagId}
sizeKey="square-small"
width={26} height={26}
alt="{filterCountry} flag"
/>
{:else}
<IconEarth class="icon" />
{/if}
</Select>
</li>
<li>
<Select
name="sort" id="filter_sort"
options={[
{
value: 'latest',
name: 'Latest',
default: true,
selected: filterSort === defaultSort
},
{
value: 'oldest',
name: 'Oldest',
selected: filterSort === 'oldest'
},
]}
on:change={handleSortChange}
value={filterSort}
>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
</svg>
</Select>
</li>
</ul>
<div class="filters__actions">
{#if filtered}
<button class="reset button-link"
on:click={resetFiltered}
transition:fly={{ y: 4, duration: 600, easing: quartOutSvelte }}
>
Reset
</button>
{/if}
</div>
</div> </div>
</div> </div>
</section> </div>
</section>
<section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px"> <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
<div class="grid container"> <div class="grid container">
{#if photos} {#if photos}
<div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll> <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>
{#each photos as { id, image, slug, location, title, city }, index (id)} {#each photos as { id, image, slug, location, title, city }, index (id)}
<figure class="photo shadow-photo"> <figure class="photo shadow-photo">
<a href="/{location.country.slug}/{location.slug}/{slug}" tabindex="0"> <a href="/{location.country.slug}/{location.slug}/{slug}" tabindex="0">
<Image <Image
id={image.id} id={image.id}
sizeKey="photo-grid" sizeKey="photo-grid"
sizes={{ sizes={{
small: { width: 500 }, small: { width: 500 },
medium: { width: 900 }, medium: { width: 900 },
large: { width: 1440 }, large: { width: 1440 },
}} }}
ratio={1.5} ratio={1.5}
alt={image.title} alt={image.title}
/> />
</a> </a>
<figcaption> <figcaption>
<PostCard <PostCard
street={title} street={title}
location={city ? `${city}, ${location.name}` : location.name} location={city ? `${city}, ${location.name}` : location.name}
region={location.region} region={location.region}
country={location.country.name} country={location.country.name}
flagId={location.country.flag.id} flagId={location.country.flag.id}
size={isSmall(index) ? 'small' : null} size={isSmall(index) ? 'small' : null}
/> />
</figcaption> </figcaption>
</figure> </figure>
{/each} {/each}
</div> </div>
<div class="controls grid"> <div class="controls grid">
<p class="controls__date" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}> <p class="controls__date" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
Last updated: <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>{dayjs().to(dayjs(latestPhoto.date_created))}</time> Last updated: <time datetime={dayjs(latestPhoto.date_created).format('YYYY-MM-DD')}>{dayjs().to(dayjs(latestPhoto.date_created))}</time>
</p> </p>
<Button <Button
tag="button" tag="button"
text={!ended ? 'See more photos' : "You've seen it all!"} text={!ended ? 'See more photos' : "You've seen it all!"}
size="large" color="beige" size="large" color="beige"
on:click={loadMorePhotos} on:click={loadMorePhotos}
disabled={ended} disabled={ended}
/> />
<div class="controls__count"> <div class="controls__count">
<span class="current">{currentPhotosAmount}</span> <span class="current">{currentPhotosAmount}</span>
<span>/</span> <span>/</span>
<span class="total">{totalPhotos}</span> <span class="total">{totalPhotos}</span>
</div>
</div>
{:else if !filteredCountryExists}
<div class="photos-page__message">
<p>
<strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
</p>
</div>
{/if}
<div class="grid-modules">
<div class="wrap">
<ShopModule />
<NewsletterModule theme="light" />
</div> </div>
</div> </div>
{:else if !filteredCountryExists}
<div class="photos-page__message">
<p>
<strong>{$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
</p>
</div>
{/if}
<div class="grid-modules">
<div class="wrap">
<ShopModule />
<NewsletterModule theme="light" />
</div>
</div> </div>
</section> </div>
</main> </section>
</PageTransition> </main>

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

@@ -10,7 +10,6 @@
import { quartOut } from '$animations/easings' import { quartOut } from '$animations/easings'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Heading from '$components/molecules/Heading.svelte' import Heading from '$components/molecules/Heading.svelte'
import EmailForm from '$components/molecules/EmailForm.svelte' import EmailForm from '$components/molecules/EmailForm.svelte'
import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte' import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
@@ -65,34 +64,32 @@
/> />
<PageTransition> <main class="subscribe">
<main class="subscribe"> <div class="subscribe__top">
<div class="subscribe__top"> <Heading
<Heading text={data.newsletter_page_text}
text={data.newsletter_page_text} />
/>
<EmailForm /> <EmailForm />
</div>
<section class="subscribe__issues">
<h2 class="title-small">Latest Issue</h2>
<div class="issue-container">
<NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
</div> </div>
<section class="subscribe__issues"> {#if issues.length > 1}
<h2 class="title-small">Latest Issue</h2> <h2 class="title-small">Past Issues</h2>
<div class="issue-container"> <ul>
<NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} /> {#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
</div> <li class="issue-container">
<NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
</li>
{/each}
</ul>
{/if}
</section>
{#if issues.length > 1} <InteractiveGlobe type="cropped" />
<h2 class="title-small">Past Issues</h2> </main>
<ul>
{#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
<li class="issue-container">
<NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
</li>
{/each}
</ul>
{/if}
</section>
<InteractiveGlobe type="cropped" />
</main>
</PageTransition>

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

@@ -6,7 +6,6 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'
// Components // Components
import PageTransition from '$components/PageTransition.svelte'
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import Heading from '$components/molecules/Heading.svelte' import Heading from '$components/molecules/Heading.svelte'
@@ -22,27 +21,25 @@
/> />
<PageTransition> <main class="terms">
<main class="terms"> <Heading text="Everything you need to know about using our website or buying our products" />
<Heading text="Everything you need to know about using our website or buying our products" />
<section class="terms__categories"> <section class="terms__categories">
<div class="container grid"> <div class="container grid">
{#each legal.terms as { title, text }, index} {#each legal.terms as { title, text }, index}
<article class="terms__section grid"> <article class="terms__section grid">
<h2 class="title-small">{index + 1}. {title}</h2> <h2 class="title-small">{index + 1}. {title}</h2>
<div class="text text-info"> <div class="text text-info">
{@html text} {@html text}
</div> </div>
</article> </article>
{/each} {/each}
<footer> <footer>
<p class="text-info"> <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(legal.date_updated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(legal.date_updated))}</time>
</p> </p>
</footer> </footer>
</div> </div>
</section> </section>
</main> </main>
</PageTransition>

85
apps/website/src/routes/+error.svelte
View File

@@ -7,7 +7,6 @@
import { page } from '$app/stores' import { page } from '$app/stores'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import BoxCTA from '$components/atoms/BoxCTA.svelte' import BoxCTA from '$components/atoms/BoxCTA.svelte'
import Heading from '$components/molecules/Heading.svelte' import Heading from '$components/molecules/Heading.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -35,51 +34,49 @@
/> />
<PageTransition> <main class="page-error">
<main class="page-error"> <div class="page-error__top">
<div class="page-error__top"> <Heading
<Heading text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}" />
/>
<ListCTAs> <ListCTAs>
<li> <li>
<BoxCTA <BoxCTA
url="/photos" url="/photos"
icon="photos" icon="photos"
label="Browse all photos" label="Browse all photos"
alt="Photos" alt="Photos"
/> />
</li> </li>
<li> <li>
<BoxCTA <BoxCTA
url="/shop" url="/shop"
icon="bag" icon="bag"
label="Shop our products" label="Shop our products"
alt="Shopping bag" alt="Shopping bag"
/> />
</li> </li>
<li> <li>
<BoxCTA <BoxCTA
url="/about" url="/about"
icon="compass" icon="compass"
label="Learn about the project" label="Learn about the project"
alt="Compass" alt="Compass"
/> />
</li> </li>
</ListCTAs> </ListCTAs>
</div> </div>
<InteractiveGlobe /> <InteractiveGlobe />
<Locations {locations} /> <Locations {locations} />
<div class="grid-modules"> <div class="grid-modules">
<div class="container grid"> <div class="container grid">
<div class="wrap"> <div class="wrap">
<ShopModule /> <ShopModule />
<NewsletterModule /> <NewsletterModule />
</div>
</div> </div>
</div> </div>
</main> </div>
</PageTransition> </main>

1
apps/website/src/routes/+layout.server.ts
View File

@@ -96,6 +96,7 @@ export const load = async ({ url }) => {
locations: countLocations[0].count.id, locations: countLocations[0].count.id,
countries: countCountries[0].count.id, countries: countCountries[0].count.id,
}, },
currentPath: url.pathname,
} }
} }
} catch (err) { } catch (err) {

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

@@ -3,10 +3,13 @@
import { browser } from '$app/environment' import { browser } from '$app/environment'
import { page } from '$app/stores' import { page } from '$app/stores'
import { beforeNavigate } from '$app/navigation' import { beforeNavigate, afterNavigate } from '$app/navigation'
import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public' import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
import { onMount, setContext } from 'svelte' import { setContext, onMount } from 'svelte'
import { fade } from 'svelte/transition'
import { DELAY, DURATION } from '$utils/constants'
import { pageLoading, previousPage } from '$utils/stores' import { pageLoading, previousPage } from '$utils/stores'
import { scrollToTop } from 'utils/scroll'
import '$utils/polyfills' import '$utils/polyfills'
// Components // Components
import SVGSprite from '$components/SVGSprite.svelte' import SVGSprite from '$components/SVGSprite.svelte'
@@ -37,9 +40,24 @@
/** /**
* On page change * On page change
*/ */
// Store previous page (for photo Viewer close button) beforeNavigate(({ from, to }) => {
beforeNavigate(({ from }) => { // Store previous page (for photo Viewer close button)
$previousPage = from.url.pathname $previousPage = from.url.pathname
// Enable page loading state if URL changed
if (from.route.id !== to.route.id) {
$pageLoading = true
}
})
afterNavigate(() => {
// Remove page loading state
setTimeout(() => $pageLoading = false, DELAY.PAGE_LOADING)
// Scroll back to top when new page is ready (excepted certain pages)
if (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')) {
setTimeout(scrollToTop, DELAY.PAGE_IN)
}
}) })
// Define page loading // Define page loading
@@ -65,11 +83,19 @@
<Switcher /> <Switcher />
<slot /> {#key data.currentPath}
<div
in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<slot />
{#if !$page.params.photo}
<Footer />
{/if}
</div>
{/key}
{#if !$page.params.photo}
<Footer />
{/if}
<SVGSprite /> <SVGSprite />
<SmoothScroll /> <SmoothScroll />

151
apps/website/src/routes/+page.svelte
View File

@@ -13,7 +13,6 @@
import { quartOut } from '$animations/easings' import { quartOut } from '$animations/easings'
// Components // Components
import Metas from '$components/Metas.svelte' import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import SplitText from '$components/SplitText.svelte' import SplitText from '$components/SplitText.svelte'
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte' import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -81,89 +80,87 @@
/> />
<PageTransition> <main class="homepage">
<main class="homepage"> <section class="homepage__intro"
<section class="homepage__intro" use:reveal={{
use:reveal={{ animation: { opacity: [0, 1] },
animation: { opacity: [0, 1] }, options: {
options: { duration: 1,
duration: 1, },
}, }}
}} >
<ScrollingTitle
tag="h1"
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
> >
<ScrollingTitle <SplitText text="Houses" mode="chars" />
tag="h1" </ScrollingTitle>
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
>
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
<div class="homepage__headline"> <div class="homepage__headline">
<p class="text-medium"> <p class="text-medium">
{settings.description} {settings.description}
</p> </p>
<Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}> <Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
<IconEarth animate={true} /> <IconEarth animate={true} />
</Button> </Button>
</div>
</section>
<section class="homepage__photos">
<Collage {photos} />
</section>
<div class="homepage__ctas">
<DiscoverText />
<ListCTAs>
<li>
<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"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
</div> </div>
</section>
<section class="homepage__locations" id="locations"> <section class="homepage__photos">
<InteractiveGlobe /> <Collage {photos} />
</section>
<ScrollingTitle tag="p" class="title-world mask"> <div class="homepage__ctas">
<SplitText text="World" mode="chars" /> <DiscoverText />
</ScrollingTitle>
<Locations {locations} /> <ListCTAs>
</section> <li>
<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"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
</div>
<div class="grid-modules"> <section class="homepage__locations" id="locations">
<div class="container grid"> <InteractiveGlobe />
<div class="wrap">
<ShopModule /> <ScrollingTitle tag="p" class="title-world mask">
<NewsletterModule /> <SplitText text="World" mode="chars" />
</div> </ScrollingTitle>
<Locations {locations} />
</section>
<div class="grid-modules">
<div class="container grid">
<div class="wrap">
<ShopModule />
<NewsletterModule />
</div> </div>
</div> </div>
</main> </div>
</PageTransition> </main>

11
apps/website/src/utils/constants.ts
View File

@@ -1,10 +1,11 @@
// Delays
export const DELAY = {
PAGE_LOADING: 600,
}
// Durations // Durations
export const DURATION = { export const DURATION = {
PAGE_IN: 400, PAGE_IN: 400,
PAGE_OUT: 400, PAGE_OUT: 400,
} }
// Delays
export const DELAY = {
PAGE_LOADING: 600,
PAGE_IN: DURATION.PAGE_OUT + 1,
}