From 0cf3f0aaad36bb7e67c00ac7e049e7d04fba7351 Mon Sep 17 00:00:00 2001
From: steven-y-e <steven@mineral.town>
Date: Thu, 16 Sep 2021 16:15:35 -0400
Subject: [PATCH] feat(theme): pagination navigation

refactored out of the list template into its own partial
features:
- hidden if there's only 1 page
- shows up to 5 page numbers along with links to previous/next and first/last
- hide first/last if within 1 page from end
- ellipses denoting page numbers not shown
---
 .../themes/mineral/layouts/_default/list.html | 14 +------
 .../mineral/layouts/partials/pagination.html  | 38 +++++++++++++++++++
 blog/themes/mineral/static/css/mineral.css    | 37 +++++++++++++++++-
 3 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 blog/themes/mineral/layouts/partials/pagination.html

diff --git a/blog/themes/mineral/layouts/_default/list.html b/blog/themes/mineral/layouts/_default/list.html
index 110713d..292e523 100644
--- a/blog/themes/mineral/layouts/_default/list.html
+++ b/blog/themes/mineral/layouts/_default/list.html
@@ -25,19 +25,7 @@
         {{ end }}
     </div>
 
-    {{ if gt $paginator.TotalPages 1 }}
-    <div class="row" style="margin-top: 2em">
-        <nav aria-label="Page navigation">
-            <ul class="pagination">
-                {{ range $paginator.Pagers }}
-                <li class="page-item {{ if eq $paginator.PageNumber .PageNumber }}active{{ end }}">
-                  <a class="page-link" href="{{ .URL }}">{{.PageNumber}}</a>
-                </li>
-                {{ end }}              
-            </ul>
-        </nav>
-    </div>
-    {{ end }}
+    {{- partial "pagination.html" . -}}
 
     <script src="/js/masonry.js"></script>
 {{ end }}
\ No newline at end of file
diff --git a/blog/themes/mineral/layouts/partials/pagination.html b/blog/themes/mineral/layouts/partials/pagination.html
new file mode 100644
index 0000000..52b480a
--- /dev/null
+++ b/blog/themes/mineral/layouts/partials/pagination.html
@@ -0,0 +1,38 @@
+{{ $paginator := $.Paginator }}
+{{ if ne .Kind "home" }}
+    {{ $paginator = .Data }}
+{{ end }}
+{{ if gt $paginator.TotalPages 1 }}
+{{ $.Scratch.Set "dot_rendered" false }}
+<nav aria-label="page navigation">
+    <ul class="pagination">
+    {{ if and (ne $paginator.PageNumber 1) (ne $paginator.PageNumber 2) }}
+        <li class="page-item"><a href="{{ $paginator.First.URL }}" rel="first" class="page-link">« First</a></li>
+    {{ end }}
+
+    {{ if $paginator.HasPrev  }}
+        <li class="page-item"><a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">‹ Prev</a></li>
+    {{ end }}
+
+{{ range $paginator.Pagers }}
+    {{ if eq . $paginator }}
+        <li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+    {{ else if and (ge .PageNumber (sub $paginator.PageNumber 2)) (le .PageNumber (add $paginator.PageNumber 2)) }}
+    {{ $.Scratch.Set "dot_rendered" false }}
+        <li class="page-item"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+    {{ else if eq ($.Scratch.Get "dot_rendered") false }}
+    {{ $.Scratch.Set "dot_rendered" true }}
+        <li class="page-item disabled"><a class="page-link">...</a></li>
+    {{ end }}
+{{ end }}
+
+    {{ if $paginator.HasNext }}
+        <li class="page-item"><a href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next ›</a></li>
+    {{ end }}
+
+    {{ if and (ne $paginator.PageNumber $paginator.TotalPages) ((ne $paginator.PageNumber (sub $paginator.TotalPages 1))) }}
+        <li class="page-item"><a href="{{ $paginator.Last.URL }}" rel="last" class="page-link">Last »</a></li>
+    {{ end }}
+    </ul>
+</nav>
+{{ end }}
diff --git a/blog/themes/mineral/static/css/mineral.css b/blog/themes/mineral/static/css/mineral.css
index 68a7e1a..2d2a864 100644
--- a/blog/themes/mineral/static/css/mineral.css
+++ b/blog/themes/mineral/static/css/mineral.css
@@ -1,3 +1,38 @@
+/* post styles */
 article p img {
     width: 100%;
-}
\ No newline at end of file
+}
+
+/* pagination styles */
+.pagination {
+    display: flex;
+    list-style: none;
+    border-radius: .25rem;
+    margin: 20px 0;
+    padding: 0;
+    justify-content: center;
+}
+
+.page-item {
+    position: relative;
+    display: block;
+    padding: 0.5em;
+    margin: 0.25em;
+    line-height: 1.25;
+    border: 1px dashed;
+    background: #fff;
+}
+
+.page-item.active {
+    background: #1EAEDB;
+}
+
+.page-item.active .page-link {
+    color: #fff;
+}
+
+.page-item.disabled .page-link {
+    color: #6c757d;
+    pointer-events: none;
+    cursor: auto;
+}