Implemented page pagination.

blog/renderNextBar.js

@@ -35,18 +35,36 @@ module.exports=
                 reject("Invalid Page");
             }
 
+            var paginationObject = new Object();
+
             var nextPage = currentPage + 1;
             var previousPage = currentPage - 1;
 
             if (isValidPage(previousPage, postsPerPage, totalPosts))
             {
-                templateContext.newPostsURL = baseURL + "?page=" + previousPage;
+                paginationObject.previous = {url: baseURL + "?page=" + previousPage};
             }
 
             if (isValidPage(nextPage, postsPerPage, totalPosts))
             {
-                templateContext.oldPostsURL = baseURL + "?page=" + nextPage
+                paginationObject.next = {url: baseURL + "?page=" + nextPage};
             }
 
+            var page = 1;
+            var pages = [];
+            while(isValidPage(page, postsPerPage, totalPosts))
+            {
+                if(page === currentPage)
+                {
+                    pages.push({isCurrent: true, number: page})
+                }
+                else
+                {
+                    pages.push({number: page, url: baseURL + "?page=" + page})
+                }
+                page = page + 1;
+            }
+            paginationObject.pages = pages;
+            templateContext.pagination = paginationObject;
         }
     };

sites/blog.js

@@ -88,7 +88,7 @@ module.exports=
                         require("../blog/sidebar.js").main(templateContext)])
                             .then(function (content)
                     {
-                        var html = whiskers.render(content[0], templateContext);
+                        const html = whiskers.render(content[0], templateContext);
                         result.write(html);
                         result.end();
                         cache.put(filename + "?page=" + page, html);

templates/blog/blogMain.html

@@ -31,29 +31,9 @@
                 </div>
                 <br><br>
             {/for}
-            <div class="row">
 
 
-                {>paginationTemplate}
-
-                <!--<div class="col-6">-->
-                    <!--{if newPostsURL}-->
-                    <!--<button class="btn btn-secondary btn-l" onclick="location.href='{newPostsURL}'">-->
-                        <!--<b>Older Posts &raquo;</b>-->
-                    <!--</button>-->
-                    <!--{/if}-->
-                <!--</div>-->
-
-                <!--<div class="col-6">-->
-                    <!--{if oldPostsURL}-->
-                        <!--<span class="float-right">-->
-                            <!--<button class="btn btn-secondary btn-l" onclick="location.href='{oldPostsURL}'">-->
-                                <!--<b>Older Posts &raquo;</b>-->
-                            <!--</button>-->
-                        <!--</span>-->
-                    <!--{/if}-->
-                <!--</div>-->
-            </div>
+            {>paginationTemplate}
             <br>
         </div>
         <div class="col-md-4 col-4">
@@ -61,6 +41,10 @@
         </div>
     </div>
 
+
+
 </div>
 
+
+
 {footer}

templates/blog/paginationBar.html

@@ -1,45 +1,52 @@
-<nav aria-label="...">
-    <ul class="pagination">
-        {if pagination.previous}
-            <li class="page-item">
-                <a class="page-link" href="{pagination.previous.url}">
-                    Previous
-                </a>
-            </li>
-        {else}
-            <li class="page-item disabled">
-                <span class="page-link">
-                    Previous
-                </span>
-            </li>
-        {/if}
-        {for page in pagination.pages}
-            <li class="page-item active">
-
-                {if page.isCurrent}
+{if pagination}
+<div class="row justify-content-center w-100">
+    <div class="col-6">
+        <nav aria-label="...">
+            <ul class="pagination">
+                {if pagination.previous}
+                <li class="page-item">
+                    <a class="page-link" href="{pagination.previous.url}">
+                        Previous
+                    </a>
+                </li>
+                {else}
+                <li class="page-item disabled">
                     <span class="page-link">
-                        {page.number}
-                        <span class="sr-only">(current)</span>
+                        Previous
                     </span>
-                {else}
-                    <a class="page-link" href="{page.url}">
-                        {page.number}
+                </li>
+                {/if}
+                {for page in pagination.pages}
+                    {if page.isCurrent}
+                        <li class="page-item active">
+                            <span class="page-link">
+                                {page.number}
+                                <span class="sr-only">(current)</span>
+                            </span>
+                        </li>
+                    {else}
+                        <li class="page-item">
+                            <a class="page-link" href="{page.url}">
+                                {page.number}
+                            </a>
+                        </li>
+                    {/if}
+                {/for}
+                {if pagination.next}
+                <li class="page-item">
+                    <a class="page-link" href="{pagination.next.url}">
+                        Next
                     </a>
+                </li>
+                {else}
+                <li class="page-item disabled">
+                    <span class="page-link">
+                        Next
+                    </span>
+                </li>
                 {/if}
-            </li>
-        {/for}
-        {if pagination.next}
-            <li class="page-item">
-                <a class="page-link" href="{pagination.next.url}">
-                    Next
-                </a>
-            </li>
-        {else}
-            <li class="page-item disabled">
-                <span class="page-link">
-                    Next
-                </span>
-            </li>
-        {/if}
-    </ul>
-</nav>
+            </ul>
+        </nav>
+    </div>
+</div>
+{/if}