Skip to content

Commit 62f4650

Browse files
LuanRogerLuanRoger
committed
Merge branch 'pagination'
2 parents 8dda660 + c5875e3 commit 62f4650

19 files changed

+286
-53
lines changed

‎public/images/posts/dummy.jpg

824 KB
Loading

‎src/components/Pagination.astro

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
import {
3+
Pagination as PaginationShadcn,
4+
PaginationContent,
5+
PaginationItem,
6+
PaginationLink,
7+
PaginationNext,
8+
PaginationPrevious,
9+
} from "./ui/pagination";
10+
11+
interface Props {
12+
currentPage?: number | undefined;
13+
basePath: string;
14+
pageCount: number;
15+
}
16+
17+
const { basePath, currentPage, pageCount } = Astro.props;
18+
---
19+
20+
<PaginationShadcn>
21+
<PaginationContent>
22+
{
23+
currentPage && currentPage > 1 && (
24+
<PaginationItem>
25+
<PaginationPrevious href={`${basePath}${currentPage - 1}`} />
26+
</PaginationItem>
27+
)
28+
}
29+
{
30+
Array.from({ length: pageCount }).map((_, index) => {
31+
const page = index + 1;
32+
return (
33+
<PaginationItem>
34+
<PaginationLink href={`${basePath}${page}`} isActive={currentPage === page}>{page}</PaginationLink>
35+
</PaginationItem>
36+
);
37+
})
38+
}
39+
{
40+
currentPage && currentPage < pageCount && (
41+
<PaginationItem>
42+
<PaginationNext href={`${basePath}${currentPage + 1}`} />
43+
</PaginationItem>
44+
)
45+
}
46+
</PaginationContent>
47+
</PaginationShadcn>

‎src/components/PostsListsPaginated.astro

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
import { getPageCount } from "@/scripts/content_utils";
3+
import Pagination from "./Pagination.astro";
4+
import PostsList from "./PostsList.astro";
5+
import { getPostsFromPage } from "@/scripts/content_fetcher";
6+
7+
interface Props {
8+
currentPage: number;
9+
}
10+
11+
const { currentPage } = Astro.props;
12+
const basePath = "/posts/";
13+
const pageCount = await getPageCount();
14+
const pagePosts = await getPostsFromPage(currentPage);
15+
---
16+
17+
<div class="flex flex-col justify-center gap-5">
18+
<PostsList posts={pagePosts} />
19+
{
20+
pageCount !== 1 && (
21+
<Pagination
22+
pageCount={pageCount}
23+
currentPage={currentPage}
24+
basePath={basePath}
25+
/>
26+
)
27+
}
28+
</div>

‎src/components/ui/pagination.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
99
<nav
1010
role="navigation"
1111
aria-label="pagination"
12-
className={cn("mx-auto flex w-full justify-center", className)}
12+
className={cn("mx-auto flex w-full justify-end", className)}
1313
{...props}
1414
/>
1515
)
@@ -21,7 +21,7 @@ const PaginationContent = React.forwardRef<
2121
>(({ className, ...props }, ref) => (
2222
<ul
2323
ref={ref}
24-
className={cn("flex flex-row items-center gap-1", className)}
24+
className={cn("flex flex-row items-center gap-2", className)}
2525
{...props}
2626
/>
2727
))
@@ -67,11 +67,10 @@ const PaginationPrevious = ({
6767
<PaginationLink
6868
aria-label="Go to previous page"
6969
size="default"
70-
className={cn("gap-1 pl-2.5", className)}
70+
className={cn("gap-1 p-3", className)}
7171
{...props}
7272
>
7373
<ChevronLeft className="h-4 w-4" />
74-
<span>Previous</span>
7574
</PaginationLink>
7675
)
7776
PaginationPrevious.displayName = "PaginationPrevious"
@@ -83,10 +82,9 @@ const PaginationNext = ({
8382
<PaginationLink
8483
aria-label="Go to next page"
8584
size="default"
86-
className={cn("gap-1 pr-2.5", className)}
85+
className={cn("gap-1 p-3", className)}
8786
{...props}
8887
>
89-
<span>Next</span>
9088
<ChevronRight className="h-4 w-4" />
9189
</PaginationLink>
9290
)

‎src/content/posts/components_test.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: "components_test"
33
title: "Components Test"
44
author: rog
5-
date: 2023-12-06
5+
date: 2024-04-14
66
draft: false
77
tags:
88
- "test"

‎src/content/posts/draft_test.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: "draft_test"
33
title: "Draft Test"
44
author: rog
5-
date: 2023-11-26
5+
date: 2024-04-14
66
draft: true
77
tags:
88
- "Test"

‎src/content/posts/dummy1.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
id: "dummy1"
3+
title: "Draft Test 1"
4+
author: rog
5+
date: 2024-04-13
6+
draft: false
7+
tags:
8+
- "dumy"
9+
postType: "Dumy"
10+
description: "1 - This is a dummy post, is just to fill content in the blog 😜."
11+
image: {
12+
"src": "/images/posts/dummy.jpg",
13+
"alt": "Hello World",
14+
"href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
15+
}
16+
---
17+
18+
# Dumy 1
19+
20+
This is a dummy post, is just to fill content in the blog 😜.

‎src/content/posts/dummy2.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
id: "dummy2"
3+
title: "Draft Test 2"
4+
author: rog
5+
date: 2024-04-13
6+
draft: false
7+
tags:
8+
- "dumy"
9+
postType: "Dumy"
10+
description: "2 - This is a dummy post, is just to fill content in the blog 😜."
11+
image: {
12+
"src": "/images/posts/dummy.jpg",
13+
"alt": "Hello World",
14+
"href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
15+
}
16+
---
17+
18+
# Dumy 2
19+
20+
This is a dummy post, is just to fill content in the blog 😜.

‎src/content/posts/dummy3.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
id: "dummy3"
3+
title: "Draft Test 3"
4+
author: rog
5+
date: 2024-04-13
6+
draft: false
7+
tags:
8+
- "dumy"
9+
postType: "Dumy"
10+
description: "3 - This is a dummy post, is just to fill content in the blog 😜."
11+
image: {
12+
"src": "/images/posts/dummy.jpg",
13+
"alt": "Hello World",
14+
"href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
15+
}
16+
---
17+
18+
# Dumy 3
19+
20+
This is a dummy post, is just to fill content in the blog 😜.

‎src/content/posts/dummy4.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
id: "dummy4"
3+
title: "Draft Test 4"
4+
author: rog
5+
date: 2024-04-13
6+
draft: false
7+
tags:
8+
- "dumy"
9+
postType: "Dumy"
10+
description: "4 - This is a dummy post, is just to fill content in the blog 😜."
11+
image: {
12+
"src": "/images/posts/dummy.jpg",
13+
"alt": "Hello World",
14+
"href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
15+
}
16+
---
17+
18+
# Dumy 4
19+
20+
This is a dummy post, is just to fill content in the blog 😜.

‎src/content/posts/dummy5.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
id: "dummy5"
3+
title: "Draft Test 5"
4+
author: rog
5+
date: 2024-04-13
6+
draft: false
7+
tags:
8+
- "dumy"
9+
postType: "Dumy"
10+
description: "5 - This is a dummy post, is just to fill content in the blog 😜."
11+
image: {
12+
"src": "/images/posts/dummy.jpg",
13+
"alt": "Hello World",
14+
"href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
15+
}
16+
---
17+
18+
# Dumy 4
19+
20+
This is a dummy post, is just to fill content in the blog 😜.

‎src/content/posts/gif_post_test.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: "gif_post_test"
33
title: "GIF Test"
44
author: rog
5-
date: 2023-11-19
5+
date: 2024-04-14
66
draft: false
77
tags:
88
- "showcase"

‎src/content/posts/hello_world.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: "hello_world"
33
title: "Hello World"
44
author: rog
5-
date: 2023-11-12
5+
date: 2024-04-14
66
draft: false
77
tags:
88
- "showcase"

‎src/layouts/LayoutBase.astro

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -75,24 +75,25 @@ const { title, bttEnable = false, metaDescription, className } = Astro.props;
7575
<BackToTopButton enable={bttEnable} />
7676
</div>
7777
<Footer />
78-
</body><script>
79-
import { getCurrentThemeMode } from "../scripts/theme";
78+
<script>
79+
import { getCurrentThemeMode } from "../scripts/theme";
8080

81-
document.addEventListener("astro:after-swap", () => {
82-
const currentTheme = getCurrentThemeMode();
83-
if (currentTheme === "dark") {
84-
document.documentElement.classList.add("dark");
85-
} else {
86-
document.documentElement.classList.remove("dark");
87-
}
88-
});
89-
document.addEventListener("astro:page-load", () => {
90-
const currentTheme = getCurrentThemeMode();
91-
if (currentTheme === "dark") {
92-
document.documentElement.classList.add("dark");
93-
} else {
94-
document.documentElement.classList.remove("dark");
95-
}
96-
});
97-
</script>
81+
document.addEventListener("astro:after-swap", () => {
82+
const currentTheme = getCurrentThemeMode();
83+
if (currentTheme === "dark") {
84+
document.documentElement.classList.add("dark");
85+
} else {
86+
document.documentElement.classList.remove("dark");
87+
}
88+
});
89+
document.addEventListener("astro:page-load", () => {
90+
const currentTheme = getCurrentThemeMode();
91+
if (currentTheme === "dark") {
92+
document.documentElement.classList.add("dark");
93+
} else {
94+
document.documentElement.classList.remove("dark");
95+
}
96+
});
97+
</script>
98+
</body>
9899
</html>

‎src/pages/index.astro

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
---
2-
import PostsList from "../components/PostsList.astro";
3-
import LayoutPage from "../layouts/LayoutPage.astro";
4-
import { getPosts } from "../scripts/content_fetcher"
5-
6-
const posts = await getPosts()
2+
import LayoutPage from "@/layouts/LayoutPage.astro";
3+
import PostsListsPaginated from "@/components/PostsListsPaginated.astro";
74
---
85

96
<LayoutPage>
10-
<PostsList posts={posts} />
11-
</LayoutPage>
7+
<PostsListsPaginated currentPage={1} />
8+
</LayoutPage>

‎src/pages/posts/[page].astro

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
import type { GetStaticPaths } from "astro";
3+
import LayoutPage from "@/layouts/LayoutPage.astro";
4+
import { getPageCount } from "@/scripts/content_utils";
5+
import PostsList from "@/components/PostsList.astro";
6+
import { getPostsFromPage } from "@/scripts/content_fetcher";
7+
import PostsListsPaginated from "@/components/PostsListsPaginated.astro";
8+
9+
export const getStaticPaths = (async () => {
10+
const availablePages = await getPageCount()
11+
const paths = Array.from<GetStaticPaths>({ length: availablePages }).map((_, index) => {
12+
const page = index + 1
13+
return {
14+
params: {
15+
page: page.toString()
16+
},
17+
}
18+
})
19+
20+
return paths
21+
}) satisfies GetStaticPaths;
22+
23+
24+
const { page } = Astro.params
25+
const intPage = parseInt(page)
26+
---
27+
28+
<LayoutPage>
29+
<PostsListsPaginated currentPage={intPage} />
30+
</LayoutPage>

‎src/scripts/consts.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const POSTS_PER_PAGE = 5;

0 commit comments

Comments
 (0)