From b0fe5af776bfb226321269174e8cd379c9972f99 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 3 Jun 2018 12:05:03 +0100
Subject: [PATCH] Add post pager

---
 source/_partials/post-pager.html.twig | 41 +++++++++++++++++++++++++++
 source/blog.html                      | 16 +----------
 2 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 source/_partials/post-pager.html.twig

diff --git a/source/_partials/post-pager.html.twig b/source/_partials/post-pager.html.twig
new file mode 100644
index 00000000..0ee96174
--- /dev/null
+++ b/source/_partials/post-pager.html.twig
@@ -0,0 +1,41 @@
+<div class="py-8 text-center">
+    <ul class="list-reset inline-flex">
+        <li>
+            {% if page.pagination.page == 1 %}
+                <span class="rounded-l-lg p-3 border border-grey text-grey -mr-px cursor-not-allowed">
+                    Previous
+                </span>
+            {% else %}
+                <a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px">
+                    Previous
+                </a>
+            {% endif %}
+        </li>
+
+        {% for i in range(1, page.pagination.total_pages) %}
+            <li>
+                {% if i == page.pagination.page %}
+                    <span class="p-3 border border-grey text-white bg-blue -mr-px">
+                        {{ i }}
+                    </span>
+                {% else %}
+                    <a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px">
+                        {{ i }}
+                    </a>
+                {% endif %}
+            </li>
+        {% endfor %}
+
+        <li>
+            {% if page.pagination.next_page.url %}
+                <a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey">
+                    Next
+                </a>
+            {% else %}
+                <span class="rounded-r-lg p-3 border border-grey text-grey cursor-not-allowed">
+                    Next
+                </span>
+            {% endif %}
+        </li>
+    </ul>
+</div>
diff --git a/source/blog.html b/source/blog.html
index 4588ed2b..a34fe41f 100644
--- a/source/blog.html
+++ b/source/blog.html
@@ -36,19 +36,5 @@ use: [posts]
         {% endfor %}
     </ul>
 
-    {% if page.pagination.previous_page or page.pagination.next_page %}
-        <ul class="list-reset flex">
-            {% if page.pagination.next_page %}
-                <li class="w-1/2">
-                    <a href="{{ site.url }}{{ page.pagination.next_page.url }}">← Older posts</a>
-                </li>
-            {% endif %}
-
-            {% if page.pagination.previous_page %}
-                <li class="text-right {{ page.pagination.next_page and page.pagination.previous_page ? 'w-1/2' : 'w-full' }}">
-                    <a href="{{ site.url }}{{ page.pagination.previous_page.url }}">Newer posts →</a>
-                </li>
-            {% endif %}
-        </ul>
-    {% endif %}
+    {% include 'post-pager.html.twig' %}
 {% endblock %}