mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 07:33:07 +08:00
Sat Naing
2827d4e7d8
* refactor: replace postSlug with Astro content slug Remove postSlug from blog schema. Refactor articles that use postSlug. Remove slugify function from slugify util file. Replace slugify logic with Astro's content collections slug logic. Closes: #186 * docs: update docs for removed slugify contents * refactor: remove unused import
77 lines
2.2 KiB
Plaintext
77 lines
2.2 KiB
Plaintext
---
|
|
import { SITE } from "@config";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Main from "@layouts/Main.astro";
|
|
import Header from "@components/Header.astro";
|
|
import Footer from "@components/Footer.astro";
|
|
import Card from "@components/Card";
|
|
import LinkButton from "@components/LinkButton.astro";
|
|
import type { CollectionEntry } from "astro:content";
|
|
|
|
export interface Props {
|
|
pageNum: number;
|
|
totalPages: number;
|
|
posts: CollectionEntry<"blog">[];
|
|
}
|
|
|
|
const { pageNum, totalPages, posts } = Astro.props;
|
|
|
|
const prev = pageNum > 1 ? "" : "disabled";
|
|
const next = pageNum < totalPages ? "" : "disabled";
|
|
---
|
|
|
|
<Layout title={`Posts | ${SITE.title}`}>
|
|
<Header activeNav="posts" />
|
|
<Main pageTitle="Posts" pageDesc="All the articles I've posted.">
|
|
<ul>
|
|
{
|
|
posts.map(({ data, slug }) => (
|
|
<Card href={`/posts/${slug}`} frontmatter={data} />
|
|
))
|
|
}
|
|
</ul>
|
|
</Main>
|
|
|
|
{
|
|
totalPages > 1 && (
|
|
<nav class="pagination-wrapper" aria-label="Pagination">
|
|
<LinkButton
|
|
disabled={prev === "disabled"}
|
|
href={`/posts${pageNum - 1 !== 1 ? "/" + (pageNum - 1) : ""}`}
|
|
className={`mr-4 select-none ${prev}`}
|
|
ariaLabel="Previous"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class={`${prev}-svg`}>
|
|
<path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
|
|
</svg>
|
|
Prev
|
|
</LinkButton>
|
|
<LinkButton
|
|
disabled={next === "disabled"}
|
|
href={`/posts/${pageNum + 1}`}
|
|
className={`ml-4 select-none ${next}`}
|
|
ariaLabel="Next"
|
|
>
|
|
Next
|
|
<svg xmlns="http://www.w3.org/2000/svg" class={`${next}-svg`}>
|
|
<path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
|
|
</svg>
|
|
</LinkButton>
|
|
</nav>
|
|
)
|
|
}
|
|
<Footer noMarginTop={totalPages > 1} />
|
|
</Layout>
|
|
|
|
<style>
|
|
.pagination-wrapper {
|
|
@apply mb-8 mt-auto flex justify-center;
|
|
}
|
|
.disabled {
|
|
@apply pointer-events-none select-none opacity-50 hover:text-skin-base group-hover:fill-skin-base;
|
|
}
|
|
.disabled-svg {
|
|
@apply group-hover:!fill-skin-base;
|
|
}
|
|
</style>
|