added option for infinite scrolling, with fallback regular pagination without javascript

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 }}