First commit

Explore Svelte and Sapper

src/routes/location/[location].svelte

@@ -0,0 +1,54 @@
+<script context="module">
+	export async function preload (page, session) {
+		const location = await this.fetch('//api.housesof.localhost/how/gql?access_token=NJk0urljsdSvApUDzWxGgoO6', {
+			method: 'post',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ query: `{
+				locations (filter: { name_eq: "${page.params.location}" }) {
+					data {
+						name
+						region
+						country { name }
+						description
+					}
+				}
+			}`})
+		})
+		const photos = await this.fetch(`http://api.housesof.localhost/how/items/photos?fields=id,name,image.data,created_on&filter[location.name][rlike]=%${page.params.location}%`)
+		const locationData = await location.json()
+		const photosData = await photos.json()
+		return {
+			location: locationData.data.locations.data[0],
+			photos: photosData.data
+		}
+	}
+</script>
+
+<script>
+	import { slide } from 'svelte/transition'
+	import Photo from '../../components/Photo.svelte'
+
+	export let location
+	export let photos
+</script>
+
+<svelte:head>
+	<title>Houses Of - Beautiful houses of {location.name}, {location.country.name}</title>
+</svelte:head>
+
+<div class="section container" in:slide out:slide>
+	<div class="content">
+		<h1 class="title is-2">{location.name}, {location.country.name}</h1>
+		{#if location.description}
+		<p>Houses Of {location.name} {location.description}</p>
+		{/if}
+	</div>
+
+	<div class="columns">
+		{#each photos as photo, index (photo.id)}
+		<div class="column">
+			<Photo {photo} {location} index={index + 1} />
+		</div>
+		{/each}
+	</div>
+</div>