housesof/src/routes/_layout.svelte

<script context="module">
    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
                        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
                        illu_desktop { full_url }
                        illu_desktop_2x { full_url }
                        illu_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 { stores } from '@sapper/app'
    import {
        apiEndpoints,
        site,
        continents,
        countries,
        locations,
        pageReady
    } from 'utils/store'
    // Dependencies
    import lazySizes from 'lazysizes'
    // Components
    import AnalyticsTracker from 'utils/AnalyticsTracker'
    import Transition from 'utils/Transition'

    // Variables
    const { page } = stores()

    // Settings
    lazySizes.cfg.lazyClass = 'lazyload'

    /*
    ** Head stuff
    */
    // Preconnect
    const preconnect = [
        'https://api.housesof.world',
        'https://www.googletagmanager.com',
        'https://stats.g.doubleclick.net',
        'https://www.google-analytics.com',
    ]
    // Preload assets
    const preload = {
        fonts: [
            '/fonts/G-Light.woff2',
            '/fonts/G-Regular.woff2',
            '/fonts/G-Semibold.woff2',
            '/fonts/M-Extralight.woff2',
            '/fonts/M-Light.woff2',
        ]
    }


    /*
    ** Manipulate data
    */
    if ($countries) {
        // 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 = []
            if (!continent.countries.includes(country)) {
                continent.countries.push(country)
            }
        })
    }

    // Replace each location's country by the database
    if ($locations) {
        $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
    }
</script>

<style lang="scss" global>
    @import "../style/style.scss";
</style>

<svelte:head>
    <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
    {#each preconnect as host}
    <link rel="preconnect" href={host} crossorigin>
    <link rel="dns-prefetch" href={host}>
    {/each}
    {#each preload.fonts as font}
    <link rel="preload" href={font} as="font" type="font/woff2" crossorigin>
    {/each}
</svelte:head>

<slot></slot>

<Transition />

<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />