feat: re-add archive page pagination

Refs: #28
This commit is contained in:
Oliver Davies 2022-12-11 00:23:05 +00:00
parent 8a2fb3770e
commit 90cac4102b
4 changed files with 75 additions and 56 deletions

View file

@ -0,0 +1,39 @@
---
import DailyEmailForm from '../../components/DailyEmailForm.astro'
import Layout from '../../layouts/DailyEmailLayout.astro'
export async function getStaticPaths({ paginate }) {
const emails = await Astro.glob('../../daily-emails/*.md')
const sortedEmails = emails
.sort((a, b) =>
new Date(b.frontmatter.pubDate).valueOf() -
new Date(a.frontmatter.pubDate).valueOf()
)
return paginate(sortedEmails, { pageSize: 20 })
}
const { page } = Astro.props
---
<Layout title={'Daily email archive'}>
<ul>
{page.data.map(email => (
<li>
<a href={`/${email.frontmatter.permalink}`}>
{new Date(email.frontmatter.pubDate).toLocaleDateString('en-GB', {
day: 'numeric',
month: 'long',
year: 'numeric',
})}:
{email.frontmatter.title}
</a>
</li>
))}
</ul>
<nav class="flex justify-center pt-10 space-x-6">
{ page.url.prev ? <a href={ page.url.prev }>&larr; Newer emails</a> : null }
{ page.url.next ? <a href={ page.url.next }>Older emails &rarr;</a> : null }
</nav>
</Layout>

View file

@ -1,28 +0,0 @@
---
import DailyEmailForm from '../../components/DailyEmailForm.astro'
import Layout from '../../layouts/DailyEmailLayout.astro'
export async function getStaticPaths() {
const emails = await Astro.glob('../../daily-emails/*.md')
return emails.map(email => {
return {
params: {
slug: email.frontmatter.permalink
.replace('archive/', '')
.replace('\n', ''),
},
props: {
email,
}
}
})
}
const { Content } = Astro.props.email
const { title } = Astro.props.email.frontmatter
---
<Layout title={title}>
<Content />
</Layout>

View file

@ -0,0 +1,36 @@
---
import DailyEmailForm from '../../../../../components/DailyEmailForm.astro'
import Layout from '../../../../../layouts/DailyEmailLayout.astro'
export async function getStaticPaths() {
const emails = await Astro.glob('../../../../../daily-emails/*.md')
return emails.map(email => {
const pubDate = email.frontmatter.pubDate.split('T')[0].split('-')
const slug = email.frontmatter.permalink
.replace('archive/', '')
.replace('\n', '')
.split('/')[3]
return {
params: {
day: pubDate[2],
month: pubDate[1],
slug,
year: pubDate[0],
},
props: {
email,
}
}
})
}
const { Content } = Astro.props.email
const { title } = Astro.props.email.frontmatter
---
<Layout title={title}>
<Content />
</Layout>

View file

@ -1,28 +0,0 @@
---
import PageLayout from '../../layouts/PageLayout.astro'
const emails = await Astro.glob('../../daily-emails/*.md');
const sortedEmails = emails
.sort((a, b) =>
new Date(b.frontmatter.pubDate).valueOf() -
new Date(a.frontmatter.pubDate).valueOf()
)
---
<PageLayout title="Daily emails archive">
<ul>
{sortedEmails.map(email => (
<li>
<a href={`/${email.frontmatter.permalink}`}>
{new Date(email.frontmatter.pubDate).toLocaleDateString('en-GB', {
day: 'numeric',
month: 'long',
year: 'numeric',
})} -
{email.frontmatter.title}
</a>
</li>
))}
</ul>
</PageLayout>