style: hide pagination if there is only one page

This commit is contained in:
log101 2024-06-21 17:01:58 +03:00
parent b71e3faaf9
commit 2885cd1b86
2 changed files with 38 additions and 29 deletions

View File

@ -9,9 +9,11 @@ import Post from "@/components/Post.astro";
export async function getStaticPaths({ paginate }: { paginate: any }) {
const blogEntries = await getCollection("blog");
const filteredPosts = blogEntries.filter((post) => post.data.category);
return CATEGORIES.flatMap((category) => {
const filteredPosts = blogEntries.filter(
(post) => post.data.category == category
);
return paginate(filteredPosts, {
params: { category },
pageSize: 3,
@ -36,39 +38,45 @@ const pages = Array.from({ length: page.lastPage }, (_, i) => i + 1);
.map((p) => <Post post={p} componentType="long" />)
) : (
<p>
Henüz bu kategoride bir yazı yazılmadı. Yazarımızın ilhama veya
Henüz bu kategoride bir yazı yayınlanmadı. Yazarımızın ilhama veya
teşviğe ihtiyacı olabilir!
</p>
)
}
</div>
<div id="pagination-container" class="flex gap-2">
<button
><a href={page.url.prev} class="no-underline text-inherit">geri git</a
></button
>
{
pages.map((pageNumber) => {
switch (pageNumber) {
case page.currentPage:
return <a>{pageNumber}</a>;
{
page.lastPage != 1 && (
<>
<div id="pagination-container" class="flex gap-2">
<button>
<a href={page.url.prev} class="no-underline text-inherit">
geri git
</a>
</button>
{pages.map((pageNumber) => {
switch (pageNumber) {
case page.currentPage:
return <a>{pageNumber}</a>;
default:
return (
<a
href={`${page.url.current.slice(0, -1)}${pageNumber}`}
class="text-inherit"
>
{pageNumber}
</a>
);
}
})
}
<button
><a href={page.url.next} class="no-underline text-inherit">ileri git</a
></button
>
</div>
default:
return (
<a
href={`${page.url.current.slice(0, -1)}${pageNumber}`}
class="text-inherit"
>
{pageNumber}
</a>
);
}
})}
<button>
<a href={page.url.next} class="no-underline text-inherit">
ileri git
</a>
</button>
</div>
</>
)
}
<Footer />
</Layout>

View File

@ -36,6 +36,7 @@ export async function getStaticPaths() {
hx-trigger="load"
hx-swap="innerHTML"
id="comments-container"
class="flex flex-col gap-6"
>
<p id="no-comments-text">Henüz yorum yok!</p>
</div>