Tabs to spaces and code cleaning

src/molecules/Photo.svelte

@@ -12,8 +12,8 @@
     dayjs.extend(advancedFormat)
 
     // Props and variables
-    export let index
     export let photo
+    export let index
     export let layout = 'list'
     let photoElement
 
@@ -22,16 +22,16 @@
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
     // Reactive variables for location informations
-    $: location = $currentLocation
+    const location = photo.location
-    $: imgAlt = !!location ? `${photo.name}, ${location.region}, ${location.country.name}` : 'Loading…'
+    const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
-    $: photoHref = !!location ? `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` : '#'
+    const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
 
 
     /*
 	** Run code on browser only
 	*/
 	onMount(() => {
-        // Parallax on photo when image has been loaded
+        // Parallax on photo when the image has been loaded
         const parallaxNumber = basicScroll.default.create({
             elem: photoElement.querySelector('.photo__image--number'),
             direct: photoElement,
@@ -57,7 +57,7 @@
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
-            <p class="style-caps">{!!location && location.region}, {!!location && location.country.name}</p>
+            <p class="style-caps">{location.region}, {location.country.name}</p>
         </div>
     </div>
 

src/molecules/Switcher.svelte

@@ -1,5 +1,7 @@
 <script>
-    import { currentLocation } from '../store'
+    import {
+        currentLocation,
+    } from '../store'
 
     // Components
     import IconGlobe from '../atoms/iconGlobe'

src/routes/_layout.svelte

@@ -1,5 +1,11 @@
 <script context="module">
-	import { apiEndpoints, site, continents, countries, locations } from '../store'
+    import {
+        apiEndpoints,
+        site,
+        continents,
+        countries,
+        locations
+    } from '../store'
 
     export async function preload (page, session) {
         const request = await this.fetch(apiEndpoints.gql, {

src/routes/choose.svelte

@@ -1,8 +1,10 @@
 <script>
     import { onMount } from 'svelte'
-    import { fade, fly } from 'svelte/transition'
+    import {
-    import { flip } from 'svelte/animate'
+        site,
-    import { site, currentLocation, currentPhotos } from '../store'
+        currentLocation,
+        currentPhotos
+    } from '../store'
     import AOS from 'aos'
 
     // Components

src/routes/index.svelte

@@ -1,5 +1,7 @@
 <script context="module">
-	import { apiEndpoints } from '../store'
+	import {
+        apiEndpoints,
+    } from '../store'
 
 	// Preload data
 	export async function preload (page, session) {
@@ -7,7 +9,7 @@
         const limit = 5
 		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
         const photos = await req.json()
-		if (req.status === 200) {
+		if (req.ok) {
             return { photos: photos.data }
         }
 		this.error(404, 'Not found')
@@ -52,7 +54,6 @@
         // Scroll apparitions
         if (process.browser) {
             AOS.init()
-        }
 
             // Parallax titles
             const titleHouses = document.getElementById('title-houses')
@@ -82,6 +83,7 @@
                     }
                 }
             }).start()
+        }
     })
 </script>
 
@@ -89,9 +91,8 @@
 	<title>Houses Of - Beautiful houses of planet Earth</title>
 </svelte:head>
 
-<div in:fade out:fade>
+<section class="intro">
-    <section class="intro">
+    <div class="anim-mask">
-        <div class="anim-mask" in:fade out:fade>
         <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
             <h1 class="title-massive" aria-label="Houses">
                 {@html fn.lettersToSpan('Houses')}
@@ -99,7 +100,7 @@
         </div>
     </div>
 
-        <div class="wrap" in:fade out:fade>
+    <div class="wrap">
         <div class="intro__description style-description">
             <p>{$site.description}</p>
 
@@ -110,9 +111,9 @@
     </div>
 
     <Carousel {photos} />
-    </section>
+</section>
 
-    <section class="explore explore--homepage">
+<section class="explore explore--homepage">
     <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
         <div class="anim-mask">
             {@html fn.lettersToSpan('of')}
@@ -132,7 +133,6 @@
     </div>
 
     <Locations />
-    </section>
+</section>
 
-    <Footer />
+<Footer />
-</div>

src/routes/location/[country]/[location].svelte

@@ -1,6 +1,11 @@
 <script context="module">
-	// Svelte
+	import {
-	import { apiEndpoints, site, locations, currentLocation, currentPhotos } from '../../../store'
+		apiEndpoints,
+		site,
+		locations,
+		currentLocation,
+		currentPhotos
+	} from '../../../store'
 	import { stores } from '@sapper/app'
 
 	// Preload data
@@ -8,7 +13,7 @@
 		// Load photos
 		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
 		const photos = await req.json()
-		if (req.status === 200) {
+		if (req.ok) {
 			return { photos: photos.data }
 		}
 		this.error(404, 'Not found')
@@ -47,10 +52,11 @@
 	currentPhotos.set(photos)
 
 	// Define dates
-	const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
+	$: latestPhoto = photos[0]
-	const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
+	$: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
-	const dateUpdatedRelative = photos.length ? dayjs().to(dayjs(photos[0].modified_on)) : ''
+	$: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
-	const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : ''
+	$: dateUpdatedRelative = latestPhoto ?dayjs().to(dayjs(latestPhoto.modified_on)) : ''
+	$: lastUpdated = latestPhoto ? (dayjs(latestPhoto.modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelatives : ''
 
 
 	/*
@@ -156,6 +162,7 @@
 		</aside>
 	</div>
 
+	{#if photos.length}
 	<div class="photos__view wrap">
 		{#each paginatedPhotos as photo, index}
 		<Photo
@@ -192,6 +199,7 @@
 		</div>
 		{/if}
 	</section>
+	{/if}
 </section>
 
 <Footer />

src/routes/viewer/[country]/[location]/[photo].svelte

@@ -1,6 +1,11 @@
 <script context="module">
-	import { apiEndpoints, locations, currentLocation } from '../../../../store'
     import { stores } from '@sapper/app'
+    import {
+        apiEndpoints,
+        locations,
+        currentLocation,
+        currentPhotos
+    } from '../../../../store'
 
     // Define either to preload data or use the store
     let preloaded
@@ -47,34 +52,16 @@
     let changeWindowWidth
 
     // Define current location
-	const location = $locations.find(loc => loc.slug === $page.params.location)
+    const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
     const locationFull = `${location.name}, ${location.country.name}`
-	$currentLocation == undefined && currentLocation.set({ location, photos })
+
+    // Update store current location informations
+    if (!$currentLocation) currentLocation.set(location)
+    if (!$currentPhotos) currentPhotos.set(photos)
 
     // Define path
     const path = `/viewer/${location.country.slug}/${location.slug}/`
 
-	// Set current photo, index and siblings
-	const setCurrentPhotos = () => {
-		// Define index and prev/next photos
-		currentIndex = photos.findIndex(photo => photo.slug === $page.params.photo)
-		indexFormated = (currentIndex < 10) ? '0' + (currentIndex + 1) : currentIndex + 1
-		viewerPhotos = {
-			current: photos[currentIndex],
-			// Last photo if first, otherwise index - 1
-			prev: (currentIndex === 0) ? photos[photos.length - 1] : photos[currentIndex - 1],
-			// First photo if last, otherwise index + 1
-			next: (currentIndex === photos.length - 1) ? photos[0] : photos[currentIndex + 1]
-		}
-	}
-
-	// On photo page change
-	page.subscribe(({ path, params, query }) => {
-		if (path.includes('/viewer/')) {
-			setCurrentPhotos()
-		}
-	})
-
 
     /*
     ** Run code on browser only