All blog Posts on A SINGLE page

So Squarespace has a limit of 20 blog post listings per page. This can be bumped up to 30 using summary blocks. I found this unsatisfactory and hence, here is my solution to load all of them onto a single page, or as many as you like. Be warned, this is a heavy operation and the loading times are quite long. Maybe this is why squarespace only allows 20. Please note that to my surprise squarespace allows accessing JSON data! This can be done by appending “?format=json-pretty” to your link, in this case the link of your blog. This is important for the code to function. Also note that by setting the maximum posts per page to 20 in your blog, you decrease the number of pages, which should decrease loading times of this script as it fetches the content.

HTML:

<div id="blogPostsContainer" class="blogPostsContainer"></div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
const subString = 'devlog';
const getURL = window.location.href;
//const contentWrapper = document.querySelector('.content-wrapper');
const blogSection = document.querySelector('[data-section-id="66b4124ebc499f1778bfe1ea"]');
const blogPostsContainer = document.getElementById('blogPostsContainer');
const baseUrl = 'https://www.polivantage.com/developmentlog?format=json-pretty';
let pageNumber = 1;
let allPosts = [];
if (getURL.includes(subString)) {
//Fetch my blog
function loadAllPosts() {
fetch(`${baseUrl}&page=${pageNumber}`)
.then(response => response.json())
.then(data => {
const posts = data.items;
allPosts = allPosts.concat(posts);
// Check if there are more pages
if (data.pagination && data.pagination.nextPage) {
pageNumber++;
loadAllPosts();
} else {
displayPosts(allPosts);
}
})
.catch(error => console.error('Error fetching posts:', error));
}
//Display all post titles in a list
function displayPosts(posts) {
blogPostsContainer.innerHTML = ''; // Clear the container before adding new posts
const list = document.createElement('ol'); // Create an ordered list
// Use the original posts array to display the oldest posts first
posts.forEach((post, index) => {
const postItem = document.createElement('li');
const postNumber = posts.length - index; // Adjust the number to show the latest post first
postItem.innerHTML = `
<h4><a href="${post.fullUrl}" class="custom-post-title">${postNumber}. ${post.title}</a></h4>
<p>${post.excerpt}</p>`;
list.appendChild(postItem);
});
const contentWrapper = blogSection.querySelector('.content-wrapper');
blogPostsContainer.appendChild(list);
contentWrapper.appendChild(blogPostsContainer);
//prevent resizing during modification of list such as on search
blogPostsContainer.style.minWidth = `${list.offsetWidth}px`;
}
loadAllPosts();
} else {
blogPostsContainer.remove();
}
});

CSS:

//remove stock content
section[data-section-id="66b4124ebc499f1778bfe1ea"] .content-wrapper .content {
  width: 0 !important;
}
//get rid of stock list numbers
section[data-section-id="66b4124ebc499f1778bfe1ea"] ol {
  list-style-type: none;
}
#blogPostsContainer {
  max-width: 2200px;
  display: block;
  position: relative;
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
}
.custom-post-title { 
// transition: all 2s ease;
}
.custom-post-title:hover {
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  border-image-slice: 1;
}

The section ID is where your blog will be loaded. You can style it from here.