From a1dce26c2450359e02743ac6289f53179971e929 Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Thu, 9 Sep 2021 09:48:27 +0200
Subject: [PATCH] feat: add paginator to blog list

---
 assets/scss/common/_dark.scss   | 33 +++++++++++++++++++++++++++++++++
 assets/scss/layouts/_pages.scss |  4 ++++
 layouts/blog/list.html          |  5 ++++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index 6a0c0cd..9aeadc3 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -480,3 +480,36 @@ $navbar-dark-active-color:          $link-color-dark;
 [data-dark-mode] body .email-form .form-control:focus {
   border: 1px solid $link-color-dark;
 }
+
+[data-dark-mode] .page-link {
+  color: $link-color-dark;
+  background-color: transparent;
+  border: $pagination-border-width solid $border-dark;
+
+  &:hover {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+    border-color: $body-color-dark;
+  }
+
+  &:focus {
+    color: $body-bg-dark;
+    background-color: $body-color-dark;
+  }
+}
+
+[data-dark-mode] .page-item {
+  &.active .page-link {
+    color: $body-bg-dark;
+
+    @include gradient-bg($link-color-dark);
+
+    border-color: $link-color-dark;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    background-color: $body-overlay-dark;
+    border-color: $border-dark;
+  }
+}
diff --git a/assets/scss/layouts/_pages.scss b/assets/scss/layouts/_pages.scss
index 8938dbc..2810268 100644
--- a/assets/scss/layouts/_pages.scss
+++ b/assets/scss/layouts/_pages.scss
@@ -43,3 +43,7 @@ p.meta {
   margin-top: 2.25rem;
   font-size: $font-size-base;
 }
+
+.page-link:hover {
+  text-decoration: none;
+}
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index a268ca5..9695387 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -5,7 +5,8 @@
       <h1 class="text-center">{{ .Title }}</h1>
       <div class="text-center">{{ .Content }}</div>
 			<div class="card-list">
-				{{ range .Data.Pages -}}
+				{{ $paginator := .Paginate (.Data.Pages) -}}
+				{{ range $paginator.Pages -}}
 					<div class="card">
 						<div class="card-body">
 							<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
@@ -14,6 +15,8 @@
 						</div>
 					</div>
 				{{ end -}}
+				{{ $.Scratch.Set "paginator" true }}
+				{{ template "_internal/pagination.html" . }}
 			</div>
     </article>
   </div>