Batch recent activity six at a time

assets/static/activity.js

@@ -0,0 +1,34 @@
+(() => {
+  for (const feed of document.querySelectorAll("[data-activity-feed]")) {
+    const items = [...feed.querySelectorAll("[data-activity-item]")];
+    const batchSize = Number.parseInt(feed.dataset.batchSize || "6", 10);
+    const controls = feed.parentElement.querySelector("[data-activity-controls]");
+    const status = controls?.querySelector("[data-activity-status]");
+    const button = controls?.querySelector("[data-activity-more]");
+
+    if (!controls || !status || !button || items.length <= batchSize) continue;
+
+    let visibleCount = Math.min(batchSize, items.length);
+
+    const render = () => {
+      for (const [index, item] of items.entries()) {
+        item.hidden = index >= visibleCount;
+      }
+
+      const remaining = items.length - visibleCount;
+      status.textContent = `Showing ${visibleCount} of ${items.length} recent activity items.`;
+      button.disabled = remaining === 0;
+      button.textContent = remaining
+        ? `Show ${Math.min(batchSize, remaining)} more`
+        : "All activity shown";
+      controls.hidden = false;
+    };
+
+    button.addEventListener("click", () => {
+      visibleCount = Math.min(visibleCount + batchSize, items.length);
+      render();
+    });
+
+    render();
+  }
+})();

assets/static/style.css

@@ -57,6 +57,23 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .timeline-entry h2, .entry-card h2 { margin: 10px 0 5px; font-size: 21px; line-height: 1.3; }
 .timeline-entry p, .entry-card p { max-width: 680px; margin: 0 0 10px; color: var(--muted); }
 .read-more { color: var(--magenta); font-size: 10px; }
+.activity-controls { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 24px 0 0 37px; }
+.activity-controls[hidden] { display: none; }
+.activity-status { margin: 0; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
+.activity-more-button {
+  border: 1px solid var(--rule);
+  background: transparent;
+  padding: 7px 10px;
+  color: var(--muted);
+  cursor: pointer;
+  font: 500 9px var(--mono);
+  letter-spacing: .08em;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+.activity-more-button:hover,
+.activity-more-button:focus-visible { border-color: var(--teal); color: var(--teal); }
+.activity-more-button:disabled { cursor: default; opacity: .55; }
 
 .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
 .entry-card { min-height: 245px; padding: 28px; background: var(--bg); }
@@ -286,6 +303,7 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   .card-grid { grid-template-columns: 1fr; }
   .tag-directory { grid-template-columns: 1fr; }
   .tag-filter { padding-block: 18px; }
+  .activity-controls { align-items: flex-start; padding-left: 30px; }
   .tag-directory-card { min-height: 0; }
   .project-hero { padding-block: 44px; }
   .project-hero-inner,