@sirux/md-press 0.1.0 → 0.2.0

package/src/tasks.js

@@ -4,48 +4,72 @@ written back to the exact line it came from. It scans line by line in
 document order, which is the order the page renders checkboxes, and skips
 frontmatter and fenced code, where "- [ ]" is only text.
 
+The task pattern follows marked, which renders the page: the brackets must be
+followed by a space and then some text, so a bare "- [ ]" is not a task on
+the page and is not one here either. A fence may be indented any amount, so
+code inside nested lists is skipped too.
+
 This scanner is deliberately simple, so it is paired with a safety check:
 the server only allows writing when the number of tasks found here equals the
 number of checkboxes the page rendered. Any layout the scanner misreads turns
 into a read-only page instead of an edit to the wrong line.
+
+The board view (src/board.js) is built on the same line scan, so a card's
+checkbox and the page's checkbox for the same line always agree.
 */
 
-const { frontmatterLength } = require("./frontmatter.js");
+const { frontmatterLength, byteOrderMarkLength } = require("./frontmatter.js");
 
-const taskLinePattern = /^((?:[ \t]*>)*[ \t]*(?:[-*+]|\d{1,9}[.)])[ \t]+\[)([ xX])(\](?:\s|$))/;
-const fenceOpenPattern = /^(?:[ \t]*>)*[ \t]{0,3}(`{3,}|~{3,})/;
+const taskLinePattern = /^((?:[ \t]*>)*[ \t]*(?:[-*+]|\d{1,9}[.)])[ \t]+\[)([ xX])(\] (?=[ \t]*\S))/;
+const fenceOpenPattern = /^(?:[ \t]*>)*[ \t]*(`{3,}|~{3,})/;
 
 /*
-Returns every task line as { lineIndex, checked }. Line indexes count from the
-start of the whole file, frontmatter included, so they can be used to edit it.
+Every line of the Markdown body as { lineIndex, text, inCode }. Line indexes
+count from the start of the whole file, frontmatter included, so they can be
+used to edit it. Fence lines and the lines between them are marked inCode.
+A byte order mark on the first line is left out of that line's text.
 */
-function findTaskLines(sourceText) {
+function bodyLines(sourceText) {
   const lines = sourceText.split("\n");
   const firstBodyLine = sourceText.slice(0, frontmatterLength(sourceText)).split("\n").length - 1;
-  const tasks = [];
+  const markLength = byteOrderMarkLength(sourceText);
+  const result = [];
   let openFence = null;
 
   for (let lineIndex = firstBodyLine; lineIndex < lines.length; lineIndex += 1) {
-    const line = lines[lineIndex];
-    const fenceMatch = line.match(fenceOpenPattern);
+    const text = lineIndex === 0 ? lines[0].slice(markLength) : lines[lineIndex];
+    const fenceMatch = text.match(fenceOpenPattern);
     if (openFence) {
       const closes = fenceMatch
         && fenceMatch[1][0] === openFence[0]
         && fenceMatch[1].length >= openFence.length
-        && line.trim().replace(/^(>\s*)*/, "").replace(/[`~]/g, "") === "";
+        && text.trim().replace(/^(>\s*)*/, "").replace(/[`~]/g, "") === "";
       if (closes) openFence = null;
+      result.push({ lineIndex, text, inCode: true });
       continue;
     }
-    if (fenceMatch) {
-      openFence = fenceMatch[1];
-      continue;
-    }
-    const taskMatch = line.match(taskLinePattern);
-    if (taskMatch) tasks.push({ lineIndex, checked: taskMatch[2] !== " " });
+    if (fenceMatch) openFence = fenceMatch[1];
+    result.push({ lineIndex, text, inCode: Boolean(fenceMatch) });
+  }
+  return result;
+}
+
+/* Returns every task line as { lineIndex, checked }. */
+function findTaskLines(sourceText) {
+  const tasks = [];
+  for (const line of bodyLines(sourceText)) {
+    if (line.inCode) continue;
+    const taskMatch = line.text.match(taskLinePattern);
+    if (taskMatch) tasks.push({ lineIndex: line.lineIndex, checked: taskMatch[2] !== " " });
   }
   return tasks;
 }
 
+/* Returns one task line with its bracket character set. Nothing else changes. */
+function setTaskLineState(lineText, checked) {
+  return lineText.replace(taskLinePattern, (_fullMatch, before, _state, after) => before + (checked ? "x" : " ") + after);
+}
+
 /*
 Returns the source with one task set to checked or unchecked. Only the single
 character between the brackets changes, so spacing, line endings, and every
@@ -56,10 +80,9 @@ function setTaskState(sourceText, taskIndex, checked) {
   const task = tasks[taskIndex];
   if (!task) throw new RangeError(`No task at index ${taskIndex}`);
   const lines = sourceText.split("\n");
-  lines[task.lineIndex] = lines[task.lineIndex].replace(taskLinePattern, (_fullMatch, before, _state, after) => {
-    return before + (checked ? "x" : " ") + after;
-  });
+  const markLength = task.lineIndex === 0 ? byteOrderMarkLength(sourceText) : 0;
+  lines[task.lineIndex] = lines[task.lineIndex].slice(0, markLength) + setTaskLineState(lines[task.lineIndex].slice(markLength), checked);
   return lines.join("\n");
 }
 
-module.exports = { findTaskLines, setTaskState };
+module.exports = { findTaskLines, setTaskState, setTaskLineState, bodyLines, taskLinePattern };

package/src/template/board.css

@@ -0,0 +1,79 @@
+/*
+Board layout on top of the page stylesheet. Columns sit side by side and
+scroll sideways on narrow screens. Cards are quiet paper on the column's
+slightly darker track, with tag colors taken from each tag's name.
+*/
+.board-body { display: flex; flex-direction: column; min-height: 100vh; }
+.board-toolbar { gap: 0.4rem 1rem; padding-left: 1.25rem; padding-right: 1.25rem; }
+.board-title { color: var(--ink); font-size: 1rem; }
+.board-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+.board-filter .tag { cursor: pointer; opacity: 0.55; }
+.board-filter .tag:hover, .board-filter .tag.active { opacity: 1; }
+.board-filter .tag.active { outline: 2px solid hsl(var(--hue) 50% 50%); outline-offset: 1px; }
+.board-link { font: inherit; }
+
+main.board {
+  flex: 1; max-width: none; margin: 0; padding: 1.25rem;
+  display: flex; align-items: flex-start; gap: 1rem;
+  overflow-x: auto; scroll-snap-type: x proximity;
+  font-family: var(--sans); font-size: 0.95rem; line-height: 1.5;
+}
+.column {
+  flex: 0 0 18rem; max-width: 85vw; scroll-snap-align: start;
+  background: var(--code-paper); border-radius: 8px; padding: 0.75rem;
+}
+.column h2 { font-size: 0.95rem; margin: 0 0.25rem 0.6rem; padding: 0; border: 0; display: flex; align-items: baseline; gap: 0.5rem; }
+.column .count { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
+.cards { list-style: none; margin: 0; padding: 0; min-height: 2.5rem; }
+.cards.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }
+.card {
+  position: relative; margin: 0 0 0.5rem; padding: 0.6rem 0.75rem;
+  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
+  cursor: grab; transition: box-shadow 0.15s;
+}
+.card:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
+.card.dragging { opacity: 0.4; cursor: grabbing; }
+.card.hidden { display: none; }
+.card.done .card-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }
+.card-main { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; padding-right: 1.5rem; }
+.card-main input.task { flex: none; margin-top: 0.2em; }
+.card-title code { font-size: 0.85em; }
+.card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
+.tag {
+  --hue: 200;
+  font: 500 0.72rem/1.5 var(--sans); padding: 0 0.5em; border-radius: 999px;
+  color: hsl(var(--hue) 55% 30%); background: hsl(var(--hue) 60% 90%);
+}
+.card-notes { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }
+.card-notes > :last-child { margin-bottom: 0; }
+.card-notes ul, .card-notes ol { padding-left: 1.2em; margin-bottom: 0.4em; }
+.card-notes li.task-item { margin-left: -1.2em; padding-left: 1.6em; }
+.card-notes input.task { pointer-events: none; }
+.card-move { position: absolute; top: 0.45rem; right: 0.5rem; width: 1.4rem; height: 1.4rem; overflow: hidden; border-radius: 4px; opacity: 0; }
+.card:hover .card-move, .card:focus-within .card-move { opacity: 1; }
+.card-move::before { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.9rem; pointer-events: none; }
+.card-move select { width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.add-card { display: flex; gap: 0.4rem; margin-top: 0.25rem; }
+.add-card input {
+  flex: 1; min-width: 0; font: inherit; color: var(--ink); background: transparent;
+  border: 1px solid transparent; border-radius: 6px; padding: 0.35rem 0.5rem;
+}
+.add-card input::placeholder { color: var(--muted); }
+.add-card input:focus { background: var(--paper); border-color: var(--rule); outline: none; }
+.add-card button { font: inherit; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 0.2rem 0.7rem; cursor: pointer; opacity: 0; }
+.add-card:focus-within button { opacity: 1; }
+.board-empty { max-width: 42rem; color: var(--muted); }
+.board-body footer { max-width: none; margin: 0; padding: 1rem 1.25rem 1.5rem; }
+
+@media (prefers-color-scheme: dark) {
+  .tag { color: hsl(var(--hue) 60% 80%); background: hsl(var(--hue) 35% 22%); }
+  .card:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 0.4); }
+}
+@media (hover: none) {
+  .card-move, .add-card button { opacity: 1; }
+}
+@media print {
+  main.board { display: block; }
+  .column { break-inside: avoid; margin-bottom: 1rem; }
+  .card-move, .add-card { display: none; }
+}

package/src/template/board.js

@@ -0,0 +1,236 @@
+/*
+Runs inside the board page from md-press board. Drag a card to another
+column or position, or pick a column from its move menu, and the change is
+written to the Markdown file. Ticking a card's box saves its state. Typing
+in a column's "Add a card" field adds a task line to that column.
+
+Every save carries the file version the page was built from, and the server
+refuses it if the file changed since, so the page reloads instead of
+overwriting someone else's edit. The page also watches the version and
+reloads, keeping its scroll position, whenever the file changes on disk.
+After a successful change the page reloads too, so what it shows is always
+what the file says.
+
+Tag filters live in this tab's session storage so they survive those reloads.
+*/
+(function () {
+  const live = mdPress.live;
+  const statusLabel = document.querySelector(".toolbar-status");
+  const board = document.querySelector("main.board");
+  const scrollKey = "md-press-board-scroll:" + location.pathname;
+  const filterKey = "md-press-board-filter:" + location.pathname;
+  let currentVersion = live.version;
+  let pendingSaves = 0;
+
+  function readStorage(key) {
+    try {
+      return sessionStorage.getItem(key);
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  function writeStorage(key, value) {
+    try {
+      if (value === null) sessionStorage.removeItem(key);
+      else sessionStorage.setItem(key, value);
+    } catch (_error) {
+      return;
+    }
+  }
+
+  function setStatus(text, isError) {
+    statusLabel.textContent = text;
+    statusLabel.classList.toggle("error", Boolean(isError));
+  }
+
+  function reloadKeepingScroll() {
+    writeStorage(scrollKey, JSON.stringify({ x: board.scrollLeft, y: window.scrollY }));
+    location.reload();
+  }
+
+  const savedScroll = readStorage(scrollKey);
+  writeStorage(scrollKey, null);
+  if (savedScroll) {
+    try {
+      const { x, y } = JSON.parse(savedScroll);
+      board.scrollLeft = x;
+      window.scrollTo(0, y);
+    } catch (_error) {
+      // Nothing saved that can be used.
+    }
+  }
+
+  async function save(pathName, payload) {
+    pendingSaves += 1;
+    setStatus("Saving");
+    try {
+      const response = await fetch(pathName, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(Object.assign({ version: currentVersion }, payload)),
+      });
+      if (response.status === 409) {
+        reloadKeepingScroll();
+        return null;
+      }
+      const result = await response.json();
+      if (!response.ok) throw new Error(result.error || ("Save failed with status " + response.status));
+      currentVersion = result.version;
+      setStatus("Saved to " + live.fileName);
+      return result;
+    } catch (error) {
+      setStatus(error.message === "Failed to fetch" ? "Could not save. Is md-press board still running?" : error.message, true);
+      return null;
+    } finally {
+      pendingSaves -= 1;
+    }
+  }
+
+  function setupCheckboxes() {
+    document.querySelectorAll(".card > .card-main > input.task").forEach(function (checkbox) {
+      checkbox.addEventListener("change", async function () {
+        const card = checkbox.closest(".card");
+        const result = await save("/api/task", { index: Number(card.dataset.task), checked: checkbox.checked });
+        if (result) card.classList.toggle("done", checkbox.checked);
+        else checkbox.checked = !checkbox.checked;
+      });
+    });
+  }
+
+  function positionOf(card) {
+    return { column: Number(card.parentElement.dataset.column), index: Array.from(card.parentElement.children).indexOf(card) };
+  }
+
+  async function moveCard(card, from, to) {
+    if (from.column === to.column && from.index === to.index) return;
+    const result = await save("/api/board", { action: "move", from: from, to: to });
+    if (result) reloadKeepingScroll();
+  }
+
+  function setupDragAndDrop() {
+    let dragged = null;
+    let origin = null;
+
+    document.querySelectorAll(".card").forEach(function (card) {
+      card.addEventListener("dragstart", function (event) {
+        dragged = card;
+        origin = { column: Number(card.dataset.column), index: Number(card.dataset.index) };
+        card.classList.add("dragging");
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", card.querySelector(".card-title").textContent);
+      });
+      card.addEventListener("dragend", function () {
+        card.classList.remove("dragging");
+        document.querySelectorAll(".cards.drop-target").forEach(function (list) { list.classList.remove("drop-target"); });
+        dragged = null;
+      });
+    });
+
+    document.querySelectorAll(".cards").forEach(function (list) {
+      list.addEventListener("dragover", function (event) {
+        if (!dragged) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        list.classList.add("drop-target");
+        const cards = Array.from(list.querySelectorAll(":scope > .card:not(.dragging)"));
+        const next = cards.find(function (card) {
+          const box = card.getBoundingClientRect();
+          return event.clientY < box.top + box.height / 2;
+        });
+        if (next) list.insertBefore(dragged, next);
+        else list.appendChild(dragged);
+      });
+      list.addEventListener("dragleave", function (event) {
+        if (!list.contains(event.relatedTarget)) list.classList.remove("drop-target");
+      });
+      list.addEventListener("drop", function (event) {
+        if (!dragged) return;
+        event.preventDefault();
+        list.classList.remove("drop-target");
+        moveCard(dragged, origin, positionOf(dragged));
+      });
+    });
+  }
+
+  function setupMoveMenus() {
+    document.querySelectorAll(".card-move select").forEach(function (select) {
+      select.addEventListener("change", function () {
+        if (select.value === "") return;
+        const from = { column: Number(select.dataset.column), index: Number(select.dataset.index) };
+        moveCard(select.closest(".card"), from, { column: Number(select.value), index: Infinity });
+      });
+    });
+  }
+
+  function setupAddForms() {
+    document.querySelectorAll(".add-card").forEach(function (form) {
+      form.addEventListener("submit", async function (event) {
+        event.preventDefault();
+        const input = form.querySelector("input");
+        const text = input.value.trim();
+        if (!text) return;
+        const result = await save("/api/board", { action: "add", column: Number(form.dataset.column), text: text });
+        if (result) {
+          input.value = "";
+          reloadKeepingScroll();
+        }
+      });
+    });
+  }
+
+  function setupTagFilter() {
+    const chips = Array.from(document.querySelectorAll(".board-filter .tag"));
+    if (chips.length === 0) return;
+    let active = [];
+    try {
+      active = JSON.parse(readStorage(filterKey)) || [];
+    } catch (_error) {
+      active = [];
+    }
+
+    function apply() {
+      chips.forEach(function (chip) { chip.classList.toggle("active", active.indexOf(chip.textContent) !== -1); });
+      document.querySelectorAll(".card").forEach(function (card) {
+        const tags = card.dataset.tags.split(" ");
+        card.classList.toggle("hidden", active.some(function (tag) { return tags.indexOf(tag) === -1; }));
+      });
+      writeStorage(filterKey, active.length ? JSON.stringify(active) : null);
+    }
+
+    chips.forEach(function (chip) {
+      chip.setAttribute("role", "button");
+      chip.tabIndex = 0;
+      function toggle() {
+        const tag = chip.textContent;
+        active = active.indexOf(tag) === -1 ? active.concat(tag) : active.filter(function (item) { return item !== tag; });
+        apply();
+      }
+      chip.addEventListener("click", toggle);
+      chip.addEventListener("keydown", function (event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          toggle();
+        }
+      });
+    });
+    apply();
+  }
+
+  setInterval(async function () {
+    if (pendingSaves > 0) return;
+    try {
+      const response = await fetch("/api/version", { cache: "no-store" });
+      const { version } = await response.json();
+      if (version !== currentVersion) reloadKeepingScroll();
+    } catch (_error) {
+      setStatus("Server stopped. Run md-press board again to keep saving.", true);
+    }
+  }, 1500);
+
+  setupCheckboxes();
+  setupDragAndDrop();
+  setupMoveMenus();
+  setupAddForms();
+  setupTagFilter();
+})();

package/src/template/page.css

@@ -2,7 +2,7 @@
 One quiet reading page. Cool paper and slate ink, a single deep teal accent,
 serif body for long reading and system sans for structure. The toolbar, with
 checklist progress and live status, is the only element that sits on top of
-the page.
+the page. Callouts and code use the same small palette as the highlighter.
 */
 :root {
   --paper: #f6f7f9;
@@ -13,6 +13,11 @@ the page.
   --code-paper: #eceff4;
   --mark: #d7eeee;
   --danger: #b3261e;
+  --blue: #0b5cad;
+  --green: #2e7d32;
+  --purple: #7a3fb0;
+  --orange: #b25b00;
+  --red: #b3261e;
   --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
   --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
@@ -31,6 +36,11 @@ the page.
     --code-paper: #1c2029;
     --mark: #1d3a3c;
     --danger: #f28b82;
+    --blue: #7fb8f5;
+    --green: #8fd694;
+    --purple: #c79bf2;
+    --orange: #f0b36b;
+    --red: #f28b82;
   }
 }
 *, *::before, *::after { box-sizing: inherit; }
@@ -41,9 +51,9 @@ body {
   font: 1.0625rem/1.7 var(--serif);
   -webkit-text-size-adjust: 100%;
 }
-main { max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.25rem 2rem; }
+main { max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.25rem 2rem; overflow-wrap: break-word; }
 
-h1, h2, h3, h4, h5, h6 { font-family: var(--sans); line-height: 1.25; margin: 2.2em 0 0.6em; letter-spacing: -0.01em; }
+h1, h2, h3, h4, h5, h6 { font-family: var(--sans); line-height: 1.25; margin: 2.2em 0 0.6em; letter-spacing: -0.01em; scroll-margin-top: 3.25rem; }
 h1 { font-size: 2.1rem; margin-top: 0; font-weight: 700; }
 h2 { font-size: 1.45rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--rule); }
 h3 { font-size: 1.15rem; }
@@ -57,25 +67,52 @@ strong { font-weight: 700; }
 mark { background: var(--mark); color: inherit; padding: 0 0.15em; }
 hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
 img { max-width: 100%; height: auto; }
+summary { cursor: pointer; }
 
 ul, ol { padding-left: 1.4em; }
 li + li { margin-top: 0.25em; }
-li:has(> input.task) { list-style: none; margin-left: -1.4em; padding-left: 1.9em; text-indent: -1.9em; }
-input.task { width: 1.05em; height: 1.05em; margin: 0 0.75em 0 0; vertical-align: -0.12em; accent-color: var(--accent); cursor: pointer; text-indent: 0; }
+li.task-item { list-style: none; position: relative; margin-left: -1.4em; padding-left: 1.9em; }
+li.task-item > input.task, li.task-item > p:first-child > input.task { position: absolute; left: 0; top: 0.33em; margin: 0; }
+input.task { width: 1.05em; height: 1.05em; accent-color: var(--accent); cursor: pointer; }
+input.task:disabled { cursor: default; }
 li.done { color: var(--muted); }
 
 blockquote { margin-left: 0; padding: 0.1em 0 0.1em 1.1em; border-left: 3px solid var(--accent); color: var(--muted); }
 
+.callout { --callout: var(--accent); margin: 0 0 1.1em; padding: 0.7em 1.1em; border-left: 3px solid var(--callout); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--callout) 9%, transparent); }
+.callout > :last-child { margin-bottom: 0; }
+.callout-title { margin: 0 0 0.25em; font: 600 0.9rem/1.5 var(--sans); color: var(--callout); }
+.callout-note { --callout: var(--blue); }
+.callout-tip { --callout: var(--green); }
+.callout-important { --callout: var(--purple); }
+.callout-warning { --callout: var(--orange); }
+.callout-caution { --callout: var(--red); }
+
 kbd { font: 0.82em var(--mono); padding: 0.1em 0.45em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: var(--code-paper); }
 code { font: 0.88em var(--mono); background: var(--code-paper); padding: 0.12em 0.35em; border-radius: 4px; }
 pre { position: relative; background: var(--code-paper); border-radius: 6px; padding: 1em 1.1em; overflow-x: auto; line-height: 1.5; }
 pre code { background: none; padding: 0; font-size: 0.85rem; }
 pre[data-language]::after { content: attr(data-language); position: absolute; top: 0.4em; right: 0.7em; font: 0.72rem var(--sans); color: var(--muted); }
 pre.mermaid { background: none; text-align: center; font-family: var(--sans); }
+.copy-code { position: absolute; top: 0.35em; right: 0.6em; font: 0.72rem var(--sans); color: var(--muted); background: var(--code-paper); border: 1px solid var(--rule); border-radius: 4px; padding: 0.1em 0.5em; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
+.copy-code:hover, .copy-code:focus-visible { color: var(--ink); }
+pre:hover .copy-code, pre:focus-within .copy-code, .copy-code.copied { opacity: 1; }
+@media (hover: none) {
+  .copy-code { opacity: 1; }
+  pre[data-language]::after { display: none; }
+}
 
 table { display: block; overflow-x: auto; border-collapse: collapse; font: 0.95rem/1.5 var(--sans); }
 th, td { padding: 0.5em 0.9em; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
 th { font-weight: 600; border-bottom-width: 2px; }
+th[align="center"], td[align="center"] { text-align: center; }
+th[align="right"], td[align="right"] { text-align: right; }
+
+.footnotes { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--muted); }
+.footnotes ol { padding-left: 1.4em; }
+a[data-footnote-ref] { font: 0.75em var(--sans); text-decoration: none; padding: 0 0.1em; }
+a[data-footnote-backref] { text-decoration: none; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
 .progress {
   position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1;
@@ -90,28 +127,23 @@ th { font-weight: 600; border-bottom-width: 2px; }
 .progress-reset:hover { color: var(--ink); }
 .toolbar-status { margin-left: auto; }
 .toolbar-status.error { color: var(--danger); }
-input.task:disabled { cursor: default; }
 
 footer { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; font: 0.8rem var(--sans); color: var(--muted); border-top: 1px solid var(--rule); }
 
 .hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal { color: #7a3fb0; }
-.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-addition { color: #2e7d32; }
-.hljs-number, .hljs-symbol, .hljs-variable, .hljs-template-variable { color: #b25b00; }
-.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #0b5cad; }
-.hljs-type, .hljs-meta, .hljs-deletion { color: #b3261e; }
-@media (prefers-color-scheme: dark) {
-  .hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal { color: #c79bf2; }
-  .hljs-string, .hljs-attr, .hljs-template-tag, .hljs-addition { color: #8fd694; }
-  .hljs-number, .hljs-symbol, .hljs-variable, .hljs-template-variable { color: #f0b36b; }
-  .hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #7fb8f5; }
-  .hljs-type, .hljs-meta, .hljs-deletion { color: #f28b82; }
-}
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal { color: var(--purple); }
+.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-addition { color: var(--green); }
+.hljs-number, .hljs-symbol, .hljs-variable, .hljs-template-variable { color: var(--orange); }
+.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--blue); }
+.hljs-type, .hljs-meta, .hljs-deletion { color: var(--red); }
 
-@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }
+@media (prefers-reduced-motion: reduce) { .progress-fill, .copy-code { transition: none; } }
 @media print {
-  .progress { display: none; }
+  .progress, .copy-code { display: none; }
   body { background: #fff; color: #000; }
   main { padding-top: 0; }
   a { color: inherit; }
+  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+  pre, table, blockquote, .callout, img { break-inside: avoid; }
+  h1, h2, h3, h4, h5, h6 { break-after: avoid; }
 }

package/src/template/page.js

@@ -1,7 +1,9 @@
 /*
-Runs inside every page that has a checklist, and inside every served page.
-The build step defines mdPress before this script: a storage key, plus a live
-object when the page comes from md-press serve.
+Runs inside every page that has a checklist or a code block, and inside every
+served page. The build step defines mdPress before this script: a storage
+key, plus a live object when the page comes from md-press serve.
+
+Code blocks get a Copy button. Checkboxes get labels and a progress bar.
 
 A built page is static, so checkbox state is saved in this browser only, keyed
 by label text (plus a counter for duplicate labels) so edits to the file do
@@ -41,16 +43,57 @@ storage call fails quietly: the page still works, it just forgets more.
     }
   }
 
+  function itemFor(checkbox) {
+    return checkbox.closest("li") || checkbox.parentElement;
+  }
+
+  /*
+  The item's own text, without any nested list, so renaming a sub-item does
+  not reset the parent's saved state.
+  */
+  function labelFor(checkbox) {
+    const item = itemFor(checkbox);
+    let text = "";
+    Array.from(item.childNodes).forEach(function (node) {
+      if (node.nodeName !== "UL" && node.nodeName !== "OL") text += node.textContent;
+    });
+    return text.trim().replace(/\s+/g, " ");
+  }
+
   function updateProgress() {
     if (!progressFill || checkboxes.length === 0) return;
     const doneCount = checkboxes.filter(function (checkbox) { return checkbox.checked; }).length;
-    checkboxes.forEach(function (checkbox) { checkbox.parentElement.classList.toggle("done", checkbox.checked); });
+    checkboxes.forEach(function (checkbox) { itemFor(checkbox).classList.toggle("done", checkbox.checked); });
     progressFill.style.width = (doneCount / checkboxes.length * 100) + "%";
     progressLabel.textContent = doneCount + " of " + checkboxes.length + " done";
   }
 
-  function labelFor(checkbox) {
-    return checkbox.parentElement.textContent.trim().replace(/\s+/g, " ");
+  function setupCopyButtons() {
+    document.querySelectorAll("pre > code").forEach(function (code) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "copy-code";
+      button.textContent = "Copy";
+      button.setAttribute("aria-label", "Copy code");
+      button.addEventListener("click", async function () {
+        try {
+          await navigator.clipboard.writeText(code.textContent);
+          button.textContent = "Copied";
+        } catch (_error) {
+          const range = document.createRange();
+          range.selectNodeContents(code);
+          getSelection().removeAllRanges();
+          getSelection().addRange(range);
+          button.textContent = "Selected, press copy";
+        }
+        button.classList.add("copied");
+        setTimeout(function () {
+          button.textContent = "Copy";
+          button.classList.remove("copied");
+        }, 1500);
+      });
+      code.parentElement.appendChild(button);
+    });
   }
 
   function setupStoredChecklist() {
@@ -160,8 +203,9 @@ storage call fails quietly: the page still works, it just forgets more.
     }, 1500);
   }
 
+  setupCopyButtons();
   checkboxes.forEach(function (checkbox) { checkbox.setAttribute("aria-label", labelFor(checkbox)); });
   if (mdPress.live) setupLiveFile();
-  else setupStoredChecklist();
+  else if (checkboxes.length > 0) setupStoredChecklist();
   updateProgress();
 })();