54 lines
1.4 KiB
Plaintext
54 lines
1.4 KiB
Plaintext
---
|
|
import Blog from '@/layouts/Blog.astro';
|
|
import type { GetStaticPaths } from 'astro';
|
|
import { getCollection, render } from 'astro:content';
|
|
|
|
export const getStaticPaths = (async () => {
|
|
const blog = await getCollection("blog");
|
|
return blog.map(entry => ({
|
|
params: { id: entry.id },
|
|
props: { entry },
|
|
}));
|
|
}) satisfies GetStaticPaths;
|
|
|
|
const { entry } = Astro.props;
|
|
const { Content } = await render(entry);
|
|
|
|
const blog = await getCollection("blog");
|
|
blog.sort((a, b) => b.data.pubDate!.valueOf() - a.data.pubDate!.valueOf());
|
|
const current = blog.findIndex(entry => entry.id === Astro.params.id);
|
|
const previous = current + 1 === blog.length ? undefined : blog[current + 1];
|
|
const next = current === 0 ? undefined : blog[current - 1];
|
|
---
|
|
<Blog title={entry.data.title!} date={entry.data.pubDate!}>
|
|
<Content />
|
|
|
|
{(previous || next) && (
|
|
<div id="blog-pagination" slot="pagination">
|
|
{previous && (
|
|
<a id="previous" aria-label="previous post" href={`/blog/${previous.id}`}>{previous.data.title}</a>
|
|
)}
|
|
|
|
{next && (
|
|
<a id="next" aria-label="next post" href={`/blog/${next.id}`}>{next.data.title}</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Blog>
|
|
|
|
<style>
|
|
#blog-pagination {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
#previous {
|
|
grid-column: 1 / 2;
|
|
justify-self: left;
|
|
}
|
|
|
|
#next {
|
|
grid-column: 2 / -1;
|
|
justify-self: right;
|
|
}
|
|
}
|
|
</style> |