feat: pagination for updates (#249)

Added pagination to the updates page, as it was getting too long

![Screenshot 2024-10-10 at 10 40
42](https://github.com/user-attachments/assets/c4baf144-4412-467c-8cdd-65f2853748bb)

_layouts/update.html

@@ -22,7 +22,6 @@ <h2 class="subtitle" style="margin-top: 10px; font-family: Avenir-Light, 'Avenir
             {{ page.subtitle }}
           </h2>
         {% endif %}
-        <!-- {% if page.author %}<strong class="post-author">{{ page.author }}</strong>{% endif %} -->
       </div>
     </div>
 

assets/css/styles.css

@@ -30,6 +30,7 @@ title: CSS stylesheet
 :root {
   --root-size: 10px;
   --max-content-width: 100%;
+  --tari-purple: #9330ff;
 }
 
 /* body */
@@ -2522,6 +2523,35 @@ body.page- #call-to-action {
   }
 }
 
+#pagination-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 40px;
+}
+
+#pagination-controls > a {
+  margin: 2px;
+  border-radius: 5px;
+}
+
+#active-pagination {
+  background: var(--tari-purple);
+}
+
+#active-pagination {
+  color: white !important;
+}
+
+.page-link {
+  color: var(--tari-purple);
+}
+
+.page-link:hover {
+  color: var(--tari-purple);
+}
+
 /* 404 */
 
 .page404 {
@@ -2567,3 +2597,5 @@ body.page- #call-to-action {
   font-family: Avenir-Light, 'Avenir-Light', 'Myriad Pro', Arial, Verdana !important;
   color: #ff0000;
 }
+
+/* Updates */

assets/js/pagination.js

@@ -0,0 +1,36 @@
+$(document).ready(function() {
+    const itemsPerPage = 20;
+    const $posts = $('.blog-area .js-stagger-delay-post-panel');
+    const totalPages = Math.ceil($posts.length / itemsPerPage);
+    let currentPage = 1;
+
+    function showPage(page) {
+      $posts.hide();
+      $posts.slice((page - 1) * itemsPerPage, page * itemsPerPage).show();
+    }
+
+    function createPaginationControls() {
+      const $paginationControls = $('#pagination-controls');
+      $paginationControls.empty();
+      for (let i = 1; i <= totalPages; i++) {
+        $paginationControls.append(`<a href="#" class="page-link" data-page="${i}">${i}</a> `);
+      }
+      $paginationControls.find('.page-link').on('click', function(e) {
+        e.preventDefault();
+        currentPage = $(this).data('page');
+        showPage(currentPage);
+        updateActivePagination();
+      });
+      updateActivePagination();
+    }
+
+    function updateActivePagination() {
+      $('#pagination-controls .page-link').removeAttr('id');
+      $(`#pagination-controls .page-link[data-page="${currentPage}"]`).attr('id', 'active-pagination');
+    }
+
+    console.log('loaded')
+
+    createPaginationControls();
+    showPage(currentPage);
+  });

updates.html

@@ -10,11 +10,10 @@
   {% include newsletter-subscribe.html %}
   <div class="content center-content">
     <div class="new-section">
-    <h1 id="blog">Updates</h1>
-    <p>The latest updates from developers contributing to the Tari protocol.</p>
-
-  </div>
-  <p>Have questions or want to contribute? Join the community discussion on <a href="https://discord.gg/tari" target="_blank">Discord</a> or #tari-dev on <a href="https://libera.chat/" target="_blank">Libera.Chat</a>. You can also subscribe to these updates using <a href="/feed.xml">the RSS Feed</a>.</p>
+      <h1 id="blog">Updates</h1>
+      <p>The latest updates from developers contributing to the Tari protocol.</p>
+    </div>
+    <p>Have questions or want to contribute? Join the community discussion on <a href="https://discord.gg/tari" target="_blank">Discord</a> or #tari-dev on <a href="https://libera.chat/" target="_blank">Libera.Chat</a>. You can also subscribe to these updates using <a href="/feed.xml">the RSS Feed</a>.</p>
 
     <div
       style="max-width: var(--max-content-width);"
@@ -29,5 +28,8 @@ <h1 id="blog">Updates</h1>
       {% assign updates = site.updates | sort:"date" | reverse %}
       {% for post in updates %} {% include updates-area.html %} {% endfor %}
     </div>
+    <div id="pagination-controls"></div>
   </div>
 </section>
+
+<script src="/assets/js/pagination.js"></script>