HackmanClub/tapestry
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added infinite scroll and pagination

Browse source
This commit is contained in:
Bashy 2025-09-23 21:53:36 +02:00
parent b1f096102b
commit d36bd76d52
5 changed files with 57 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

37
layout/_partial/feed.ejs
View file

@ -1,31 +1,12 @@
<!-- Default number of columns is two. If 3 is defined, then third column is added-->
<% columns = theme.column; %> <!-- Number of columns -->
<div class="posts-container">
<div class="column column-0">
<% item.forEach(function(post, index) { %>
<% if (index % columns === 0) { %>
<%- include('post_feed', { post: post }) %>
<% } %>
<% }); %>
</div>
<div class="column column-1">
<% item.forEach(function(post, index) { %>
<% if (index % columns === 1) { %>
<%- include('post_feed', { post: post }) %>
<% } %>
<% }); %>
</div>
<!-- Condition for column number 3 -->
<% if (columns === 3) { %>
<div class="column column-2">
<% item.forEach(function(post, index) { %>
<% if (index % columns === 2) { %>
<%- include('post_feed', { post: post }) %>
<% } %>
<% }); %>
</div>
<% } %>
<div id="masonry">
<% page.posts.forEach(function(post) { %>
<%- include('post_feed', { post: post }) %>
<% }); %>
</div>
<div id="loader" style="text-align: center; display: none;">
<p>Loading more posts...</p>
<div class="pagination">
<% if (page.next) { %>
<a href="<%- url_for(page.next_link) %>"></a>
<% } %>
</div>

4
layout/_partial/post_feed.ejs
View file

@ -1,9 +1,9 @@
<!-- This is the template for the post. It is used to display the posts in the feeds. -->
<div class="post">
<div class="post post-feed">
<% if(post.photos) { %>
<div class="cover">
<a href='<%= url_for(post.path) %>'>
<img class="gallery" src="<%- config.root %>thumbnails/<%- (theme.column == 2 ? 'medium' : 'small') + '-' + post.photos[0].replace(/^images\//, '') %>" alt="<%- post.title || 'Untitled' %>">
<img class="gallery" src="<%- config.root %>thumbnails/small-<%- post.photos[0].replace(/^images\//, '') %>" alt="<%- post.title || 'Untitled' %>">
</a>
</div>
<% } %>

22
layout/layout.ejs
View file

@ -21,6 +21,28 @@
<script src="<%= url_for(theme.fontawesome) %>" crossorigin="anonymous"></script>
<script src="<%- config.root %>js/infinite-scroll.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const grid = document.querySelector('#masonry');
const msn = new Masonry(grid, { itemSelector: '.post', percentPosition: true, gutter: 16 });
imagesLoaded(grid, () => msn.layout());
const infScroll = new InfiniteScroll(grid, {
path: '.pagination a',
append: '.post',
outlayer: msn,
history: false
});
});
</script>
<title><%= config.title %></title>
<link rel="stylesheet" href="<%= url_for('/css/style.css') %>">