Enable pagination

Author: weirdion

_layouts/home.html

@@ -1,18 +1,22 @@
 ---
 layout: default
+pagination:
+  enabled: true
 ---
 
 <div class="home">
+  <!-- This is root index.html file, so no need to display title
   {%- if page.title -%}
     <h1 class="page-heading">{{ page.title }}</h1>
   {%- endif -%}
+  -->
 
   {{ content }}
 
   {%- if site.posts.size > 0 -%}
     <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
     <ul class="post-list">
-      {%- for post in site.posts -%}
+      {%- for post in paginator.posts -%}
       <li>
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         <span class="post-meta">{{ post.date | date: date_format }}</span>
@@ -28,6 +32,24 @@ <h3>
       {%- endfor -%}
     </ul>
 
+    <div class="pagination">
+      {%- if paginator.previous_page %}
+        <a href="{{ paginator.previous_page_path }}">Previous</a>
+      {%- endif %}
+      <!-- For pagination numbers if needed
+      {%- for page in (1..paginator.total_pages) -%}
+        {%- if page == paginator.page %}
+          <span class="page-number current">{{ page }}</span>
+        {%- else %}
+          <a href="{{ paginator.page_path | replace: ':num', page }}" class="page-number">{{ page }}</a>
+        {%- endif %}
+      {%- endfor -%}
+      -->
+
+      {%- if paginator.next_page %}
+        <a href="{{ paginator.next_page_path }}">Next</a>
+      {%- endif %}
+    </div>
   {%- endif -%}
 
 </div>

assets/css/style.css

@@ -6,7 +6,7 @@
 
 .social-links {
   display: flex;
-  gap: 10px;
+  gap: 20px;
   align-items: center;
 }
 
@@ -27,3 +27,9 @@
 .intro-text {
   padding-top: 10px;
 }
+
+.pagination {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}

index.html

@@ -0,0 +1,6 @@
+---
+layout: home
+title: "Home"
+pagination:
+  enabled: true
+---