Feature: Enhance Blog Pagination with Dynamic Loading of Posts

[tgaeta]

This pull request introduces dynamic loading for paginated blog posts, improving user experience (UX) by avoiding full page reloads when navigating through paginated content. Additionally, it ensures the browser's URL reflects the current page state, even when navigating with the browser's back and forward buttons. This enhancement significantly improves the UX for navigating paginated blog posts by leveraging dynamic loading and effective URL management, while maintaining compatibility for users without JavaScript.

Changes:

1. Dynamic Loading of Blog Posts:

   • Implemented dynamic loading of blog posts using AJAX.
   • Posts are appended to the existing list without refreshing the page.

2. URL Management:

   • Utilized the History API to update the browser's URL to reflect the current page state.
   • Ensured URLs include a trailing slash for consistency.

3. Back/Forward Navigation Handling:

   • Treated back/forward navigation as a page reload to fetch the correct state of posts.

4. Graceful Fallback for No-JavaScript Users:

   • Provided a fallback link for users with JavaScript disabled.
   • Ensured the "See more posts" button is hidden when JavaScript is disabled.

New File:

• blog/loadMorePosts.js:
  • Added functionality to dynamically load more posts.
  • Ensured URL updates correctly with trailing slash.
  • Handled back/forward navigation to reload the current page state.

File Changes:

• blog/index.html:
  • Added script inclusion for loadMorePosts.js.
  • Used Liquid variables for button text and class to keep the code DRY.
  • Provided fallback mechanism for no-JavaScript scenario.

Demo Videos:

Current/Before: Jarring UX with Full Page Reloads

current.mov

Dynamic Loading: First Few Pages

first-few-pages.mov

Dynamic Loading: Last Few Pages

last-few-pages.mov

No-JavaScript Fallback - Demonstrates the fallback behavior when JavaScript is disabled.

noscript.mov

Motivation:
This enhancement aims to provide a smoother and more seamless UX for users navigating through paginated blog posts. By dynamically loading posts and managing the URL state, users can enjoy uninterrupted browsing, and the navigation experience remains intuitive and consistent.

---

Implementation Details:

• Dynamic Loading:

  • The loadMorePosts.js script listens for clicks on the "See more posts" button, prevents the default link behavior, and fetches the next page of posts asynchronously.
  • The fetched posts are parsed and appended to the existing list of posts.

• URL Management:

  • The script updates the browser's URL using history.pushState to reflect the current page state after loading new posts.
  • Ensures URLs have a trailing slash for consistency.

• Back/Forward Navigation Handling:

  • Added a listener for the popstate event to treat back/forward navigation as a page reload, ensuring the correct state of posts is fetched.

• No-JavaScript Fallback:

  • Used a <noscript> tag to provide a fallback link for users with JavaScript disabled.
  • Ensured the "See more posts" button is hidden when JavaScript is disabled by applying inline styles.