flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🚧 Migrate to new SvelteKit routing system

Browse Source 
A bit annoying but for the best I guess?
This commit is contained in:
Félix Péault
2022-08-16 15:54:15 +02:00
parent cf2becc931
commit 5e5c08ddd1
40 changed files with 775 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/routes/credits/+page.svelte Normal file
View File

@@ -0,0 +1,148 @@
<style lang="scss">
@import "../../style/pages/credits";
</style>
<script lang="ts">
import { navigating } from '$app/stores'
import type { PageData, Errors } from './$types'
import { onMount } from 'svelte'
import { stagger, timeline } from 'motion'
import { DELAY } from '$utils/contants'
import { quartOut } from 'svelte/easing'
// Components
import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import Image from '$components/atoms/Image.svelte'
import Heading from '$components/molecules/Heading.svelte'
import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
export let data: PageData
export let errors: Errors
onMount(() => {
/**
* Animations
*/
const animation = timeline([
// Heading
['.heading .text', {
y: [24, 0],
opacity: [0, 1],
}],
// Categories
['.credits__category', {
opacity: [0, 1],
}, {
at: 0,
delay: stagger(0.35, { start: 0.5 }),
}],
// Names
['.credits__category > ul > li', {
y: [24, 0],
opacity: [0, 1],
}, {
at: 1.1,
delay: stagger(0.35),
}],
], {
delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
defaultOptions: {
duration: 1.6,
easing: quartOut,
},
})
animation.stop()
// Run animation
requestAnimationFrame(animation.play)
})
</script>
<Metas
title="Credits – Houses Of"
description={data.credits.text}
image=""
/>
<PageTransition name="credits">
<Heading
text={data.credits.text}
/>
<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>
<InteractiveGlobe2 type="cropped" />
</PageTransition>