flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Credits page with API data (as boilerplate)

Browse Source
This commit is contained in:
Félix Péault
2021-09-24 21:51:45 +02:00
parent 2b308f9021
commit bf70c133c8
2 changed files with 122 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/atoms/SiteTitle.svelte Normal file
View File

@@ -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>

113
src/routes/credits.svelte Normal file
View File

@@ -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>