Allow checking off tasks from rendered pages

assets/page.html

@@ -11,6 +11,7 @@
 <script src="/_/content.js"></script>
 <script src="/_/anchors.js"></script>
 <script src="/_/toc.js"></script>
+<script src="/_/tasks.js"></script>
 {{end}}
 {{if .Content}}
 <script src="/_/sections.js"></script>

assets/style.css

@@ -439,6 +439,12 @@ textarea {
     font-size: 0.85rem;
 }
 
+/* === Task lists === */
+.content li:has(> input.task-checkbox:checked) {
+    color: var(--text-muted);
+    text-decoration: line-through;
+}
+
 /* === Photo grid === */
 .photo-grid {
     display: grid;

assets/tasks.js

@@ -0,0 +1,24 @@
+(function () {
+    document.querySelectorAll('input.task-checkbox[data-task-index]').forEach(function (cb) {
+        cb.addEventListener('change', function () {
+            var idx = cb.dataset.taskIndex;
+            var checked = cb.checked;
+            cb.disabled = true;
+            fetch(window.location.pathname + '?toggle=' + idx, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: 'checked=' + checked
+            }).then(function (res) {
+                if (!res.ok) {
+                    cb.checked = !checked;
+                    alert('Failed to save task state (' + res.status + ')');
+                }
+            }).catch(function () {
+                cb.checked = !checked;
+                alert('Failed to save task state');
+            }).finally(function () {
+                cb.disabled = false;
+            });
+        });
+    });
+})();