Batch recent activity six at a time

2026-08-12 00:09:20 -07:00
parent 2964bdaf24
commit aae9836b99
6 changed files with 68 additions and 4 deletions
@@ -9,8 +9,9 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
  <link rel="icon" href="{{ '/static/favicon.svg'|url }}" type="image/svg+xml">
-  <link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=6">
+  <link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=7">
  <script src="{{ '/static/tags.js'|url }}?v=1" defer></script>
+  <script src="{{ '/static/activity.js'|url }}?v=1" defer></script>
 </head>
 <body>
  <header class="site-header">
@@ -12,7 +12,7 @@
      <span>Recent Activity</span>
      <span>Sorted by date</span>
    </div>
-    <div class="timeline">
+    <div class="timeline" id="recent-activity-list" data-activity-feed data-batch-size="6">
      {% set entries = [] %}
      {% for section_id in ['projects', 'articles', 'blog'] %}
        {% for item in site.get('/' ~ section_id).children %}
@@ -30,7 +30,7 @@
        {% endif %}
      {% endfor %}
      {% for item in entries|sort(attribute='date', reverse=true) %}
-        <article class="timeline-entry accent-{{ item.kicker|lower }}">
+        <article class="timeline-entry accent-{{ item.kicker|lower }}" data-activity-item>
          <div class="entry-meta">
            <span class="label">{{ item.kicker }}</span>
            <time datetime="{{ item.date }}">{{ item.date|dateformat('YYYY.MM.dd') }}</time>
@@ -41,5 +41,9 @@
        </article>
      {% endfor %}
    </div>
+    <div class="activity-controls" data-activity-controls hidden>
+      <p class="activity-status" data-activity-status aria-live="polite"></p>
+      <button class="activity-more-button" type="button" data-activity-more aria-controls="recent-activity-list">Show 6 more</button>
+    </div>
  </div>
 </section>