142 lines
3.9 KiB
Svelte
142 lines
3.9 KiB
Svelte
<script lang="ts"> import { fade } from 'svelte/transition'
|
|
import { browser } from '$app/env'
|
|
import { onMount } from 'svelte'
|
|
import dayjs from 'dayjs'
|
|
import anime from 'animejs'
|
|
import type { AnimeTimelineInstance } from 'animejs'
|
|
// 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 EmailForm from '$components/molecules/EmailForm.svelte'
|
|
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
|
|
|
export let data: any
|
|
export let issues: any
|
|
|
|
|
|
|
|
/**
|
|
* Transition: Anime timeline
|
|
*/
|
|
let timeline: AnimeTimelineInstance
|
|
|
|
if (browser) {
|
|
requestAnimationFrame(() => {
|
|
// Setup animations
|
|
timeline = anime.timeline({
|
|
duration: 1600,
|
|
easing: 'easeOutQuart',
|
|
autoplay: false,
|
|
})
|
|
|
|
anime.set('.subscribe__top > *, .subscribe__issues', {
|
|
opacity: 0,
|
|
translateY: 24,
|
|
})
|
|
|
|
// Elements
|
|
timeline.add({
|
|
targets: '.subscribe__top > *, .subscribe__issues',
|
|
opacity: 1,
|
|
translateY: 0,
|
|
delay: anime.stagger(200),
|
|
}, 500)
|
|
|
|
// Reveal each issue
|
|
timeline.add({
|
|
targets: '.subscribe__issues .issue',
|
|
opacity: [0, 1],
|
|
translateY: [16, 0],
|
|
delay: anime.stagger(150),
|
|
duration: 1000,
|
|
}, 1000)
|
|
})
|
|
}
|
|
|
|
|
|
onMount(() => {
|
|
// Transition in
|
|
requestAnimationFrame(() => {
|
|
timeline.play()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<Metas
|
|
title="Subscribe"
|
|
description=""
|
|
image=""
|
|
/>
|
|
|
|
<PageTransition name="subscribe">
|
|
<div class="subscribe__top">
|
|
<Heading
|
|
text={data.newsletter_page_text}
|
|
/>
|
|
|
|
<EmailForm />
|
|
</div>
|
|
|
|
<section class="subscribe__issues">
|
|
<h2 class="title-small">Past Issues</h2>
|
|
<ul>
|
|
{#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
|
|
<li class="issue">
|
|
<a href={link} target="_blank" rel="external noreferrer noopener" tabindex="0">
|
|
<Image
|
|
id={id}
|
|
sizeKey="issue-thumbnail-small"
|
|
width={160} height={112}
|
|
alt="Issue {issue} thumbnail"
|
|
/>
|
|
<dl>
|
|
<dt>Issue #{issue}</dt>
|
|
<dd>
|
|
<p>{title}</p>
|
|
<time>{dayjs(date_sent).format('DD/MM/YYYY')}</time>
|
|
</dd>
|
|
</dl>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</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 {
|
|
settings {
|
|
newsletter_page_text
|
|
}
|
|
|
|
newsletter (limit: -1, sort: "-issue") {
|
|
issue
|
|
title
|
|
date_sent
|
|
link
|
|
thumbnail { id }
|
|
}
|
|
}
|
|
`)
|
|
|
|
const { data } = res
|
|
|
|
return {
|
|
props: {
|
|
data: data.settings,
|
|
issues: data.newsletter,
|
|
}
|
|
}
|
|
}
|
|
</script>
|