npm - @makerclay/core - Versions diffs - 1.0.0 - Mend

@makerclay/core 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/LICENSE +221 -0
package/README.md +82 -0
package/package.json +52 -0
package/src/admin/listing.js +149 -0
package/src/admin/routes.js +362 -0
package/src/attic.js +168 -0
package/src/auth/can.js +79 -0
package/src/auth/csrf.js +74 -0
package/src/auth/none.js +24 -0
package/src/auth/password.js +281 -0
package/src/auth/passwords.js +79 -0
package/src/auth/rate-limit.js +66 -0
package/src/auth/sessions.js +86 -0
package/src/auth/token-lanes.js +72 -0
package/src/boot.js +120 -0
package/src/client.js +99 -0
package/src/collections/index.js +397 -0
package/src/collections/routes.js +166 -0
package/src/create-host.js +351 -0
package/src/derived/data-extractor.js +22 -0
package/src/derived/index.js +121 -0
package/src/documents/format-html.js +313 -0
package/src/documents/replace.js +257 -0
package/src/documents/root-attrs.js +171 -0
package/src/documents/serve.js +137 -0
package/src/documents/stale.js +20 -0
package/src/index.js +12 -0
package/src/inspect.js +136 -0
package/src/json-errors.js +59 -0
package/src/livesync.js +75 -0
package/src/nodes/identity.js +14 -0
package/src/nodes/names.js +57 -0
package/src/nodes/ops.js +613 -0
package/src/nodes/scanner.js +321 -0
package/src/nodes/store.js +111 -0
package/src/pages.js +166 -0
package/src/paths.js +302 -0
package/src/recovery/overlay.js +327 -0
package/src/recovery/replay.js +236 -0
package/src/recovery-ui.js +185 -0
package/src/recovery.js +30 -0
package/src/requests.js +73 -0
package/src/routes/meta.js +62 -0
package/src/routes/read.js +105 -0
package/src/routes/save.js +102 -0
package/src/routes/sync.js +118 -0
package/src/routes/upload.js +128 -0
package/src/share/index.js +207 -0
package/src/share/save-tokens.js +65 -0
package/src/spec/codes.js +42 -0
package/src/spec/meta.js +52 -0
package/src/spec/wire.js +115 -0
package/src/store/index.js +29 -0
package/src/store/migrations/001-init.sql +114 -0
package/src/store/sqlite.js +540 -0
package/src/templates.js +50 -0
package/src/tenants/index.js +355 -0
package/src/tenants/isolation.js +91 -0
package/src/tenants/routes.js +131 -0
package/src/ui.js +95 -0
package/src/util/cookies.js +26 -0
package/src/util/express.js +8 -0
package/src/util/fsx.js +205 -0
package/src/util/id.js +37 -0
package/src/util/lockfile.js +52 -0
package/src/util/locks.js +35 -0
package/src/util/multipart.js +33 -0
package/src/versions/files.js +307 -0
package/src/versions/index.js +16 -0
package/src/versions/naming.js +172 -0
package/src/versions/routes.js +91 -0
package/src/wire-compat.js +61 -0
package/ui/app.css +164 -0
package/ui/attic.html +198 -0
package/ui/dashboard.html +456 -0
package/ui/editor.html +156 -0
package/ui/error.html +18 -0
package/ui/login.html +58 -0
package/ui/records.html +173 -0
package/ui/recovery.html +152 -0
package/ui/setup.html +61 -0
package/ui/share-qr.html +44 -0
package/ui/templates/blank.html +16 -0
package/ui/templates/devlog.html +71 -0
package/ui/templates/hackable-dashboard.html +145 -0
package/ui/templates/kanban.html +85 -0
package/ui/templates/landing.html +108 -0
package/ui/templates/writer.html +50 -0
package/ui/tenants.html +172 -0
package/ui/trash.html +134 -0
package/ui/versions.html +114 -0

package/ui/login.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}} · makerclay</title>
+<link rel="stylesheet" href="/_/ui.css">
+</head>
+<body>
+<main class="narrow">
+  <div class="card">
+    <h1 style="margin:0 0 .25rem;font-size:1.3rem">Sign in</h1>
+    <p class="hint" style="margin-bottom:1rem">This server has one owner. That's you.</p>
+    <form id="form" method="post" action="{{action}}">
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" autocomplete="current-password" autofocus required>
+      <p class="hint" id="error" style="color:var(--danger)"></p>
+      <button class="primary" style="width:100%;margin-top:.9rem" type="submit">Sign in</button>
+    </form>
+    <p class="hint" style="margin-top:1.4rem">
+      Forgotten it? Run <code>makerclay reset-password</code> on the machine this
+      server is running on. Physical access is the only way back in, because
+      there is no email here to send a link to.
+    </p>
+  </div>
+</main>
+<script>
+const form = document.getElementById('form');
+const error = document.getElementById('error');
+const next = new URLSearchParams(location.search).get('next');
+form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  error.textContent = '';
+  const button = form.querySelector('button');
+  button.disabled = true;
+  try {
+    const res = await fetch(form.action, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+      body: JSON.stringify({ password: form.password.value, next }),
+    });
+    const body = await res.json();
+    if (!res.ok) throw new Error(body.msg || 'That did not work.');
+    location.href = body.redirect || '/_/';
+  } catch (problem) {
+    error.textContent = problem.message;
+    form.password.select();
+  } finally {
+    button.disabled = false;
+  }
+});
+</script>
+</body>
+</html>

package/ui/records.html ADDED Viewed

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}}</title>
+<link rel="stylesheet" href="/_/ui.css">
+<style>
+  td.data { font-size: .9rem; }
+  td.data dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0; }
+  td.data dt { color: var(--muted); font-size: .82rem; }
+  td.data dd { margin: 0; overflow-wrap: anywhere; }
+</style>
+</head>
+<body data-slug="{{slug}}">
+<header class="bar">
+  <a class="btn" href="/_/" title="Back to your files">←</a>
+  <span class="brand">Submissions</span>
+  <code id="slug" style="color:var(--muted)"></code>
+  <span class="spacer"></span>
+  <button id="accepting"></button>
+  <button id="download">Download as JSON</button>
+</header>
+<main class="wrap">
+  <table>
+    <thead>
+      <tr><th>What was sent</th><th class="num">When</th><th class="actions">Actions</th></tr>
+    </thead>
+    <tbody id="rows"></tbody>
+  </table>
+  <div class="empty" id="empty" hidden>Nothing has been submitted yet.</div>
+  <p class="hint" style="margin-top:1.5rem">
+    Submissions are JSON files in <code>records/</code>, next to your documents, and
+    they are backed up by <code>makerclay export</code> like everything else.
+    Deleting one moves it to the trash; it can come back.
+  </p>
+</main>
+<div class="toast" id="toast"></div>
+<script>
+const slug = document.body.dataset.slug;
+const rows = document.getElementById('rows');
+const empty = document.getElementById('empty');
+const toastEl = document.getElementById('toast');
+document.getElementById('slug').textContent = slug;
+let records = [];
+let accepting = true;
+function toast(message, isError) {
+  toastEl.textContent = message;
+  toastEl.className = 'toast show' + (isError ? ' error' : '');
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => { toastEl.className = 'toast'; }, 2600);
+}
+async function api(path, body, method) {
+  const res = await fetch(path, {
+    method: method || (body ? 'POST' : 'GET'),
+    headers: body ? { 'Content-Type': 'application/json', Accept: 'application/json' }
+                  : { Accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const parsed = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(parsed.msg || res.statusText);
+  return parsed;
+}
+// Whatever the form sent, rendered as text. Never as HTML: this is the one page
+// on the host that displays bytes a stranger typed.
+function fields(data) {
+  const list = document.createElement('dl');
+  for (const [key, value] of Object.entries(data || {})) {
+    const dt = document.createElement('dt');
+    dt.textContent = key;
+    const dd = document.createElement('dd');
+    dd.textContent = typeof value === 'string' ? value : JSON.stringify(value);
+    list.append(dt, dd);
+  }
+  return list.children.length ? list : Object.assign(document.createElement('span'),
+    { className: 'hint', textContent: '(empty)' });
+}
+function drawRow(record) {
+  const tr = document.createElement('tr');
+  const data = document.createElement('td');
+  data.className = 'data';
+  data.append(fields(record.data));
+  if (record.codeMissing) {
+    data.insertAdjacentHTML('beforeend',
+      '<span class="tag private">locked: its code is not in the database</span>');
+  } else if (record.hasCode) {
+    data.insertAdjacentHTML('beforeend', '<span class="tag">editable by its sender</span>');
+  }
+  tr.appendChild(data);
+  const when = document.createElement('td');
+  when.className = 'num';
+  when.textContent = new Date(record.updatedAt).toLocaleString();
+  tr.appendChild(when);
+  const actions = document.createElement('td');
+  actions.className = 'actions';
+  const remove = document.createElement('button');
+  remove.textContent = 'Delete';
+  remove.className = 'danger';
+  remove.addEventListener('click', () => run(
+    () => api(`/_/collection/${slug}/records/${encodeURIComponent(record.key)}`, null, 'DELETE'),
+    'Moved to the trash',
+  ));
+  actions.appendChild(remove);
+  tr.appendChild(actions);
+  return tr;
+}
+async function load() {
+  try {
+    const body = await api(`/_/collection/${slug}/records`);
+    records = body.records;
+    accepting = body.accepting;
+    drawAccepting();
+    rows.replaceChildren(...records.map(drawRow));
+    empty.hidden = records.length > 0;
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+async function run(work, message) {
+  try {
+    await work();
+    toast(message);
+    load();
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+}
+const acceptingButton = document.getElementById('accepting');
+function drawAccepting() {
+  acceptingButton.textContent = accepting ? 'Accepting submissions' : 'Closed to submissions';
+  acceptingButton.className = accepting ? 'primary' : '';
+}
+acceptingButton.addEventListener('click', async () => {
+  try {
+    const body = await api(`/_/collection/${slug}/accepting`, { accepting: !accepting });
+    accepting = body.accepting;
+    drawAccepting();
+    toast(accepting ? 'Open again' : 'Closed. Existing submissions are untouched.');
+  } catch (problem) {
+    toast(problem.message, true);
+  }
+});
+document.getElementById('download').addEventListener('click', () => {
+  const blob = new Blob([JSON.stringify(records, null, 2)], { type: 'application/json' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `${slug}.json`;
+  link.click();
+  URL.revokeObjectURL(link.href);
+});
+drawAccepting();
+load();
+</script>
+</body>
+</html>

package/ui/recovery.html ADDED Viewed

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Recovery · makerclay</title>
+<style>
+  :root { --bg:#fbfaf8; --panel:#fff; --ink:#1c1b19; --muted:#6b6862; --line:#e3dfd8;
+          --accent:#9a5b28; --danger:#a3342a; color-scheme: light dark; }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg:#171614; --panel:#1f1e1b; --ink:#ece8e1; --muted:#9b968d; --line:#322f2a;
+            --accent:#d98b4a; --danger:#e07a6c; }
+  }
+  * { box-sizing: border-box; }
+  body { margin:0; background:var(--bg); color:var(--ink);
+         font:15px/1.55 ui-sans-serif, system-ui, sans-serif; }
+  .wrap { max-width:52rem; margin:0 auto; padding:2.5rem 1.25rem 5rem; }
+  h1 { font-size:1.4rem; margin:0 0 .3rem; }
+  h2 { font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
+       margin:2.2rem 0 .6rem; }
+  code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.92em; }
+  .banner { border:1px solid var(--danger); border-radius:8px; padding:.9rem 1rem;
+            background:color-mix(in oklab, var(--danger) 10%, transparent); }
+  .banner p { margin:.4rem 0 0; }
+  .card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1rem; }
+  table { width:100%; border-collapse:collapse; }
+  th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); }
+  th { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
+  td.num { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
+  a { color:var(--accent); }
+  .files { max-height:22rem; overflow:auto; }
+  .hint { color:var(--muted); font-size:.88rem; }
+  pre { background:var(--panel); border:1px solid var(--line); border-radius:8px;
+        padding:.8rem; overflow:auto; max-height:18rem; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="banner">
+    <h1>makerclay is in recovery mode</h1>
+    <p>It is not serving any documents. The reason it gives is
+       <code id="reason">{{reason}}</code>.</p>
+    <p>Your files were never the database. They are still ordinary HTML on disk at
+       <code>{{data}}</code>, and you can take them with you from this page.</p>
+  </div>
+  <h2>What it found</h2>
+  <div class="card" id="report">Reading…</div>
+  <h2>Take a copy</h2>
+  <div class="card">
+    <p style="margin-top:0" id="artifacts"></p>
+    <p class="hint">For one archive of everything, stop the server and run
+       <code>makerclay export</code>. It refuses to run while this process holds the
+       lock, because an archive taken mid-write can capture a half-applied change.</p>
+  </div>
+  <h2>Every file on disk</h2>
+  <div class="card files" id="tree">Reading…</div>
+  <h2>What to do next</h2>
+  <div class="card">
+    <p style="margin-top:0">Run <code>makerclay doctor</code> in a terminal. It prints a
+       repair plan and changes nothing on its own.</p>
+    <p class="hint">This page opens only with the key printed in the server's own console,
+       and every link here downloads bytes rather than opening them. Nothing on it
+       writes anything.</p>
+  </div>
+</div>
+<script>
+const bytes = (n) => n == null ? '' : n < 1024 ? n + ' B'
+  : n < 1048576 ? (n / 1024).toFixed(1) + ' KB' : (n / 1048576).toFixed(1) + ' MB';
+// The key that got this page open is the key everything on it uses. It is in
+// the address bar because a download link cannot carry a header.
+const key = new URLSearchParams(location.search).get('key') || '';
+const withKey = (url) => url + (url.includes('?') ? '&' : '?') + 'key=' + encodeURIComponent(key);
+async function load() {
+  const report = await fetch(withKey('/_/recover/report')).then(r => r.json());
+  const rows = [
+    ['state', report.state + (report.reason ? ' (' + report.reason + ')' : '')],
+    ['documents indexed', report.counts.nodes ?? report.counts.error],
+    ['in the trash', report.counts.trash ?? ''],
+    ['unfinished operations', report.counts.operations ?? ''],
+    ['durable records', report.records],
+    ['database', Array.isArray(report.integrity) ? report.integrity.join('; ') : report.integrity.error],
+  ];
+  const table = document.createElement('table');
+  for (const [label, value] of rows) {
+    const tr = document.createElement('tr');
+    const th = document.createElement('th'); th.textContent = label;
+    const td = document.createElement('td'); td.textContent = String(value);
+    tr.append(th, td); table.append(tr);
+  }
+  const box = document.getElementById('report');
+  box.replaceChildren(table);
+  if (report.error) {
+    const pre = document.createElement('pre');
+    pre.textContent = report.error;
+    box.append(pre);
+  }
+  if (report.operations && report.operations.length) {
+    const pre = document.createElement('pre');
+    pre.textContent = report.operations.map(op => op.kind + ' ' + JSON.stringify(op.payload)).join('\n');
+    box.append(pre);
+  }
+  const links = report.artifacts.filter(a => a.exists).map(a => {
+    const link = document.createElement('a');
+    link.href = withKey('/_/recover/raw?path=' + encodeURIComponent(a.key));
+    link.textContent = a.name + ' (' + bytes(a.size) + ')';
+    return link;
+  });
+  const holder = document.getElementById('artifacts');
+  holder.replaceChildren(...links.flatMap((link, i) => i ? [document.createTextNode(' · '), link] : [link]));
+  const { trees } = await fetch(withKey('/_/recover/tree')).then(r => r.json());
+  const files = document.createElement('table');
+  for (const tree of trees) {
+    for (const file of tree.files) {
+      const tr = document.createElement('tr');
+      const name = document.createElement('td');
+      const link = document.createElement('a');
+      link.href = withKey('/_/recover/raw?path=' + encodeURIComponent(file.path));
+      link.textContent = file.path;
+      link.className = 'mono';
+      name.append(link);
+      const size = document.createElement('td');
+      size.className = 'num';
+      size.textContent = bytes(file.size);
+      tr.append(name, size);
+      files.append(tr);
+    }
+  }
+  document.getElementById('tree').replaceChildren(
+    files.rows.length ? files : Object.assign(document.createElement('p'),
+      { className: 'hint', textContent: 'No files found on disk.' }),
+  );
+}
+load().catch((problem) => {
+  document.getElementById('report').textContent = 'Could not read the report: ' + problem.message;
+});
+</script>
+</body>
+</html>

package/ui/setup.html ADDED Viewed

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}} · makerclay</title>
+<link rel="stylesheet" href="/_/ui.css">
+</head>
+<body>
+<main class="narrow">
+  <div class="card">
+    <h1 style="margin:0 0 .25rem;font-size:1.3rem">{{title}}</h1>
+    <p class="hint" style="margin-bottom:1rem">
+      Paste the key printed in the terminal, then choose a password. The key is
+      what stops anyone else claiming this server before you get to it.
+    </p>
+    <form id="form" method="post" action="{{action}}">
+      <label for="key">Key from the terminal</label>
+      <input id="key" name="key" type="text" class="mono" value="{{key}}" autocomplete="off"
+             spellcheck="false" required>
+      <label for="password">Choose a password</label>
+      <input id="password" name="password" type="password" autocomplete="new-password"
+             minlength="8" required>
+      <p class="hint">At least 8 characters. Write it down: there is no reset email.</p>
+      <p class="hint" id="error" style="color:var(--danger)"></p>
+      <button class="primary" style="width:100%;margin-top:.9rem" type="submit">Save and continue</button>
+    </form>
+  </div>
+</main>
+<script>
+const form = document.getElementById('form');
+const error = document.getElementById('error');
+if (form.key.value) form.password.focus(); else form.key.focus();
+form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  error.textContent = '';
+  const button = form.querySelector('button');
+  button.disabled = true;
+  try {
+    const res = await fetch(form.action, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+      body: JSON.stringify({ key: form.key.value.trim(), password: form.password.value }),
+    });
+    const body = await res.json();
+    if (!res.ok) throw new Error(body.msg || 'That did not work.');
+    location.href = body.redirect || '/_/';
+  } catch (problem) {
+    error.textContent = problem.message;
+  } finally {
+    button.disabled = false;
+  }
+});
+</script>
+</body>
+</html>

package/ui/share-qr.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}} · makerclay</title>
+<link rel="stylesheet" href="/_/ui.css">
+<style>
+  .qr { display: grid; place-items: center; padding: 1rem; background: #fff; border-radius: var(--radius); }
+  .qr svg { width: min(60vw, 15rem); height: auto; display: block; }
+  .link { word-break: break-all; margin-top: 1rem; }
+  @media print { header.bar, .noprint { display: none } }
+</style>
+</head>
+<body>
+<main class="narrow">
+  <div class="card" style="text-align:center">
+    <h1 style="margin:0 0 .2rem;font-size:1.2rem">{{name}}</h1>
+    <p class="hint" style="margin:0 0 1rem">Anyone with this link can {{grant}} it.</p>
+    <div class="qr">{{{qr}}}</div>
+    <p class="link mono">{{url}}</p>
+    <div class="row noprint" style="justify-content:center;margin-top:1rem">
+      <button id="copy">Copy link</button>
+      <button onclick="print()">Print</button>
+    </div>
+    <p class="hint noprint" style="margin-top:1rem">
+      This is the only page that shows the link in full. The server keeps a hash
+      of it, so it cannot show it to you again: mint a new link if you lose it.
+    </p>
+  </div>
+</main>
+<script>
+document.getElementById('copy').addEventListener('click', async (event) => {
+  await navigator.clipboard.writeText(document.querySelector('.link').textContent.trim());
+  event.target.textContent = 'Copied';
+  setTimeout(() => { event.target.textContent = 'Copy link'; }, 1500);
+});
+</script>
+</body>
+</html>

package/ui/templates/blank.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Untitled</title>
+  <script src="/_/clay.js"></script>
+  <style>
+    body { font: 16px/1.6 system-ui, sans-serif; max-width: 40rem; margin: 4rem auto; padding: 0 1rem; }
+  </style>
+</head>
+<body>
+  <h1 contenteditable>Untitled</h1>
+  <p contenteditable>Click Edit, change anything, then save. The file you are reading is the database.</p>
+</body>
+</html>

package/ui/templates/devlog.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Devlog</title>
+  <script src="/_/clay.js?plugins=undo"></script>
+  <style>
+    :root { color-scheme: light dark; --ink: #1b1b1f; --paper: #fbfaf8; --line: #e2e1dd;
+            --muted: #75746e; --accent: #b0562a; }
+    @media (prefers-color-scheme: dark) {
+      :root { --ink: #e9e8e4; --paper: #141416; --line: #2b2b30; --muted: #98968f; --accent: #d98b4a; }
+    }
+    body { font: 16px/1.65 system-ui, sans-serif; color: var(--ink); background: var(--paper);
+           max-width: 42rem; margin: 0 auto; padding: 3.5rem 1.25rem 6rem; }
+    header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.5rem; }
+    h1 { font-size: 1.5rem; margin: 0; }
+    .tagline { color: var(--muted); font-size: .95rem; margin: 0; }
+    entry, .entry { display: block; border-top: 1px solid var(--line); padding: 1.4rem 0; }
+    .entry:first-of-type { border-top: none; }
+    .when { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
+    .entry h2 { font-size: 1.1rem; margin: .3rem 0 .5rem; }
+    .entry .body { margin: 0; }
+    button { font: inherit; background: none; border: 1px dashed var(--line); color: var(--muted);
+             border-radius: 7px; padding: .5rem .9rem; cursor: pointer; margin-bottom: 2rem; }
+    button:hover { color: var(--ink); border-color: var(--muted); }
+    html[editmode="false"] button { display: none; }
+  </style>
+</head>
+<body>
+<header>
+  <h1 contenteditable>Devlog</h1>
+  <p class="tagline" contenteditable>what changed, and why</p>
+</header>
+<button onclick="addEntry()">+ New entry</button>
+<div id="entries">
+  <article class="entry">
+    <div class="when" contenteditable>Today</div>
+    <h2 contenteditable>Started this log</h2>
+    <div class="body" contenteditable>
+      <p>Newest entry at the top. The date is text, not a timestamp, so you can
+      write “last Tuesday” or “week 3” if that is what you actually mean.</p>
+    </div>
+  </article>
+</div>
+<script>
+  // Written at click time, not at load time: a date computed on every page view
+  // would rewrite the file's meaning every day it is opened.
+  function addEntry() {
+    const entries = document.getElementById('entries');
+    const entry = document.createElement('article');
+    entry.className = 'entry';
+    entry.innerHTML = '<div class="when" contenteditable></div>'
+      + '<h2 contenteditable>Untitled</h2>'
+      + '<div class="body" contenteditable><p>…</p></div>';
+    entry.querySelector('.when').textContent = new Date().toLocaleDateString(undefined, {
+      year: 'numeric', month: 'long', day: 'numeric',
+    });
+    entries.prepend(entry);
+    const heading = entry.querySelector('h2');
+    heading.focus();
+    getSelection().selectAllChildren(heading);
+  }
+</script>
+</body>
+</html>