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

Use sveltekit-prefetch globally and update template

Browse Source
This commit is contained in:
Félix Péault
2022-11-16 12:12:20 +01:00
parent 3aa272016b
commit cac0d434bb
12 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@@ -13,8 +13,8 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body data-sveltekit-prefetch>
%sveltekit.body% <div style="display: contents">%sveltekit.body%</div>
<script> <script>
document.body.style.opacity = '0' document.body.style.opacity = '0'

4
src/components/atoms/BoxCTA.svelte
View File

@@ -11,9 +11,7 @@
export let url: string export let url: string
</script> </script>
<a href={url} class="box-cta" <a href={url} class="box-cta">
data-sveltekit-prefetch={url.includes('http') ? true : undefined}
>
<div class="icon"> <div class="icon">
<Icon icon={icon} label={alt} /> <Icon icon={icon} label={alt} />
</div> </div>

1
src/components/atoms/Button.svelte
View File

@@ -44,7 +44,6 @@
<a <a
href={url} class={classes} href={url} class={classes}
{target} {rel} {target} {rel}
data-sveltekit-prefetch={url && (isExternal || isProtocol) ? 'off' : ''}
data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''} data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
{disabled} {disabled}
tabindex="0" tabindex="0"

2
src/components/molecules/EmailForm.svelte
View File

@@ -65,7 +65,7 @@
<div class="newsletter-form__bottom"> <div class="newsletter-form__bottom">
{#if past} {#if past}
<a href="/subscribe" class="past-issues" data-sveltekit-noscroll data-sveltekit-prefetch> <a href="/subscribe" class="past-issues" data-sveltekit-noscroll>
<svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon"> <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" /> <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> </svg>

2
src/components/molecules/Poster.svelte
View File

@@ -16,7 +16,7 @@
<div class="poster"> <div class="poster">
{#if image} {#if image}
<a href="/shop/poster-{location.slug}" data-sveltekit-noscroll data-sveltekit-prefetch <a href="/shop/poster-{location.slug}" data-sveltekit-noscroll
on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })} on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
> >
<Image <Image

2
src/components/molecules/Switcher.svelte
View File

@@ -60,7 +60,7 @@
</span> </span>
</button> </button>
<ul class="switcher__links" data-sveltekit-noscroll data-sveltekit-prefetch> <ul class="switcher__links" data-sveltekit-noscroll>
{#each switcher_links as { text, url, icon, icon_label }} {#each switcher_links as { text, url, icon, icon_label }}
<li class:is-active={$page.url.pathname === url}> <li class:is-active={$page.url.pathname === url}>
<a href={url} on:click={toggleSwitcher} tabindex="0"> <a href={url} on:click={toggleSwitcher} tabindex="0">

4
src/components/organisms/Footer.svelte
View File

@@ -14,12 +14,12 @@
<footer class="footer"> <footer class="footer">
<div class="container grid"> <div class="container grid">
<a href="/" class="footer__title" data-sveltekit-prefetch data-sveltekit-noscroll tabindex="0"> <a href="/" class="footer__title" tabindex="0" data-sveltekit-noscroll>
<SiteTitle tag="div" /> <SiteTitle tag="div" />
</a> </a>
<nav class="footer__links"> <nav class="footer__links">
<ul data-sveltekit-prefetch data-sveltekit-noscroll> <ul data-sveltekit-noscroll>
{#each footer_links as { title, slug }} {#each footer_links as { title, slug }}
<li> <li>
<a href="/{slug}" class="link-3d" tabindex="0"> <a href="/{slug}" class="link-3d" tabindex="0">

2
src/components/organisms/ShopBanner.svelte
View File

@@ -126,7 +126,7 @@
<div class="container"> <div class="container">
<p class="text-label">Choose a city</p> <p class="text-label">Choose a city</p>
<nav> <nav>
<ul data-sveltekit-noscroll data-sveltekit-prefetch bind:this={navChooseEl}> <ul bind:this={navChooseEl} data-sveltekit-noscroll>
{#each shopLocations as { name, slug }} {#each shopLocations as { name, slug }}
<li class:is-active={product && slug === product.location.slug}> <li class:is-active={product && slug === product.location.slug}>
<a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}> <a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>

2
src/components/organisms/ShopModule.svelte
View File

@@ -62,7 +62,7 @@
<div class="content"> <div class="content">
<div class="shop__images"> <div class="shop__images">
{#if images} {#if images}
<a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll data-sveltekit-prefetch> <a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll>
{#each images as { directus_files_id: { id, title }}, index} {#each images as { directus_files_id: { id, title }}, index}
<Image <Image
class={index === currentImageIndex ? 'is-visible' : null} class={index === currentImageIndex ? 'is-visible' : null}

2
src/routes/[country]/[location]/[photo]/+page.svelte
View File

@@ -357,7 +357,7 @@
<h1 class="title-medium">{currentPhoto.title}</h1> <h1 class="title-medium">{currentPhoto.title}</h1>
<div class="detail text-info"> <div class="detail text-info">
<a href="/{location.country.slug}/{location.slug}" data-sveltekit-prefetch data-sveltekit-noscroll> <a href="/{location.country.slug}/{location.slug}" data-sveltekit-noscroll>
<Icon class="icon" icon="map-pin" label="Map pin" /> <Icon class="icon" icon="map-pin" label="Map pin" />
<span> <span>
{#if currentPhoto.city} {#if currentPhoto.city}

2
src/routes/about/+page.svelte
View File

@@ -222,7 +222,7 @@
<figcaption class="text-info"> <figcaption class="text-info">
{about.intro_firstphoto_caption}<br> {about.intro_firstphoto_caption}<br>
in in
<a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll data-sveltekit-prefetch> <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}"> <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> <span>Naarm Australia (Melbourne)</span>
</a> </a>

2
src/routes/photos/+page.svelte
View File

@@ -430,7 +430,7 @@
<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 data-sveltekit-prefetch> <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">