From 4e4492e4659bff5901095738cb788ffbc4dcc3da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 26 Sep 2022 21:27:22 +0200 Subject: [PATCH 01/68] Fix Shop rotating images performances on Safari --- src/style/organisms/_shop.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style/organisms/_shop.scss b/src/style/organisms/_shop.scss index 9d58e22..bfcca22 100644 --- a/src/style/organisms/_shop.scss +++ b/src/style/organisms/_shop.scss @@ -38,7 +38,7 @@ width: 100%; height: 100%; opacity: 0; - transform: scale3d(1.075, 1.075, 1.075); + transform: scale(1.075); transition: opacity 0.8s, transform 1.6s var(--ease-quart); } :global(img) { @@ -47,7 +47,7 @@ :global(.is-visible) { opacity: 1; - transform: scale3d(1,1,1); + transform: scale(1); } :global(img) { From 48f4950bb0e8ea5eb6865017109c808be4ac5afe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 26 Sep 2022 21:27:40 +0200 Subject: [PATCH 02/68] Disable Carousel arrow on devices with no hover --- src/style/organisms/_carousel.scss | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss index 212ada0..3ba0307 100644 --- a/src/style/organisms/_carousel.scss +++ b/src/style/organisms/_carousel.scss @@ -88,16 +88,20 @@ // Arrow &__arrow { $color-shadow: rgba(#000, 0.075); - position: absolute; - top: 0; - left: 0; - opacity: 0; - pointer-events: none; - display: block; - transform: translate3d(var(--x), var(--y), 0); - transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart); - transform-origin: 50% 50%; - filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow); + + // Enable only on devices with hover + @media (hover: hover) { + position: absolute; + top: 0; + left: 0; + opacity: 0; + display: block; + pointer-events: none; + transform: translate3d(var(--x), var(--y), 0); + transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart); + transform-origin: 50% 50%; + filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow); + } svg { display: block; From a241dd849dec60506d90eb10b6dbff81c408f01f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 26 Sep 2022 22:51:03 +0200 Subject: [PATCH 03/68] Update humans and add robots file --- static/humans.txt | 4 ++-- static/robots.txt | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 static/robots.txt diff --git a/static/humans.txt b/static/humans.txt index 61f3175..993628b 100644 --- a/static/humans.txt +++ b/static/humans.txt @@ -6,12 +6,12 @@ Twitter: https://twitter.com/Flayks Location: Toulouse, France (Project originally started in April 2019 in Brisbane, Australia) /* THANKS */ -Name: Julien Espagnon (https://twitter.com/Julien_Espagnon) - Help with the interactive WebGL globe +Name: Julien Espagnon (https://twitter.com/Julien_Espagnon) - Help with the interactive globe Name: Grafikart (https://jonathan-boyer.fr) - Many tips and help about Javascript and code logic /* SITE */ Original launch: April 22th, 2020 -Version 2 launch: September 2022 +Version 2 launch: September 27th, 2022 Standards: HTML5, CSS3, Javascript Front-End: SvelteKit, Motion One, normalize.css Back-End: Vercel, Directus, Docker diff --git a/static/robots.txt b/static/robots.txt new file mode 100644 index 0000000..7f4904e --- /dev/null +++ b/static/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Allow: / \ No newline at end of file From 7898eb9bec2e89bd2d96795d257755d829f86ded Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 26 Sep 2022 23:13:45 +0200 Subject: [PATCH 04/68] Add SEO stuff --- src/components/Metas.svelte | 5 +++++ src/routes/+layout.svelte | 2 ++ static/manifest.json | 4 ++-- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Metas.svelte b/src/components/Metas.svelte index d3ba8f1..4a20e3a 100644 --- a/src/components/Metas.svelte +++ b/src/components/Metas.svelte @@ -18,10 +18,15 @@ + + {#if description} + + {/if} {#if image} + {/if} {#if url} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 578e6b9..a20ac68 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -65,6 +65,8 @@ + + {#each fonts as font} {/each} diff --git a/static/manifest.json b/static/manifest.json index 1d53dab..e91c155 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -1,7 +1,7 @@ { "short_name": "Houses Of", - "name": "Houses Of - Beautiful houses around the world", - "description": "", + "name": "Houses Of the World", + "description": "Houses Of is a project showcasing charismatic houses around the world.", "icons": [ { "src": "/images/siteicon-192.png", From 395de99e63e52110557044d4199507b85cc73b91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 26 Sep 2022 23:41:03 +0200 Subject: [PATCH 05/68] Remove margin-top on every 10th item of Photos page --- src/style/pages/_photos.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 6261a3f..b727fa7 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -175,14 +175,6 @@ } } // Additional spacing between grid patterns - &:nth-child(10n + 10){ - @include bp (sm) { - margin-top: 12px; - } - @include bp (sd) { - margin-top: clamp(8px, 1vw, 16px); - } - } &:nth-child(10n + 1), &:nth-child(10n + 4), &:nth-child(10n + 5){ From d921f699b2a70e2d41946e652debf2733a6507f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 00:23:15 +0200 Subject: [PATCH 06/68] [wip] Define manually Globe dayTime until automatic calculation --- src/modules/globe/index.ts | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/modules/globe/index.ts b/src/modules/globe/index.ts index db813c2..fe6daed 100644 --- a/src/modules/globe/index.ts +++ b/src/modules/globe/index.ts @@ -1,6 +1,5 @@ // @ts-nocheck import { Renderer, Camera, Vec3, Orbit, Sphere, Transform, Program, Mesh, Texture } from 'ogl' -import { map } from '$utils/functions' // Shaders import VERTEX_SHADER from '$modules/globe/vertex.glsl?raw' import FRAGMENT_SHADER from '$modules/globe/frag.glsl?raw' @@ -18,20 +17,20 @@ export class Globe { this.zoom = 1.3075 // Calculate the current sun position from a given location - const locations = [ - { - lat: -37.840935, - lng: 144.946457, - tz: 'Australia/Melbourne', - }, - { - lat: 48.856614, - lng: 2.3522219, - tz: 'Europe/Paris', - } - ] - const location = locations[1] - const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: location.tz })) + // const locations = [ + // { + // lat: -37.840935, + // lng: 144.946457, + // tz: 'Australia/Melbourne', + // }, + // { + // lat: 48.856614, + // lng: 2.3522219, + // tz: 'Europe/Paris', + // } + // ] + // const location = locations[1] + // const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: location.tz })) // Parameters this.params = { @@ -122,8 +121,7 @@ export class Globe { imgDark.src = this.options.mapFileDark // Create light - const dayTime = map(5, 0, 24, 0, 1, true) - const lightD = degToRad(360 / dayTime) + const lightD = degToRad(7 * 360 / 24) const sunPosition = new Vec3( Math.cos(lightD), Math.sin(lightD) * Math.sin(0), From aa857e3531d88c5f3e5aa54a05e79066158e230e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 09:13:10 +0200 Subject: [PATCH 07/68] Adapt Globe responsive and disable scroll on touch devices for now Disabling scroll while finding a solution to only scroll horizontally on mobile --- .../organisms/InteractiveGlobe.svelte | 4 +- src/style/modules/_globe.scss | 43 +++++++++++++++---- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/components/organisms/InteractiveGlobe.svelte b/src/components/organisms/InteractiveGlobe.svelte index 63ff01a..c8245bc 100644 --- a/src/components/organisms/InteractiveGlobe.svelte +++ b/src/components/organisms/InteractiveGlobe.svelte @@ -151,13 +151,13 @@ animation: { y: ['110%', 0] }, options: { stagger: 0.04, - duration: 1, + duration: 0.85, threshold: 0, }, }} > -

+

{hoveredMarker.country}

diff --git a/src/style/modules/_globe.scss b/src/style/modules/_globe.scss index 64b951e..dfd2758 100644 --- a/src/style/modules/_globe.scss +++ b/src/style/modules/_globe.scss @@ -13,6 +13,11 @@ left: 50%; transform: translateX(-50%) translateZ(0); width: var(--width); + pointer-events: none; + + @media (hover: hover) { + pointer-events: auto; + } // Responsive square padding &:after { @@ -62,6 +67,7 @@ top: 50%; left: 0; width: 100%; + padding-top: 0.25em; overflow: hidden; transform: translateY(-50%) translateZ(0); pointer-events: none; @@ -74,16 +80,22 @@ font-family: $font-serif; font-weight: 100; letter-spacing: -0.035em; + line-height: 0.75; color: $color-secondary; font-size: clamp(#{rem(88px)}, 20vw, #{rem(320px)}); } .country { display: block; text-transform: uppercase; + margin-top: 2em; font-size: rem(14px); color: $color-tertiary; letter-spacing: 0.1em; font-weight: 500; + + @include bp (md) { + margin-top: 4em; + } } } @@ -112,27 +124,38 @@ a { position: relative; - top: -10px; - left: -10px; - display: block; - width: 20px; - height: 20px; + top: -8px; + left: -8px; display: flex; + width: 16px; + height: 16px; align-items: center; justify-content: center; text-decoration: none; color: $color-secondary; pointer-events: auto; + @include bp (md) { + top: -10px; + left: -10px; + width: 20px; + height: 20px; + } + // Dot i { display: block; - width: 10px; - height: 10px; + width: 6px; + height: 6px; border-radius: 32px; background: $color-secondary; transition: box-shadow 0.4s var(--ease-quart), transform 0.4s var(--ease-quart); transform-origin: 50% 50%; + + @include bp (md) { + width: 10px; + height: 10px; + } } // Name span { @@ -142,7 +165,11 @@ // Hover: Grow marker outline &:hover { i { - box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25); + box-shadow: 0 0 0 8px rgba($color-tertiary, 0.25); + + @include bp (md) { + box-shadow: 0 0 0 10px rgba($color-tertiary, 0.25); + } } } } From b316ff17456c2243bb241cc3bcdaf02a1bda2c83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 09:14:54 +0200 Subject: [PATCH 08/68] Hide Carousel arrow on touch devices --- src/style/organisms/_carousel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss index 3ba0307..3138e7a 100644 --- a/src/style/organisms/_carousel.scss +++ b/src/style/organisms/_carousel.scss @@ -88,6 +88,7 @@ // Arrow &__arrow { $color-shadow: rgba(#000, 0.075); + display: none; // Enable only on devices with hover @media (hover: hover) { From d83d609b0e81b78d068e3e7c79c5bb2ba1b2ce10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 09:16:05 +0200 Subject: [PATCH 09/68] Remove padding on CartItem remove button --- src/style/molecules/_cart-item.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/molecules/_cart-item.scss b/src/style/molecules/_cart-item.scss index 2bfe9df..7a55e14 100644 --- a/src/style/molecules/_cart-item.scss +++ b/src/style/molecules/_cart-item.scss @@ -118,6 +118,7 @@ position: absolute; top: 16px; right: 16px; + padding: 0; } } } \ No newline at end of file From 594e8e976e3fec8af50d207a31d7feb6106c304c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 09:24:20 +0200 Subject: [PATCH 10/68] Globe: Check for renderer on resize --- src/modules/globe/index.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/modules/globe/index.ts b/src/modules/globe/index.ts index fe6daed..55e38fc 100644 --- a/src/modules/globe/index.ts +++ b/src/modules/globe/index.ts @@ -261,12 +261,14 @@ export class Globe { * Resize method */ resize () { - this.width = this.el.offsetWidth - this.height = this.el.offsetHeight - this.renderer.setSize(this.width, this.height) - this.camera.perspective({ - aspect: this.gl.canvas.width / this.gl.canvas.height - }) + if (this.renderer) { + this.width = this.el.offsetWidth + this.height = this.el.offsetHeight + this.renderer.setSize(this.width, this.height) + this.camera.perspective({ + aspect: this.gl.canvas.width / this.gl.canvas.height + }) + } } From 0eca069eaff5ed8d5d0da0d06e71732590d9c732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 09:25:05 +0200 Subject: [PATCH 11/68] Fix Photos page filters and reset button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Just remove photos from the filter label 🤭 --- src/routes/photos/+page.svelte | 4 ++-- src/style/pages/_photos.scss | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte index e090919..087d182 100644 --- a/src/routes/photos/+page.svelte +++ b/src/routes/photos/+page.svelte @@ -392,13 +392,13 @@ options={[ { value: 'latest', - name: 'Latest photos', + name: 'Latest', default: true, selected: filterSort === defaultSort }, { value: 'oldest', - name: 'Oldest photos', + name: 'Oldest', selected: filterSort === 'oldest' }, ]} diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index b727fa7..c4428b2 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -5,6 +5,7 @@ margin-bottom: clamp(32px, 7.5vw, 96px); color: $color-text; text-align: center; + overflow: hidden; // Title :global(h1) { @@ -365,14 +366,12 @@ display: flex; align-items: center; justify-content: center; - margin-top: 20px; @include bp (sm) { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); - margin-top: 0; } // Reset link From 4791fe5b139db81f0950b32494e2be9a95badf77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 27 Sep 2022 09:45:27 +0200 Subject: [PATCH 12/68] Fix ScrollingTitle parallax on mobile silly `display: inline-block`! --- src/components/atoms/ScrollingTitle.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/atoms/ScrollingTitle.svelte b/src/components/atoms/ScrollingTitle.svelte index acd6127..c617c31 100644 --- a/src/components/atoms/ScrollingTitle.svelte +++ b/src/components/atoms/ScrollingTitle.svelte @@ -1,5 +1,6 @@ -
doNotScroll && scrollToTop()} > -
\ No newline at end of file + \ No newline at end of file diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index e6a3043..680c160 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -34,49 +34,51 @@ title="{errors[$page.status].title} – Houses Of" /> - -
- + +
+
+ - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +
    - - + + -
    -
    -
    - - +
    +
    +
    + + +
    -
    + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a20ac68..efbabe1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,7 +7,6 @@ import type { PageData } from './$types' import { onMount, setContext } from 'svelte' import { pageLoading, previousPage } from '$utils/stores' - import { DURATION } from '$utils/contants' import '$utils/polyfills' import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public' // Components @@ -46,14 +45,7 @@ // Define page loading from navigating store navigating.subscribe((store: any) => { - if (store) { - $pageLoading = true - - // Turn page loading when changing page - setTimeout(() => { - $pageLoading = false - }, DURATION.PAGE_IN * 1.25) - } + store && ($pageLoading = true) }) onMount(() => { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 83c9ea8..bbd5930 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -82,87 +82,89 @@ /> - -
    - +
    +
    - - + + + -
    -

    - {settings.description} -

    +
    +

    + {settings.description} +

    - + +
    +
    + +
    + +
    + +
    + + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
    -
    -
    - -
    +
    + -
    - + + + - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    + +
    -
    - - - - - - - -
    - -
    -
    -
    - - +
    +
    +
    + + +
    -
    + \ No newline at end of file diff --git a/src/routes/[country]/[location]/+page.svelte b/src/routes/[country]/[location]/+page.svelte index e96a8f7..ae07268 100644 --- a/src/routes/[country]/[location]/+page.svelte +++ b/src/routes/[country]/[location]/+page.svelte @@ -218,148 +218,149 @@ + +
    +
    +

    + + Houses + of + + + {location.name} + +

    - -
    -

    - - Houses - of - - - {location.name} - -

    - -
    -
    -
    - Houses of {location.name} {location.description ?? 'has no description yet'} -
    -
    -

    - Photos by - {#each location.credits as { credit_id: { name, website }}} - {#if website} - - {name} - - {:else} - {name} - {/if} - {/each} -

    - {#if latestPhoto} - · -

    - Updated +

    +
    +
    + Houses of {location.name} {location.description ?? 'has no description yet'} +
    +
    +

    + Photos by + {#each location.credits as { credit_id: { name, website }}} + {#if website} + + {name} + + {:else} + {name} + {/if} + {/each}

    - {/if} -
    + {#if latestPhoto} + · +

    + Updated +

    + {/if} +
    -
    - - - {#if location.has_poster} - - {/if} -
    -
    -
    - {#if hasIllustration} - - - - Illustration for {location.name} - - {/if} -
    - - {#if photos.length} -
    - {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} - - {/each} -
    - -
    - - {#if !ended} -

    See more photos

    - {:else} -

    You've seen it all!

    - {/if} -     - - {#if ended} -
    -
    -
    - {#if location.has_poster} - - {:else} - - {/if} - -
    + {#if location.has_poster} + + {/if}
    - {/if} +
    - {#if location.acknowledgement} -
    - Flag of {location.country.name} + + + Illustration for {location.name} -

    {location.acknowledgement}

    -
    + {/if} - {:else} -
    -

    - No photos available for {location.name}.
    - Come back later! -

    -
    - {/if} + + {#if photos.length} +
    + {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} + + {/each} +
    + +
    + + {#if !ended} +

    See more photos

    + {:else} +

    You've seen it all!

    + {/if} +     + + {#if ended} +
    +
    +
    + {#if location.has_poster} + + {:else} + + {/if} + +
    +
    +
    + {/if} + + {#if location.acknowledgement} +
    + Flag of {location.country.name} +

    {location.acknowledgement}

    +
    + {/if} +
    + {:else} +
    +

    + No photos available for {location.name}.
    + Come back later! +

    +
    + {/if} + \ No newline at end of file diff --git a/src/routes/[country]/[location]/[photo]/+page.svelte b/src/routes/[country]/[location]/[photo]/+page.svelte index f9444ba..8475e3d 100644 --- a/src/routes/[country]/[location]/[photo]/+page.svelte +++ b/src/routes/[country]/[location]/[photo]/+page.svelte @@ -305,98 +305,100 @@ {/if} - -
    -

    Tap for fullscreen

    + +
    +
    +

    Tap for fullscreen

    - - - - - + + + + + -
    -
    - {#each visiblePhotos as { id, image, title }, index (id)} -
    - {title} +
    +
    + {#each visiblePhotos as { id, image, title }, index (id)} +
    + {title} +
    + {/each} + +
    + + + + + +
    - {/each} -
    - - - - - - + +
    + +
    +
    +

    {currentPhoto.title}

    -
    - -
    -
    - -
    -

    {currentPhoto.title}

    - -
    - - - - {#if currentPhoto.city} - {currentPhoto.city}, {location.name}, {location.country.name} - {:else} - {location.name}, {location.country.name} - {/if} - - - {#if currentPhoto.date_taken} - · - - {/if} +
    + + + + {#if currentPhoto.city} + {currentPhoto.city}, {location.name}, {location.country.name} + {:else} + {location.name}, {location.country.name} + {/if} + + + {#if currentPhoto.date_taken} + · + + {/if} +
    -
    - {#if isFullscreen} -
    -
    - {currentPhoto.title} - - - - - + {#if isFullscreen} +
    +
    + {currentPhoto.title} + + + + + +
    -
    - {/if} + {/if} +
    \ No newline at end of file diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index e506335..8ab49d3 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -180,215 +180,216 @@ image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null} /> + +
    + - - - -
    -
    -

    {about.intro_title}

    -
    - {@html about.intro_heading} -
    - -
    - {@html about.intro_text} -
    -
    -
    - -
    -
    -
    - {about.intro_firstphoto.title} -
    - {about.intro_firstphoto_caption}
    - in - - {about.intro_firstlocation.country.flag.title} - Naarm Australia (Melbourne) - -
    -
    - -

    {about.creation_title}

    -
    - {@html about.creation_heading} -
    - -
    - {@html about.creation_text} -
    - -
    - {about.creation_portrait.title} -
    - - {about.creation_portrait_caption} - -
    -
    - -
    -
    -
    - {about.present_image.title} -
    - -

    {about.present_title}

    -
    -

    {about.present_text}

    -
    - -
    - {@html about.present_heading} -
    - -
    -

    {about.present_conclusion}

    -
    -
    -
    - - {#if about.image_showcase} -
    - {about.image_showcase.title} -
    - {/if} - -
    -
    - - -
    - {#each about.process_steps as { text, image, video_mp4, video_webm }, index} - - {/each} +
    + {@html about.intro_text} +
    -
    -
    + -
    -
    -
    - {#each photos as { image: { id }, title }, index} - +
    +
    + {about.intro_firstphoto.title} - {/each} -
    -
    -
    +
    + {about.intro_firstphoto_caption}
    + in + + {about.intro_firstlocation.country.flag.title} + Naarm Australia (Melbourne) + +
    + -
    -
    -

    {about.contact_title}

    -
    - {#each about.contact_blocks as { title, text, link, button }} -
    -

    {title}

    -
    - {@html text} -
    -
    - {#if link} - {#key emailCopied === link} -
    { - emailCopied = detail.email - // Clear timeout and add timeout to hide message - clearTimeout(emailCopiedTimeout) - emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500) - }} - > - {#if emailCopied !== link} -
    - {/key} - {/if} -
    +

    {about.creation_title}

    +
    + {@html about.creation_heading} +
    + +
    + {@html about.creation_text} +
    + +
    + {about.creation_portrait.title} +
    + + {about.creation_portrait_caption} + +
    +
    + +
    +
    +
    + {about.present_image.title} +
    + +

    {about.present_title}

    +
    +

    {about.present_text}

    +
    + +
    + {@html about.present_heading} +
    + +
    +

    {about.present_conclusion}

    +
    +
    +
    + + {#if about.image_showcase} +
    + {about.image_showcase.title} +
    + {/if} + +
    +
    + + +
    + {#each about.process_steps as { text, image, video_mp4, video_webm }, index} + + {/each} +
    -
    - + + +
    +
    +
    + {#each photos as { image: { id }, title }, index} + + {/each} +
    +
    +
    + +
    +
    +

    {about.contact_title}

    +
    + {#each about.contact_blocks as { title, text, link, button }} +
    +

    {title}

    +
    + {@html text} +
    +
    + {#if link} + {#key emailCopied === link} +
    { + emailCopied = detail.email + // Clear timeout and add timeout to hide message + clearTimeout(emailCopiedTimeout) + emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500) + }} + > + {#if emailCopied !== link} +
    + {/key} + {/if} +
    +
    + {/each} +
    +
    +
    +     \ No newline at end of file diff --git a/src/routes/credits/+page.svelte b/src/routes/credits/+page.svelte index 7b6029d..f2efc62 100644 --- a/src/routes/credits/+page.svelte +++ b/src/routes/credits/+page.svelte @@ -17,7 +17,7 @@ import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' export let data: PageData - const { credits, credit } = data + const { credit } = data onMount(() => { @@ -63,22 +63,47 @@ + +
    + - - +
    +
    + {#each data.credits.list as { title, credits }} +
    +

    {title}

    +
      + {#each credits as { name, role, website }} +
    • +
      +
      + {#if website} +

      + {name} +

      + {:else} +

      {name}

      + {/if} +
      +
      + {role} +
      +
      +
      • + {/each} +
    +
    + {/each} -
    -
    - {#each credits.list as { title, credits }}
    -

    {title}

    +

    Photography

      - {#each credits as { name, role, website }} + {#each credit as { name, website, location }}
    • @@ -91,57 +116,33 @@ {/if}
      - {role} +
      • {/each}
    - {/each} - -
    -

    Photography

    -
      - {#each credit as { name, website, location }} -
    • -
      -
      - {#if website} -

      - {name} -

      - {:else} -

      {name}

      - {/if} -
      -
      - -
      -
      -
      • - {/each} -
    -
    -
    +
    - + +
    \ No newline at end of file diff --git a/src/routes/locations/+page.svelte b/src/routes/locations/+page.svelte index f6027d3..f07f462 100644 --- a/src/routes/locations/+page.svelte +++ b/src/routes/locations/+page.svelte @@ -23,18 +23,20 @@ image="" /> - - + +
    + -
    - - -
    +
    + + +
    -
    -
    - - -
    -
    +
    +
    + + +
    +
    +
    \ No newline at end of file diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte index 087d182..cd5dd81 100644 --- a/src/routes/photos/+page.svelte +++ b/src/routes/photos/+page.svelte @@ -336,162 +336,164 @@ /> - -
    - - - - - - -
    +
    +
    -
    - Filter photos -
      -
    • - -
      • -
    • - -
      • -
    + + + -
    - {#if filtered} - - {/if} -
    -
    -
    -
    + -
    -
    - {#if photos} -
    - {#each photos as { id, image, slug, location, title, city }, index (id)} -
    - - {image.title} - -
    - -
    -
    - {/each} -
    +
    +
    + Filter photos +
      +
    • + +
      • +
    • + +
      • +
    -
    -

    - Last updated: -

    - - + {/if}
    - {:else if !filteredCountryExists} -
    -

    - {$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())} is not available… yet 👀 -

    -
    - {/if} +
    +
    -
    -
    - - +
    +
    + {#if photos} +
    + {#each photos as { id, image, slug, location, title, city }, index (id)} +
    + + {image.title} + +
    + +
    +
    + {/each} +
    + +
    +

    + Last updated: +

    + +
    + {:else if !filteredCountryExists} +
    +

    + {$page.url.searchParams.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())} is not available… yet 👀 +

    +
    + {/if} + +
    +
    + + +
    -
    - + + \ No newline at end of file diff --git a/src/routes/shop/+error.svelte b/src/routes/shop/+error.svelte index f30411a..dcd77f9 100644 --- a/src/routes/shop/+error.svelte +++ b/src/routes/shop/+error.svelte @@ -25,17 +25,19 @@ /> - - + +
    + -
    -
    -
    -

    Uh oh!

    -

    {errors[$page.status].message}

    +
    +
    +
    +

    Uh oh!

    +

    {errors[$page.status].message}

    +
    -
    -
    + - + +
    \ No newline at end of file diff --git a/src/routes/shop/+page.svelte b/src/routes/shop/+page.svelte index 4781f31..0dcaaea 100644 --- a/src/routes/shop/+page.svelte +++ b/src/routes/shop/+page.svelte @@ -26,13 +26,15 @@ /> - - + +
    + - + - + +
    \ No newline at end of file diff --git a/src/routes/shop/[type]-[name]/+page.svelte b/src/routes/shop/[type]-[name]/+page.svelte index 35f8507..a35c6ab 100644 --- a/src/routes/shop/[type]-[name]/+page.svelte +++ b/src/routes/shop/[type]-[name]/+page.svelte @@ -24,13 +24,15 @@ /> - - + +
    + - + - + +
    \ No newline at end of file diff --git a/src/routes/subscribe/+page.svelte b/src/routes/subscribe/+page.svelte index cd51ab3..ec74f30 100644 --- a/src/routes/subscribe/+page.svelte +++ b/src/routes/subscribe/+page.svelte @@ -65,32 +65,34 @@ description="Subscribe to the Houses Of newsletter to be notified when new photos or locations are added to the site and when more prints are available on our shop" /> - - \ No newline at end of file diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 8ab49d3..7ef6ce9 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -21,18 +21,18 @@ import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte' import ProcessStep from '$components/molecules/ProcessStep.svelte' import Banner from '$components/organisms/Banner.svelte' + import { sendEvent } from '$utils/analytics'; export let data: PageData const { about, photos } = data let scrollY: number, innerWidth: number, innerHeight: number let photosGridEl: HTMLElement - let currentStep: number = 0 let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop + let currentStep: number = 0 let emailCopied: string = null let emailCopiedTimeout: ReturnType | number - $: currentStep = $page.url.hash ? Number($page.url.hash.split('#step-')[1]) - 1 : 0 $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true) $: fadedPhotosIndexes = innerWidth > 768 ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34] @@ -315,7 +315,12 @@
      {#each about.process_steps as { title }, index}
    1. - + { + currentStep = index + sendEvent({ action: 'aboutStepSwitch' }) + }} + > {title}
      2. @@ -325,15 +330,16 @@
      {#each about.process_steps as { text, image, video_mp4, video_webm }, index} - + {#if index === currentStep} + + {/if} {/each}
    From 4b984fa078481f2446ff34563e5305265c12d8eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Sun, 9 Oct 2022 15:37:31 +0200 Subject: [PATCH 28/68] Add Shop product page share image --- src/routes/shop/[type]-[name]/+page.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/shop/[type]-[name]/+page.svelte b/src/routes/shop/[type]-[name]/+page.svelte index a35c6ab..c4cd505 100644 --- a/src/routes/shop/[type]-[name]/+page.svelte +++ b/src/routes/shop/[type]-[name]/+page.svelte @@ -1,6 +1,7 @@ + + - +
    diff --git a/src/routes/[country]/[location]/[photo]/+page.svelte b/src/routes/[country]/[location]/[photo]/+page.svelte index 8475e3d..fdb2f08 100644 --- a/src/routes/[country]/[location]/[photo]/+page.svelte +++ b/src/routes/[country]/[location]/[photo]/+page.svelte @@ -291,10 +291,7 @@ }) - + {#if currentPhoto} +
    +
    +
    diff --git a/src/routes/subscribe/+page.svelte b/src/routes/subscribe/+page.svelte index ec74f30..1a9e583 100644 --- a/src/routes/subscribe/+page.svelte +++ b/src/routes/subscribe/+page.svelte @@ -65,6 +65,7 @@ description="Subscribe to the Houses Of newsletter to be notified when new photos or locations are added to the site and when more prints are available on our shop" /> +
    -

    Shipping will be calculated from the delivery address during the checkout process

    +

    Free shipping worldwide!

    {#if $cartData && $cartAmount > 0 && $cartData.checkout_url}
    -