feat: change Location hero illustration to photo

makes it more manageable to add new locations by just picking a photo

apps/website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "website",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "author": "Félix Péault <hello@flayks.com> (https://flayks.com)",
   "contributors": [

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

@@ -20,9 +20,7 @@ export const load = async ({ params, setHeaders }) => {
                 slug
                 description
                 date_updated
-                illustration_desktop { id }
-                illustration_desktop_2x { id }
-                illustration_mobile { id }
+                hero { id }
                 credits {
                     credit_id {
                         name

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

@@ -41,12 +41,11 @@
     let currentPage = 1
     let ended: boolean
     let currentPhotosAmount: number
-    let illustrationOffsetY = 0
+    let heroOffsetY = 0
 
     $: latestPhoto = photos[0]
     $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
-    $: hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
 
 
     /**
@@ -104,7 +103,7 @@
      * Add parallax on illustration when scrolling
      */
     $: if (scrollY && scrollY < introEl.offsetHeight) {
-        illustrationOffsetY = scrollY * 0.1
+        heroOffsetY = scrollY * 0.1
     }
 
 
@@ -163,7 +162,7 @@
             }],
 
             // Illustration
-            ['.location-page__illustration', {
+            ['.location-page__hero', {
                 scale: [1.06, 1],
                 opacity: [0, 1],
             }, {
@@ -235,6 +234,7 @@
                     Houses of {location.name} {location.description ?? 'has no description yet'}
                 </div>
                 <div class="info">
+                    {#if location.credits}
                         <p class="text-label">
                             Photos by
                             {#each location.credits as { credit_id: { name, website } }}
@@ -247,6 +247,7 @@
                                 {/if}
                             {/each}
                         </p>
+                    {/if}
                     {#if latestPhoto}
                         &middot;
                         <p class="text-label" title={dayjs(latestPhoto.date_created).format('DD/MM/YYYY, hh:mm')}>
@@ -271,15 +272,15 @@
             </div>
         </div>
 
-        {#if hasIllustration}
-            <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: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
+        {#if location?.hero?.id}
+            <picture class="location-page__hero" style:--parallax-y="{heroOffsetY}px">
+                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.hero.id, 'hero-large')}>
+                <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.hero.id, 'hero-small')}>
                 <img
-                    src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
+                    src={getAssetUrlKey(location.hero.id, 'hero-mobile')}
                     width={320}
                     height={824}
-                    alt="Illustration for {location.name}"
+                    alt="Hero photo of {location.name}"
                     decoding="async"
                 />
             </picture>

apps/website/src/routes/+layout.svelte

@@ -62,24 +62,26 @@
         $previousPage = from.url.pathname
 
         // Enable page loading state if URL changed
-        if (from.route.id !== to.route.id) {
+        if (from?.route.id !== to?.route.id) {
             $pageLoading = true
         }
     })
 
-    afterNavigate(() => {
+    afterNavigate(({ from }) => {
         // 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/')) {
+        if (from?.url?.pathname && (!$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/'))) {
             setTimeout(scrollToTop, DELAY.PAGE_IN)
         }
     })
 
-    // Define page loading
     $: if (browser) {
+        // Define page loading
         document.body.classList.toggle('is-loading', $pageLoading)
+        // Block scroll on certain conditions
+        // document.body.classList.toggle('block-scroll', condition)
     }
 
 
@@ -120,7 +122,7 @@
     <Toast
         type="global"
         id="posters-promo"
-        text="Upgrade your walls! <strong>10% off</strong> in cart with free shipping on our graphic posters."
+        text="Upgrade your walls! Our graphic posters are <strong>10% off</strong> in cart with free shipping."
         cta={{
             label: 'View posters',
             url: '/shop',

apps/website/src/style/pages/_location.scss

@@ -146,34 +146,33 @@
         }
     }
 
-    // Illustration
-    &__illustration {
+    // Hero
+    &__hero {
         pointer-events: none;
         position: absolute;
         z-index: 1;
         top: 0;
         left: 0;
         right: 0;
-        width: clamp(320px, 100vw, 2560px);
+        width: 100%;
         height: 100%;
-        margin: 0 auto;
-        overflow: hidden;
         transform-origin: top center;
+        opacity: 0.75;
+        mix-blend-mode: soft-light;
 
         /* Bottom fading gradient for illustration */
         @include bp (sm) {
-            $mask: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
-            -webkit-mask-image: $mask;
-            mask-image: $mask;
+            mask-image: linear-gradient(180deg, #000 0%, rgba(#000, 0) 100%);
         }
 
         img {
             display: block;
             width: 100%;
-            height: auto;
-            object-fit: contain;
+            height: 100%;
+            object-fit: cover;
             pointer-events: none;
             user-select: none;
+            filter: grayscale(25%);
             transform: translate3d(0, var(--parallax-y), 0);
             transition: transform 0.7s var(--ease-quart);
             will-change: transform, opacity;