From 113e0c129aa22697fe058e7180bb598b3ad29df3 Mon Sep 17 00:00:00 2001
From: Joshua Potter <jrpotter2112@gmail.com>
Date: Mon, 25 Dec 2023 21:37:38 -0700
Subject: [PATCH] Improve pagination styling.

---
 _config.yml                   |  2 +-
 _includes/post-paginator.html | 42 +++++++++++++++++++++++++----------
 _layouts/home.html            |  2 ++
 _sass/_home.scss              | 21 ++++++++++++++++++
 4 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/_config.yml b/_config.yml
index 392cff9..cc5629f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -32,7 +32,7 @@ plugins:
 
 pagination:
   enabled: true
-  per_page: 10
+  per_page: 5
   permalink: '/page/:num/'
   limit: 0
   sort_field: 'date'
diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
index 88f28ef..c8a6f6e 100644
--- a/_includes/post-paginator.html
+++ b/_includes/post-paginator.html
@@ -1,14 +1,32 @@
 {% if paginator.total_pages > 1 %}
-<ul>
-  {% if paginator.previous_page %}
-  <li>
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">Newer</a>
-  </li>
-  {% endif %}
-  {% if paginator.next_page %}
-  <li>
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
-  </li>
-  {% endif %}
-</ul>
+<nav aria-label="Page Navigation">
+  <ul class="pagination">
+    <!-- left arrow -->
+    {% if paginator.previous_page %}
+      {% assign prev_url = paginator.previous_page_path | prepend: site.baseurl %}
+    {% else %}
+      {% assign prev_url = '' %}
+    {% endif %}
+
+    <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
+        <i class="fa fa-angle-left"></i>
+      </a>
+    </li>
+
+    <!-- right arrow -->
+    {% if paginator.next_page_path %}
+      {% assign next_url = paginator.next_page_path | prepend: site.baseurl %}
+    {% else %}
+      {% assign next_url = '#' %}
+    {% endif %}
+
+    <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+      <a class="page-link" href="{{ next_url }}" aria-label="next-page">
+        <i class="fa fa-angle-right"></i>
+      </a>
+    </li>
+  </ul>
+</nav>
+<!-- .pagination -->
 {% endif %}
diff --git a/_layouts/home.html b/_layouts/home.html
index c44fefb..5deb677 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -2,6 +2,7 @@
 layout: default
 ---
 
+{% if paginator.page_path contains "index" %}
 <p class="home-description">
   Most applications listed below are served from <a href="https://nixos.org/" target="_blank">NixOS</a>
   machines hosted on <a href="https://www.digitalocean.com/" target="_blank">Digital Ocean</a>.
@@ -9,6 +10,7 @@ layout: default
   If interested in starting a similar hosting solution, consider getting a $200
   credit using my <a href="https://m.do.co/c/c65b89434c1b" target="_blank">referral link</a>.
 </p>
+{% endif %}
 
 {% for post in paginator.posts %}
   <div class="posts-container">
diff --git a/_sass/_home.scss b/_sass/_home.scss
index fd6d7e8..6ed3d78 100644
--- a/_sass/_home.scss
+++ b/_sass/_home.scss
@@ -10,3 +10,24 @@
     max-height: 220px;
   }
 }
+
+ul.pagination {
+  list-style: none;
+  display: flex;
+  gap: 2rem;
+  padding: 0;
+  margin-bottom: 0;
+  justify-content: center;
+
+  li.disabled {
+    opacity: 0.5;
+
+    .page-link i {
+      cursor: not-allowed;
+    }
+  }
+
+  .page-link i {
+    font-size: 1.75rem;
+  }
+}