🚧 Migrate to new SvelteKit routing system

A bit annoying but for the best I guess?

src/routes/shop/+error.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { page } from '$app/stores'
+    // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
     import ShopHeader from '$components/organisms/ShopHeader.svelte'
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
 
-    export let status: number
-
     const { posters } = getContext('shop')
     const errors = {
         404: {
@@ -21,7 +21,7 @@
 </script>
 
 <Metas
-    title="{errors[status].title} – Houses Of"
+    title="{errors[$page.status].title} – Houses Of"
 />
 
 
@@ -32,23 +32,10 @@
         <div class="container grid">
             <div class="inner">
                 <h2 class="title-big">Uh oh!</h2>
-                <p class="text-medium">{errors[status].message}</p>
+                <p class="text-medium">{errors[$page.status].message}</p>
             </div>
         </div>
     </section>
 
     <PostersGrid {posters} />
-</PageTransition>
-
-
-<script context="module" lang="ts">
-    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
-
-    export async function load ({ status }: LoadEvent): Promise<LoadOutput> {
-        return {
-            props: {
-                status,
-            },
-        }
-    }
-</script>
+</PageTransition>

src/routes/shop/+layout.server.ts

@@ -0,0 +1,73 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+import { fetchAPI } from '$utils/api'
+import { getProducts } from '$utils/functions/swell'
+
+export const load: PageServerLoad = async () => {
+    try {
+        // Get content from API
+        const res = await fetchAPI(`
+            query {
+                shop {
+                    page_heroimage { id }
+                }
+
+                location (
+                    filter: {
+                        has_poster: { _eq: true },
+                        status: { _eq: "published" },
+                    },
+                    sort: "name"
+                ) {
+                    name
+                    slug
+                }
+
+                posters: product (
+                    filter: { status: { _eq: "published" }}
+                ) {
+                    name
+                    type
+                    description
+                    details
+                    location {
+                        name
+                        slug
+                    }
+                    product_id
+                    photos_product {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                    photos_preview {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                }
+            }
+        `)
+
+        const { data: { shop, location, posters }} = res
+
+
+        /**
+         * Get products data from Swell
+         */
+        const shopProducts = await getProducts('posters')
+
+        if (shopProducts) {
+            return {
+                shop,
+                locations: location,
+                posters,
+                shopProducts: shopProducts.results,
+            }
+        }
+    } catch (err) {
+        throw error(500, err)
+    }
+}

src/routes/shop/+layout.svelte

@@ -0,0 +1,50 @@
+<style lang="scss">
+    @import "../../style/pages/shop";
+</style>
+
+<script lang="ts">
+    import type { PageData, Errors } from './$types'
+    import { setContext } from 'svelte'
+    import { cartNotifications } from '$utils/stores/shop'
+    // Components
+    import Cart from '$components/organisms/Cart.svelte'
+    import NotificationCart from '$components/molecules/NotificationCart.svelte'
+
+    export let data: PageData
+    export let errors: Errors
+
+    const { shop, locations, posters, shopProducts } = data
+
+    let scrollY: number
+
+    // Locations with an existing poster product
+    const shopLocations = locations.filter(({ slug }: any) => {
+        if (posters.find((poster: any) => poster.location.slug === slug)) {
+            return true
+        }
+    })
+
+    setContext('shop', {
+        shop,
+        posters,
+        shopLocations,
+        shopProducts,
+    })
+</script>
+
+<svelte:window bind:scrollY />
+
+
+<Cart />
+
+<div class="notifications" class:is-top={scrollY <= 100}>
+    {#each $cartNotifications as { id, title, name, image } (id)}
+        <NotificationCart
+            title={title}
+            name={name}
+            image={image}
+        />
+    {/each}
+</div>
+
+<slot />

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

@@ -1,9 +1,10 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getRandomItem } from '$utils/functions'
 import { getProduct } from '$utils/functions/swell'
+import { getRandomItem } from '$utils/functions'
 
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({}) => {
     try {
         // Get content from API
         const data = await fetchAPI(`
@@ -44,17 +45,12 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
 
             if (shopProduct) {
                 return {
-                    body: {
-                        product: randomPoster,
-                        shopProduct,
-                    }
+                    product: randomPoster,
+                    shopProduct,
                 }
             }
         }
-    } catch (error) {
-        return {
-            status: 404,
-            body: error,
-        }
+    } catch (err) {
+        throw error(500, err)
     }
 }

src/routes/shop/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { PageData, Errors } from './$types'
     import { getContext } from 'svelte'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     // Components
@@ -8,9 +9,10 @@
     import ShopHeader from '$components/organisms/ShopHeader.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
 
-    export let product: any
-    export let shopProduct: any
+    export let data: PageData
+    export let errors: Errors
 
+    const { product, shopProduct } = data
     const { posters } = getContext('shop')
 
     // Update current random product slug

src/routes/shop/[type]-[name]/+page.server.ts

@@ -1,8 +1,9 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getProduct } from '$utils/functions/swell'
 
-export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ params }) => {
     try {
         // Get content from API
         const data = await fetchAPI(`
@@ -41,17 +42,12 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
 
             if (shopProduct) {
                 return {
-                    body: {
-                        product: poster,
-                        shopProduct,
-                    }
+                    product: poster,
+                    shopProduct,
                 }
             }
         }
-    } catch (error) {
-        return {
-            status: 404,
-            body: error,
-        }
+    } catch (err) {
+        throw error(404, err)
     }
 }

src/routes/shop/[type]-[name]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { PageData, Errors } from './$types'
     import { getContext } from 'svelte'
     import { capitalizeFirstLetter } from '$utils/functions'
     // Components
@@ -8,25 +9,25 @@
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
 
-    export let product: any
-    export let shopProduct: any
+    export let data: PageData
+    export let errors: Errors
 
     const { posters } = getContext('shop')
 </script>
 
 <Metas
-    title="{product.location.name} {capitalizeFirstLetter(product.type)} – Houses Of"
+    title="{data.product.location.name} {capitalizeFirstLetter(data.product.type)} – Houses Of"
     description=""
     image=""
 />
 
 
 <PageTransition name="shop-page">
-    <ShopHeader {product} />
+    <ShopHeader product={data.product} />
 
     <PosterLayout
-        product={product}
-        shopProduct={shopProduct}
+        product={data.product}
+        shopProduct={data.shopProduct}
     />
 
     <PostersGrid {posters} />

src/routes/shop/__layout.svelte

@@ -1,132 +0,0 @@
-<style lang="scss">
-    @import "../../style/pages/shop";
-</style>
-
-<script lang="ts">
-    import { setContext } from 'svelte'
-    import { cartNotifications } from '$utils/stores/shop'
-    // Components
-    import Cart from '$components/organisms/Cart.svelte'
-    import NotificationCart from '$components/molecules/NotificationCart.svelte'
-
-    export let shop: any
-    export let locations: any
-    export let posters: any
-    export let shopProducts: any
-
-    // Locations with an existing poster product
-    const shopLocations = locations.filter(({ slug }: any) => {
-        if (posters.find((poster: any) => poster.location.slug === slug)) {
-            return true
-        }
-    })
-
-    setContext('shop', {
-        shop,
-        posters,
-        shopLocations,
-        shopProducts,
-    })
-</script>
-
-
-<Cart />
-
-<div class="notifications">
-    {#each $cartNotifications as { id, title, name, image } (id)}
-        <NotificationCart
-            title={title}
-            name={name}
-            image={image}
-        />
-    {/each}
-</div>
-
-<slot />
-
-
-<script context="module" lang="ts">
-    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
-    import { fetchAPI } from '$utils/api'
-
-    export async function load ({ fetch }: LoadEvent): Promise<LoadOutput> {
-        // Get content from API
-        const res = await fetchAPI(`
-            query {
-                shop {
-                    page_heroimage { id }
-                }
-
-                location (
-                    filter: {
-                        has_poster: { _eq: true },
-                        status: { _eq: "published" },
-                    },
-                    sort: "name"
-                ) {
-                    name
-                    slug
-                }
-
-                posters: product (
-                    filter: { status: { _eq: "published" }}
-                ) {
-                    name
-                    type
-                    description
-                    details
-                    location {
-                        name
-                        slug
-                    }
-                    product_id
-                    photos_product {
-                        directus_files_id {
-                            id
-                            title
-                        }
-                    }
-                    photos_preview {
-                        directus_files_id {
-                            id
-                            title
-                        }
-                    }
-                }
-            }
-        `)
-
-        const { data: { shop, location, posters }} = res
-
-
-        /**
-         * Get products data from Swell
-         */
-        let shopProducts: any
-
-        const shopProductRes = await fetch('/api/swell', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'getProducts',
-                category: 'posters',
-            })
-        })
-        if (shopProductRes.ok) {
-            // Set all products
-            const { results } = await shopProductRes.json()
-            if (results) {
-                shopProducts = results
-            }
-        }
-
-
-        return {
-            props: {
-                shop,
-                locations: location,
-                posters,
-                shopProducts,
-            },
-        }
-    }
-</script>