Make Now section a carousel

_data/now.yml

@@ -1,5 +1,11 @@
 - title: "Platesolving for Fun and No Profit"
   url: https://quietlife.net/2026/04/08/platesolving-for-fun-and-no-profit/
-  type: blog
+  type: article
+  date: 2026-04-08
   image: https://quietlife.net/images/artemis-solved-annotation.jpg
   blurb: "Using Claude Code to identify stars and planets in an Artemis II eclipse photo taken from space."
+- title: "Weekend project: whoarewe"
+  url: https://quietlife.net/2026/04/14/weekend-project-whoarewe/
+  type: project
+  date: 2026-04-14
+  blurb: "An Android app that uses rotating 6-digit cryptographic codes to let two people verify each other's identity — a defense against voice deepfakes and social engineering, with no servers or internet required."

assets/css/style.css

@@ -99,16 +99,91 @@ img {
 .now-image {
   max-width: 100%;
   height: auto;
-  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
   border-radius: 2px;
 }
 
-.now-type {
+.now-meta {
   font-size: 0.8rem;
   color: #666;
   text-transform: lowercase;
 }
 
+/* Now carousel (JS-enhanced) */
+.now-carousel {
+  border: 1px solid #e5e5e5;
+  background: #fafafa;
+  border-radius: 4px;
+  padding: 1rem 1.25rem;
+}
+
+.now-carousel .now-item:last-child {
+  margin-bottom: 0;
+}
+
+.now-carousel .now-controls {
+  display: none;
+}
+
+.now-carousel.js-enabled .now-item {
+  display: none;
+  margin-bottom: 0.75rem;
+}
+
+.now-carousel.js-enabled .now-item.is-active {
+  display: block;
+}
+
+.now-carousel.js-enabled .now-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.now-nav {
+  background: none;
+  border: 1px solid #ddd;
+  color: #555;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0.25rem 0.6rem;
+  cursor: pointer;
+  border-radius: 2px;
+  font-family: inherit;
+}
+
+.now-nav:hover {
+  color: #222;
+  border-color: #888;
+}
+
+.now-dots {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.now-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border: 1px solid #bbb;
+  background: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.now-dot.is-active {
+  background: #555;
+  border-color: #555;
+}
+
+.now-dot:hover {
+  border-color: #555;
+}
+
 /* Contact icons */
 .contact-icons {
   display: flex;

assets/js/now-carousel.js

@@ -0,0 +1,62 @@
+(function () {
+  'use strict';
+
+  function initCarousel(root) {
+    var slides = root.querySelectorAll('[data-now-slide]');
+    var dots = root.querySelectorAll('[data-now-dot]');
+    var prev = root.querySelector('[data-now-prev]');
+    var next = root.querySelector('[data-now-next]');
+
+    if (slides.length < 2) {
+      return;
+    }
+
+    root.classList.add('js-enabled');
+
+    var index = 0;
+
+    function show(i) {
+      index = (i + slides.length) % slides.length;
+      for (var s = 0; s < slides.length; s++) {
+        var active = s === index;
+        slides[s].classList.toggle('is-active', active);
+      }
+      for (var d = 0; d < dots.length; d++) {
+        var dotActive = d === index;
+        dots[d].classList.toggle('is-active', dotActive);
+        if (dotActive) {
+          dots[d].setAttribute('aria-current', 'true');
+        } else {
+          dots[d].removeAttribute('aria-current');
+        }
+      }
+    }
+
+    if (prev) {
+      prev.addEventListener('click', function () { show(index - 1); });
+    }
+    if (next) {
+      next.addEventListener('click', function () { show(index + 1); });
+    }
+    for (var d = 0; d < dots.length; d++) {
+      (function (i) {
+        dots[i].addEventListener('click', function () { show(i); });
+      })(d);
+    }
+
+    show(0);
+  }
+
+  function init() {
+    var carousels = document.querySelectorAll('[data-now-carousel]');
+    for (var i = 0; i < carousels.length; i++) {
+      initCarousel(carousels[i]);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

index.md

@@ -13,12 +13,26 @@ I'm Chris Wage. You can call me `cwage`, most people do. Professionally, I'm a s
 
 A current sample of whatever bullshit I'm on:
 
-{% for item in site.data.now %}
-<div class="now-item">
+<div class="now-carousel" data-now-carousel>
+{% if site.data.now.size > 1 %}
+<div class="now-controls" role="group" aria-label="Now carousel navigation">
+<button type="button" class="now-nav now-prev" data-now-prev aria-label="Previous item">&lsaquo;</button>
+<div class="now-dots" data-now-dots>{%- for item in site.data.now reversed %}<button type="button" class="now-dot{% if forloop.first %} is-active{% endif %}" data-now-dot="{{ forloop.index0 }}" aria-label="Go to item {{ forloop.index }}"{% if forloop.first %} aria-current="true"{% endif %}></button>{%- endfor %}</div>
+<button type="button" class="now-nav now-next" data-now-next aria-label="Next item">&rsaquo;</button>
+</div>
+{% endif %}
+<div class="now-slides">
+{% for item in site.data.now reversed %}
+<div class="now-item{% if forloop.first %} is-active{% endif %}" data-now-slide>
+<p><strong><a href="{{ item.url | uri_escape }}">{{ item.title | escape }}</a></strong> <span class="now-meta">{{ item.type | escape }}{% if item.date %} &middot; {{ item.date | date: "%Y-%m-%d" }}{% endif %}</span><br>{{ item.blurb | escape }}</p>
 {% if item.image %}<a href="{{ item.url | uri_escape }}"><img src="{{ item.image | uri_escape }}" alt="{{ item.title | escape }}" class="now-image"></a>{% endif %}
-<p><strong><a href="{{ item.url | uri_escape }}">{{ item.title | escape }}</a></strong> <span class="now-type">{{ item.type | escape }}</span><br>{{ item.blurb | escape }}</p>
 </div>
 {% endfor %}
+</div>
+</div>
+{% if site.data.now.size > 1 %}
+<script src="{{ '/assets/js/now-carousel.js' | relative_url }}" defer></script>
+{% endif %}
 
 <h2 id="elsewhere">Elsewhere</h2>