Add Credits page with API data (as boilerplate)

src/components/atoms/SiteTitle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let variant: string = 'large'
+</script>
+
+<h1 class="site-title site-title--{variant}">
+    <strong class="site-title__pink">Houses</strong>
+    <span>Of The</span>
+    <strong class="site-title__pink">World</strong>
+</h1>

src/routes/credits.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle.svelte'
+
+    export let data: any
+</script>
+
+<Metas
+    title="Credits - Houses Of"
+    description=""
+    image=""
+/>
+
+
+<main class="credits">
+    <section class="credits__heading">
+        <SiteTitle />
+        <p>{data.credits.text}</p>
+    </section>
+
+    <section class="credits__list">
+        {#each data.credits.list as { title, credits }}
+            <div class="credits__category">
+                <h2>{title}</h2>
+                <ul>
+                    {#each credits as { name, role, website }}
+                    <li>
+                        <dl>
+                            <dt>
+                                {#if website}
+                                    <h3>
+                                        <a href={website} rel="noopener external" target="_blank">{name}</a>
+                                    </h3>
+                                {:else}
+                                    <h3>{name}</h3>
+                                {/if}
+                            </dt>
+                            <dd>
+                                {role}
+                            </dd>
+                        </dl>
+                    </li>
+                    {/each}
+                </ul>
+            </div>
+        {/each}
+
+        <div class="credits__category">
+            <h2>Photography</h2>
+            <ul>
+                {#each data.credit as { name, website, location }}
+                <li>
+                    <dl>
+                        <dt>
+                            {#if website}
+                                <h3>
+                                    <a href={website} rel="noopener external" target="_blank">{name}</a>
+                                </h3>
+                            {:else}
+                                <h3>{name}</h3>
+                            {/if}
+                        </dt>
+                        <dd>
+                            {#each location as { location_id: { name, slug: slugLocation, country: { slug: slugCountry } } }, index}
+                                <a href="/{slugCountry}/{slugLocation}">{name}</a>{#if location.length > index + 1},&nbsp;{/if}
+                            {/each}
+                        </dd>
+                    </dl>
+                </li>
+                {/each}
+            </ul>
+        </div>
+    </section>
+</main>
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, session, fetch, context }) {
+        const res = await fetchAPI(`
+            query {
+                credits {
+                    text
+                    list
+                }
+
+                credit {
+                    name
+                    website
+                    location {
+                        location_id {
+                            name
+                            slug
+                            country {
+                                slug
+                            }
+                        }
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                data,
+            }
+        }
+    }
+</script>