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>