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

This commit is contained in:
Gabriele Musco 2021-04-13 10:19:17 +02:00
parent 5f77073abd
commit ffb76332ed
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
5 changed files with 82 additions and 1 deletions

View File

@ -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 # useful if deploying in gitlab pages with custom domain and don't want
# the username.gitlab.io/website url to persist # the username.gitlab.io/website url to persist
forceRedirect = false 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 ## Inject custom content

View File

@ -0,0 +1 @@
{{- block "main" . }}{{- end }}

View File

@ -5,7 +5,7 @@
{{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }} {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
{{/* pagination */}} {{/* 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 }} {{ range (.Paginate $postsList).Pages }}
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}"> <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
<div> <div>
@ -37,6 +37,7 @@
</article> </article>
{{ end }} {{ end }}
</div> </div>
<div id="getNextBtnContainer"></div>
{{- partial "paginator.html" . -}} {{- partial "paginator.html" . -}}
{{ end }} {{ end }}

View File

@ -1,3 +1,4 @@
{{ define "main" }}
{ {
{{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }} {{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
{{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }} {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
@ -8,6 +9,7 @@
"articles": [ "articles": [
{{ range $i, $e := (.Paginate $postsList).Pages }} {{ range $i, $e := (.Paginate $postsList).Pages }}
{{ if $i }}, {{ end }}{ {{ if $i }}, {{ end }}{
"ignore": {{ not (in $postsDir .Section) | jsonify }},
"title": {{ .Title | jsonify }}, "title": {{ .Title | jsonify }},
"date": {{ .Date.Format "2006-01-02" | jsonify }}, "date": {{ .Date.Format "2006-01-02" | jsonify }},
"tags": {{ if .Params.tags }} "tags": {{ if .Params.tags }}
@ -26,3 +28,4 @@
{{ end }} {{ end }}
] ]
} }
{{ end }}

View File

@ -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 }} {{ if gt .Paginator.TotalPages 1 }}
{{ $navtype := .Site.Params.Navtype }} {{ $navtype := .Site.Params.Navtype }}
<div id="pageNavigation" class=' <div id="pageNavigation" class='
@ -36,3 +104,4 @@
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
{{ if .Site.Params.infiniteScrolling }}</noscript>{{ end }}