🚧 Migrate to new SvelteKit routing system

A bit annoying but for the best I guess?

src/routes/subscribe/+page.server.ts

@@ -0,0 +1,36 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+import { fetchAPI } from '$utils/api'
+
+export const load: PageServerLoad = async () => {
+    try {
+        const res = await fetchAPI(`
+            query {
+                settings {
+                    newsletter_page_text
+                }
+
+                newsletter (
+                    limit: -1,
+                    sort: "-issue",
+                    filter: { status: { _eq: "published" }},
+                ) {
+                    issue
+                    title
+                    date_sent
+                    link
+                    thumbnail { id }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            ...data.settings,
+            issues: data.newsletter,
+        }
+    } catch (err) {
+        throw error(500, err)
+    }
+}

src/routes/subscribe/+page.svelte

@@ -0,0 +1,97 @@
+<style lang="scss">
+    @import "../../style/pages/subscribe";
+</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 '$animations/easings'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+    import EmailForm from '$components/molecules/EmailForm.svelte'
+    import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
+    import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
+
+    export let data: PageData
+    export let errors: Errors
+
+    const latestIssue = data.issues[0]
+
+
+    onMount(() => {
+        /**
+         * Animations
+         */
+        const animation = timeline([
+            // Elements
+            ['.heading .text, .subscribe__top .newsletter-form', {
+                y: [24, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.5,
+                delay: stagger(0.35),
+            }],
+
+            // Reveal each issue
+            ['.subscribe__issues h2, .subscribe__issues > .issue-container, .subscribe__issues > ul', {
+                y: [16, 0],
+                opacity: [0, 1],
+            }, {
+                duration: 1,
+                at: 1.5,
+                delay: stagger(0.15),
+            }],
+        ], {
+            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
+            },
+        })
+        animation.stop()
+
+        // Run animation
+        requestAnimationFrame(animation.play)
+    })
+</script>
+
+<Metas
+    title="Subscribe — Houses Of"
+    description={data.newsletter_page_text}
+    image=""
+/>
+
+<PageTransition name="subscribe">
+    <div class="subscribe__top">
+        <Heading
+            text={data.newsletter_page_text}
+        />
+
+        <EmailForm />
+    </div>
+
+    <section class="subscribe__issues">
+        <h2 class="title-small">Latest Issue</h2>
+        <div class="issue-container">
+            <NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
+        </div>
+
+        {#if data.issues.length > 1}
+            <h2 class="title-small">Past Issues</h2>
+            <ul>
+                {#each data.issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
+                    <li class="issue-container">
+                        <NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </section>
+
+    <InteractiveGlobe2 type="cropped" />
+</PageTransition>