134 lines
4.6 KiB
Svelte
134 lines
4.6 KiB
Svelte
<script lang="ts">
|
|
// Components
|
|
import Metas from '$components/Metas.svelte'
|
|
import SiteTitle from '$components/atoms/SiteTitle.svelte'
|
|
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
|
|
|
|
export let data: any
|
|
</script>
|
|
|
|
<Metas
|
|
title="Credits - Houses Of"
|
|
description=""
|
|
image=""
|
|
/>
|
|
|
|
|
|
<main class="credits">
|
|
<section class="credits__heading">
|
|
<SiteTitle variant="inline" />
|
|
<p class="text-medium">{data.credits.text}</p>
|
|
</section>
|
|
|
|
<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 { location_id: { name, slug: slugLocation, country: { slug: slugCountry, flag }}}, index}
|
|
<li>
|
|
<a href="/{slugCountry}/{slugLocation}" sveltekit:noscroll tabindex="0">
|
|
<Image
|
|
id={flag.id}
|
|
sizeKey="square-small"
|
|
width={16}
|
|
height={16}
|
|
alt="Flag of {slugCountry}"
|
|
/>
|
|
<span>{name}</span>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<InteractiveGlobe type="cropped" />
|
|
</main>
|
|
|
|
|
|
<script context="module" lang="ts">
|
|
import { fetchAPI } from '$utils/api'
|
|
|
|
export async function load ({ page, fetch, session, stuff }) {
|
|
const res = await fetchAPI(`
|
|
query {
|
|
credits {
|
|
text
|
|
list
|
|
}
|
|
|
|
credit (filter: { status: { _eq: "published" }}) {
|
|
name
|
|
website
|
|
location {
|
|
location_id {
|
|
name
|
|
slug
|
|
country {
|
|
slug
|
|
flag {
|
|
id
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`)
|
|
|
|
const { data } = res
|
|
|
|
return {
|
|
props: {
|
|
data,
|
|
}
|
|
}
|
|
}
|
|
</script> |