From d36bd76d528db0efc5b9dfedb74d5fa9e7d412dd Mon Sep 17 00:00:00 2001
From: Bashynx <bashynx@bashynx.com>
Date: Tue, 23 Sep 2025 21:53:36 +0200
Subject: [PATCH] Added infinite scroll and pagination

---
 layout/_partial/feed.ejs      | 37 +++++++++--------------------------
 layout/_partial/post_feed.ejs |  4 ++--
 layout/layout.ejs             | 22 +++++++++++++++++++++
 scripts/thumbnails.js         |  5 ++---
 source/css/style.css          | 37 +++++++++++++++++++++--------------
 5 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/layout/_partial/feed.ejs b/layout/_partial/feed.ejs
index b2327a6..4e18264 100644
--- a/layout/_partial/feed.ejs
+++ b/layout/_partial/feed.ejs
@@ -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>
\ No newline at end of file
diff --git a/layout/_partial/post_feed.ejs b/layout/_partial/post_feed.ejs
index ad69bcb..7ebee5c 100644
--- a/layout/_partial/post_feed.ejs
+++ b/layout/_partial/post_feed.ejs
@@ -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>
     <% } %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 2789686..e7c6065 100644
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -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') %>">
 
diff --git a/scripts/thumbnails.js b/scripts/thumbnails.js
index 015a188..9f19be1 100644
--- a/scripts/thumbnails.js
+++ b/scripts/thumbnails.js
@@ -19,9 +19,8 @@ hexo.extend.filter.register('after_init', async function() {
 
     // Thumbnail sizes
     const sizes = [
-        { name: 'small', width: 333 },      // Three-column layout
-        { name: 'medium', width: 666 },     // Two-column layout
-        { name: 'large', width: 1000 }      // Normal post
+        { name: 'small', width: 512 },      // Three-column layout
+        { name: 'large', width: 1024 }      // Normal post
     ];
 
     const getAllFilesInclSubfolders = (dir) => {
diff --git a/source/css/style.css b/source/css/style.css
index da854d2..3f72985 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -179,6 +179,18 @@ nav a {
     color: #dcdcdf !important;
 }
 
+.post {
+    padding: 1em;
+    background-color: #dcdcdf;
+    border-radius: 10px;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+}
+
+.post-feed {
+    width: 32%;
+}
+
 @media (max-width: 768px) {
     .sidebar-content {
         display: none;
@@ -195,6 +207,10 @@ nav a {
     .content {
         width: calc(100% - 1em);
     }
+
+    .post-feed {
+        width: 100%;
+    } 
 }
 
 /* Medium devices (tablets, 576px-768px) */
@@ -224,6 +240,10 @@ nav a {
     body{
         width: 769px;
     }
+
+    .post-feed {
+        width: 48%;
+    }
 }
 
 @media (min-width: 993px) and (max-width: 1199px) {
@@ -253,12 +273,6 @@ img:hover {
 }
 
 /* Post */
-.posts-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 1em;
-}
-
 .column {
     flex: 1;
     display: flex;
@@ -266,13 +280,6 @@ img:hover {
     gap: 1em;
 }
 
-.post {
-    padding: 1em;
-    background-color: #dcdcdf;
-    border-radius: 10px;
-    box-sizing: border-box;
-}
-
 .post-header {
     line-height: 100%;
     color:#343a40;
@@ -283,7 +290,7 @@ img:hover {
     font-style: italic;
 }
 
-/* Poskt - Top section */
+/* Post - Top section */
 .article {
     font-size: 35px !important;
     line-height: 40px !important;
@@ -313,4 +320,4 @@ img:hover {
 
 .tags a:hover {
     color: #9fa5aa !important;
-}
+}
\ No newline at end of file