feat: blog home pagination and routing

src/app/[locale]/blog/page.tsx

@@ -0,0 +1,40 @@
+import { BlogPosts } from '@src/components/features/blog';
+import { fetchPosts } from '@src/lib/fetchpost';
+
+interface ContentFullBlogProps {
+  params: { locale: string };
+  searchParams: {
+    page?: string;
+    preview?: string;
+  };
+}
+
+export default async function ContentFullBlog({ params, searchParams }: ContentFullBlogProps) {
+  const raw = searchParams?.page;
+  const parsedPage = parseInt(raw ?? '1', 10);
+  const page = isNaN(parsedPage) || parsedPage < 1 ? 1 : parsedPage;
+
+  const preview = searchParams.preview === 'true';
+  const locale = params.locale;
+
+  const postsPerPage = 6;
+  const posts = await fetchPosts(page, postsPerPage, preview);
+
+  const totalPosts = posts.totalPosts;
+  const totalPages = Math.ceil(totalPosts / postsPerPage);
+
+  return (
+    <section id="blog" className="py-12">
+      <div className="container mx-auto px-4">
+        <BlogPosts
+          posts={posts.items}
+          totalPosts={totalPosts}
+          currentPage={page}
+          totalPages={totalPages}
+          locale={locale}
+          preview={preview}
+        />
+      </div>
+    </section>
+  );
+}

src/components/features/blog/BlogPosts.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { ArticleTileGrid } from '@src/components/features/article';
+import { Container } from '@src/components/shared/container';
+
+export const BlogPosts = ({
+  posts,
+  currentPage,
+  totalPages,
+}: {
+  posts: any[];
+  totalPosts: number;
+  currentPage: number;
+  totalPages: number;
+  locale: string;
+  preview: boolean;
+}) => {
+  const router = useRouter();
+
+  const handlePageChange = (page: number) => {
+    // Change the URL to include the new page number, which will trigger a new server-side request
+    router.push(`?page=${page}/#blogs`);
+  };
+
+  return (
+    <Container className="my-8 px-4 md:mb-2 lg:mb-4">
+      <br />
+      <h2 id="blogs" className="mb-4 md:mb-6">
+        🗞️ Blogs
+      </h2>
+      <ArticleTileGrid className="md:grid-cols-2 lg:grid-cols-3" articles={posts} />
+
+      <div className="mt-8 flex justify-center">
+        <button
+          className="bg-gray-200 hover:bg-gray-300 mx-1 rounded px-4 py-2"
+          disabled={currentPage === 1}
+          onClick={() => handlePageChange(currentPage - 1)}>
+          Previous
+        </button>
+
+        {Array.from({ length: totalPages }).map((_, index) => (
+          <button
+            key={index}
+            className={`mx-1 rounded px-4 py-2 ${
+              currentPage === index + 1 ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300'
+            }`}
+            onClick={() => handlePageChange(index + 1)}>
+            {index + 1}
+          </button>
+        ))}
+
+        <button
+          className="bg-gray-200 hover:bg-gray-300 mx-1 rounded px-4 py-2"
+          disabled={currentPage === totalPages}
+          onClick={() => handlePageChange(currentPage + 1)}>
+          Next
+        </button>
+      </div>
+    </Container>
+  );
+};

src/components/features/blog/index.ts

@@ -0,0 +1 @@
+export * from './BlogPosts';

src/lib/__generated/sdk.ts

@@ -1595,17 +1595,17 @@ export type PageBlogPostQuery = { __typename?: 'Query', pageBlogPostCollection?:
 
 export type PageBlogPostCollectionQueryVariables = Exact<{
   locale?: InputMaybe<Scalars['String']>;
+  skip?: InputMaybe<Scalars['Int']>;
   preview?: InputMaybe<Scalars['Boolean']>;
   limit?: InputMaybe<Scalars['Int']>;
   order?: InputMaybe<Array<InputMaybe<PageBlogPostOrder>> | InputMaybe<PageBlogPostOrder>>;
   where?: InputMaybe<PageBlogPostFilter>;
 }>;
 
-
 export type PageBlogPostCollectionQuery = { __typename?: 'Query', pageBlogPostCollection?: { __typename?: 'PageBlogPostCollection', items: Array<(
       { __typename?: 'PageBlogPost' }
       & PageBlogPostFieldsFragment
-    ) | null> } | null };
+    ) | null>, total: any } | null };
 
 export type PageLandingFieldsFragment = { __typename: 'PageLanding', internalName?: string | null, sys: { __typename?: 'Sys', id: string, spaceId: string }, seoFields?: (
     { __typename?: 'ComponentSeo' }
@@ -1826,9 +1826,10 @@ ${AuthorFieldsFragmentDoc}
 ${RichImageFieldsFragmentDoc}
 ${ReferencePageBlogPostFieldsFragmentDoc}`;
 export const PageBlogPostCollectionDocument = gql`
-    query pageBlogPostCollection($locale: String, $preview: Boolean, $limit: Int, $order: [PageBlogPostOrder], $where: PageBlogPostFilter) {
+    query pageBlogPostCollection($locale: String, $skip: Int, $preview: Boolean, $limit: Int, $order: [PageBlogPostOrder], $where: PageBlogPostFilter) {
   pageBlogPostCollection(
     limit: $limit
+    skip: $skip
     locale: $locale
     preview: $preview
     order: $order
@@ -1837,6 +1838,7 @@ export const PageBlogPostCollectionDocument = gql`
     items {
       ...PageBlogPostFields
     }
+    total
   }
 }
     ${PageBlogPostFieldsFragmentDoc}

src/lib/fetchpost.ts

@@ -0,0 +1,30 @@
+// lib/fetchPosts.ts
+
+import { PageBlogPostOrder } from './__generated/sdk';
+
+import { client, previewClient } from '@src/lib/client'; // The GraphQL client for fetching data
+
+export const fetchPosts = async (page: number, postsPerPage: number, preview: boolean) => {
+  const skip = (page - 1) * postsPerPage;
+  const gqlClient = preview ? previewClient : client;
+
+  try {
+    const data = await gqlClient.pageBlogPostCollection({
+      limit: postsPerPage,
+      skip,
+      order: PageBlogPostOrder.PublishedDateDesc,
+      preview: false,
+    });
+
+    return {
+      items: data.pageBlogPostCollection?.items || [],
+      totalPosts: data.pageBlogPostCollection?.total || 0,
+    };
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    return {
+      items: [],
+      totalPosts: 0,
+    };
+  }
+};

src/lib/graphql/pageBlogPostCollection.graphql

@@ -2,12 +2,14 @@ query pageBlogPostCollection(
   $locale: String
   $preview: Boolean
   $limit: Int
+  $skip: Int
   $order: [PageBlogPostOrder]
   $where: PageBlogPostFilter
 ) {
-  pageBlogPostCollection(limit: $limit, locale: $locale, preview: $preview, order: $order where: $where) {
+  pageBlogPostCollection(limit: $limit, skip: $skip, locale: $locale, preview: $preview, order: $order where: $where) {
     items {
       ...PageBlogPostFields
     }
+    total
   }
 }