Commit `cb22311`

Nick Faro committed on Jul 27, 2026

Polish file and commit navigation

commit cb22311e686e058ffd8b08ded4e86bfdea173a66 parent e6f79a5

5 changed files +114−49

Modifiedinternal/site/diff.go +4−0

 	OldPath     string
 	NewPath     string
 	DisplayPath string
+	TreePath    string
 	Status      string
 	Rows        []DiffRow
 	Additions   int
 		switch {
 		case current.Status == "Renamed":
 			current.DisplayPath = current.OldPath + " → " + current.NewPath
+			current.TreePath = current.NewPath
 		case current.Status == "Deleted":
 			current.DisplayPath = current.OldPath
+			current.TreePath = current.OldPath
 		default:
 			current.DisplayPath = current.NewPath
+			current.TreePath = current.NewPath
 		}
 		if current.Status == "" {
 			current.Status = "Modified"

Modifiedinternal/site/site.go +16−12

 }
 type TreeEntry struct {
-	Mode          string
+	Mode           string
-	Type          string
+	Type           string
-	OID           string
+	OID            string
-	Size          int64
+	Size           int64
-	Name          string
+	Name           string
-	URL           string
+	URL            string
-	CommitMessage string
+	CommitMessage  string
-	CommitURL     string
+	CommitURL      string
-	SubmoduleURL  string
+	CommitDate     string
+	CommitDateTime string
+	SubmoduleURL   string
 }
 type Crumb struct {
 				}
 				entries[index].CommitMessage = commit.Message
 				entries[index].CommitURL = routeURL(g.BaseURL, path.Join("commit", commit.OID))
+				entries[index].CommitDate = commit.Date
+				entries[index].CommitDateTime = commit.DateTime
 			}
 		}()
 	}
 }
 func (g *Generator) entryCommit(ctx context.Context, oid, filePath string) (Commit, error) {
-	out, err := g.Git.Run(ctx, "--literal-pathspecs", "log", "-1", "--format=%H%x00%s", oid, "--", filePath)
+	out, err := g.Git.Run(ctx, "--literal-pathspecs", "log", "-1", "--format=%H%x00%s%x00%aI", oid, "--", filePath)
 	if err != nil {
 		return Commit{}, err
 	}
 	fields := strings.Split(strings.TrimSpace(string(out)), "\x00")
-	if len(fields) != 2 || fields[0] == "" {
+	if len(fields) != 3 || fields[0] == "" {
 		return Commit{}, fmt.Errorf("could not find the latest commit for %s", filePath)
 	}
-	return Commit{OID: fields[0], Message: fields[1]}, nil
+	return Commit{OID: fields[0], Message: fields[1], Date: displayDate(fields[2]), DateTime: fields[2]}, nil
 }
 func (g *Generator) blobPages(ctx context.Context, branch, oid string, entry TreeEntry, summary branchSummary) ([]Page, error) {

Modifiedinternal/site/site_test.go +7−0

 	assertPage(t, full, "", "Go to file")
 	assertPage(t, full, "", "data-branch-menu")
 	assertPage(t, full, "", "data-copied-icon")
+	assertPage(t, full, "", `data-smart-time`)
+	assertPage(t, full, "", `absolute >= 604800`)
 	assertPage(t, full, "", ".dumbforge/assets/gabriel-mark.svg")
 	assertPage(t, full, "", `.dumbforge/assets/site.css?v=`+generator.AssetVersion())
 	assertPage(t, full, ".dumbforge/assets/site.css", "@media (prefers-color-scheme: light)")
 	assertPage(t, full, "tree/main/src", `<a class="file-icon parent-icon" href="https://example.invalid/repo.git" aria-label="Parent directory">`)
 	assertPage(t, full, "tree/main/src", `<a class="file-name" href="https://example.invalid/repo.git">..</a>`)
 	assertPage(t, full, "tree/main/src", `commit/`+first+`" title="initial">initial</a>`)
+	assertPage(t, full, "tree/main/src", `class="file-date" datetime="`)
+	assertPage(t, full, "tree/main/src", `data-relative-time`)
 	assertPage(t, full, "commits/main", "Commit history")
 	assertPage(t, full, "commits/main", "gravatar.com/avatar")
 	assertPage(t, full, "commits/main", `class="commit-list-message" href="https://example.invalid/repo.git/commit/`+first+`">initial</a>`)
+	assertPage(t, full, "commits/main", `class="secondary-button commit-list-copy" type="button" data-copy="`+first+`"`)
 	assertPage(t, full, "commit/"+first, "changed files")
+	assertPage(t, full, "commit/"+first, `data-diff-file-tree`)
+	assertPage(t, full, "commit/"+first, `data-diff-file data-path="README.md"`)
 	assertPage(t, full, "commit/"+first, `aria-label="Side-by-side diff for README.md"`)
 	assertPage(t, full, "commit/"+first, `class="diff-code new addition`)
 	assertPage(t, full, "commit/"+first, "A longer explanation of the initial change.")

Modifiedinternal/site/style.go +7−9

 .file-name:hover { text-decoration: underline; }
 .row-message { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .row-message:hover { color: var(--blue); text-decoration: underline; }
-.file-size { color: var(--muted); text-align: right; font-size: 12px; white-space: nowrap; }
+.file-date { color: var(--muted); text-align: right; font-size: 12px; white-space: nowrap; }
 .parent-row { grid-template-columns: 24px 1fr 1fr 75px; }
 .readme-card { margin-top: 18px; }
 .card-heading { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-bottom: 1px solid var(--border); font-weight: 650; }
 .commit-list-message:hover, .commit-list-message:focus { color: var(--text); text-decoration: underline; }
 .commit-list-body > span { color: var(--muted); font-size: 12px; }
 .commit-list-body > span strong { color: var(--text); }
+.commit-list-actions { display: inline-flex; align-items: center; gap: 6px; }
 .commit-sha { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--canvas); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
 .commit-sha:hover { color: var(--blue); text-decoration: none; }
+.commit-list-copy { width: 30px; min-height: 30px; padding: 4px; }
+.commit-list-copy.is-copied { color: var(--green); background: var(--success-bg); }
 .commit-view { max-width: 100%; }
 .commit-page-heading { min-height: 42px; margin-bottom: 12px; display: flex; align-items: center; }
 .addition { color: var(--success-text); }
 .deletion { color: var(--danger-text); }
 .diff-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: start; gap: 20px; }
-.diff-sidebar { position: sticky; top: 12px; min-width: 0; }
+.diff-sidebar { position: sticky; top: 12px; min-width: 0; height: calc(100vh - 24px); min-height: 320px; }
-.diff-sidebar h2 { margin: 0 0 8px; font-size: 14px; }
-.diff-file-nav { padding: 7px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; }
-.diff-file-nav a { min-height: 31px; padding: 5px 12px; display: block; overflow: hidden; color: var(--text); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
-.diff-file-nav a:hover { background: var(--canvas); text-decoration: none; }
-.diff-file-nav a span { width: 68px; display: inline-block; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 .diff-files { display: flex; flex-direction: column; gap: 24px; }
 .diff-file { scroll-margin-top: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
 .diff-file:target { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
   .blob-layout { grid-template-columns: 1fr; }
   .file-browser { display: none; }
   .diff-layout { grid-template-columns: 1fr; }
-  .diff-sidebar { position: static; }
+  .diff-sidebar.file-browser { position: static; height: auto; min-height: 0; max-height: 320px; display: flex; }
   .sidebar { padding-top: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
   .about-section { grid-column: 1 / -1; }
   .commit-row { grid-template-columns: 32px minmax(0,1fr) auto; }
   .markdown-body { padding: 22px 18px; }
   .branch-popover, .clone-popover { position: fixed; top: 74px; left: 12px; right: 12px; width: auto; }
   .commit-list-row { grid-template-columns: 34px minmax(0,1fr); }
-  .commit-sha { display: none; }
+  .commit-list-actions { display: none; }
   .commit-summary-title { align-items: center; }
   .commit-page-heading h1 { font-size: 20px; }
   .commit-page-heading code { font-size: 17px; }

Modifiedinternal/site/template.go +80−28

               <img class="avatar commit-avatar" src="{{.AvatarURL}}" alt="" loading="lazy" referrerpolicy="no-referrer">
               <div class="commit-list-body">
                 <a class="commit-list-message" href="{{.URL}}">{{.Message}}</a>
-                <span><strong>{{.Author}}</strong> committed on <time datetime="{{.DateTime}}">{{.Date}}</time></span>
+                <span><strong>{{.Author}}</strong> committed on <time datetime="{{.DateTime}}" data-smart-time>{{.Date}}</time></span>
+              </div>
+              <div class="commit-list-actions">
+                <a class="commit-sha" href="{{.URL}}">{{.ShortOID}}</a>
+                <button class="secondary-button commit-list-copy" type="button" data-copy="{{.OID}}" aria-label="Copy commit ID" title="Copy full commit ID"><span data-copy-icon>{{icon "copy"}}</span><span data-copied-icon hidden>{{icon "check"}}</span><span class="sr-only" data-copy-label>Copy commit ID</span></button>
               </div>
-              <a class="commit-sha" href="{{.URL}}">{{.ShortOID}}</a>
             </article>{{end}}
           </div>
         </section>{{end}}
         <div class="commit-page-heading"><h1>Commit <code>{{.ViewedCommit.Commit.ShortOID}}</code></h1></div>
         <div class="commit-author-row">
           <img class="avatar commit-avatar" src="{{.ViewedCommit.Commit.AvatarURL}}" alt="" referrerpolicy="no-referrer">
-          <span><strong>{{.ViewedCommit.Commit.Author}}</strong> committed on <time datetime="{{.ViewedCommit.Commit.DateTime}}">{{.ViewedCommit.Commit.Date}}</time></span>
+          <span><strong>{{.ViewedCommit.Commit.Author}}</strong> committed on <time datetime="{{.ViewedCommit.Commit.DateTime}}" data-smart-time>{{.ViewedCommit.Commit.Date}}</time></span>
         </div>
         <article class="commit-summary-card">
           <div class="commit-summary-title">
         <div class="diff-limit-notice"><strong>Diff too large to render</strong><p>This commit's patch exceeds the 8 MB static-page limit. Clone the repository to inspect the complete change.</p></div>
         {{else if .ViewedCommit.Files}}
         <div class="diff-layout">
-          <aside class="diff-sidebar">
+          <aside class="file-browser diff-sidebar" aria-label="Changed files">
-            <h2>Files changed</h2>
+            <div class="file-browser-heading">{{icon "folder"}}<strong>Files changed</strong></div>
-            <nav class="diff-file-nav" aria-label="Changed files">
+            <label class="file-tree-search">{{icon "search"}}<input type="search" placeholder="Search changed files" autocomplete="off" data-diff-file-tree-query></label>
-              {{range .ViewedCommit.Files}}<a href="#{{.Anchor}}"><span>{{.Status}}</span>{{.DisplayPath}}</a>{{end}}
+            <nav class="file-tree" data-diff-file-tree>
+              {{range .ViewedCommit.Files}}<a class="file-tree-file" href="#{{.Anchor}}" data-diff-file data-path="{{.TreePath}}">{{icon "file"}}<span>{{.DisplayPath}}</span></a>{{end}}
             </nav>
           </aside>
           <div class="diff-files">
       button.addEventListener('click', function () { copyText(button.getAttribute('data-copy'), button); });
     });
+    var relativeFormatter = window.Intl && Intl.RelativeTimeFormat ? new Intl.RelativeTimeFormat(undefined, {numeric: 'always'}) : null;
+    function updateRelativeTimes() {
+      if (!relativeFormatter) return;
+      var now = Date.now();
+      all('[data-relative-time], [data-smart-time]').forEach(function (node) {
+        var date = new Date(node.getAttribute('datetime'));
+        if (isNaN(date.getTime())) return;
+        if (!node.dataset.absoluteLabel) node.dataset.absoluteLabel = node.textContent;
+        var seconds = (date.getTime() - now) / 1000;
+        var absolute = Math.abs(seconds);
+        if (node.hasAttribute('data-smart-time') && absolute >= 604800) {
+          node.textContent = node.dataset.absoluteLabel;
+          return;
+        }
+        var divisor = 1;
+        var unit = 'second';
+        if (absolute >= 31536000) { divisor = 31536000; unit = 'year'; }
+        else if (absolute >= 2592000) { divisor = 2592000; unit = 'month'; }
+        else if (absolute >= 86400) { divisor = 86400; unit = 'day'; }
+        else if (absolute >= 3600) { divisor = 3600; unit = 'hour'; }
+        else if (absolute >= 60) { divisor = 60; unit = 'minute'; }
+        node.textContent = relativeFormatter.format(Math.round(seconds / divisor), unit);
+        if (!node.title) node.title = date.toLocaleString();
+      });
+    }
+    updateRelativeTimes();
+    if (relativeFormatter) window.setInterval(updateRelativeTimes, 60000);
     function closeMenu(menu) {
       if (!menu) return;
       var panel = one('[data-popover]', menu);
       if (event.key === 'Enter') { var first = one('.file-result', fileResults); if (first) window.location.href = first.href; }
     });
-    var fileTree = one('[data-file-tree]');
-    var fileTreeQuery = one('[data-file-tree-query]');
     function addTreeIcon(target, selector) {
       var source = one(selector);
       if (source) target.appendChild(source.content.cloneNode(true));
       text.textContent = label;
       if (compact) text.title = file.path;
       link.appendChild(text);
-      if (file.path === body.dataset.routePath) {
+      if (file.path === body.dataset.routePath || (file.url.charAt(0) === '#' && file.url === window.location.hash)) {
         link.classList.add('selected');
         link.setAttribute('aria-current', 'page');
       }
       return link;
     }
-    function renderTreeNode(node, container, prefix) {
+    function renderTreeNode(node, container, prefix, expandAll) {
       Object.keys(node.folders).sort().forEach(function (name) {
         var child = node.folders[name];
         var childPath = prefix ? prefix + '/' + name : name;
         toggle.appendChild(label);
         var children = document.createElement('div');
         children.className = 'file-tree-children';
-        var open = body.dataset.routePath === childPath || body.dataset.routePath.indexOf(childPath + '/') === 0;
+        var open = expandAll || body.dataset.routePath === childPath || body.dataset.routePath.indexOf(childPath + '/') === 0;
         children.hidden = !open;
         caret.classList.toggle('open', open);
         toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
         wrapper.appendChild(toggle);
         wrapper.appendChild(children);
         container.appendChild(wrapper);
-        renderTreeNode(child, children, childPath);
+        renderTreeNode(child, children, childPath, expandAll);
       });
       node.files.sort(function (a, b) { return a.name.localeCompare(b.name); }).forEach(function (entry) {
         container.appendChild(fileTreeLink(entry.file, entry.name, false));
       });
     }
-    function renderFileTree() {
+    function renderFileTree(target, queryInput, treeFiles, expandAll) {
-      if (!fileTree || !files) return;
+      if (!target || !treeFiles) return;
-      var query = fileTreeQuery.value.trim().toLowerCase();
+      var query = queryInput ? queryInput.value.trim().toLowerCase() : '';
-      fileTree.textContent = '';
+      target.textContent = '';
       if (query) {
-        var matches = files.filter(function (file) { return file.path.toLowerCase().indexOf(query) !== -1; });
+        var matches = treeFiles.filter(function (file) { return file.path.toLowerCase().indexOf(query) !== -1; });
-        matches.slice(0, 200).forEach(function (file) { fileTree.appendChild(fileTreeLink(file, file.path, true)); });
+        matches.slice(0, 200).forEach(function (file) { target.appendChild(fileTreeLink(file, file.path, true)); });
-        if (!matches.length) fileTree.innerHTML = '<p class="menu-status">No matching files.</p>';
+        if (!matches.length) target.innerHTML = '<p class="menu-status">No matching files.</p>';
         return;
       }
       var root = {folders: {}, files: []};
-      files.forEach(function (file) {
+      treeFiles.forEach(function (file) {
         var parts = file.path.split('/');
         var node = root;
         parts.slice(0, -1).forEach(function (part) {
         });
         node.files.push({name: parts[parts.length - 1], file: file});
       });
-      renderTreeNode(root, fileTree, '');
+      renderTreeNode(root, target, '', expandAll);
-      var selected = one('.file-tree-file.selected', fileTree);
+      var selected = one('.file-tree-file.selected', target);
-      if (selected) fileTree.scrollTop = Math.max(0, selected.offsetTop - (fileTree.clientHeight - selected.offsetHeight) / 2);
+      if (selected) target.scrollTop = Math.max(0, selected.offsetTop - (target.clientHeight - selected.offsetHeight) / 2);
     }
+    var fileTree = one('[data-file-tree]');
+    var fileTreeQuery = one('[data-file-tree-query]');
     if (fileTree) {
-      loadFiles().then(renderFileTree).catch(function () { fileTree.innerHTML = '<p class="menu-status">Could not load files.</p>'; });
+      loadFiles().then(function (loadedFiles) { renderFileTree(fileTree, fileTreeQuery, loadedFiles, false); })
-      fileTreeQuery.addEventListener('input', renderFileTree);
+        .catch(function () { fileTree.innerHTML = '<p class="menu-status">Could not load files.</p>'; });
+      fileTreeQuery.addEventListener('input', function () { renderFileTree(fileTree, fileTreeQuery, files, false); });
+    }
+    var diffFileTree = one('[data-diff-file-tree]');
+    var diffFileTreeQuery = one('[data-diff-file-tree-query]');
+    if (diffFileTree) {
+      var diffFiles = all('[data-diff-file]', diffFileTree).map(function (link) {
+        return {path: link.getAttribute('data-path'), url: link.getAttribute('href')};
+      });
+      renderFileTree(diffFileTree, diffFileTreeQuery, diffFiles, true);
+      diffFileTreeQuery.addEventListener('input', function () { renderFileTree(diffFileTree, diffFileTreeQuery, diffFiles, true); });
+      window.addEventListener('hashchange', function () {
+        all('.file-tree-file', diffFileTree).forEach(function (link) {
+          var selected = link.getAttribute('href') === window.location.hash;
+          link.classList.toggle('selected', selected);
+          if (selected) link.setAttribute('aria-current', 'page');
+          else link.removeAttribute('aria-current');
+        });
+      });
     }
     document.addEventListener('keydown', function (event) {
     <img class="avatar commit-avatar" src="{{.Commit.AvatarURL}}" alt="" referrerpolicy="no-referrer">
     <div class="latest-commit"><strong>{{.Commit.Author}}</strong><a class="commit-message" href="{{.Commit.URL}}">{{.Commit.Message}}</a></div>
     <a class="commit-hash" href="{{.Commit.URL}}">{{.Commit.ShortOID}}</a>
-    <time datetime="{{.Commit.DateTime}}">{{.Commit.Date}}</time>
+    <time datetime="{{.Commit.DateTime}}" data-smart-time>{{.Commit.Date}}</time>
     <a class="commit-count-link" href="{{.CommitsURL}}">{{icon "history"}}<strong>{{.CommitCount}}</strong> commits</a>
   </div>
   <div class="tree-rows">
 	      {{if eq .Type "tree"}}<span class="file-icon folder">{{icon "folder"}}</span>{{else if eq .Type "commit"}}<span class="file-icon">{{icon "repo"}}</span>{{else}}<span class="file-icon">{{icon "file"}}</span>{{end}}
       <a class="file-name" href="{{.URL}}">{{.Name}}</a>
       <a class="row-message" href="{{.CommitURL}}" title="{{.CommitMessage}}">{{.CommitMessage}}</a>
-      <span class="file-size">{{humanSize .Size}}</span>
+      <time class="file-date" datetime="{{.CommitDateTime}}" data-relative-time>{{.CommitDate}}</time>
     </div>{{end}}
   </div>
 </div>

Commit cb22311

Commit `cb22311`