From a26557f25a3b09e7ad322bdb576c787258300985 Mon Sep 17 00:00:00 2001
From: Varun A P <varunlakshmananap@gmail.com>
Date: Fri, 18 Jun 2021 21:22:30 +0200
Subject: [PATCH 1/3] Add Paginator

---
 exampleSite/config.toml |  1 +
 layouts/index.html      | 92 ++++++++++++++++++++++++++---------------
 2 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a9fafb0..422954c 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -14,6 +14,7 @@ pluralizelisttitles = false
   description = "Minimal, one page, theme for showcasing your work"
   message = ""
   hideAutoMenu = false
+  paginate = 2
 
 [[menu.main]]
   name = "External"
diff --git a/layouts/index.html b/layouts/index.html
index a5e21fb..641675c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,42 +4,68 @@
   <div class="container px-5 py-8 mx-auto">
     {{- partial "custom-message.html" . -}}
 
-    <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-      {{ range where .Site.Pages "Kind" "page" }}
-      {{ if ne .Params.Exclude true }}
-      <a
-        target="_blank"
-        rel="noopener"
-        href="{{ .Params.Link }}"
-        class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
-      >
-        <div class="rounded-lg h-64 overflow-hidden relative">
-          {{ if (or .Params.Image .CurrentSection.Params.Image) }}
-          <img
-            alt="{{ .Title }}"
-            class="object-cover object-center h-full w-full"
-            src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
-          />
+    <div>
+      {{ $pages  := where .Site.Pages "Kind" "page" }}
+
+      {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
+      <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+        {{ range $paginator.Pages }}
+        <a
+          target="_blank"
+          rel="noopener"
+          href="{{ .Params.Link }}"
+          class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
+        >
+          <div class="rounded-lg h-64 overflow-hidden relative">
+            {{ if (or .Params.Image .CurrentSection.Params.Image) }}
+            <img
+              alt="{{ .Title }}"
+              class="object-cover object-center h-full w-full"
+              src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
+            />
+            {{ end }}
+            <span
+              class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
+              >{{ title .Section }}</span
+            >
+            <h2
+              class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
+            >
+              {{ .Title }}
+            </h2>
+            <p
+              class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
+            >
+              {{ .Params.Subtitle }}
+            </p>
+          </div>
+        </a>
+        {{ end }}
+      </div>
+
+
+      {{ if gt $paginator.TotalPages 1 }}
+      <nav aria-label="Page navigation">
+        <ul class="flex gap-2 justify-center mt-2">
+          {{ if $paginator.HasPrev }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
           {{ end }}
-          <span
-            class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
-            >{{ title .Section }}</span
-          >
-          <h2
-            class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
-          >
-            {{ .Title }}
-          </h2>
-          <p
-            class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
-          >
-            {{ .Params.Subtitle }}
-          </p>
-        </div>
-      </a>
-      {{ end }}
+          {{ range $paginator.Pagers }}
+          {{ if eq . $paginator }}
+          <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+          {{ else }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+          {{ end }}
+          {{ end }}
+
+          {{ if $paginator.HasNext }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
+          {{ end }}
+        </ul>
+      </nav>
       {{ end }}
     </div>
+
   </div>
 </section>
 

From b716c54a9dc21d49e066b9e6007eee56df3b343b Mon Sep 17 00:00:00 2001
From: Varun A P <varunlakshmananap@gmail.com>
Date: Sat, 19 Jun 2021 08:51:16 +0200
Subject: [PATCH 2/3] Multipage sections

---
 layouts/_default/section.html | 72 +++++++++++++++++++++++++++++++++++
 layouts/partials/footer.html  | 12 ++++--
 layouts/partials/header.html  |  4 +-
 3 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 layouts/_default/section.html

diff --git a/layouts/_default/section.html b/layouts/_default/section.html
new file mode 100644
index 0000000..8a5f090
--- /dev/null
+++ b/layouts/_default/section.html
@@ -0,0 +1,72 @@
+{{ define "main" }}
+
+<section class="text-gray-700 body-font">
+  <div class="container px-5 py-8 mx-auto">
+    {{- partial "custom-message.html" . -}}
+
+    <div>
+      {{ $pages  := where .Paginator.Pages "Kind" "page" }}
+
+      {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
+      <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+        {{ range $paginator.Pages }}
+        <a
+          target="_blank"
+          rel="noopener"
+          href="{{ .Params.Link }}"
+          class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
+        >
+          <div class="rounded-lg h-64 overflow-hidden relative">
+            {{ if (or .Params.Image .CurrentSection.Params.Image) }}
+            <img
+              alt="{{ .Title }}"
+              class="object-cover object-center h-full w-full"
+              src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
+            />
+            {{ end }}
+            <span
+              class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
+              >{{ title .Section }}</span
+            >
+            <h2
+              class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
+            >
+              {{ .Title }}
+            </h2>
+            <p
+              class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
+            >
+              {{ .Params.Subtitle }}
+            </p>
+          </div>
+        </a>
+        {{ end }}
+      </div>
+
+
+      {{ if gt $paginator.TotalPages 1 }}
+      <nav aria-label="Page navigation">
+        <ul class="flex gap-2 justify-center mt-2">
+          {{ if $paginator.HasPrev }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
+          {{ end }}
+          {{ range $paginator.Pagers }}
+          {{ if eq . $paginator }}
+          <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+          {{ else }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+          {{ end }}
+          {{ end }}
+
+          {{ if $paginator.HasNext }}
+          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
+          {{ end }}
+        </ul>
+      </nav>
+      {{ end }}
+    </div>
+
+  </div>
+</section>
+
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 6d8475a..39d8c7f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -84,6 +84,12 @@
 <script>
   const allTypes = ["all",  {{ range .Site.Sections }}"{{lower .Title}}",{{ end }}];
   const filter = (event, type) => {
+    const isMultiPage = !!document.querySelector('nav.multipage');
+
+    if (isMultiPage) {
+      return;
+    }
+
     const isActive = event.target.classList.contains("active");
 
     showAll();
@@ -92,7 +98,7 @@
       event.target.classList.add("active");
       if (type !== "other") {
         document
-          .querySelectorAll(`.${type}`)
+          .querySelectorAll(`nav:not(.multipage) .${type}`)
           .forEach((item) => item.classList.remove("hide"));
       } else {
         document
@@ -107,10 +113,10 @@
   const showAll = () => {
     allTypes.forEach((type) => {
       document
-        .querySelectorAll(`.${type}`)
+        .querySelectorAll(`nav:not(.multipage) .${type}`)
         .forEach((item) => item.classList.remove("hide"));
       document
-        .querySelectorAll(`.filter-${type}`)
+        .querySelectorAll(`nav:not(.multipage) .filter-${type}`)
         .forEach((filterItem) => filterItem.classList.remove("active"));
     });
   };
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ed022a9..52072e8 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -9,16 +9,18 @@
     {{- partial "logo.html" . -}}
     </a>
     <nav
-      class="md:ml-auto flex flex-wrap items-center text-base justify-center"
+      class="md:ml-auto flex flex-wrap items-center text-base justify-center {{ if .Site.Params.multipage }} multipage {{ end }}"
     >
       {{ if and (eq .Site.Params.hideAutoMenu false) (eq $.IsNode true ) }}
       <a
         class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 show-all"
+        href="{{ if .Site.Params.multipage }}/{{ else }}#{{ end }}"
         >All</a
       >
       {{ range where .Site.Sections ".Params.private" "!=" true }}
       <a
         class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 filter-{{lower .Title}}"
+        href="{{ if .Site.Params.multipage }}{{ .Permalink }}{{ else }}#{{ end }}"
         >{{.Title}}</a
       >
       {{ end }}

From 299bd9c78b288854344396e7170bc985e5230048 Mon Sep 17 00:00:00 2001
From: Varun A P <varunlakshmananap@gmail.com>
Date: Sat, 19 Jun 2021 11:03:36 +0200
Subject: [PATCH 3/3] Pagination with multipage sections screen

---
 exampleSite/config.toml             |  5 ++-
 layouts/_default/section.html       | 69 ++++------------------------
 layouts/index.html                  | 70 ++++-------------------------
 layouts/partials/no-pagination.html | 31 +++++++++++++
 layouts/partials/pagination.html    | 57 +++++++++++++++++++++++
 5 files changed, 108 insertions(+), 124 deletions(-)
 create mode 100644 layouts/partials/no-pagination.html
 create mode 100644 layouts/partials/pagination.html

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 422954c..3228fd1 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -14,7 +14,10 @@ pluralizelisttitles = false
   description = "Minimal, one page, theme for showcasing your work"
   message = ""
   hideAutoMenu = false
-  paginate = 2
+  
+  # Pagination options
+  paginate = 3
+  multipage = true
 
 [[menu.main]]
   name = "External"
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index 8a5f090..45253a7 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -4,69 +4,16 @@
   <div class="container px-5 py-8 mx-auto">
     {{- partial "custom-message.html" . -}}
 
-    <div>
-      {{ $pages  := where .Paginator.Pages "Kind" "page" }}
+        
+    {{ .Scratch.Set "pages" .Paginator.Pages }}
 
-      {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
-      <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-        {{ range $paginator.Pages }}
-        <a
-          target="_blank"
-          rel="noopener"
-          href="{{ .Params.Link }}"
-          class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
-        >
-          <div class="rounded-lg h-64 overflow-hidden relative">
-            {{ if (or .Params.Image .CurrentSection.Params.Image) }}
-            <img
-              alt="{{ .Title }}"
-              class="object-cover object-center h-full w-full"
-              src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
-            />
-            {{ end }}
-            <span
-              class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
-              >{{ title .Section }}</span
-            >
-            <h2
-              class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
-            >
-              {{ .Title }}
-            </h2>
-            <p
-              class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
-            >
-              {{ .Params.Subtitle }}
-            </p>
-          </div>
-        </a>
-        {{ end }}
-      </div>
-
-
-      {{ if gt $paginator.TotalPages 1 }}
-      <nav aria-label="Page navigation">
-        <ul class="flex gap-2 justify-center mt-2">
-          {{ if $paginator.HasPrev }}
-          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
-          {{ end }}
-          {{ range $paginator.Pagers }}
-          {{ if eq . $paginator }}
-          <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
-          {{ else }}
-          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
-          {{ end }}
-          {{ end }}
-
-          {{ if $paginator.HasNext }}
-          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
-          {{ end }}
-        </ul>
-      </nav>
-      {{ end }}
-    </div>
+    {{ if eq .Site.Params.multipage true }}
+    {{- partial "pagination.html" . -}}
+    {{ else }}
+    {{- partial "no-pagination.html" . -}}
+    {{ end }}
 
   </div>
 </section>
 
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 641675c..7963274 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,70 +3,16 @@
 <section class="text-gray-700 body-font">
   <div class="container px-5 py-8 mx-auto">
     {{- partial "custom-message.html" . -}}
+    
+    {{ .Scratch.Set "pages" .Site.Pages }}
 
-    <div>
-      {{ $pages  := where .Site.Pages "Kind" "page" }}
-
-      {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
-      <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-        {{ range $paginator.Pages }}
-        <a
-          target="_blank"
-          rel="noopener"
-          href="{{ .Params.Link }}"
-          class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
-        >
-          <div class="rounded-lg h-64 overflow-hidden relative">
-            {{ if (or .Params.Image .CurrentSection.Params.Image) }}
-            <img
-              alt="{{ .Title }}"
-              class="object-cover object-center h-full w-full"
-              src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
-            />
-            {{ end }}
-            <span
-              class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
-              >{{ title .Section }}</span
-            >
-            <h2
-              class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
-            >
-              {{ .Title }}
-            </h2>
-            <p
-              class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
-            >
-              {{ .Params.Subtitle }}
-            </p>
-          </div>
-        </a>
-        {{ end }}
-      </div>
-
-
-      {{ if gt $paginator.TotalPages 1 }}
-      <nav aria-label="Page navigation">
-        <ul class="flex gap-2 justify-center mt-2">
-          {{ if $paginator.HasPrev }}
-          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
-          {{ end }}
-          {{ range $paginator.Pagers }}
-          {{ if eq . $paginator }}
-          <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
-          {{ else }}
-          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
-          {{ end }}
-          {{ end }}
-
-          {{ if $paginator.HasNext }}
-          <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
-          {{ end }}
-        </ul>
-      </nav>
-      {{ end }}
-    </div>
+    {{ if eq .Site.Params.multipage true }}
+    {{- partial "pagination.html" . -}}
+    {{ else }}
+    {{- partial "no-pagination.html" . -}}
+    {{ end }}
 
   </div>
 </section>
 
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/no-pagination.html b/layouts/partials/no-pagination.html
new file mode 100644
index 0000000..a375ddc
--- /dev/null
+++ b/layouts/partials/no-pagination.html
@@ -0,0 +1,31 @@
+{{ $pagelist := $.Scratch.Get "pages" }}
+{{ if $pagelist }}
+<div>
+  {{ $pages := where $pagelist "Kind" "page" }}
+
+  <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+    {{ range where $pages ".Params.exclude" "!=" "true" }}
+    <a target="_blank" rel="noopener" href="{{ .Params.Link }}"
+      class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}">
+      <div class="rounded-lg h-64 overflow-hidden relative">
+        {{ if (or .Params.Image .CurrentSection.Params.Image) }}
+        <img alt="{{ .Title }}" class="object-cover object-center h-full w-full"
+          src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
+        {{ end }}
+        <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{
+          title .Section }}</span>
+        <h2
+          class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0">
+          {{ .Title }}
+        </h2>
+        <p
+          class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
+          {{ .Params.Subtitle }}
+        </p>
+      </div>
+    </a>
+    {{ end }}
+  </div>
+
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..5575f13
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,57 @@
+{{ $pagelist := $.Scratch.Get "pages" }}
+{{ if $pagelist }}
+<div>
+  {{ $pages := where $pagelist "Kind" "page" }}
+
+  {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
+  <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+    {{ range $paginator.Pages }}
+    <a target="_blank" rel="noopener" href="{{ .Params.Link }}"
+      class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}">
+      <div class="rounded-lg h-64 overflow-hidden relative">
+        {{ if (or .Params.Image .CurrentSection.Params.Image) }}
+        <img alt="{{ .Title }}" class="object-cover object-center h-full w-full"
+          src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
+        {{ end }}
+        <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{
+          title .Section }}</span>
+        <h2
+          class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0">
+          {{ .Title }}
+        </h2>
+        <p
+          class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
+          {{ .Params.Subtitle }}
+        </p>
+      </div>
+    </a>
+    {{ end }}
+  </div>
+
+
+  {{ if gt $paginator.TotalPages 1 }}
+  <nav aria-label="Page navigation">
+    <ul class="flex gap-2 justify-center mt-2">
+      {{ if $paginator.HasPrev }}
+      <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1"
+          href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
+      {{ end }}
+      {{ range $paginator.Pagers }}
+      {{ if eq . $paginator }}
+      <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}"
+          class="page-link">{{ .PageNumber }}</a></li>
+      {{ else }}
+      <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}"
+          class="page-link">{{ .PageNumber }}</a></li>
+      {{ end }}
+      {{ end }}
+
+      {{ if $paginator.HasNext }}
+      <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1"
+          href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
+      {{ end }}
+    </ul>
+  </nav>
+  {{ end }}
+</div>
+{{ end }}
\ No newline at end of file