Félix Péault
0635b65abf
All checks were successful
continuous-integration/drone/push Build is passing
- Fullscreen is a component that watches a store value set by the Carousel component on a picture click - Use a .env file for API and website related settings and informations - Google Analytics is now in place, tracking each routes link and viewer photo change
110 lines
3.3 KiB
Svelte
110 lines
3.3 KiB
Svelte
<script context="module">
|
|
import { apiEndpoints, } from '../utils/store'
|
|
|
|
export async function preload (page, session) {
|
|
const req = await this.fetch(apiEndpoints.gql, {
|
|
method: 'post',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ query: `{
|
|
site {
|
|
data {
|
|
description
|
|
explore_globe
|
|
explore_list
|
|
homepage_photos_limit
|
|
photos_per_page
|
|
instagram
|
|
seo_name
|
|
seo_title_default
|
|
seo_description_default
|
|
seo_share_image { full_url }
|
|
credits_text
|
|
credits_list
|
|
}
|
|
}
|
|
continents {
|
|
data {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
countries {
|
|
data {
|
|
id
|
|
name
|
|
slug
|
|
flag { full_url title }
|
|
continent { id }
|
|
}
|
|
}
|
|
locations (filter: { status_eq: "published" }) {
|
|
data {
|
|
id
|
|
name
|
|
slug
|
|
region
|
|
country { id }
|
|
description
|
|
coordinates
|
|
illustration_desktop { full_url }
|
|
illustration_mobile { full_url }
|
|
}
|
|
}
|
|
}`})
|
|
})
|
|
const result = await req.json()
|
|
if (req.ok) {
|
|
// Set data into store
|
|
site.set(result.data.site.data[0])
|
|
continents.set(result.data.continents.data)
|
|
countries.set(result.data.countries.data)
|
|
locations.set(result.data.locations.data)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
import { onMount } from 'svelte'
|
|
import {
|
|
site,
|
|
continents,
|
|
countries,
|
|
locations
|
|
} from '../utils/store'
|
|
import { stores } from '@sapper/app'
|
|
|
|
// Components
|
|
import Transition from '../utils/Transition'
|
|
import AnalyticsTracker from '../utils/AnalyticsTracker'
|
|
|
|
// Props
|
|
export const segment = null
|
|
|
|
|
|
/*
|
|
** Manipulate data
|
|
*/
|
|
// Replace each countrie's continent by the database
|
|
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
|
|
|
|
// Push each country to its continent
|
|
$countries.forEach(country => {
|
|
const continent = $continents.find(cont => cont.id === country.continent.id)
|
|
continent.countries = []
|
|
!continent.countries.includes(country) && continent.countries.push(country)
|
|
})
|
|
|
|
// Replace each location's country by the database
|
|
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
|
|
</script>
|
|
|
|
<style lang="scss" global>
|
|
@import "../style/style.scss";
|
|
</style>
|
|
|
|
<slot></slot>
|
|
|
|
<Transition />
|
|
<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />
|
|
|