Updated pagination controls for blog.

Author: localhost433

blog.html

@@ -42,8 +42,19 @@
 
     <section id="posts-list"></section>
     <div id="pagination">
-        <button id="prev-button">Previous</button>
-        <button id="next-button">Next</button>
+        <label for="per-page-select" class="pagination-label">Per page:</label>
+        <select id="per-page-select" aria-label="Posts per page">
+            <option value="10" selected>10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+        </select>
+        <button id="prev-button" aria-label="Previous page">Previous</button>
+        <div id="page-jump">
+            <label for="page-input" class="pagination-label">Page</label>
+            <input id="page-input" type="number" min="1" value="1" aria-label="Current page" />
+            <span id="total-pages" aria-live="polite"></span>
+        </div>
+        <button id="next-button" aria-label="Next page">Next</button>
     </div>
 
     <a href="index.html" class="back-link">Back to Home</a>

css/blog.css

@@ -209,6 +209,45 @@
   margin-top: 2rem;
 }
 
+/* New pagination controls */
+#per-page-select, #page-input {
+  font-family: inherit;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: #fff;
+  color: #222;
+  width: auto;
+}
+
+#page-input {
+  width: 5.2ch;
+  text-align: left;
+}
+
+.dark-mode #per-page-select, .dark-mode #page-input {
+  background: #222;
+  color: #eee;
+  border-color: #444;
+}
+
+#page-jump {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.3rem;
+}
+
+.pagination-label {
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
+#total-pages {
+  font-size: 0.9rem;
+  min-width: 3ch;
+}
+
 /* Match the theme-toggle style for pagination buttons */
 #prev-button,
 #next-button {

posts/js/blog.js

@@ -1,13 +1,16 @@
 /* blog.js - list of posts with tag filter, pagination, and search */
 
-// Constants
-const PER_PAGE = 10;
+// Pagination size (mutable via dropdown)
+let perPage = 10;
 
 // DOM Elements
 const list = document.getElementById("posts-list");
 const btnBox = document.getElementById("tag-buttons");
 const prevBtn = document.getElementById("prev-button");
 const nextBtn = document.getElementById("next-button");
+const perPageSelect = document.getElementById("per-page-select");
+const pageInput = document.getElementById("page-input");
+const totalPagesSpan = document.getElementById("total-pages");
 const searchBox = document.getElementById("search-box");
 const searchButton = document.getElementById("search-button");
 
@@ -64,11 +67,24 @@ function renderPosts(posts, filterTag = null) {
 }
 
 // Render the current page of posts
+function totalPages() {
+  return Math.max(1, Math.ceil(filtered.length / perPage));
+}
+
+function clampPage() {
+  const tp = totalPages();
+  if (currentPage > tp) currentPage = tp;
+  if (currentPage < 1) currentPage = 1;
+}
+
 function renderPage() {
-  const start = (currentPage - 1) * PER_PAGE;
-  renderPosts(filtered.slice(start, start + PER_PAGE));
+  clampPage();
+  const start = (currentPage - 1) * perPage;
+  renderPosts(filtered.slice(start, start + perPage));
   prevBtn.disabled = currentPage === 1;
-  nextBtn.disabled = start + PER_PAGE >= filtered.length;
+  nextBtn.disabled = currentPage >= totalPages();
+  if (pageInput) pageInput.value = currentPage;
+  if (totalPagesSpan) totalPagesSpan.textContent = ` / ${totalPages()}`;
 }
 
 /* -------------------- Event Handlers -------------------- */
@@ -83,12 +99,43 @@ prevBtn.addEventListener("click", () => {
 
 // Handle pagination (next button)
 nextBtn.addEventListener("click", () => {
-  if (currentPage * PER_PAGE < filtered.length) {
+  if (currentPage < totalPages()) {
     currentPage++;
     renderPage();
   }
 });
 
+// Change per-page size
+if (perPageSelect) {
+  perPageSelect.addEventListener("change", () => {
+    const val = parseInt(perPageSelect.value, 10);
+    if ([10, 20, 50].includes(val)) {
+      perPage = val;
+      currentPage = 1;
+      renderPage();
+    }
+  });
+}
+
+// Page jump input
+if (pageInput) {
+  pageInput.addEventListener("change", () => {
+    let val = parseInt(pageInput.value, 10);
+    if (Number.isNaN(val)) val = 1;
+    currentPage = val;
+    renderPage();
+  });
+  pageInput.addEventListener("keydown", e => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      let val = parseInt(pageInput.value, 10);
+      if (Number.isNaN(val)) val = currentPage;
+      currentPage = val;
+      renderPage();
+    }
+  });
+}
+
 // Execute a search over titles + loaded body excerpts
 function executeSearch() {
   const query = searchBox.value.trim().toLowerCase();
@@ -176,7 +223,7 @@ fetch("./posts/metadata/entries.json")
   .then(data => {
     posts = data;
   filtered = posts;
-  // Reset search and filter
+  // Reset search and filter (also updates pagination UI)
   resetSearchAndFilter();
 
     // Build tag buttons

posts/metadata/entries.json

@@ -122,6 +122,6 @@
         "author": "R",
         "location": "Bobst 8F, New York, NY",
         "tags": ["math", "life", "notes"],
-        "slug": "022-suranyi"
+        "slug": "022-Suranyi"
     }
 ]