146 lines
4.4 KiB
Svelte
146 lines
4.4 KiB
Svelte
<script context="module">
|
|
import {
|
|
apiEndpoints,
|
|
} from '../utils/store'
|
|
|
|
// Preload data
|
|
export async function preload (page, session) {
|
|
// Load random photos
|
|
const limit = 5
|
|
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&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 { site, currentLocation, currentPhotos } from '../utils/store'
|
|
import * as fn from '../utils/functions'
|
|
|
|
// Dependencies
|
|
import * as basicScroll from 'basicscroll'
|
|
import AOS from 'aos'
|
|
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'
|
|
|
|
// Reset current location if existing
|
|
$: {
|
|
if ($currentLocation) currentLocation.set()
|
|
if ($currentPhotos) currentPhotos.set()
|
|
}
|
|
|
|
// Props and variables
|
|
export let photos
|
|
let appearing
|
|
|
|
|
|
/*
|
|
** Run code on browser only
|
|
*/
|
|
onMount(() => {
|
|
if (process.browser) {
|
|
// Scroll apparitions
|
|
AOS.init()
|
|
|
|
// Parallax titles
|
|
const titleHouses = document.getElementById('title-houses')
|
|
const scrollTitleHouses = basicScroll.default.create({
|
|
elem: titleHouses,
|
|
direct: titleHouses,
|
|
from: 0,
|
|
to: window.innerHeight * 0.6,
|
|
props: {
|
|
'--translateX': {
|
|
from: '-3%',
|
|
to: '-20%'
|
|
}
|
|
}
|
|
}).start()
|
|
|
|
const titleWorld = document.getElementById('title-world')
|
|
const scrollTitleWorld = basicScroll.default.create({
|
|
elem: titleWorld,
|
|
direct: titleWorld,
|
|
from: document.querySelector('.explore__description').getBoundingClientRect().top,
|
|
to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
|
|
props: {
|
|
'--translateX': {
|
|
from: '4%',
|
|
to: '-4%'
|
|
}
|
|
}
|
|
}).start()
|
|
}
|
|
})
|
|
</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://housesof.world"
|
|
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" data-aos="letters-translate-top" data-aos-once="true">
|
|
<h1 class="title-massive" aria-label="Houses">
|
|
{@html fn.lettersToSpan('Houses')}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrap">
|
|
<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>
|
|
|
|
<Carousel {photos} />
|
|
</section>
|
|
|
|
<section class="explore explore--homepage">
|
|
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
|
|
<div class="anim-mask">
|
|
{@html fn.lettersToSpan('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" data-aos="letters-translate-bottom" data-aos-once="true">
|
|
{@html fn.lettersToSpan('World')}
|
|
</h1>
|
|
</div>
|
|
|
|
<Locations />
|
|
</section>
|
|
|
|
<Footer />
|