feat: render index via Mustache template with spine-index-model

2026-06-21 07:38:32 -04:00
parent 67e41ad110
commit 7faf0cd8ac
7 changed files with 722 additions and 124 deletions
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Spine — Direction A (agenda)</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.31.0/iconfont/tabler-icons.min.css" />
+<style>
+  :root {
+    --bg-page: #efeee9; --bg-primary: #ffffff; --bg-secondary: #f5f4ef;
+    --text-primary: #1d1d1b; --text-secondary: #5f5e5a; --text-tertiary: #8a8980;
+    --bg-info: #e6f1fb; --text-info: #0c447c; --border-info: #378add;
+    --bg-warning: #faeeda; --text-warning: #854f0b;
+    --bg-success: #e1f5ee; --text-success: #085041;
+    --border-tertiary: rgba(0,0,0,0.12); --border-secondary: rgba(0,0,0,0.22);
+    --radius-md: 8px; --radius-lg: 12px;
+    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg-page: #161615; --bg-primary: #232321; --bg-secondary: #1c1c1a;
+      --text-primary: #ededeb; --text-secondary: #a8a79f; --text-tertiary: #76756d;
+      --bg-info: #14304a; --text-info: #b5d4f4; --border-info: #378add;
+      --bg-warning: #3a2c12; --text-warning: #fac775;
+      --bg-success: #103a30; --text-success: #9fe1cb;
+      --border-tertiary: rgba(255,255,255,0.14); --border-secondary: rgba(255,255,255,0.24);
+    }
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg-page); color: var(--text-primary);
+         font-family: var(--sans); padding: 28px 16px; }
+  .wrap { max-width: 720px; margin: 0 auto; }
+  .frame { font-family: var(--mono); border: 0.5px solid var(--border-secondary);
+           border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); }
+  .titlebar { display:flex; align-items:center; justify-content:space-between;
+              padding:10px 14px; border-bottom:0.5px solid var(--border-tertiary);
+              background: var(--bg-secondary); font-size:13px; }
+  .group { padding:10px 14px 4px; font-size:11px; letter-spacing:0.04em; color: var(--text-tertiary); }
+  .row { display:flex; align-items:center; gap:10px; padding:5px 14px; font-size:13px; }
+  .glyph { font-size:15px; color:var(--text-tertiary); width:16px; }
+  .pill { padding:1px 7px; border-radius:var(--radius-md); font-size:11px; }
+  .pill.want { background:var(--bg-info); color:var(--text-info); }
+  .pill.reading { background:var(--bg-warning); color:var(--text-warning); }
+  .pill.read { background:var(--bg-success); color:var(--text-success); }
+  .title { flex:1; min-width:0; }
+  .muted { color:var(--text-tertiary); }
+  .tags { color:var(--text-info); font-size:12px; }
+  .trail { color:var(--text-secondary); font-size:12px; }
+  .selected { background:var(--bg-secondary); border-left:2px solid var(--border-info); }
+  .detail { padding:8px 14px 12px 32px; background:var(--bg-secondary);
+            border-left:2px solid var(--border-info); font-size:12.5px; }
+  .logline { display:flex; gap:8px; margin-bottom:5px; }
+  .logdate { color:var(--text-tertiary); white-space:nowrap; }
+  .minibuffer { border-top:0.5px solid var(--border-tertiary); padding:9px 14px;
+                background:var(--bg-secondary); font-size:13px; display:flex; gap:8px; align-items:center; }
+  .caret { opacity:0.5; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="frame">
+    <div class="titlebar">
+      <span style="font-weight:500;">spine · agenda</span>
+      <span class="muted">6 books · 1 reading</span>
+    </div>
+
+    <div class="group">on deck · 3</div>
+    <div class="row">
+      <i class="ti ti-book glyph" aria-hidden="true"></i>
+      <span class="pill want">want</span>
+      <span class="title">Tomorrow, and Tomorrow, and Tomorrow <span class="muted">· Zevin</span></span>
+      <span class="trail">via Priya</span>
+    </div>
+    <div class="row">
+      <i class="ti ti-headphones glyph" aria-hidden="true"></i>
+      <span class="pill want">want</span>
+      <span class="title">Children of Time <span class="muted">· Tchaikovsky</span></span>
+      <span class="tags">:scifi:</span>
+    </div>
+    <div class="row">
+      <i class="ti ti-device-tablet glyph" aria-hidden="true"></i>
+      <span class="pill want">want</span>
+      <span class="title">The Spear Cuts Through Water <span class="muted">· Jimenez</span></span>
+      <span class="trail">via book club</span>
+    </div>
+
+    <div class="group">reading · 1</div>
+    <div class="row selected">
+      <i class="ti ti-book glyph" style="color:var(--text-secondary);" aria-hidden="true"></i>
+      <span class="pill reading">reading</span>
+      <span class="title" style="font-weight:500;">Use of Weapons <span class="muted" style="font-weight:400;">· Banks</span></span>
+      <span class="tags">:scifi:literary:</span>
+    </div>
+    <div class="detail">
+      <div class="muted" style="margin-bottom:8px;">started [2026-02-20] · hardcover · 62% · rating —</div>
+      <div class="logline"><span class="logdate">[03-02]</span><span>The two-track structure is doing something I can't name yet. Suspicious of the chair.</span></div>
+      <div class="logline"><span class="logdate">[03-07]</span><span>Zakalwe's competence is starting to read as a wound. Banks never lets a skill be free.</span></div>
+      <div class="logline" style="margin-bottom:0;"><span class="logdate">[03-09]</span><span>The chapter numbering. Oh.</span></div>
+    </div>
+
+    <div class="group">read · 2</div>
+    <div class="row">
+      <i class="ti ti-headphones glyph" aria-hidden="true"></i>
+      <span class="pill read">read</span>
+      <span class="title">A Memory Called Empire <span class="muted">· Martine</span></span>
+      <span class="trail">★★★★★</span>
+    </div>
+    <div class="row" style="padding-bottom:8px;">
+      <i class="ti ti-book glyph" aria-hidden="true"></i>
+      <span class="pill read">read</span>
+      <span class="title">Piranesi <span class="muted">· Clarke</span></span>
+      <span class="trail">★★★★☆</span>
+    </div>
+
+    <div class="minibuffer">
+      <span class="muted">M-x</span>
+      <span>spine-note</span>
+      <span style="border-left:2px solid var(--text-info); padding-left:6px;">Banks lets the structure detonate the whole book<span class="caret">▏</span></span>
+    </div>
+  </div>
+</div>
+</body>
+</html>