135 lines
3.7 KiB
Svelte
135 lines
3.7 KiB
Svelte
<script context="module">
|
|
import { site, apiEndpoints } from '../utils/store'
|
|
|
|
// Variables
|
|
let limit
|
|
|
|
// Preload data (photos to display)
|
|
export async function preload (page, session) {
|
|
// Fields
|
|
const fields = [
|
|
'id', 'name', 'image.private_hash',
|
|
'location.id', 'location.name', 'location.slug', 'location.country.name'
|
|
]
|
|
// Random sort
|
|
const sort = '?'
|
|
// Get the limit from API
|
|
site.subscribe(store => limit = store.homepage_photos_limit)
|
|
|
|
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
|
|
const photos = await req.json()
|
|
if (req.ok) {
|
|
return { photos: photos.data }
|
|
}
|
|
this.error(404, 'Not found')
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
import { onMount } from 'svelte'
|
|
import { stores } from '@sapper/app'
|
|
import {
|
|
currentLocation,
|
|
currentPhotos,
|
|
pageReady,
|
|
pageTransition
|
|
} from '../utils/store'
|
|
import { charsToSpan } from '../utils/functions'
|
|
|
|
// Dependencies
|
|
import zenscroll from 'zenscroll'
|
|
|
|
// Components
|
|
import Button from '../atoms/Button'
|
|
import IconGlobeSmall from '../atoms/IconGlobeSmall'
|
|
import IconGlobe from '../atoms/IconGlobe'
|
|
import InteractiveGlobe from '../molecules/InteractiveGlobe'
|
|
import Carousel from '../organisms/Carousel'
|
|
import Locations from '../organisms/Locations'
|
|
import Footer from '../organisms/Footer'
|
|
import SocialMetas from '../utils/SocialMetas'
|
|
import Transition from '../utils/Transition'
|
|
|
|
// Animations
|
|
import { animateIn } from '../animations/index'
|
|
pageTransition.onAnimationEnd = animateIn
|
|
|
|
// Props and variables
|
|
export let photos
|
|
const { page } = stores()
|
|
|
|
// Reset current location if existing
|
|
$: {
|
|
if ($currentLocation) currentLocation.set()
|
|
if ($currentPhotos) currentPhotos.set()
|
|
}
|
|
|
|
|
|
/*
|
|
** Run code when mounted
|
|
*/
|
|
onMount(() => {
|
|
// Page is loaded
|
|
pageReady.set(true)
|
|
})
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{$site.seo_name} - {$site.seo_title_default} planet Earth</title>
|
|
<meta name="description" content={$site.seo_description_default}>
|
|
<SocialMetas
|
|
url="https://{$page.host}"
|
|
title="{$site.seo_name} - {$site.seo_title_default} planet Earth"
|
|
description={$site.seo_description_default}
|
|
image={$site.seo_share_image.full_url}
|
|
/>
|
|
</svelte:head>
|
|
|
|
<section class="intro">
|
|
<div class="anim-mask">
|
|
<div class="anim title-parallax" id="title-houses">
|
|
<h1 class="title-massive" aria-label="Houses">
|
|
{@html charsToSpan('Houses')}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrap" id="intro-description">
|
|
<div class="intro__description style-description">
|
|
<p>{$site.description}</p>
|
|
|
|
<Button type="a" href="#choose" class="button" text="Explore locations">
|
|
<IconGlobeSmall width="22" color="#666" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="intro-carousel">
|
|
<Carousel {photos} />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="explore explore--homepage">
|
|
<div class="of" id="title-of" aria-label="of">
|
|
<div class="anim-mask">
|
|
{@html charsToSpan('of')}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explore__description style-description" id="choose">
|
|
<p>{$site.explore_globe}</p>
|
|
</div>
|
|
|
|
<InteractiveGlobe />
|
|
|
|
<div class="anim-mask anim-title">
|
|
<h1 class="title-massive title-parallax" id="title-world" aria-label="World">
|
|
{@html charsToSpan('World')}
|
|
</h1>
|
|
</div>
|
|
|
|
<Locations />
|
|
</section>
|
|
|
|
<Footer />
|