Guide tip: How to make section pages without pagination

Hi folks—I've benefited from various posts here, so let me try to pay it forward.  :)  By default, Zendesk Guide will only show 30 articles on a Section page and relies on pagination if you have more. I need to show all of a section's articles at once, so I put together some JS to do it.

 

Edited 2021-09-13:

Well don't I feel silly. I thought of a much simpler and efficient way to do this.  :)  Even better, now it works without modifying the basic Copenhagen 'section_page.hbs' template.

Additional 'style.css' rules recommended but not required:

@media (min-width: 768px) {
  .long-article-list {
    columns: 2;
  }
}
@media (min-width: 1024px) {
  .long-article-list {
    columns: 3;
  }
}

Append to 'script.js':

// Zendesk Guide section pages without pagination (v2).
// author: Ashleigh Rentz, koresoftware.com
// license: https://mit-license.org/

window.onload = function() {
  unpaginatedSections();
};

function unpaginatedSections() {

  // Only execute this if we're on a paginated section page.
  if (document.getElementsByClassName("pagination")[0] == null) return;
  // Does the URL specify a page number? If so, yield to the user.
  if (document.URL.includes('?page=')) return;

  // Start with the articles listed on the first page
  var long_list = document.getElementsByClassName("article-list")[0].innerHTML;
  var next_url = document.getElementsByClassName("pagination-next-link")[0]
    .getAttribute('href');
  var is_finished = false;

  // Request the next page
  var next_page = new XMLHttpRequest();
  next_page.open("GET", next_url);
  next_page.responseType = 'document';
  next_page.send();
  next_page.onload = function() {
    // If something went wrong, leave pagination in place.
    if (next_page.status !== 200) return;
    // Add the articles from this page of results to our list.
    long_list += next_page.response.getElementsByClassName("article-list")[0]
      .innerHTML;
    // Check for another page.
    try {
      next_url =
        next_page.response.getElementsByClassName("pagination-next-link")[0]
        .getAttribute('href');
      next_page.open("GET", next_url);
      next_page.send();
    }
    catch (e) {
      // No more pages.
      is_finished = true;
    }
    finally {
      if (is_finished) {
        // Write the new list to the current page.
        document.getElementsByClassName("article-list")[0].innerHTML = long_list;
        // Add a class to allow styling via CSS.
        document.getElementsByClassName("article-list")[0].classList.add(
            'long-article-list');
        // Remove the pagination controls.
        document.getElementsByClassName("pagination")[0].innerHTML = '';
      };
    };
  };
};

I'll put the original (complicated and inefficient) version in a comment below for posterity, but you probably shouldn't use it.  ;)