0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-03 16:10:26 +03:00

refactor: remove Pagination component and restructure blog page

- Deleted the Pagination component as it is no longer needed.
- Refactored the blog page to directly display posts without pagination.
- Introduced a new index page to list all blog posts in a single view.
This commit is contained in:
2025-06-10 14:01:27 +00:00
parent bb7481670e
commit 6a47cb4165
3 changed files with 17 additions and 68 deletions

View File

@ -1,35 +0,0 @@
---
type Props = {
readonly nextUrl?: string;
readonly prevUrl?: string;
};
const { nextUrl, prevUrl } = Astro.props;
---
<style lang="scss">
div {
text-align: center;
}
span {
margin: 0 2em;
}
</style>
<div>
{
prevUrl && (
<span>
<a href={prevUrl}>&lt; Prev</a>
</span>
)
}
{
nextUrl && (
<span>
<a href={nextUrl}>Next &gt;</a>
</span>
)
}
</div>

View File

@ -1,33 +0,0 @@
---
import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
import { getCollection } from "astro:content";
import Layout from "../layouts/BaseLayout.astro";
import Pagination from "../components/Pagination.astro";
import PostSummary from "../components/PostSummary.astro";
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
export const getStaticPaths = (async ({ paginate }) => {
const posts = await getCollection("blog", ({ data }) => {
return data.draft !== true;
});
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
return paginate(posts, {
pageSize: 10,
});
}) satisfies GetStaticPaths;
const { page } = Astro.props;
---
<Layout>
<section style={{ "margin-top": "3rem" }}>
{page.data.map((post) => <PostSummary post={post} />)}
</section>
<section>
<Pagination nextUrl={page.url.next} prevUrl={page.url.prev} />
</section>
</Layout>

17
src/pages/index.astro Normal file
View File

@ -0,0 +1,17 @@
---
import { getCollection } from "astro:content";
import Layout from "../layouts/BaseLayout.astro";
import PostSummary from "../components/PostSummary.astro";
const posts = await getCollection("blog", ({ data }) => {
return data.draft !== true;
});
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
---
<Layout>
<section style={{ "margin-top": "3rem" }}>
{posts.map((post) => <PostSummary post={post} />)}
</section>
</Layout>