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