@ok-ggwp/git-gloss 0.3.0 → 0.5.0

package/dist/ary/client.js

@@ -1,401 +0,0 @@
-// The ary shell: pick a branch, a base to compare it with, and a commit (or the
-// whole branch), and the chosen view loads in the frame. Text only goes
-// through textContent; nothing from the repo is parsed as HTML.
-(function () {
-  'use strict'
-  var app = document.getElementById('app')
-  var PAGE = 100
-
-  // What is selected. head/base choose which commits are listed; rev is what
-  // the frame shows (a sha, "wip", a range, or anything typed in).
-  var state = { head: null, base: null, rev: null, q: '' }
-  var refs = null
-  var log = { commits: [], more: false, total: null }
-  var logError = null
-  var parts = {}
-
-  function el(tag, cls, text) {
-    var e = document.createElement(tag)
-    if (cls) e.className = cls
-    if (text !== undefined && text !== null) e.textContent = String(text)
-    return e
-  }
-  function add(parent) {
-    for (var i = 1; i < arguments.length; i++) if (arguments[i]) parent.appendChild(arguments[i])
-    return parent
-  }
-  function plural(n, word) { return n + ' ' + word + (n === 1 ? '' : 's') }
-  function api(path) {
-    return fetch(path).then(function (r) {
-      return r.json().then(function (body) {
-        if (!r.ok) throw new Error(body.error || r.statusText)
-        return body
-      })
-    })
-  }
-
-  // ---- location: the selection is kept in the hash, so reload and links work ----
-  function saveHash() {
-    var p = new URLSearchParams()
-    if (state.rev) p.set('rev', state.rev)
-    if (state.head) p.set('head', state.head)
-    if (state.base) p.set('base', state.base)
-    history.replaceState(null, '', '#' + p.toString())
-  }
-  function readHash() {
-    var p = new URLSearchParams(location.hash.slice(1))
-    return { rev: p.get('rev'), head: p.get('head'), base: p.get('base') }
-  }
-
-  // ---- sidebar ----
-  // A branch picker with a search box: a repo can have hundreds of branches,
-  // too many to scan in a <select>. Matching is case-insensitive and every
-  // space-separated word must appear in the name.
-  var SHOWN = 200
-  function picker(onPick) {
-    var root = el('div', 'combo')
-    var button = el('button', 'combo-btn')
-    button.type = 'button'
-    button.setAttribute('aria-haspopup', 'listbox')
-    var panel = el('div', 'combo-panel')
-    panel.hidden = true
-    var input = el('input')
-    input.type = 'search'
-    input.spellcheck = false
-    input.placeholder = 'Search branches…'
-    input.setAttribute('aria-label', 'Search branches')
-    var list = el('div', 'combo-list')
-    list.setAttribute('role', 'listbox')
-    add(panel, input, list)
-    add(root, button, panel)
-
-    var groups = []
-    var noneLabel = null
-    var value = null
-    var items = [] // the rows now shown: { value, node }
-    var active = 0
-
-    function matches(name, words) {
-      var n = name.toLowerCase()
-      return words.every(function (w) { return n.indexOf(w) >= 0 })
-    }
-    function paint() {
-      items.forEach(function (it, i) { it.node.classList.toggle('active', i === active) })
-      if (items[active]) items[active].node.scrollIntoView({ block: 'nearest' })
-    }
-    function render() {
-      var words = input.value.toLowerCase().split(/\s+/).filter(Boolean)
-      list.textContent = ''
-      items = []
-      var shown = 0
-      var hidden = 0
-      function item(label, v) {
-        var node = el('button', 'combo-item', label)
-        node.type = 'button'
-        node.setAttribute('role', 'option')
-        node.setAttribute('aria-selected', String(v === value))
-        node.addEventListener('click', function () { pick(v) })
-        items.push({ value: v, node: node })
-        return node
-      }
-      if (noneLabel && !words.length) list.appendChild(item(noneLabel, null))
-      groups.forEach(function (g) {
-        var found = g.names.filter(function (n) { return matches(n, words) })
-        var room = found.slice(0, Math.max(0, SHOWN - shown))
-        hidden += found.length - room.length
-        shown += room.length
-        if (!room.length) return
-        add(list, add(el('div', 'combo-group', g.label), el('span', 'count', found.length)))
-        room.forEach(function (n) { list.appendChild(item(n, n)) })
-      })
-      if (hidden) add(list, el('div', 'combo-more', hidden + ' more: keep typing to narrow the list'))
-      if (!items.length) add(list, el('div', 'combo-more', 'No branches match.'))
-      // Start on the current value, or on the first match when searching.
-      var at = words.length ? -1 : items.findIndex(function (it) { return it.value === value })
-      active = at >= 0 ? at : 0
-      paint()
-    }
-    function open() {
-      panel.hidden = false
-      button.setAttribute('aria-expanded', 'true')
-      input.value = ''
-      render()
-      input.focus()
-    }
-    function close() {
-      panel.hidden = true
-      button.setAttribute('aria-expanded', 'false')
-    }
-    function pick(v) {
-      close()
-      button.focus()
-      if (v !== value) onPick(v)
-    }
-    button.addEventListener('click', function () { if (panel.hidden) open(); else close() })
-    input.addEventListener('input', render)
-    input.addEventListener('keydown', function (ev) {
-      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-        ev.preventDefault()
-        if (items.length) active = (active + (ev.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length
-        paint()
-      } else if (ev.key === 'Enter') {
-        ev.preventDefault()
-        if (items[active]) pick(items[active].value)
-      } else if (ev.key === 'Escape') {
-        ev.preventDefault()
-        close()
-        button.focus()
-      }
-    })
-    document.addEventListener('mousedown', function (ev) { if (!panel.hidden && !root.contains(ev.target)) close() })
-
-    return {
-      root: root,
-      // Local and remote branches, and what choosing "no branch" is called (if allowed).
-      setOptions: function (g, none) { groups = g; noneLabel = none },
-      setValue: function (v) {
-        value = v
-        button.textContent = v || noneLabel || 'choose a branch'
-        button.title = button.textContent
-      },
-    }
-  }
-
-  function branchGroups() {
-    return [
-      { label: 'Local branches', names: refs.branches.map(function (b) { return b.name }) },
-      { label: 'Remote branches', names: refs.remotes.map(function (b) { return b.name }) },
-    ]
-  }
-
-  // One entry in the list: the title gets the full width (two lines at most),
-  // with the details and status marks on a line below it.
-  function row(title, details, marks, current, onClick) {
-    var b = el('button', 'row')
-    b.type = 'button'
-    b.setAttribute('aria-current', String(current))
-    b.title = title
-    add(b, el('div', 'subject', title))
-    var meta = el('div', 'meta')
-    details.forEach(function (d) { meta.appendChild(d) })
-    add(meta, add(el('span', 'marks'), marks[0], marks[1], marks[2]))
-    add(b, meta)
-    b.addEventListener('click', onClick)
-    return b
-  }
-  function mark(kind, text, tip) {
-    var m = el('span', 'mark ' + kind, text)
-    if (tip) m.title = tip
-    return m
-  }
-  function glossMark(glossed) {
-    return glossed ? mark('glossed', '● glossed', 'This commit has a gloss') : mark('none', '○ no gloss', 'This commit has no gloss')
-  }
-
-  function renderList() {
-    var list = parts.list
-    list.textContent = ''
-    if (refs.wip) {
-      add(list, el('h2', null, 'Uncommitted work'))
-      var w = refs.wip
-      add(list, row('wip snapshot', [el('span', null, w.stale || 'the latest snapshot of your working tree')],
-        [glossMark(w.glossed), w.stale ? mark('warn', 'stale', w.stale) : null], state.rev === 'wip', function () { select('wip') }))
-    }
-    add(list, el('h2', null, state.head ? 'Commits on ' + state.head : 'Commits'))
-    if (logError) { add(list, el('p', 'error', logError)); return }
-    // A search narrows the list to some commits, so it isn't the whole branch.
-    if (state.base && state.head && log.commits.length && !state.q) {
-      var range = state.base + '..' + state.head
-      add(list, row('Whole branch', [el('span', null, range + ' · ' + plural(log.total === null ? log.commits.length : log.total, 'commit'))], [], state.rev === range, function () { select(range) }))
-    }
-    if (!log.commits.length) {
-      add(list, el('p', 'empty', state.q ? 'No commits match “' + state.q + '”.' : state.base ? 'No commits beyond ' + state.base + '.' : 'No commits.'))
-    }
-    log.commits.forEach(function (c) {
-      add(list, row(c.subject,
-        [el('span', 'sha', c.sha.slice(0, 7)), el('span', null, ' · ' + c.author + ' · ' + new Date(c.date).toLocaleDateString())],
-        c.merge ? [mark('none', 'merge')] : [glossMark(c.glossed), c.reviewed ? mark('reviewed', '✓ reviewed', 'This commit has a recorded review') : null],
-        state.rev === c.sha, function () { select(c.sha) }))
-    })
-    if (log.more) {
-      var more = el('button', 'btn more', 'Load more')
-      more.type = 'button'
-      more.addEventListener('click', function () { loadLog(true) })
-      add(list, more)
-    }
-  }
-
-  function renderSide() {
-    parts.head.setOptions(branchGroups(), null)
-    parts.head.setValue(state.head)
-    parts.base.setOptions(branchGroups(), '(none: all of the branch’s history)')
-    parts.base.setValue(state.base)
-    parts.rev.value = state.rev && state.rev !== 'wip' ? state.rev : ''
-    renderList()
-  }
-
-  // ---- viewer ----
-  function renderViewer() {
-    var v = parts.viewer
-    v.textContent = ''
-    if (!state.rev) {
-      add(v, el('div', 'placeholder', 'Pick a commit, a whole branch, or type any revision or range.'))
-      return
-    }
-    var src = '/view?rev=' + encodeURIComponent(state.rev)
-    var open = el('a', null, 'open in a tab ↗')
-    open.href = src
-    open.target = '_blank'
-    open.rel = 'noopener'
-    var reload = el('button', 'btn', 'Reload')
-    reload.type = 'button'
-    var frame = el('iframe')
-    frame.title = 'gloss of ' + state.rev
-    frame.src = src
-    // So the page's keys (j, k, o, e, c) work without clicking into it first.
-    frame.addEventListener('load', function () { frame.contentWindow.focus() })
-    reload.addEventListener('click', function () { frame.src = src })
-    add(v, add(el('div', 'viewer-bar'), el('span', 'what', state.rev === 'wip' ? 'uncommitted work (wip)' : state.rev), reload, open), frame)
-  }
-
-  // ---- actions ----
-  function select(rev) {
-    state.rev = rev
-    saveHash()
-    renderList()
-    parts.rev.value = rev === 'wip' ? '' : rev
-    renderViewer()
-  }
-
-  function loadLog(append) {
-    if (!state.head) { log = { commits: [], more: false, total: null }; renderList(); return Promise.resolve() }
-    var q = new URLSearchParams({ head: state.head, limit: PAGE, skip: append ? log.commits.length : 0 })
-    if (state.base) q.set('base', state.base)
-    if (state.q) q.set('q', state.q)
-    var asked = state.head + '..' + state.base + '?' + state.q
-    return api('/api/log?' + q).then(function (data) {
-      if (asked !== state.head + '..' + state.base + '?' + state.q) return // the selection moved on
-      logError = null
-      log = append ? { commits: log.commits.concat(data.commits), more: data.more, total: data.total } : data
-      renderList()
-    }).catch(function (err) {
-      logError = err.message
-      log = { commits: [], more: false, total: null }
-      renderList()
-    })
-  }
-
-  function pickHead(name) {
-    state.head = name
-    // A feature branch is most useful against the usual base; the base itself
-    // is listed whole.
-    state.base = name === refs.defaultBase ? null : refs.defaultBase
-    saveHash()
-    renderSide()
-    loadLog(false)
-  }
-
-  function load() {
-    return api('/api/refs').then(function (data) {
-      parts.error.hidden = true
-      refs = data
-      var h = readHash()
-      // A link or bookmark may name a branch that has since been deleted or
-      // renamed: use the usual choice instead, and say so.
-      var known = {}
-      refs.branches.concat(refs.remotes).forEach(function (b) { known[b.name] = true })
-      var head = h.head && known[h.head] ? h.head : null
-      state.head = head || refs.current || refs.defaultBase || (refs.branches[0] && refs.branches[0].name) || null
-      var notice = null
-      if (h.head && !head) {
-        // The default base goes with the default branch.
-        state.base = state.head === refs.defaultBase ? null : refs.defaultBase
-        notice = 'Branch “' + h.head + '” no longer exists; showing ' + (state.head || 'the default') + ' instead.'
-      } else if (h.base && !known[h.base]) {
-        state.base = null
-        notice = 'The branch to compare with, “' + h.base + '”, no longer exists; showing all of ' + state.head + '’s history.'
-      } else if (head) {
-        state.base = h.base || null
-      } else {
-        state.base = state.head === refs.defaultBase ? null : refs.defaultBase
-      }
-      if (notice) {
-        parts.error.textContent = notice
-        parts.error.hidden = false
-      }
-      state.rev = h.rev || (refs.wip ? 'wip' : null)
-      parts.title.textContent = refs.repo
-      renderSide()
-      renderViewer()
-      return loadLog(false).then(function () {
-        // With nothing chosen, show the whole branch, or its newest commit.
-        if (!state.rev && state.head) select(state.base && log.commits.length ? state.base + '..' + state.head : log.commits.length ? log.commits[0].sha : null)
-      })
-    })
-  }
-
-  function build() {
-    parts.title = el('span', 'repo')
-    var refresh = el('button', 'btn', 'Refresh')
-    refresh.type = 'button'
-    refresh.title = 'Re-read branches and commits'
-    refresh.addEventListener('click', function () { load().catch(fail) })
-
-    parts.head = picker(pickHead)
-    parts.base = picker(function (name) {
-      state.base = name
-      parts.base.setValue(name)
-      saveHash()
-      loadLog(false)
-    })
-
-    parts.rev = el('input')
-    parts.rev.type = 'text'
-    parts.rev.spellcheck = false
-    parts.rev.placeholder = 'HEAD~3, abc123, main..feature'
-    var go = el('button', 'btn', 'View')
-    go.type = 'submit'
-    var form = add(el('form', 'rev-row'), parts.rev, go)
-    form.addEventListener('submit', function (ev) {
-      ev.preventDefault()
-      var v = parts.rev.value.trim()
-      if (v) select(v)
-    })
-
-    parts.search = el('input')
-    parts.search.type = 'search'
-    parts.search.spellcheck = false
-    parts.search.placeholder = 'Search commit messages and authors…'
-    parts.search.setAttribute('aria-label', 'Search commits')
-    var searching = null
-    parts.search.addEventListener('input', function () {
-      // Wait for a pause in typing: each search asks git.
-      clearTimeout(searching)
-      searching = setTimeout(function () {
-        state.q = parts.search.value.trim()
-        loadLog(false)
-      }, 250)
-    })
-
-    parts.error = el('p', 'error')
-    parts.error.hidden = true
-    parts.list = el('div', 'list')
-    parts.viewer = el('section', 'viewer')
-
-    var top = add(el('div', 'side-top'),
-      add(el('div', 'title'), el('strong', null, 'git gloss ary'), parts.title, refresh),
-      parts.error,
-      add(el('div', 'field'), el('span', null, 'Branch'), parts.head.root),
-      add(el('div', 'field'), el('span', null, 'Compare with'), parts.base.root),
-      add(el('label', 'field'), document.createTextNode('Any revision or range'), form))
-    add(app, add(el('div', 'shell'), add(el('aside', 'side'), top, add(el('div', 'search-bar'), parts.search), parts.list), parts.viewer))
-  }
-
-  function fail(err) {
-    parts.error.textContent = 'Could not read the repository: ' + err.message
-    parts.error.hidden = false
-  }
-
-  build()
-  load().catch(fail)
-})()

package/dist/ary/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>git gloss ary</title>
-<link rel="stylesheet" href="/ary.css">
-</head>
-<body>
-<div id="app"><noscript>This page needs JavaScript.</noscript></div>
-<script src="/ary.js"></script>
-</body>
-</html>

package/dist/ary/style.css

@@ -1,115 +0,0 @@
-:root {
-  --bg: #f7f7f5;
-  --surface: #ffffff;
-  --surface-2: #f1f1ee;
-  --border: #e2e2dc;
-  --text: #1d1d1b;
-  --muted: #6b6b66;
-  --accent: #3b5bdb;
-  --ok: #1a7f37;
-  --warn-bg: #fff4e5;
-  --warn-border: #f0b35b;
-  --warn-text: #7a4300;
-  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  color-scheme: light;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #151514;
-    --surface: #1e1e1c;
-    --surface-2: #262624;
-    --border: #34342f;
-    --text: #e8e8e3;
-    --muted: #9a9a92;
-    --accent: #8ea2ff;
-    --ok: #57c47a;
-    --warn-bg: #33270f;
-    --warn-border: #a2701e;
-    --warn-text: #f3c77a;
-    color-scheme: dark;
-  }
-}
-
-* { box-sizing: border-box; }
-html, body, #app { height: 100%; }
-body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); }
-button, input, select { font: inherit; color: inherit; }
-
-.shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: 100%; }
-@media (max-width: 800px) {
-  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 45%) minmax(0, 1fr); }
-}
-
-/* Sidebar */
-.side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
-.side-top { padding: 12px; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
-.title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
-.title strong { font-size: 15px; }
-.title .repo { color: var(--muted); font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-label.field, div.field { display: grid; gap: 3px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
-label.field > input, .rev-row input, .combo-btn, .combo-panel input {
-  width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
-  background: var(--bg); text-transform: none; letter-spacing: 0; font-size: 13px;
-}
-.combo { position: relative; }
-.combo-btn { text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 24px; position: relative; }
-.combo-btn::after { content: "▾"; position: absolute; right: 8px; color: var(--muted); }
-.combo-panel {
-  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px);
-  display: grid; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 8px;
-  background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
-}
-.combo-panel[hidden] { display: none; }
-.combo-list { max-height: min(50vh, 320px); overflow: auto; }
-.combo-group {
-  margin-top: 8px; padding: 10px 8px 4px; border-top: 1px solid var(--border);
-  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text);
-}
-.combo-group:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
-.combo-group .count { margin-left: 6px; color: var(--muted); font-weight: 400; }
-.combo-item { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 5px; padding: 4px 8px 4px 20px; cursor: pointer; font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.combo-item:hover, .combo-item.active { background: var(--surface-2); }
-.combo-item[aria-selected="true"] { color: var(--accent); font-weight: 600; }
-.combo-more { padding: 6px 8px; color: var(--muted); font-size: 12.5px; }
-.rev-row { display: flex; gap: 6px; }
-.rev-row input { font-family: var(--mono); font-size: 12.5px; }
-.btn {
-  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
-  padding: 4px 10px; cursor: pointer; white-space: nowrap;
-}
-.btn:hover { background: var(--surface-2); }
-.error { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); font-size: 12.5px; }
-
-.list { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
-.list h2 { margin: 10px 8px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
-.row {
-  display: block; width: 100%; text-align: left; cursor: pointer;
-  border: 1px solid transparent; background: none; border-radius: 6px; padding: 6px 8px;
-}
-.row:hover { background: var(--surface-2); }
-.row[aria-current="true"] { background: var(--surface-2); border-color: var(--accent); }
-.row .subject {
-  /* the whole point of the list: enough of the subject to tell commits apart */
-  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
-  overflow: hidden; overflow-wrap: anywhere;
-}
-.row .meta { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 2px; color: var(--muted); font-size: 12px; }
-.row .marks { margin-left: auto; padding-left: 10px; display: inline-flex; gap: 10px; white-space: nowrap; }
-.sha { font-family: var(--mono); font-size: 12px; }
-.mark.glossed { color: var(--ok); }
-.mark.reviewed { color: var(--accent); }
-.mark.warn { color: var(--warn-text); background: var(--warn-bg); border-radius: 4px; padding: 0 5px; }
-.search-bar { padding: 8px 12px; border-bottom: 1px solid var(--border); }
-.search-bar input { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 13px; }
-.empty { color: var(--muted); padding: 8px; }
-.more { margin: 6px 8px; }
-
-/* Viewer */
-.viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
-.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
-.viewer-bar .what { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.viewer-bar a { color: var(--accent); text-decoration: none; }
-.viewer-bar a:hover { text-decoration: underline; }
-iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--bg); }
-.placeholder { flex: 1; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }