Implement pagination feature (#621)

* Implement pagination feature

* implement pagination for blog

* Styling for pagination

* Removed home path for testing blog description

Author: TimOsahenru

Gemfile

@@ -9,6 +9,7 @@ group :jekyll_plugins do
    gem "github-pages"
    gem "jekyll-remote-theme"
    gem "jekyll-feed"
+   gem "jekyll-paginate"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -317,6 +317,7 @@ DEPENDENCIES
   github-pages
   jekyll
   jekyll-feed
+  jekyll-paginate
   jekyll-remote-theme
   jemoji
   tzinfo-data

_config.yml

@@ -60,6 +60,7 @@ plugins:
   - jemoji
   - jekyll-feed
   - jekyll-sitemap
+  - jekyll-paginate
 # - jekyll-seo-tag
 # - jekyll-redirect-from
 # - jekyll-remote-theme
@@ -111,3 +112,6 @@ defaults:
 # Set to `true` to show excerpts on the homepage.
 #
 show_excerpts: true
+
+paginate: 5
+paginate_path: "/blog/page:num/"

_includes/posts.html

@@ -30,21 +30,28 @@ <h3>
   </div>
 
   {% if site.paginate %}
-    <div class="pager">
-      <ul class="pagination">
+    <div class="pagination">
       {%- if paginator.previous_page %}
-        <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">{{ paginator.previous_page }}</a></li>
+      <a href="{{ paginator.previous_page_path | relative_url }}" class="prev">&larr; Prev</a>
       {%- else %}
-        <li><div class="pager-edge">•</div></li>
+      <span class="disabled prev">&larr; Prev</span>
       {%- endif %}
-        <li><div class="current-page">{{ paginator.page }}</div></li>
+
+      {%- for page in (1..paginator.total_pages) %}
+      {%- if page == paginator.page %}
+      <span class="current">{{ page }}</span>
+      {%- else %}
+      <a href="{{ paginator.previous_page_path | relative_url | replace: paginator.page, page }}" class="page">{{ page }}</a>
+      {%- endif %}
+      {%- endfor %}
+
       {%- if paginator.next_page %}
-        <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">{{ paginator.next_page }}</a></li>
+      <a href="{{ paginator.next_page_path | relative_url }}" class="next">Next &rarr;</a>
       {%- else %}
-        <li><div class="pager-edge">•</div></li>
+      <span class="disabled next">Next &rarr;</span>
       {%- endif %}
-      </ul>
     </div>
-  {%- endif %}
 
-{%- endif -%}
+    {%- endif %}
+
+{%- endif -%}

assets/css/bpd.css

@@ -522,3 +522,38 @@ ul.speaking-list {
     max-width: 60%;
   }
 }
+
+.pagination {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.pagination a {
+  text-decoration: none;
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  color: #007acc;
+}
+
+.pagination a:hover {
+  background-color: #007acc;
+  color: #fff;
+}
+
+.pagination .current {
+  padding: 5px 10px;
+  border: 1px solid #007acc;
+  background-color: #007acc;
+  color: white;
+  border-radius: 4px;
+}
+
+.pagination .disabled {
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  color: #aaa;
+  cursor: not-allowed;
+}

blog.md

@@ -0,0 +1,8 @@
+---
+layout: default
+lang: en
+title: Blog
+list_title: Posts
+---
+
+<div class="posts">{%- include posts.html -%}</div>

blog/index.html

@@ -106,10 +106,7 @@ def test_mailto_bpdevs(page_url: tuple[Page, str]) -> None:
 
 @pytest.mark.parametrize(
     "url",
-    (
-        "/",
-        "/blog",
-    ),
+    ("/blog",),
 )
 def test_page_description_in_index_and_blog(page_url: tuple[Page, str], url: str):
     """Checks for the descriptions data in the blog posts. There should be some objects with the class `post-description`"""