refactor: replace pagination logic with Astro built-in pagination (#376)

This commit is contained in:
Timon Jurschitsch
2024-09-16 08:05:50 +02:00
committed by GitHub
parent 70b2486293
commit 08b1676cdd
12 changed files with 102 additions and 195 deletions
+7 -13
View File
@@ -1,5 +1,4 @@
---
import type { CollectionEntry } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
@@ -7,14 +6,14 @@ import Footer from "@components/Footer.astro";
import Pagination from "@components/Pagination.astro";
import Card from "@components/Card";
import { SITE } from "@config";
import type { Page } from "astro";
import type { CollectionEntry } from "astro:content";
export interface Props {
currentPage: number;
totalPages: number;
paginatedPosts: CollectionEntry<"blog">[];
page: Page<CollectionEntry<"blog">>;
}
const { currentPage, totalPages, paginatedPosts } = Astro.props;
const { page } = Astro.props;
---
<Layout title={`Posts | ${SITE.title}`}>
@@ -22,19 +21,14 @@ const { currentPage, totalPages, paginatedPosts } = Astro.props;
<Main pageTitle="Posts" pageDesc="All the articles I've posted.">
<ul>
{
paginatedPosts.map(({ data, slug }) => (
page.data.map(({ data, slug }) => (
<Card href={`/posts/${slug}/`} frontmatter={data} />
))
}
</ul>
</Main>
<Pagination
{currentPage}
{totalPages}
prevUrl={`/posts${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}/`}
nextUrl={`/posts/${currentPage + 1}/`}
/>
<Pagination {page} />
<Footer noMarginTop={totalPages > 1} />
<Footer noMarginTop={page.lastPage > 1} />
</Layout>
+7 -15
View File
@@ -1,5 +1,4 @@
---
import { type CollectionEntry } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
@@ -7,16 +6,16 @@ import Footer from "@components/Footer.astro";
import Card from "@components/Card";
import Pagination from "@components/Pagination.astro";
import { SITE } from "@config";
import type { Page } from "astro";
import type { CollectionEntry } from "astro:content";
export interface Props {
currentPage: number;
totalPages: number;
paginatedPosts: CollectionEntry<"blog">[];
page: Page<CollectionEntry<"blog">>;
tag: string;
tagName: string;
}
const { currentPage, totalPages, paginatedPosts, tag, tagName } = Astro.props;
const { page, tag, tagName } = Astro.props;
---
<Layout title={`Tag: ${tagName} | ${SITE.title}`}>
@@ -29,21 +28,14 @@ const { currentPage, totalPages, paginatedPosts, tag, tagName } = Astro.props;
<h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
<ul>
{
paginatedPosts.map(({ data, slug }) => (
page.data.map(({ data, slug }) => (
<Card href={`/posts/${slug}/`} frontmatter={data} />
))
}
</ul>
</Main>
<Pagination
{currentPage}
{totalPages}
prevUrl={`/tags/${tag}${
currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""
}/`}
nextUrl={`/tags/${tag}/${currentPage + 1}/`}
/>
<Pagination {page} />
<Footer noMarginTop={totalPages > 1} />
<Footer noMarginTop={page.lastPage > 1} />
</Layout>