From ffb76332edafa41658298f5211b0817db89764e8 Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Tue, 13 Apr 2021 10:19:17 +0200
Subject: [PATCH] added option for infinite scrolling, with fallback regular
 pagination without javascript

---
 README.md                       |  7 ++++
 layouts/_default/baseof.json    |  1 +
 layouts/index.html              |  3 +-
 layouts/index.json              |  3 ++
 layouts/partials/paginator.html | 69 +++++++++++++++++++++++++++++++++
 5 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 layouts/_default/baseof.json

diff --git a/README.md b/README.md
index 1ec028f..3fe3038 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,13 @@ summaryLength = 70  # number of words for article summaries
     # useful if deploying in gitlab pages with custom domain and don't want
     # the username.gitlab.io/website url to persist
     forceRedirect = false
+
+    infiniteScrolling = false  # activates infinite scrolling instead of regular pagination
+
+# this section is necessary if you want infinite scrolling
+# it allows to output the article list as paged JSON so that "pages" can be retrieved via javascript
+[outputs]
+    home = ["HTML", "JSON"]
 ```
 
 ## Inject custom content
diff --git a/layouts/_default/baseof.json b/layouts/_default/baseof.json
new file mode 100644
index 0000000..49d010f
--- /dev/null
+++ b/layouts/_default/baseof.json
@@ -0,0 +1 @@
+{{- block "main" . }}{{- end }}
diff --git a/layouts/index.html b/layouts/index.html
index a4bb3a0..eba1899 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,7 +5,7 @@
     {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
 
     {{/* pagination */}}
-    <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}">
+    <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
     {{ range (.Paginate $postsList).Pages }}
         <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
             <div>
@@ -37,6 +37,7 @@
         </article>
     {{ end }}
     </div>
+    <div id="getNextBtnContainer"></div>
     {{- partial "paginator.html" . -}}
 
 {{ end }}
diff --git a/layouts/index.json b/layouts/index.json
index 8619099..7d8529c 100644
--- a/layouts/index.json
+++ b/layouts/index.json
@@ -1,3 +1,4 @@
+{{ define "main" }}
 {
     {{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
     {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
@@ -8,6 +9,7 @@
     "articles": [
         {{ range $i, $e := (.Paginate $postsList).Pages }}
             {{ if $i }}, {{ end }}{
+                "ignore": {{ not (in $postsDir .Section) | jsonify }},
                 "title": {{ .Title | jsonify }},
                 "date": {{ .Date.Format "2006-01-02" | jsonify }},
                 "tags": {{ if .Params.tags }}
@@ -26,3 +28,4 @@
         {{ end }}
     ]
 }
+{{ end }}
diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html
index ec90e0d..ad25991 100644
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@@ -1,3 +1,71 @@
+{{ if .Site.Params.infiniteScrolling }}
+<script>
+    var nextPage = '/index.json';
+    function renderTags(tags) {
+        if (tags.length <= 0) return '';
+        let res = '| <span title="tags"> </span>';
+        for (let tag of tags) {
+            res += `<a href="/tags/${tag}">#${tag}</a>
+            `;
+        }
+        return res;
+    }
+    function renderImage(image) {
+        if (!image) return '';
+        return `<img src="${image}" />`
+    }
+    function renderSingleArticle(article) {
+        if (article.ignore) return '';
+        return `
+        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
+            <div>
+                <h2>
+                <a href="${article.link}">${article.title}</a>
+                </h2>
+                <p class="date">
+                <span title="Date"> </span>
+                ${article.date}
+                ${renderTags(article.tags)}
+                </p>
+                {{ if .Site.Params.imageInArticlePreview }}
+                    ${renderImage(article.image)}
+                {{end}}
+                <div class="articlePreview">
+                    <p>${article.summary}</p>
+                    <p><a href="${article.link}">Continue reading </a></p>
+                </div>
+            </div>
+            <hr />
+        </article>
+        `;
+    }
+    function renderArticles(articles) {
+        let rendered = articles.map(a => renderSingleArticle(a)).join('\n');
+        document.getElementById('postlist').innerHTML += rendered;
+    }
+    function getNext(first=false) {
+        if (!nextPage) return;
+        fetch(nextPage).then(res => res.json())
+        .then(res => {
+            nextPage = res['next'];
+            if (first) {
+                document.getElementById('getNextBtnContainer').innerHTML += `
+                    <div style="text-align: center; font-size: 1.7em;">
+                        <a style="cursor: pointer" onclick="getNext();">
+                            Load more articles
+                        </a>
+                    </div>
+                `;
+                return;
+            }
+            if (!nextPage) document.getElementById('getNextBtnContainer').innerHTML = '';
+            renderArticles(res['articles']);
+        });
+    }
+    getNext(true);
+</script>
+{{ end }}
+{{ if .Site.Params.infiniteScrolling }}<noscript>{{ end }}
 {{ if gt .Paginator.TotalPages 1 }}
     {{ $navtype := .Site.Params.Navtype }}
     <div id="pageNavigation" class='
@@ -36,3 +104,4 @@
         {{ end }}
     </div>
 {{ end }}
+{{ if .Site.Params.infiniteScrolling }}</noscript>{{ end }}