First commit

Explore Svelte and Sapper

src/routes/_layout.svelte

@@ -0,0 +1,86 @@
+<script context="module">
+	import { locations, countries, site } from '../store'
+
+	export async function preload (page, segment) {
+		const res = await this.fetch('http://api.housesof.localhost/how/gql?access_token=NJk0urljsdSvApUDzWxGgoO6', {
+			method: 'post',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ query: `{
+				site {
+					data {
+						description
+						explore_globe
+						explore_list
+						instagram
+					}
+				}
+				countries {
+					data {
+						name
+						flag { metadata }
+					}
+				}
+				locations (filter: { status_eq: "published" }) {
+					data {
+						name
+						region
+						country { name }
+					}
+				}
+			}`})
+		})
+		const data = await res.json()
+		countries.set(data.data.countries.data)
+		locations.set(data.data.locations.data)
+		site.set(data.data.site.data[0])
+	}
+</script>
+
+<script>
+	import '../../node_modules/bulma/css/bulma.min.css'
+	import * as fn from '../functions'
+
+	// import SwitcherLarge from '../components/Photos.svelte'
+</script>
+
+<nav class="navbar is-danger" role="navigation" aria-label="main navigation">
+	<div class="container">
+		<div class="navbar-start">
+			<div class="navbar-brand">
+				<a class="navbar-item" href="/">
+					<strong>Houses Of</strong>
+				</a>
+			</div>
+
+			<div class="navbar-item has-dropdown is-hoverable">
+				<a class="navbar-link" href="/">Locations</a>
+				<div class="navbar-dropdown">
+					{#each $locations as location}
+					<a class="navbar-item" href="/location/{fn.slug(location.name)}">{location.name}</a>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+</nav>
+
+<slot></slot>
+
+<footer class="footer">
+	<div class="container">
+		<div class="content columns">
+			<div class="column is-7">
+				<p><strong>Houses Of</strong></p>
+			</div>
+
+			<div class="column columns">
+				<p class="column">
+					<a href="https://instagram.com/{$site.instagram}" target="_blank">Instagram</a>
+				</p>
+				<p class="column">
+					<a href="https://cetrucflotte.com" target="_blank">A project by Cetrucflotte</a>
+				</p>
+			</div>
+		</div>
+	</div>
+</footer>