Use Newsletter data from API

This commit is contained in:
2021-10-15 22:34:36 +02:00
parent 99cc1bc661
commit 7384088388

View File

@@ -1,11 +1,11 @@
<script lang="ts">
import dayjs from 'dayjs'
// Components
import Metas from '$components/Metas.svelte'
import Image from '$components/atoms/Image.svelte'
import Heading from '$components/molecules/Heading.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
export let photos: any
export let issues: any
</script>
<Metas
@@ -22,51 +22,22 @@
<section class="subscribe__issues">
<h2 class="title-small">Past Issues</h2>
<ul>
<li class="issue">
<a href="#">
<img src="/images/issue-1.jpg" alt="">
<dl>
<dt>Issue #3</dt>
<dd>
<p>Adding Occitanie region to the mix!</p>
<time>24/08/2020</time>
</dd>
</dl>
</a>
</li>
<li class="issue">
<a href="#">
<img src="/images/issue-1.jpg" alt="">
<dl>
<dt>Issue #3</dt>
<dd>
<p>Adding Occitanie region to the mix!</p>
<time>24/08/2020</time>
</dd>
</dl>
</a>
</li>
<li class="issue">
<a href="#">
<img src="/images/issue-1.jpg" alt="">
<dl>
<dt>Issue #3</dt>
<dd>
<p>Adding Occitanie region to the mix!</p>
<time>24/08/2020</time>
</dd>
</dl>
</a>
</li>
{#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
<li class="issue">
<a href={link} rel="external noreferrer noopener">
<Image id={id} width={80} height={56} alt="Issue {issue} thumbnail" />
<dl>
<dt>Issue #{issue}</dt>
<dd>
<p>{title}</p>
<time>{dayjs(date_sent).format('DD/MM/YYYY')}</time>
</dd>
</dl>
</a>
</li>
{/each}
</ul>
</section>
<section class="grid-modules grid">
<div class="wrap">
<Shop />
<Newsletter />
</div>
</section>
</main>
@@ -76,11 +47,12 @@
export async function load ({ page, fetch, session, stuff }) {
const res = await fetchAPI(`
query {
photo (limit: 11, sort: ["-date_created"]) {
image {
id
title
}
newsletter (limit: -1, sort: "-issue") {
issue
title
date_sent
link
thumbnail { id }
}
}
`)
@@ -89,7 +61,7 @@
return {
props: {
photos: data.photo,
issues: data.newsletter,
}
}
}