✨ Infinite scrolling

layouts/partials/after-content-js.html

@@ -47,3 +47,50 @@
     });
 </script>
 
+
+{{ if .Site.Params.infiniteScroll }}
+<script>
+var throttle_pause = false;
+var fetching = false;
+var page_number = {{ $.Paginator.PageNumber }};
+const total_pages = {{ $.Paginator.TotalPages }};
+
+const throttle = (func, timeout) => {
+    if (throttle_pause || fetching) return;
+    throttle_pause = true;
+    setTimeout(() => {
+        func();
+        throttle_pause = false;
+    }, timeout);
+};
+
+const loading_wrapper = document.querySelector(".loading-wrapper");
+
+document.addEventListener("scroll", () => {
+    throttle(() => {
+        const last_moment = document.querySelector(".page > .container .moment-row:last-child");
+        const page_end = window.innerHeight + window.pageYOffset + 100 + last_moment.offsetHeight >= document.body.offsetHeight;
+        if (page_end && page_number < total_pages) {
+            fetching = true;
+            loading_wrapper.style.display = "flex";
+            fetch(`/${++page_number}`).then((response) => {
+                return response.text();
+            }).then((html_string) => {
+                const parser = new DOMParser();
+                const next_page = parser.parseFromString(html_string, "text/html");
+                const rows = next_page.querySelectorAll(".moment-row");
+                const container = document.querySelector(".page > .container");
+                rows.forEach((r) => {
+                    container.appendChild(r);
+                });
+            }).catch((err) => {
+                console.log(err);
+            }).then(() => {
+                fetching = false;
+            loading_wrapper.style.display = "none";
+            });
+        }
+    }, 250);
+})
+</script>
+{{ end }}

layouts/partials/head.html

@@ -44,6 +44,11 @@
 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-min.css">
 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css">
 
+<!-- CSS for loading animation -->
+{{ if .Site.Params.infiniteScroll }}
+<link rel="stylesheet" href="/style/loading.css">
+{{ end }}
+
 {{/* pangu support: js in the end before the body closing tag */}}
 {{ if .Site.Params.features.pangu }}
 <!-- pangu support -->

layouts/partials/loading.html

@@ -0,0 +1,8 @@
+<div class="loading-wrapper">
+  <div class="lds-ellipsis">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>