feat: improve pagination

themes/maik-blog/assets/scss/_portfolio.scss

@@ -109,98 +109,3 @@
         margin: 0 5px;
     }
 }
-
-.pagination {
-    margin-top: 20px;
-
-    &__title {
-        display: flex;
-        text-align: center;
-        position: relative;
-        margin: 20px 0;
-
-        &-h {
-            text-align: center;
-            margin: 0 auto;
-            padding: 5px 10px;
-            background: $light-background;
-            color: $light-color-secondary;
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            text-decoration: none;
-            letter-spacing: 0.1em;
-            z-index: 1;
-
-            .dark-theme & {
-                background: $dark-background;
-                color: $dark-color-secondary;
-            }
-        }
-
-        hr {
-            position: absolute;
-            left: 0;
-            right: 0;
-            width: 100%;
-            margin-top: 15px;
-            z-index: 0;
-        }
-    }
-
-    &__buttons {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        a {
-            text-decoration: none;
-            font-weight: bold;
-        }
-    }
-}
-
-.button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: $light-background-secondary;
-    font-size: 1rem;
-    font-weight: 600;
-    border-radius: 8px;
-    max-width: 40%;
-    padding: 0;
-    cursor: pointer;
-    appearance: none;
-
-    .dark-theme & {
-        background: $dark-background-secondary;
-    }
-
-    + .button {
-        margin-left: 10px;
-    }
-
-    a {
-        display: flex;
-        padding: 8px 16px;
-        text-decoration: none;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
-    &__text {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
-    &.next .button__icon {
-        margin-left: 8px;
-    }
-
-    &.previous .button__icon {
-        margin-right: 8px;
-    }
-}

themes/maik-blog/assets/scss/_post.scss

@@ -169,9 +169,19 @@
         align-items: center;
         justify-content: center;
 
-        a {
+        ul, ol {
+            list-style-type: none;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 10px;
+        }
+
+        .button a {
             text-decoration: none;
             font-weight: bold;
+            overflow: visible;
         }
     }
 }
@@ -190,6 +200,14 @@
     cursor: pointer;
     appearance: none;
 
+    &:disabled, &[disabled], &.disabled {
+        pointer-events: none;
+    }
+
+    &.active {
+        background: darken($light-background-secondary, 25%);
+    }
+
     .dark-theme & {
         background: $dark-background-secondary;
     }
@@ -198,7 +216,7 @@
         margin-left: 10px;
     }
 
-    a {
+    > * {
         display: flex;
         padding: 8px 16px;
         text-decoration: none;
@@ -207,6 +225,10 @@
         overflow: hidden;
     }
 
+    a {
+        text-decoration: none;
+    }
+
     &__text {
         text-overflow: ellipsis;
         white-space: nowrap;

themes/maik-blog/layouts/_default/list.html

@@ -10,10 +10,6 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="posts-list">
         {{ range $paginator.Pages }}
         <div class="post">

themes/maik-blog/layouts/partials/pagination.html

@@ -1,20 +1,46 @@
 <div class="pagination">
     <div class="pagination__buttons">
-        {{ if .Paginator.HasPrev }}
+        {{- if .Paginator.HasPrev }}
         <span class="button previous">
             <a href="{{ .Paginator.Prev.URL }}">
                 <span class="button__icon">←</span>
-                <span class="button__text">Newer posts</span>
+                <span class="button__text">Previous</span>
             </a>
         </span>
-        {{ end }}
+        {{- end }}
-        {{ if .Paginator.HasNext }}
+        {{- with .Paginator }}
+        {{- $currentPage := .PageNumber }}
+        {{- $totalPages := .TotalPages }}
+        {{- if gt $totalPages 1 }}
+        <ol>
+        {{- range .Pagers }}
+            {{- $isFirst := eq .PageNumber 1 }}
+            {{- $isLast := eq .PageNumber $totalPages }}
+            {{- $inWindow := and (ge .PageNumber (sub $currentPage 2)) (le .PageNumber (add $currentPage 2)) }}
+            {{- $showPrevEllipsis := and (gt $currentPage 4) (eq .PageNumber 2) }}
+            {{- $showNextEllipsis := and (lt $currentPage (sub $totalPages 3)) (eq .PageNumber (sub $totalPages 1)) }}
+            {{- if or $showPrevEllipsis $showNextEllipsis }}
+            <li class="button disabled">
+                <span class="button__text">&hellip;</span>
+            </li>
+             {{- else if or $isFirst $isLast $inWindow }}
+            <li class="button {{- if eq $currentPage .PageNumber }} disabled active{{ end }}">
+                <a href="{{ .URL }}">
+                <span class="button__text">{{ .PageNumber }}</span>
+                </a>
+            </li>
+            {{- end }}
+            {{- end }}
+        </ol>
+        {{- end }}
+        {{- end }}
+        {{- if .Paginator.HasNext }}
         <span class="button next">
             <a href="{{ .Paginator.Next.URL }}">
-                <span class="button__text">Older posts</span>
+                <span class="button__text">Next</span>
                 <span class="button__icon">→</span>
             </a>
         </span>
-        {{ end }}
+        {{- end }}
     </div>
 </div>

themes/maik-blog/layouts/writeups/list.html

@@ -10,10 +10,6 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="posts-list masonry">
         {{ range $paginator.Pages }}
         <div class="post">