Improve the pagination

As much as I avoid creating custom partials, it seem it is not possible
with this component since it has gotten a bit bigger than I expected.

The pagination component is a modified version of the internal
pagination template but smarter. One of the major change is it will only
apply ellipses if it has more than one page to skip. Also, it is easier
to configure now that it is refactored to be one. Last but not least, it
has comments. :)

CHANGELOG.adoc

@@ -13,6 +13,13 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 === Changed
 
 * Change the CSS linking with https://gohugo.io/hugo-pipes/introduction/[Hugo Pipes], moving it into the assets folder.
+
+* Improve the pagination partial.
+** It has been modularized and refactored for easier development when extending the theme.
+** The appearance has been revamped to be more intuitive.
+** Replaces with numbers instead of the horrible phrases (which I didn't realize is horrible) so the i18n options for those are also gone.
+** The pagination is also smarter when applying the ellipses, making sure to only skip if the difference between pages is more than one.
+
 * Update the documentation with additional installations with Hugo Module.
 
 

assets/css/main.css

@@ -227,17 +227,40 @@ footer {
 }
 
 .pagination {
-    list-style: none;
     display: flex;
-    justify-content: space-evenly;
+    font-size: 1rem;
-    padding: 0;
+    list-style: none;
-    margin: 1rem;
+    justify-content: center;
+    margin: 1.2rem 0;
+    padding: 0.8rem;
+}
+
+.pagination > * {
+    margin: 0 0.25em;
+    text-decoration: none;
+}
+
+.page-link {
+    background: var(--background-light);
+    color: var(--foreground-light);
+    text-decoration: none;
+    padding: 0.5em;
+}
+
+.page-link:visited {
+    color: var(--foreground-light);
+}
+
+.page-link--active {
+    font-weight: bolder;
+}
+
+.page-link:hover {
+    background: var(--foreground);
+    color: var(--background);
 }
 
 .post {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
     margin-top: 1rem;
 }
 

i18n/en.toml

@@ -1,17 +1,3 @@
-# Pagination
-[first_page]
-other = "Newest posts"
-
-[prev_page]
-other = "Newer posts"
-
-[next_page]
-other = "Older posts"
-
-[last_page]
-other = "Oldest posts"
-
-
 # Content
 [published_by]
 other = "Authors"

i18n/tl.toml

@@ -1,17 +1,3 @@
-# Pagination
-[first_page]
-other = "Unang pahina"
-
-[prev_page]
-other = "Balik"
-
-[next_page]
-other = "Sunod"
-
-[last_page]
-other = "Huling pahina"
-
-
 # Content
 [published_by]
 other = "Sinulat ni"

layouts/_default/list.html

@@ -16,21 +16,5 @@ Otherwise, we take the pages of a section. */ -}}
 </article>
 {{ end }}
 
-<div class="pagination">
+{{ partial "pagination.html" (dict "Paginator" .Paginator "activeNumberOfPages" 2) }}
-    {{- if .Paginator.HasPrev }}
-    {{- if ne .Paginator.First .Paginator.Prev -}}
-        <a rel="first" href="{{ .Paginator.First.URL }}">{{ i18n "first_page" }}</a>
-    {{- end }}
-
-        <a rel="prev" href="{{ .Paginator.Prev.URL }}">{{ i18n "prev_page" }}</a>
-    {{- end }}
-
-    {{- if .Paginator.HasNext -}}
-        <a rel="next" href="{{ .Paginator.Next.URL }}">{{ i18n "next_page" }}</a>
-
-    {{- if ne .Paginator.Last .Paginator.Next -}}
-        <a rel="last" href="{{ .Paginator.Last.URL }}">{{ i18n "last_page" }}</a>
-    {{- end }}
-    {{- end }}
-</div>
 {{ end }}

layouts/partials/pagination.html

@@ -0,0 +1,65 @@
+{{ $pag := .Paginator }}
+
+{{- /* The minimum pages starting from the first page */ -}}
+{{ $minimumPage := .minimumPage | default 1 }}
+
+{{- /* The number of pages to be shown with the active page. */ -}}
+{{ $activeNumberOfPages := .activeNumberOfPages | default 2 }}
+
+{{- /* Since the active page is also included when adding the in-between pages of the active page, we need to increment it to mitigate against it. */ -}}
+{{ $midpointPages := add $activeNumberOfPages 1 }}
+
+{{ if gt $pag.TotalPages 1 -}}
+<ul class="pagination">
+  {{- $ellipsed := false -}}
+  {{- $shouldEllipse := false -}}
+  {{- range $pag.Pagers -}}
+  {{ $minimumActivePage := sub $pag.PageNumber $activeNumberOfPages }}
+  {{ $maximumActivePage := add $pag.PageNumber $activeNumberOfPages }}
+
+  {{- /* Make all of the given number of pages starting from both ends to be visible */ -}}
+  {{- $showNumber := or (le .PageNumber $minimumPage) (lt (sub .TotalPages .PageNumber) $minimumPage) -}}
+
+  {{- /* Make all of the given number of pages between the active page number visible */ -}}
+  {{- $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber $midpointPages)) (lt .PageNumber (add $pag.PageNumber $midpointPages))) -}}
+
+  {{- /*
+    Make all of the page number that is just before/after the minimum page threshold to be visible.
+    This is applied to those situations where there's only one number remaining before the end
+  */ -}}
+  {{ if eq .PageNumber (sub $minimumActivePage 1) }}
+    {{ $showNumber = or $showNumber (eq (sub $minimumActivePage $minimumPage) (add $pag.First.PageNumber 1)) }}
+  {{ else if eq .PageNumber (add $maximumActivePage 1) }}
+    {{ $showNumber = or $showNumber (eq (add $maximumActivePage 1) (sub $pag.Last.PageNumber $minimumPage)) }}
+  {{ end }}
+
+  {{- if $showNumber -}}
+    {{- $ellipsed = false -}}
+    {{- $shouldEllipse = false -}}
+  {{- else -}}
+    {{- $shouldEllipse = not $ellipsed -}}
+    {{- $ellipsed = true -}}
+  {{- end -}}
+  {{- if $showNumber }}
+  <li class="{{ if eq . $pag }} page-link--active{{ end }}">
+      <a class="page-link" href="{{ .URL }}"
+         {{- if eq (sub $pag.PageNumber .PageNumber) 1 }}
+            rel="prev"
+            aria-label="Previous"
+         {{- else if (eq (sub $pag.PageNumber .PageNumber) -1) }}
+            rel="next"
+            aria-label="Next"
+         {{- else if (eq $pag.PageNumber .PageNumber) }}
+            aria-label="Current"
+            aria-current="page"
+         {{- end -}}
+      >{{ .PageNumber }}</a>
+  </li>
+  {{- else if $shouldEllipse }}
+  <li class="page-item disabled">
+    <span aria-hidden="true">&nbsp;&hellip;&nbsp;</span>
+  </li>
+  {{- end -}}
+  {{- end }}
+</ul>
+{{ end }}