192 lines
6.3 KiB
Svelte
192 lines
6.3 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/env'
|
|
import { onMount } from 'svelte'
|
|
import anime from 'animejs'
|
|
import type { AnimeTimelineInstance } from 'animejs'
|
|
// Components
|
|
import Metas from '$components/Metas.svelte'
|
|
import PageTransition from '$components/PageTransition.svelte'
|
|
import SiteTitle from '$components/atoms/SiteTitle.svelte'
|
|
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
export let data: any
|
|
|
|
|
|
|
|
/**
|
|
* Transition: Anime timeline
|
|
*/
|
|
let timeline: AnimeTimelineInstance
|
|
|
|
if (browser) {
|
|
requestAnimationFrame(() => {
|
|
// Setup animations
|
|
timeline = anime.timeline({
|
|
duration: 1600,
|
|
easing: 'easeOutQuart',
|
|
autoplay: false,
|
|
})
|
|
|
|
anime.set('.credits__heading > *, .credits__category > ul > li', {
|
|
opacity: 0,
|
|
translateY: 24,
|
|
})
|
|
anime.set('.credits__category', {
|
|
opacity: 0,
|
|
})
|
|
|
|
// Elements
|
|
timeline.add({
|
|
targets: '.credits__heading > *, .credits__category',
|
|
opacity: 1,
|
|
translateY: 0,
|
|
delay: anime.stagger(350),
|
|
}, 500)
|
|
|
|
// Names
|
|
timeline.add({
|
|
targets: '.credits__category > ul > li',
|
|
opacity: 1,
|
|
translateY: 0,
|
|
delay: anime.stagger(350),
|
|
}, 1100)
|
|
})
|
|
}
|
|
|
|
|
|
onMount(() => {
|
|
// Transition in
|
|
requestAnimationFrame(() => {
|
|
timeline.play()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<Metas
|
|
title="Credits - Houses Of"
|
|
description=""
|
|
image=""
|
|
/>
|
|
|
|
|
|
<PageTransition name="credits">
|
|
<section class="credits__heading">
|
|
<SiteTitle variant="inline" />
|
|
<p class="text-medium">{data.credits.text}</p>
|
|
</section>
|
|
|
|
<section class="credits__list">
|
|
<div class="grid container">
|
|
{#each data.credits.list as { title, credits }}
|
|
<div class="credits__category grid">
|
|
<h2 class="title-small">{title}</h2>
|
|
<ul>
|
|
{#each credits as { name, role, website }}
|
|
<li>
|
|
<dl>
|
|
<dt>
|
|
{#if website}
|
|
<h3>
|
|
<a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
|
|
</h3>
|
|
{:else}
|
|
<h3>{name}</h3>
|
|
{/if}
|
|
</dt>
|
|
<dd>
|
|
{role}
|
|
</dd>
|
|
</dl>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
{/each}
|
|
|
|
<div class="credits__category grid">
|
|
<h2 class="title-small">Photography</h2>
|
|
<ul>
|
|
{#each data.credit as { name, website, location }}
|
|
<li>
|
|
<dl>
|
|
<dt>
|
|
{#if website}
|
|
<h3>
|
|
<a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
|
|
</h3>
|
|
{:else}
|
|
<h3>{name}</h3>
|
|
{/if}
|
|
</dt>
|
|
<dd>
|
|
<ul>
|
|
{#each location as loc}
|
|
{#if loc.location_id}
|
|
<li>
|
|
<a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" sveltekit:noscroll tabindex="0">
|
|
<Image
|
|
id={loc.location_id.country.flag.id}
|
|
sizeKey="square-small"
|
|
width={16}
|
|
height={16}
|
|
alt="Flag of {loc.location_id.country.slug}"
|
|
/>
|
|
<span>{loc.location_id.name}</span>
|
|
</a>
|
|
</li>
|
|
{/if}
|
|
{/each}
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<InteractiveGlobe type="cropped" />
|
|
</PageTransition>
|
|
|
|
|
|
<script context="module" lang="ts">
|
|
import { fetchAPI } from '$utils/api'
|
|
|
|
/** @type {import('@sveltejs/kit').Load} */
|
|
export async function load ({ url, params, fetch, session, stuff }) {
|
|
const res = await fetchAPI(`
|
|
query {
|
|
credits {
|
|
text
|
|
list
|
|
}
|
|
|
|
credit (filter: { status: { _eq: "published" }}) {
|
|
name
|
|
website
|
|
location {
|
|
location_id (filter: { status: { _eq: "published" }}) {
|
|
name
|
|
slug
|
|
country {
|
|
slug
|
|
flag {
|
|
id
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
const { data } = res
|
|
|
|
return {
|
|
props: {
|
|
data,
|
|
}
|
|
}
|
|
}
|
|
</script> |