93 lines
2.9 KiB
Plaintext
93 lines
2.9 KiB
Plaintext
---
|
|
import Blog from '@/layouts/Blog.astro';
|
|
import type { GetStaticPaths } from 'astro';
|
|
import { getCollection, render } from 'astro:content';
|
|
|
|
import leftNormal from "$/left-normal.png";
|
|
import leftHover from "$/left-hover.png";
|
|
import leftActive from "$/left-active.png";
|
|
import rightNormal from "$/right-normal.png";
|
|
import rightHover from "$/right-hover.png";
|
|
import rightActive from "$/right-active.png";
|
|
|
|
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!} currently={entry.data.currently}>
|
|
<Fragment slot="head">
|
|
<meta name="description" content={entry.body?.substring(0, 150) + "…"}>
|
|
</Fragment>
|
|
<Content />
|
|
|
|
{(previous || next) && (
|
|
<div id="blog-pagination" slot="pagination">
|
|
{previous && (
|
|
<a id="previous" aria-label="previous post" href={`/blog/${previous.id}`}>
|
|
<img class="arrow" src={leftNormal.src} alt="" />
|
|
{previous.data.title}
|
|
</a>
|
|
)}
|
|
|
|
{next && (
|
|
<a id="next" aria-label="next post" href={`/blog/${next.id}`}>
|
|
{next.data.title}
|
|
<img class="arrow" src={rightNormal.src} alt="" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Blog>
|
|
|
|
<style define:vars={{ leftNormal: `url(${leftNormal.src})`, leftHover: `url(${leftHover.src})`, leftActive: `url(${leftActive.src})`, rightNormal: `url(${rightNormal.src})`, rightHover: `url(${rightHover.src})`, rightActive: `url(${rightActive.src})` }}>
|
|
#blog-pagination {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
.arrow {
|
|
width: 36px;
|
|
height: 50px;
|
|
}
|
|
|
|
#previous {
|
|
grid-column: 1 / 2;
|
|
justify-self: left;
|
|
|
|
.arrow { content: var(--leftNormal) var(--leftHover) var(--leftActive); }
|
|
&:hover .arrow { content: var(--leftHover); }
|
|
&:active .arrow, &:focus .arrow { content: var(--leftActive); }
|
|
}
|
|
|
|
#next {
|
|
grid-column: 2 / -1;
|
|
justify-self: right;
|
|
|
|
.arrow { content: var(--rightNormal) var(--rightHover) var(--rightActive); }
|
|
&:hover .arrow { content: var(--rightHover); }
|
|
&:active .arrow, &:focus .arrow { content: var(--rightActive); }
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
gap: 2px;
|
|
color: var(--bg-0);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
</style> |