Feature: Enhance Blog Pagination with Dynamic Loading of Posts

blog/index.html

@@ -2,6 +2,10 @@
 title: Blog
 description:
 ---
+<script src="/blog/loadMorePosts.js"></script>
+
+{% assign see_more_posts = "See more posts&hellip;" %}
+{% assign button_class = "common-button common-button--color-red" %}
 
 <div class="heading common-padding--bottom-small common-padding--top-small">
   <div class="container">
@@ -21,15 +25,27 @@
 
 <div class="blog common-padding--bottom">
   <div class="container">
-    <div class="blog__posts">
+    <div id="blogPosts" class="blog__posts">
       {% for post in paginator.posts %}
         {% include post.html %}
       {% endfor %}
     </div>
 
     {% if paginator.next_page %}
       <div class="blog__pagination">
-        <a href="{{ paginator.next_page_path }}" class="common-button common-button--color-red"><span>See more posts&hellip;</span></a>
+        <a href="{{ paginator.next_page_path }}" id="loadMorePosts" class={{ button_class }}>
+          <span>{{ see_more_posts }}</span>
+        </a>
+        <noscript>
+          <style>
+            #loadMorePosts {
+              display: none;
+            }
+          </style>
+          <a href="{{ paginator.next_page_path }}" class={{ button_class }}>
+            <span>{{ see_more_posts }}</span>
+          </a>
+        </noscript>
       </div>
     {% endif %}
   </div>

blog/loadMorePosts.js

@@ -0,0 +1,56 @@
+/**
+ * loadMorePosts.js
+ *
+ * This script enhances the blog pagination functionality by dynamically loading
+ * more posts when the "See more posts" button is clicked, without refreshing the page.
+ * It fetches the next page of posts via AJAX and appends them to the existing list.
+ * Additionally, it updates the URL to reflect the current page state using the History API.
+ *
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  const loadMoreLink = document.getElementById('loadMorePosts')
+
+  if (loadMoreLink) {
+    loadMoreLink.addEventListener('click', (event) => {
+      event.preventDefault()
+
+      const nextPage = loadMoreLink.getAttribute('href')
+
+      fetch(nextPage)
+        .then((response) => response.text())
+        .then((data) => {
+          const parser = new DOMParser()
+          const doc = parser.parseFromString(data, 'text/html')
+          const newPostsContainer = doc.querySelector('#blogPosts')
+          const newNextPageLink = doc.querySelector('#loadMorePosts')
+
+          // Check if newPostsContainer exists
+          if (newPostsContainer) {
+            const newPosts = newPostsContainer.innerHTML
+
+            // Append new posts
+            document.getElementById('blogPosts').insertAdjacentHTML('beforeend', newPosts)
+          } else {
+            throw new Error('New posts container not found.')
+          }
+
+          // Update the URL using history.pushState
+          history.pushState(null, '', nextPage.endsWith('/') ? nextPage : nextPage + '/')
+
+          // Update next page link or remove it if no more pages
+          if (newNextPageLink) {
+            loadMoreLink.setAttribute('href', newNextPageLink.getAttribute('href'))
+          } else {
+            loadMoreLink.remove()
+          }
+        })
+        .catch((error) => console.error('Error loading more posts:', error))
+    })
+  }
+
+  // Treat back/forward navigation as a page reload to fetch the correct page
+  window.addEventListener('popstate', () => {
+    window.location = window.location.href
+  })
+})