feat: provide pagination for users with js disabled (#13)

* chore: add a Pagination component

* chore: add blog pages

* chore: fallback to page number based navigation if JS disabled

* chore: update translation

2 files changed, 17 insertions, 2 deletions

diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index 444733c..4243762 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -3,7 +3,7 @@ import { AppProps } from 'next/app';
 import { ImageProps } from 'next/image';
 import { ReactElement, ReactNode } from 'react';
 import { PostBy, TotalArticles } from './articles';
-import { AllPostsSlug, RawPostsList } from './blog';
+import { AllPostsSlug, LastPostCursor, RawPostsList } from './blog';
 import { CommentData, CommentsByPostId, CreateComment } from './comments';
 import { ContactData, SendEmail } from './contact';
 import {
@@ -39,6 +39,8 @@ export type VariablesType<T> = T extends PostBy | TopicBy | ThematicBy
   ? { id: number }
   : T extends CreateComment
   ? CommentData
+  : T extends LastPostCursor
+  ? { first: number }
   : T extends SendEmail
   ? ContactData
   : null;
@@ -51,6 +53,7 @@ export type RequestType =
   | AllThematicsSlug
   | CommentsByPostId
   | CreateComment
+  | LastPostCursor
   | PostBy
   | RawPostsList
   | SendEmail
@@ -109,6 +112,10 @@ export type PageInfo = {
   total: number;
 };
 
+export type ParamsIds = {
+  params: { id: string };
+};
+
 export type ParamsSlug = {
   params: { slug: string };
 };
diff --git a/src/ts/types/blog.ts b/src/ts/types/blog.ts
index 8b48264..05bdd1f 100644
--- a/src/ts/types/blog.ts
+++ b/src/ts/types/blog.ts
@@ -19,6 +19,14 @@ export type RawPostsList = {
   };
 };
 
+export type LastPostCursor = {
+  posts: {
+    pageInfo: {
+      endCursor: string;
+    };
+  };
+};
+
 export type AllPostsSlug = {
   posts: {
     nodes: Slug[];
@@ -28,6 +36,6 @@ export type AllPostsSlug = {
 export type BlogPageProps = {
   allThematics: ThematicPreview[];
   allTopics: TopicPreview[];
-  firstPosts: PostsList;
+  posts: PostsList;
   totalPosts: number;
 };