From ac40eedb2fa4176adb9fa1326375bd8bb2d70347 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 17 Nov 2021 19:25:40 +0100
Subject: [PATCH] Use sveltekit:noscroll/prefetch on internal links

---
 src/components/atoms/BoxCTA.svelte             | 4 +++-
 src/components/molecules/EmailForm.svelte      | 2 +-
 src/components/molecules/Location.svelte       | 2 +-
 src/components/molecules/Poster.svelte         | 2 +-
 src/components/molecules/Switcher.svelte       | 4 +++-
 src/components/organisms/Footer.svelte         | 4 ++--
 src/routes/[country]/[location]/[photo].svelte | 2 +-
 src/routes/credits.svelte                      | 2 +-
 src/routes/photos.svelte                       | 2 +-
 src/routes/shop/__layout.svelte                | 4 ++--
 10 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/atoms/BoxCTA.svelte b/src/components/atoms/BoxCTA.svelte
index 8cd65b1..661eef6 100644
--- a/src/components/atoms/BoxCTA.svelte
+++ b/src/components/atoms/BoxCTA.svelte
@@ -7,7 +7,9 @@
     export let url: string
 </script>
 
-<a href={url} class="box-cta">
+<a href={url} class="box-cta"
+    sveltekit:noscroll sveltekit:prefetch={url.includes('http') ? true : undefined}
+>
     <div class="icon">
         <Icon icon={icon} label={alt} />
     </div>
diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte
index 4c9f91e..47e9f77 100644
--- a/src/components/molecules/EmailForm.svelte
+++ b/src/components/molecules/EmailForm.svelte
@@ -37,7 +37,7 @@
 
     <div class="newsletter-form__bottom">
         {#if past}
-            <a href="/subscribe" class="past-issues">
+            <a href="/subscribe" class="past-issues" sveltekit:noscroll sveltekit:prefetch>
                 <svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
                 </svg>
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index 31179a5..9b66515 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -62,7 +62,7 @@
     <a href="/{location.country.slug}/{location.slug}"
         on:mousemove={handleMouseMove}
         on:mouseleave={handleMouseLeave}
-        sveltekit-noscroll
+        sveltekit:noscroll
     >
         <Image
             class="location__flag"
diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte
index 7ca6937..ab5a290 100644
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -12,7 +12,7 @@
 
 <div class="poster">
     {#if image}
-        <a href="/shop/poster-{location.slug}">
+        <a href="/shop/poster-{location.slug}" sveltekit:noscroll sveltekit:prefetch>
             <Image
                 id={image.id}
                 sizeKey="product"
diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index f1f0511..5d28de5 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -58,7 +58,9 @@
         <ul>
             {#each links as { icon, iconLabel, url, text }}
                 <li>
-                    <a href={url} on:click={toggleSwitcher} sveltekit:prefetch>
+                    <a href={url} on:click={toggleSwitcher}
+                        sveltekit:noscroll sveltekit:prefetch
+                    >
                         <Icon class="icon" icon={icon} label={iconLabel} />
                         <span>{text}</span>
                     </a>
diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index 95e36cf..04c43fc 100644
--- a/src/components/organisms/Footer.svelte
+++ b/src/components/organisms/Footer.svelte
@@ -10,7 +10,7 @@
 
 <footer class="footer">
     <div class="container grid">
-        <a href="/" class="footer__title" sveltekit:prefetch>
+        <a href="/" class="footer__title" sveltekit:prefetch sveltekit:noscroll>
             <SiteTitle tag="div" />
         </a>
 
@@ -18,7 +18,7 @@
             <ul>
                 {#each footer_links as { title, slug }}
                     <li>
-                        <a href="/{slug}" class="link-3d" sveltekit:prefetch>
+                        <a href="/{slug}" class="link-3d" sveltekit:prefetch sveltekit:noscroll>
                             <SplitText text={title} clone={true} />
                         </a>
                     </li>
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 935b1f3..466539a 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -199,7 +199,7 @@
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
                 <div class="detail text-info">
-                    <a href="/{location.country.slug}/{location.slug}">
+                    <a href="/{location.country.slug}/{location.slug}" sveltekit:prefetch sveltekit:noscroll>
                         <Icon class="icon" icon="map-pin" label="Map pin" />
                         <span>
                             {#if currentPhoto.city}
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index 77a4e4b..7c95b9c 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -67,7 +67,7 @@
                                 <ul>
                                     {#each location as { location_id: { name, slug: slugLocation, country: { slug: slugCountry }}}, index}
                                         <li>
-                                            <a href="/{slugCountry}/{slugLocation}">{name}</a>
+                                            <a href="/{slugCountry}/{slugLocation}" sveltekit:noscroll>{name}</a>
                                         </li>
                                     {/each}
                                 </ul>
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index f1c443e..bd6d1f5 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -296,7 +296,7 @@
                 <div class="photos__grid">
                     {#each photos as { image, slug, location, title, city }, index}
                         <figure class="photo shadow-photo">
-                            <a href="/{location.country.slug}/{location.slug}/{slug}">
+                            <a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll>
                                 <Image
                                     id={image.id}
                                     sizeKey="photo-grid"
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index 06bd077..f329b4d 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -62,7 +62,7 @@
 
     <section class="shop-page__intro" bind:this={introEl}>
         <div class="top container">
-            <a href="/" class="back">
+            <a href="/" class="back" sveltekit:noscroll>
                 <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
@@ -83,7 +83,7 @@
                     <ul>
                         {#each $shopLocations as { name, slug }}
                             <li class:is-active={slug === product.location.slug}>
-                                <a href="/shop/poster-{slug}" sveltekit:noscroll sveltekit:prefetch>
+                                <a href="/shop/poster-{slug}" sveltekit:prefetch sveltekit:noscroll>
                                     {name}
                                 </a>
                             </li>