themes/default/layouts/_default/index.json: Paginate

Load feed in chunks on the client side.

3 files changed, 66 insertions, 31 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 5a4fb39..7deaee1 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -392,11 +392,27 @@
                 container.removeAttribute("data-focus");
             }
         });
-        function fetchJson(url, callback) {
+        let data1 = {};
+        function isEmpty(obj) {
+            return Object.keys(obj).length === 0;
+        }
+        function appendItemsTo(local, remote) {
+            const paginated = Object.keys(remote).includes("next_url");
+            if (isEmpty(local)) {
+                local = remote;
+            } else {
+                local.items = local.items.concat(remote.items);
+            }
+            if (paginated) {
+                fetchJson(remote.next_url, local);
+            }
+            data1 = local;
+        }
+        function fetchJson(url, store) {
             const httpRequest = new XMLHttpRequest();
             httpRequest.onreadystatechange = function() {
                 if (httpRequest.readyState === 4 && httpRequest.status === 200) {
-                    if (callback) callback(JSON.parse(httpRequest.responseText));
+                    appendItemsTo(store, JSON.parse(httpRequest.responseText));
                 }
             };
             httpRequest.open("GET", url);
@@ -420,20 +436,19 @@
             if (firstRun) {
                 loadScript(window.location.origin + "/js/fuzzysort.js").then(()=>{
                     firstRun = false;
-                    fetchJson("/index.json", function(data) {
-                        const options = {
-                            key: [
-                                "title"
-                            ]
-                        };
-                        query.addEventListener("keyup", function() {
-                            search(query.value, data.items, options);
-                        });
-                        query.addEventListener("focusin", function() {
-                            search(query.value, data.items, options);
-                        });
-                        search(query.value, data.items, options);
+                    fetchJson("/index.json", {});
+                    const options = {
+                        key: [
+                            "title"
+                        ]
+                    };
+                    query.addEventListener("keyup", function() {
+                        search(query.value, data1.items, options);
+                    });
+                    query.addEventListener("focusin", function() {
+                        search(query.value, data1.items, options);
                     });
+                    search(query.value, data1.items, options);
                 }).catch((error)=>{
                     console.log("Error failed to load fuzzy sort: " + error);
                 });
diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index 4a24144..fafe5ee 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -33,7 +33,7 @@
         }
       }
 
-      // DOWN  (40)
+      // DOWN (40)
       if (event.keyCode == 40) {
         event.preventDefault();
         if (document.activeElement == query) head.focus();
@@ -44,7 +44,7 @@
         }
       }
 
-      // UP    (38)
+      // UP (38)
       if (event.keyCode == 38) {
         event.preventDefault();
         if (document.activeElement == query) tail.focus();
@@ -92,11 +92,30 @@
       }
     });
 
-    function fetchJson(url, callback) {
+    let data = {};
+
+    function isEmpty(obj) {
+      return Object.keys(obj).length === 0;
+    }
+
+    function appendItemsTo(local, remote) {
+      const paginated = Object.keys(remote).includes("next_url");
+      if (isEmpty(local)) {
+        local = remote;
+      } else {
+        local.items = local.items.concat(remote.items);
+      }
+      if (paginated) {
+        fetchJson(remote.next_url, local);
+      }
+      data = local;
+    }
+
+    function fetchJson(url, store) {
       const httpRequest = new XMLHttpRequest();
       httpRequest.onreadystatechange = function () {
         if (httpRequest.readyState === 4 && httpRequest.status === 200) {
-          if (callback) callback(JSON.parse(httpRequest.responseText));
+          appendItemsTo(store, JSON.parse(httpRequest.responseText));
         }
       };
       httpRequest.open("GET", url);
@@ -122,28 +141,26 @@
       });
     }
 
-    let firstRun = true; // allow us to delay loading json data unless search activated
+    let firstRun = true;
 
     function initialize() {
       if (firstRun) {
         loadScript(window.location.origin + "/js/fuzzysort.js")
           .then(() => {
             firstRun = false;
-            fetchJson("/index.json", function (data) {
-              const options = {
-                key: ["title"],
-              };
+            fetchJson("/index.json", {});
 
-              query.addEventListener("keyup", function () {
-                search(query.value, data.items, options);
-              });
+            const options = { key: ["title"] };
 
-              query.addEventListener("focusin", function () {
-                search(query.value, data.items, options);
-              });
+            query.addEventListener("keyup", function () {
+              search(query.value, data.items, options);
+            });
 
+            query.addEventListener("focusin", function () {
               search(query.value, data.items, options);
             });
+
+            search(query.value, data.items, options);
           }).catch((error) => {
             console.log("Error failed to load fuzzy sort: " + error);
           });
diff --git a/themes/default/layouts/_default/index.json b/themes/default/layouts/_default/index.json
index 86be455..0c9c794 100644
--- a/themes/default/layouts/_default/index.json
+++ b/themes/default/layouts/_default/index.json
@@ -3,8 +3,11 @@
   "title": "{{ .Site.Title }}",
   "home_page_url": "{{ .Site.BaseURL }}",
   "feed_url": "{{ .Site.BaseURL }}/index.json",
+  {{- with .Paginator.Next }}
+  "next_url": "{{ .URL }}",
+  {{- end }}
   "items": [
-    {{- range $index, $data := .Site.RegularPages -}}
+    {{- range $index, $data := .Paginator.Pages -}}
     {{- if and (ne $data.Type "json") (not .ExpiryDate) (not .Params.unlisted) -}}
     {{- if and $index (gt $index 0) -}},{{- end }}
     {