☠️ RESET for v2
This commit is contained in:
@@ -1,137 +1,21 @@
|
||||
<script context="module">
|
||||
// Variables
|
||||
let limit = process.env.CONFIG.HOME_PHOTOS_LIMIT
|
||||
|
||||
// Preload data (photos to display)
|
||||
export async function preload (page, session) {
|
||||
// Load Carousel photos
|
||||
const fields = [
|
||||
'id', 'name', 'image.private_hash',
|
||||
'location.id', 'location.name', 'location.slug',
|
||||
'location.country.name', 'location.country.slug'
|
||||
]
|
||||
const sort = '?' // Random sort
|
||||
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&status=published&sort=${sort}&limit=${limit}`, {
|
||||
'Authorization': 'bearer ' + process.env.CONFIG.API_TOKEN
|
||||
})
|
||||
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 {
|
||||
apiEndpoints,
|
||||
site,
|
||||
currentLocation,
|
||||
currentPhotos,
|
||||
pageReady,
|
||||
pageAnimation
|
||||
} from 'utils/store'
|
||||
import { charsToSpan, smoothScroll } from 'utils/functions'
|
||||
// Dependencies
|
||||
import Lazy from 'svelte-lazy'
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte'
|
||||
// Components
|
||||
import Button from 'atoms/Button'
|
||||
import IconGlobeSmall from 'atoms/IconGlobeSmall'
|
||||
import InteractiveGlobe from 'molecules/InteractiveGlobe'
|
||||
import Carousel from 'organisms/Carousel'
|
||||
import Fullscreen from 'organisms/Fullscreen'
|
||||
import Locations from 'organisms/Locations'
|
||||
import Footer from 'organisms/Footer'
|
||||
import SocialMetas from 'utils/SocialMetas'
|
||||
// Animations
|
||||
import { animateIn } from 'animations/index'
|
||||
pageAnimation.set(animateIn)
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import Locations from '$components/organisms/Locations.svelte'
|
||||
|
||||
// Props and Variables
|
||||
export let photos = ''
|
||||
const { page } = stores()
|
||||
let winWidth = 0
|
||||
|
||||
// Reset current location if existing
|
||||
currentLocation.set()
|
||||
currentPhotos.set()
|
||||
|
||||
|
||||
/*
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
})
|
||||
const globalData: any = getContext('global')
|
||||
console.log(globalData)
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$site.seo_name} - {$site.seo_title_default} across the globe</title>
|
||||
<meta name="description" content={$site.seo_description_default}>
|
||||
<SocialMetas
|
||||
url="{process.env.CONFIG.PROD_URL}"
|
||||
title="{$site.seo_name} - {$site.seo_title_default} across the globe"
|
||||
description={$site.seo_description_default}
|
||||
image={$site.seo_share_image.full_url}
|
||||
/>
|
||||
</svelte:head>
|
||||
<Metas
|
||||
title="Houses Of"
|
||||
description=""
|
||||
image=""
|
||||
/>
|
||||
|
||||
<svelte:window bind:innerWidth={winWidth} />
|
||||
<h1>Houses Of</h1>
|
||||
|
||||
<main class="housesof" class:is-transitioning={!$pageReady}>
|
||||
<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" on:click={smoothScroll}>
|
||||
<IconGlobeSmall width="22" color="#666" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="intro-carousel">
|
||||
<Carousel {photos} locationUrl={true} />
|
||||
<Fullscreen />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="explore explore--homepage">
|
||||
<div class="of" id="title-of" role="heading" aria-level="2" 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>
|
||||
|
||||
{#if process.browser}
|
||||
<Lazy offset={window.innerHeight} fadeOption={null}>
|
||||
<InteractiveGlobe />
|
||||
</Lazy>
|
||||
{/if}
|
||||
|
||||
<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 />
|
||||
</main>
|
||||
<Locations
|
||||
locations={globalData.location}
|
||||
/>
|
||||
Reference in New Issue
Block a user