Merge branch 'pagination'

src/components/Pagination.astro

@@ -0,0 +1,47 @@
+---
+import {
+  Pagination as PaginationShadcn,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./ui/pagination";
+
+interface Props {
+  currentPage?: number | undefined;
+  basePath: string;
+  pageCount: number;
+}
+
+const { basePath, currentPage, pageCount } = Astro.props;
+---
+
+<PaginationShadcn>
+  <PaginationContent>
+    {
+      currentPage && currentPage > 1 && (
+        <PaginationItem>
+          <PaginationPrevious href={`${basePath}${currentPage - 1}`} />
+        </PaginationItem>
+      )
+    }
+    {
+      Array.from({ length: pageCount }).map((_, index) => {
+        const page = index + 1;
+        return (
+          <PaginationItem>
+            <PaginationLink href={`${basePath}${page}`} isActive={currentPage === page}>{page}</PaginationLink>
+          </PaginationItem>
+        );
+      })
+    }
+    {
+      currentPage && currentPage < pageCount && (
+        <PaginationItem>
+          <PaginationNext href={`${basePath}${currentPage + 1}`} />
+        </PaginationItem>
+      )
+    }
+  </PaginationContent>
+</PaginationShadcn>

src/components/PostsListsPaginated.astro

@@ -0,0 +1,28 @@
+---
+import { getPageCount } from "@/scripts/content_utils";
+import Pagination from "./Pagination.astro";
+import PostsList from "./PostsList.astro";
+import { getPostsFromPage } from "@/scripts/content_fetcher";
+
+interface Props {
+  currentPage: number;
+}
+
+const { currentPage } = Astro.props;
+const basePath = "/posts/";
+const pageCount = await getPageCount();
+const pagePosts = await getPostsFromPage(currentPage);
+---
+
+<div class="flex flex-col justify-center gap-5">
+  <PostsList posts={pagePosts} />
+  {
+    pageCount !== 1 && (
+      <Pagination
+        pageCount={pageCount}
+        currentPage={currentPage}
+        basePath={basePath}
+      />
+    )
+  }
+</div>

src/components/ui/pagination.tsx

@@ -9,7 +9,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn("mx-auto flex w-full justify-end", className)}
     {...props}
   />
 )
@@ -21,7 +21,7 @@ const PaginationContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
+    className={cn("flex flex-row items-center gap-2", className)}
     {...props}
   />
 ))
@@ -67,11 +67,10 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("gap-1 p-3", className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
   </PaginationLink>
 )
 PaginationPrevious.displayName = "PaginationPrevious"
@@ -83,10 +82,9 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("gap-1 p-3", className)}
     {...props}
   >
-    <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )

src/content/posts/components_test.mdx

@@ -2,7 +2,7 @@
 id: "components_test"
 title: "Components Test"
 author: rog
-date: 2023-12-06
+date: 2024-04-14
 draft: false
 tags: 
 - "test"

src/content/posts/draft_test.mdx

@@ -2,7 +2,7 @@
 id: "draft_test"
 title: "Draft Test"
 author: rog
-date: 2023-11-26
+date: 2024-04-14
 draft: true
 tags: 
 - "Test"

src/content/posts/dummy1.mdx

@@ -0,0 +1,20 @@
+---
+id: "dummy1"
+title: "Draft Test 1"
+author: rog
+date: 2024-04-13
+draft: false
+tags: 
+- "dumy"
+postType: "Dumy"
+description: "1 - This is a dummy post, is just to fill content in the blog 😜."
+image: {
+    "src": "/images/posts/dummy.jpg",
+    "alt": "Hello World",
+    "href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
+}
+---
+
+# Dumy 1
+
+This is a dummy post, is just to fill content in the blog 😜.

src/content/posts/dummy2.mdx

@@ -0,0 +1,20 @@
+---
+id: "dummy2"
+title: "Draft Test 2"
+author: rog
+date: 2024-04-13
+draft: false
+tags: 
+- "dumy"
+postType: "Dumy"
+description: "2 - This is a dummy post, is just to fill content in the blog 😜."
+image: {
+    "src": "/images/posts/dummy.jpg",
+    "alt": "Hello World",
+    "href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
+}
+---
+
+# Dumy 2
+
+This is a dummy post, is just to fill content in the blog 😜.

src/content/posts/dummy3.mdx

@@ -0,0 +1,20 @@
+---
+id: "dummy3"
+title: "Draft Test 3"
+author: rog
+date: 2024-04-13
+draft: false
+tags: 
+- "dumy"
+postType: "Dumy"
+description: "3 - This is a dummy post, is just to fill content in the blog 😜."
+image: {
+    "src": "/images/posts/dummy.jpg",
+    "alt": "Hello World",
+    "href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
+}
+---
+
+# Dumy 3
+
+This is a dummy post, is just to fill content in the blog 😜.

src/content/posts/dummy4.mdx

@@ -0,0 +1,20 @@
+---
+id: "dummy4"
+title: "Draft Test 4"
+author: rog
+date: 2024-04-13
+draft: false
+tags: 
+- "dumy"
+postType: "Dumy"
+description: "4 - This is a dummy post, is just to fill content in the blog 😜."
+image: {
+    "src": "/images/posts/dummy.jpg",
+    "alt": "Hello World",
+    "href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
+}
+---
+
+# Dumy 4
+
+This is a dummy post, is just to fill content in the blog 😜.

src/content/posts/dummy5.mdx

@@ -0,0 +1,20 @@
+---
+id: "dummy5"
+title: "Draft Test 5"
+author: rog
+date: 2024-04-13
+draft: false
+tags: 
+- "dumy"
+postType: "Dumy"
+description: "5 - This is a dummy post, is just to fill content in the blog 😜."
+image: {
+    "src": "/images/posts/dummy.jpg",
+    "alt": "Hello World",
+    "href": "https://www.pexels.com/pt-br/foto/papel-de-parede-digital-de-luz-roxa-e-azul-3780104/"
+}
+---
+
+# Dumy 4
+
+This is a dummy post, is just to fill content in the blog 😜.

src/content/posts/gif_post_test.mdx

@@ -2,7 +2,7 @@
 id: "gif_post_test"
 title: "GIF Test"
 author: rog
-date: 2023-11-19
+date: 2024-04-14
 draft: false
 tags: 
 - "showcase"

src/content/posts/hello_world.mdx

@@ -2,7 +2,7 @@
 id: "hello_world"
 title: "Hello World"
 author: rog
-date: 2023-11-12
+date: 2024-04-14
 draft: false
 tags: 
 - "showcase"

src/layouts/LayoutBase.astro

@@ -75,24 +75,25 @@ const { title, bttEnable = false, metaDescription, className } = Astro.props;
       <BackToTopButton enable={bttEnable} />
     </div>
     <Footer />
-  </body><script>
-    import { getCurrentThemeMode } from "../scripts/theme";
+    <script>
+      import { getCurrentThemeMode } from "../scripts/theme";
 
-    document.addEventListener("astro:after-swap", () => {
-      const currentTheme = getCurrentThemeMode();
-      if (currentTheme === "dark") {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-    });
-    document.addEventListener("astro:page-load", () => {
-      const currentTheme = getCurrentThemeMode();
-      if (currentTheme === "dark") {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-    });
-  </script>
+      document.addEventListener("astro:after-swap", () => {
+        const currentTheme = getCurrentThemeMode();
+        if (currentTheme === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      });
+      document.addEventListener("astro:page-load", () => {
+        const currentTheme = getCurrentThemeMode();
+        if (currentTheme === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      });
+    </script>
+  </body>
 </html>

src/pages/index.astro

@@ -1,11 +1,8 @@
 ---
-import PostsList from "../components/PostsList.astro";
-import LayoutPage from "../layouts/LayoutPage.astro";
-import { getPosts } from "../scripts/content_fetcher"
-
-const posts = await getPosts()
+import LayoutPage from "@/layouts/LayoutPage.astro";
+import PostsListsPaginated from "@/components/PostsListsPaginated.astro";
 ---
 
 <LayoutPage>
-    <PostsList posts={posts} />
-</LayoutPage>
+  <PostsListsPaginated currentPage={1} />
+</LayoutPage>

src/pages/posts/[page].astro

@@ -0,0 +1,30 @@
+---
+import type { GetStaticPaths } from "astro";
+import LayoutPage from "@/layouts/LayoutPage.astro";
+import { getPageCount } from "@/scripts/content_utils";
+import PostsList from "@/components/PostsList.astro";
+import { getPostsFromPage } from "@/scripts/content_fetcher";
+import PostsListsPaginated from "@/components/PostsListsPaginated.astro";
+
+export const getStaticPaths = (async () => {
+    const availablePages = await getPageCount()
+    const paths = Array.from<GetStaticPaths>({ length: availablePages }).map((_, index) => {
+        const page = index + 1
+        return {
+            params: {
+                page: page.toString()
+            },
+        }
+    })
+
+    return paths
+}) satisfies GetStaticPaths;
+
+
+const { page } = Astro.params
+const intPage = parseInt(page)
+---
+
+<LayoutPage>
+    <PostsListsPaginated currentPage={intPage} />
+</LayoutPage>

src/scripts/consts.ts

@@ -0,0 +1 @@
+export const POSTS_PER_PAGE = 5;