https://seanzach.com/blog/assets/js/site.js

1(function () {
2  document.body.classList.add("is-dropdown-loaded");
3
4  const burger = document.querySelector(".site-burger");
5  if (burger) {
6    burger.addEventListener("click", function () {
7      document.body.classList.toggle("is-head-open");
8    });
9  }
10
11  const feed = document.querySelector(".post-feed");
12  const loadMoreButton = document.querySelector(".load-more");
13  const nextLink = document.querySelector('link[rel="next"]');
14
15  if (!feed || !loadMoreButton || !nextLink) {
16    return;
17  }
18
19  loadMoreButton.addEventListener("click", async function () {
20    const href = nextLink.getAttribute("href");
21    if (!href) {
22      loadMoreButton.remove();
23      return;
24    }
25
26    try {
27      const response = await fetch(href);
28      if (!response.ok) {
29        throw new Error("failed to fetch next page");
30      }
31
32      const html = await response.text();
33      const parser = new DOMParser();
34      const documentFragment = parser.parseFromString(html, "text/html");
35      const incomingItems = documentFragment.querySelectorAll(".post-feed > *");
36
37      incomingItems.forEach(function (item) {
38        feed.appendChild(item);
39      });
40
41      const incomingNext = documentFragment.querySelector('link[rel="next"]');
42      if (incomingNext && incomingNext.href) {
43        nextLink.setAttribute("href", incomingNext.href);
44      } else {
45        nextLink.remove();
46        loadMoreButton.remove();
47      }
48    } catch (error) {
49      console.error(error);
50      nextLink.remove();
51      loadMoreButton.remove();
52    }
53  });
54})();