First commit
Explore Svelte and Sapper
This commit is contained in:
40
src/routes/_error.svelte
Normal file
40
src/routes/_error.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
export let status;
|
||||
export let error;
|
||||
|
||||
const dev = process.env.NODE_ENV === 'development';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1, p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{status}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{status}</h1>
|
||||
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{/if}
|
||||
86
src/routes/_layout.svelte
Normal file
86
src/routes/_layout.svelte
Normal file
@@ -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>
|
||||
7
src/routes/about.svelte
Normal file
7
src/routes/about.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>About this site</h1>
|
||||
|
||||
<p>This is the 'about' page. There's not much here.</p>
|
||||
29
src/routes/index.svelte
Normal file
29
src/routes/index.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition'
|
||||
import { locations, countries, site } from '../store'
|
||||
import * as fn from '../functions'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Houses Of - Beautiful houses of planet Earth</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container" in:slide out:slide>
|
||||
<section class="section">
|
||||
<h1 class="title is-2">Houses Of</h1>
|
||||
<article class="message is-dark">
|
||||
<div class="message-body">{$site.description}</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h3 class="title is-3">Locations</h3>
|
||||
<ul>
|
||||
{#each $locations as location}
|
||||
<li>
|
||||
<a href="/location/{fn.slug(location.name)}">{location.name}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
54
src/routes/location/[location].svelte
Normal file
54
src/routes/location/[location].svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user