Add pagination to the blog page

source/_pages/blog.html.twig

@@ -1,13 +1,24 @@
 ---
 title: Blog
+generator: pagination
+pagination:
+  max_per_page: 30
+  provider: data.posts
 use: [posts]
 draft: true
 ---
 
 <ul>
-  {% for post in data.posts|sort((a, b) => b.date <=> a.date) %}
+  {% for post in page.pagination.items %}
     <li>
       <a href="{{ post.url|trim('/', 'right') }}">{{ post.title }}</a> - {{ post.date|date('jS F Y') }}
     </li>
   {% endfor %}
+
+  {% if page.pagination.previous_page or page.pagination.next_page %}
+    <nav class="flex justify-center pt-10 space-x-6">
+      {% if page.pagination.previous_page %}<a href="{{ site.url }}{{ page.pagination.previous_page.url }}">&larr; Newer Posts{% endif %}<br />
+      {% if page.pagination.next_page %}<a href="{{ site.url }}{{ page.pagination.next_page.url }}">Older Posts &rarr;</a>{% endif %}<br />
+    </nav>
+  {% endif %}
 </ul>