f547dda | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

f547dda — pyrossh 2026-11-05T19:42:04+05:30

Remove file history/blame pages and share the file tree per repo

Files changed (15) hide show

README.md +3 -3
assets/client.js +19 -3
assets/css/repos.css +9 -81
eleventy.config.js +4 -10
src/_data/repoFiles.js +9 -16
src/_helpers/dataCache.js +1 -1
src/_helpers/gitRepos.js +1 -60
src/_includes/file-layout.njk +1 -9
src/_includes/file-tree.njk +21 -4
src/repos/file-blame.njk +0 -47
src/repos/file-history.njk +0 -44
src/repos/file.njk +3 -5
src/repos/files-index.njk +3 -5
src/repos/tree.njk +21 -0
tests/pages.test.js +48 -14

README.md CHANGED Viewed

@@ -13,7 +13,7 @@ Personal website, built as a static site with [Eleventy](https://www.11ty.dev) a
 │   ├── _includes/       layouts and partials
 │   ├── components/      Elena web components
 │   ├── posts/           blog post markdown
-│   ├── repos/           paginated templates for repo readme/files/commits/blame
+│   ├── repos/           paginated templates for repo readme/files/commits
 │   └── *.njk            top-level pages
 ├── eleventy.config.js
 └── package.json
@@ -24,8 +24,8 @@ Personal website, built as a static site with [Eleventy](https://www.11ty.dev) a
 Pages under `/repos/:id` are generated entirely from local git checkouts that live as
 **sibling directories of this project** — e.g. `../config`, `../rust-embed` next to
 `website/` — not inside this repo. No API calls, no bucket access: README, file
-tree/content, commit list, per-commit diffs, per-file history, and per-file blame are all
+tree/content, commit list, and per-commit diffs are all read straight from git
-read straight from git (`git ls-tree`, `git log`, `git show`, `git blame`) at build time.
+(`git ls-tree`, `git log`, `git show`) at build time.
 A repo listed in `src/_data/site.js` only gets pages if a matching directory exists next to
 this project *and* is a git repo in its own right (has its own `.git`, not nested inside

assets/client.js CHANGED Viewed

@@ -19,12 +19,27 @@ document.getElementById("theme-change").addEventListener("click", () => {
   localStorage.setItem("theme", next);
 });
+// Every file page in a repo loads the same tree (repos/tree.njk), so the tree
+// can't arrive with its active file already marked. Mark it once it's swapped
+// in, opening the folders above it so the rest of the tree stays collapsed.
+document.addEventListener("htmx:afterSwap", (e) => {
+  const tree = e.detail.target;
+  if (!tree.matches(".file-explorer-tree") || !tree.dataset.activeHref) return;
+  const link = tree.querySelector(`a[href="${CSS.escape(tree.dataset.activeHref)}"]`);
+  if (!link) return;
+  link.classList.add("active-file");
+  for (let dir = link.closest("details"); dir; dir = dir.parentElement.closest("details")) {
+    dir.open = true;
+  }
+});
 // .file-explorer-tree lives outside #file-pane (see the comment on
 // .file-explorer in repos.css) so htmx swaps of #file-pane never re-render
 // it — clicking a file never rebuilds the tree. That's good for keeping
-// scroll position/expanded folders, but it also means the .active-file
+// scroll position/expanded folders, but it also means .active-file never
+// moves on its own. Move it here, synchronously on click, instead of waiting
-// class painted at page-load time never moves on its own. Move it here,
+// on htmx's response. data-active-href moves with it so a tree restored from
-// synchronously on click, instead of waiting on htmx's response.
+// htmx's history cache and reloaded marks this file, not the original one.
 document.addEventListener("click", (e) => {
   const link = e.target.closest(".file-explorer-tree a");
   if (!link) return;
@@ -32,6 +47,7 @@ document.addEventListener("click", (e) => {
   const current = tree.querySelector("a.active-file");
   if (current) current.classList.remove("active-file");
   link.classList.add("active-file");
+  tree.dataset.activeHref = link.getAttribute("href");
 });
 // Copies the git clone command shown in the repo header (see .clone-cmd in

assets/css/repos.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* Repo browsing pages (readme/files/commits/blame). Restored from the
+/* Repo browsing pages (readme/files/commits). Restored from the
    original Astro-era RepoLayout/FileLayout/Commit/RecursiveList components
    (see git history at 7325531^), with the tab nav restyled as a bordered
    tab bar and a couple of small crates.io-inspired touches (clone command
@@ -8,15 +8,15 @@
    values, so nothing reads as randomly bigger/smaller than its neighbour:
      0.85rem — small badges (tags, pull-right meta, file-size hints)
      0.9rem  — code/monospace content, nav links and sub-headings alike
-               (pre/code-view, file tree, blame, file title)
+               (pre/code-view, file tree, file title)
      0.95rem — box body text (.repo, .event)
      var(--fs-repo-title) — page-level heading (.repo h1), fluid 1.3–1.6rem
    All of them are rem-based, not em, so nesting depth can't change the
-   rendered size — that's what made the old code-view/blame font sizes
+   rendered size — that's what made the old code-view font sizes
    inconsistent (em compounds with whatever ancestor happens to wrap it).
    Everything below uses plain CSS nesting rather than @scope: .repo,
-   .file-layout, .event, .file-explorer and table.blame are all real,
+   .file-layout, .event and .file-explorer are all real,
    always-present classes/tags on these pages (none of them are wrapped
    in a custom element anymore), so nesting under them scopes their
    descendants exactly the way @scope would, without needing a scope root
@@ -184,7 +184,7 @@
 }
 /* Commit list / commit detail header (Commit.astro) — repos/commit.njk,
-   commits.njk, file-history.njk. pre.commit is nested here too since
+   commits.njk. pre.commit is nested here too since
    it's always .event's child, never used alone. */
 .event {
   background-color: var(--color-box-bg);
@@ -220,9 +220,8 @@
    pane, each its own rounded box with a gap between them rather than a
    single shared border — the gap is what visually separates them, so
    they don't also need to differ in colour. The tree lives outside
-   #file-pane, so htmx swaps of #file-pane (clicking a file) or
+   #file-pane, so htmx swaps of #file-pane (clicking a file) never touch
-   #file-content (Contents/History/Blame) never touch the sidebar — it
-   just stays where it is, already expanded, no reload.
+   the sidebar — it just stays where it is, already expanded, no reload.
    Fixed-height explorer: both panes stretch to the same height and scroll
    independently, so scrolling a long file never scrolls the tree out of
@@ -395,9 +394,8 @@
   }
 }
-/* File view header — a compact icon+filename strip with the
+/* File view header — a compact icon+filename strip, sitting as the card's
-   Contents/History/Blame tabs, sitting as the card's title bar rather
-   than a full-width heading. */
+   title bar rather than a full-width heading. */
 .file-layout {
   display: flex;
   align-items: center;
@@ -412,11 +410,6 @@
     display: flex;
     align-items: center;
     gap: 0.4rem;
-    /* flex:1 (not the default 0 1 auto) so it's the one that gives up
-       space when the row is tight — without this, a long filename could
-       force the row to wrap .nav onto its own line instead of shrinking,
-       since the wrap decision is made off each item's unshrunk
-       hypothetical width, not its post-shrink width. */
     flex: 1 1 auto;
     min-width: 0;
     font-size: 0.9rem;
@@ -435,71 +428,6 @@
       white-space: nowrap;
     }
   }
-  .nav {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-shrink: 0;
-    div:not(:has(a)) {
-      display: none;
-    }
-    a {
-      font-size: 0.9rem;
-      font-weight: 500;
-      padding: 0.3rem 0.1rem;
-      margin-right: 0.75rem;
-      cursor: pointer;
-      color: var(--color-text);
-      border-bottom: 2px solid transparent;
-      &:hover {
-        color: var(--color-link);
-      }
-      &[aria-current="true"] {
-        color: var(--color-link);
-        border-bottom-color: var(--color-link);
-      }
-    }
-  }
-}
-/* Blame table — repos/file-blame.njk. */
-table.blame {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  background: var(--color-pre-bg);
-  border-radius: 4px;
-  overflow: hidden;
-  td {
-    vertical-align: top;
-    padding: 0.1rem 0.5rem;
-    border-bottom: 1px solid var(--color-box-bg);
-  }
-  .blame-meta {
-    white-space: nowrap;
-    color: var(--color-link);
-    width: 1%;
-  }
-  .blame-line-no {
-    white-space: nowrap;
-    opacity: 0.5;
-    text-align: right;
-    width: 1%;
-  }
-  .blame-content pre {
-    margin: 0;
-    white-space: pre-wrap;
-  }
 }
 /* diff2html ships its own light/dark token sets as plain CSS custom

eleventy.config.js CHANGED Viewed

@@ -49,9 +49,10 @@ export default function (eleventyConfig) {
     "node_modules/diff2html/bundles/css/diff2html.min.css": "assets/css/diff2html.min.css",
   });
-  // htmx powers no-full-page-reload tab switching on repo pages (Readme/
+  // htmx powers no-full-page-reload navigation on repo pages (Readme/Commits/
-  // Commits/Files, Contents/History/Blame) — hx-select pulls #repo-content
+  // Files tabs, the file tree) — hx-select pulls #repo-page or #file-pane out
-  // or #file-content out of the fetched static page and swaps it in place.
+  // of the fetched static page and swaps it in place. It also loads each
+  // repo's shared file tree into its file pages (see repos/tree.njk).
   // Vendored locally rather than a CDN <script> so the build has no
   // runtime network dependency.
   eleventyConfig.addPassthroughCopy({
@@ -88,13 +89,6 @@ export default function (eleventyConfig) {
     if (!entries.length) return null;
     return entries.find((e) => e.file.path.toLowerCase() === "readme.md") ?? entries[entries.length - 1];
   });
-  // A folder should start open only when the active file lives inside it —
-  // otherwise every directory in the tree defaults to expanded, which on a
-  // repo of any size is just a wall of open folders with nothing collapsed.
-  eleventyConfig.addFilter(
-    "isAncestorDir",
-    (dirPath, activePath) => !!activePath && (activePath === dirPath || activePath.startsWith(`${dirPath}/`)),
-  );
   eleventyConfig.addFilter("formatBytes", (bytes) => {
     if (!bytes) return "0B";
     const units = ["B", "KB", "MB", "GB"];

src/_data/repoFiles.js CHANGED Viewed

@@ -6,8 +6,6 @@ import {
   IMAGE_EXTENSIONS,
   LARGE_FILE_SIZE,
   discoverLocalRepos,
-  getBlame,
-  getFileHistory,
   getHeadSha,
   isDirty,
   toDataUri,
@@ -36,23 +34,18 @@ export default async () => {
     let entries = cacheable ? readCache(cacheKey, sha) : null;
     if (!entries) {
-      entries = await mapPool(repo.files, CONCURRENCY, async (file) => {
+      entries = await mapPool(repo.files, CONCURRENCY, async (file) => ({
+        file,
-        const render = renderFile(repo.dir, file);
+        render: renderFile(repo.dir, file),
-        const [history, blame] = await Promise.all([
-          getFileHistory(repo.dir, file.path),
-          render.kind === "text" ? getBlame(repo.dir, file.path) : [],
-        ]);
-        return { file, render, history, blame };
-      });
+      }));
       if (cacheable) writeCache(cacheKey, sha, entries);
     }
-    // file.njk/file-history.njk/file-blame.njk only ever read `id`/`data`/
+    // file.njk only ever reads `id`/`data`/`version` off `item.repo` — not
-    // `tree`/`version` off `item.repo` — not `files`/`commits`/`readme`.
+    // `files`/`commits`/`readme`/`tree`. See the same note in repoCommits.js:
-    // See the same note in repoCommits.js: Eleventy clones each page's data
+    // Eleventy clones each page's data slice, so keeping this slim avoids
-    // slice, so keeping this slim avoids cloning the repo's full commit/
-    // file lists on every single file page.
+    // cloning the repo's full commit/file lists on every single file page.
-    const slimRepo = { id: repo.id, data: repo.data, tree: repo.tree, version: repo.version };
+    const slimRepo = { id: repo.id, data: repo.data, version: repo.version };
     for (const entry of entries) pages.push({ repoId: repo.id, repo: slimRepo, ...entry });
   }
   return pages;

src/_helpers/dataCache.js CHANGED Viewed

@@ -9,7 +9,7 @@ const cachePath = (key) => path.join(CACHE_DIR, `${key}.json`);
 /**
  * Disk cache for the expensive per-commit/per-file git data (diffs,
- * history, blame, syntax highlighting) computed in repoCommits.js/
+ * syntax highlighting) computed in repoCommits.js/
  * repoFiles.js. Keyed by the repo's current HEAD sha rather than by
  * content hash — cheap to check (one `git rev-parse` per repo) and
  * correct as long as callers only read the cache for a clean working

src/_helpers/gitRepos.js CHANGED Viewed

@@ -174,23 +174,6 @@ const getCommits = (repoDir) => {
   }
 };
-export const getFileHistory = async (repoDir, filePath) => {
-  if (!isOwnGitRepo(repoDir)) return [];
-  try {
-    const out = await gitAsync(repoDir, [
-      "log",
-      "--follow",
-      "--date=iso-strict",
-      `--pretty=format:%H${SEP}%an${SEP}%ad${SEP}%s`,
-      "--",
-      filePath,
-    ]);
-    return parseLogFormat(out);
-  } catch {
-    return [];
-  }
-};
 export const getCommitDiff = async (repoDir, hash) => {
   if (!isOwnGitRepo(repoDir)) return "";
   try {
@@ -200,50 +183,8 @@ export const getCommitDiff = async (repoDir, hash) => {
   }
 };
-export const getBlame = async (repoDir, filePath) => {
-  if (!isOwnGitRepo(repoDir)) return [];
-  try {
-    const out = await gitAsync(repoDir, ["blame", "--porcelain", "--", filePath]);
-    const lines = out.split("\n");
-    const commitInfo = new Map();
-    const result = [];
-    let i = 0;
-    while (i < lines.length) {
-      const header = lines[i]?.match(/^([0-9a-f]{40,64}) (\d+) (\d+)(?: (\d+))?$/);
-      if (!header) {
-        i++;
-        continue;
-      }
-      const hash = header[1];
-      const finalLine = parseInt(header[3], 10);
-      if (!commitInfo.has(hash)) commitInfo.set(hash, {});
-      const info = commitInfo.get(hash);
-      i++;
-      while (i < lines.length && !lines[i].startsWith("\t")) {
-        const line = lines[i];
-        if (line.startsWith("author ")) info.author = line.slice(7);
-        else if (line.startsWith("author-time ")) info.time = line.slice(12);
-        i++;
-      }
-      const content = lines[i] !== undefined ? lines[i].slice(1) : "";
-      result.push({
-        hash,
-        shortHash: hash.slice(0, 7),
-        author: info.author,
-        date: info.time ? new Date(parseInt(info.time, 10) * 1000).toISOString() : "",
-        line: finalLine,
-        content,
-      });
-      i++;
-    }
-    return result;
-  } catch {
-    return [];
-  }
-};
 // Cache key material for dataCache.js: the per-commit/per-file data
-// (diffs, history, blame, highlighting) computed in repoCommits.js/
+// (diffs, highlighting) computed in repoCommits.js/
 // repoFiles.js only depends on the repo's committed state, so it's safe
 // to skip recomputing it whenever HEAD hasn't moved — but only when the
 // working tree is also clean, since file content there is read straight

src/_includes/file-layout.njk CHANGED Viewed

@@ -1,14 +1,6 @@
-{% macro fileLayout(repo, filepath, filename, ext, tab) %}
+{% macro fileLayout(filename, ext) %}
-{% set base = "/repos/" + repo + "/files/" + filepath %}
 <div class="file-layout">
   <div class="title">{{ filename | fileIcon(ext) | safe }}<span>{{ filename }}</span></div>
-  <div class="nav">
-    <div><a href="{{ base }}/" hx-get="{{ base }}/" hx-select="#file-pane" hx-target="#file-pane" hx-swap="outerHTML" hx-push-url="true" aria-current="{% if tab == 'Contents' %}true{% else %}false{% endif %}">Contents</a></div>
-    <div>|</div>
-    <div><a href="{{ base }}/history/" hx-get="{{ base }}/history/" hx-select="#file-pane" hx-target="#file-pane" hx-swap="outerHTML" hx-push-url="true" aria-current="{% if tab == 'History' %}true{% else %}false{% endif %}">History</a></div>
-    <div>|</div>
-    <div><a href="{{ base }}/blame/" hx-get="{{ base }}/blame/" hx-select="#file-pane" hx-target="#file-pane" hx-swap="outerHTML" hx-push-url="true" aria-current="{% if tab == 'Blame' %}true{% else %}false{% endif %}">Blame</a></div>
-  </div>
 </div>
 {% endmacro %}

src/_includes/file-tree.njk CHANGED Viewed

@@ -1,11 +1,11 @@
-{% macro renderNodes(nodes, repoId, activePath) %}
+{% macro renderNodes(nodes, repoId) %}
 <ul>
   {% for node in nodes %}
     {% if node.isDirectory %}
     <li>
-      <details {% if node.path | isAncestorDir(activePath) %}open{% endif %}>
+      <details>
         <summary>{{ node.name | folderIcon | safe }}{{ node.name }}/</summary>
-        {{ renderNodes(node.children, repoId, activePath) }}
+        {{ renderNodes(node.children, repoId) }}
       </details>
     </li>
     {% else %}
@@ -18,10 +18,27 @@
         hx-target="#file-pane"
         hx-swap="outerHTML"
         hx-push-url="true"
-        class="{% if node.path == activePath %}active-file{% endif %}"
       >{{ node.name | fileIcon(node.ext) | safe }}{{ node.name }}<span class="file-size">{{ node.size | formatBytes }}</span></a>
     </li>
     {% endif %}
   {% endfor %}
 </ul>
 {% endmacro %}
+{# Loads the repo's shared tree page (repos/tree.njk) instead of repeating the
+   tree in every file page. client.js marks data-active-href once it arrives.
+   ignoreTitle stops htmx copying the tree page's <title> onto this page. #}
+{% macro treeSidebar(repoId, activePath) %}
+{% set treeUrl = "/repos/" + repoId + "/tree/" %}
+<aside
+  class="file-explorer-tree"
+  hx-get="{{ treeUrl }}"
+  hx-trigger="load"
+  hx-select="#file-tree > ul"
+  hx-target="this"
+  hx-swap="innerHTML ignoreTitle:true"
+  {% if activePath %}data-active-href="/repos/{{ repoId }}/files/{{ activePath }}/"{% endif %}
+>
+  <noscript><a href="{{ treeUrl }}">Browse all files</a></noscript>
+</aside>
+{% endmacro %}

src/repos/file-blame.njk DELETED Viewed

@@ -1,47 +0,0 @@
----
-pagination:
-  data: repoFiles
-  size: 1
-  alias: item
-permalink: "/repos/{{ item.repoId }}/files/{{ item.file.path }}/blame/"
-layout: layout.njk
-eleventyComputed:
-  title: "{{ item.file.name }} blame | {{ item.repo.data.title }}"
-  description: "Line-by-line blame for {{ item.file.path }} in {{ item.repo.data.title }}"
-  robots: "noindex, follow"
----
-{% from "repo-layout.njk" import repoLayout %}
-{% from "file-layout.njk" import fileLayout %}
-<div id="repo-page">
-  {{ repoLayout(item.repo.id, item.repo.data.title, item.repo.data.description, item.repo.data.tags, "Files", item.repo.version) }}
-  <div id="repo-content">
-    <div class="file-explorer">
-      <aside class="file-explorer-tree">
-        {% from "file-tree.njk" import renderNodes %}
-        {{ renderNodes(item.repo.tree, item.repoId, item.file.path) }}
-      </aside>
-      <div id="file-pane" class="file-explorer-main">
-        {{ fileLayout(item.repoId, item.file.path, item.file.name, item.file.ext, "Blame") }}
-        <div id="file-content">
-          {% if item.blame.length %}
-          <table class="blame">
-            <tbody>
-              {% for line in item.blame %}
-              <tr>
-                <td class="blame-meta">
-                  <a href="/repos/{{ item.repoId }}/commits/{{ line.hash }}/" title="{{ line.author }} — {{ line.date }}">{{ line.shortHash }}</a>
-                </td>
-                <td class="blame-line-no">{{ line.line }}</td>
-                <td class="blame-content"><pre>{{ line.content }}</pre></td>
-              </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-          {% else %}
-            <p>No blame information available for this file.</p>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

src/repos/file-history.njk DELETED Viewed

@@ -1,44 +0,0 @@
----
-pagination:
-  data: repoFiles
-  size: 1
-  alias: item
-permalink: "/repos/{{ item.repoId }}/files/{{ item.file.path }}/history/"
-layout: layout.njk
-eleventyComputed:
-  title: "{{ item.file.name }} history | {{ item.repo.data.title }}"
-  description: "Commit history for {{ item.file.path }} in {{ item.repo.data.title }}"
-  robots: "noindex, follow"
----
-{% from "repo-layout.njk" import repoLayout %}
-{% from "file-layout.njk" import fileLayout %}
-<div id="repo-page">
-  {{ repoLayout(item.repo.id, item.repo.data.title, item.repo.data.description, item.repo.data.tags, "Files", item.repo.version) }}
-  <div id="repo-content">
-    <div class="file-explorer">
-      <aside class="file-explorer-tree">
-        {% from "file-tree.njk" import renderNodes %}
-        {{ renderNodes(item.repo.tree, item.repoId, item.file.path) }}
-      </aside>
-      <div id="file-pane" class="file-explorer-main">
-        {{ fileLayout(item.repoId, item.file.path, item.file.name, item.file.ext, "History") }}
-        <div id="file-content">
-          {% if item.history.length %}
-            {% for commit in item.history %}
-            <div class="event">
-              <div>
-                <a href="/repos/{{ item.repoId }}/commits/{{ commit.hash }}/">{{ commit.shortHash }}</a>
-                — <strong>{{ commit.author }}</strong>
-                <small class="pull-right"><span>{{ commit.date }}</span></small>
-              </div>
-              <pre class="commit">{{ commit.message }}</pre>
-            </div>
-            {% endfor %}
-          {% else %}
-            <p>No history found for this file.</p>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

src/repos/file.njk CHANGED Viewed

@@ -16,12 +16,10 @@ eleventyComputed:
   {{ repoLayout(item.repo.id, item.repo.data.title, item.repo.data.description, item.repo.data.tags, "Files", item.repo.version) }}
   <div id="repo-content">
     <div class="file-explorer">
-      <aside class="file-explorer-tree">
-        {% from "file-tree.njk" import renderNodes %}
+      {% from "file-tree.njk" import treeSidebar %}
-        {{ renderNodes(item.repo.tree, item.repoId, item.file.path) }}
+      {{ treeSidebar(item.repoId, item.file.path) }}
-      </aside>
       <div id="file-pane" class="file-explorer-main">
-        {{ fileLayout(item.repoId, item.file.path, item.file.name, item.file.ext, "Contents") }}
+        {{ fileLayout(item.file.name, item.file.ext) }}
         {{ fileContent(item.render, item.file.size, item.file.path) }}
       </div>
     </div>

src/repos/files-index.njk CHANGED Viewed

@@ -17,13 +17,11 @@ eleventyComputed:
   {{ repoLayout(repo.id, repo.data.title, repo.data.description, repo.data.tags, "Files", repo.version) }}
   <div id="repo-content">
     <div class="file-explorer">
-      <aside class="file-explorer-tree">
-        {% from "file-tree.njk" import renderNodes %}
+      {% from "file-tree.njk" import treeSidebar %}
-        {{ renderNodes(repo.tree, repo.id, activePath) }}
+      {{ treeSidebar(repo.id, activePath) }}
-      </aside>
       <div id="file-pane" class="file-explorer-main">
         {% if defaultEntry %}
-          {{ fileLayout(repo.id, defaultEntry.file.path, defaultEntry.file.name, defaultEntry.file.ext, "Contents") }}
+          {{ fileLayout(defaultEntry.file.name, defaultEntry.file.ext) }}
           {{ fileContent(defaultEntry.render, defaultEntry.file.size, defaultEntry.file.path) }}
         {% else %}
           <p class="file-explorer-placeholder">Select a file to view its contents.</p>

src/repos/tree.njk ADDED Viewed

@@ -0,0 +1,21 @@
+---
+pagination:
+  data: localRepos
+  size: 1
+  alias: repo
+permalink: "/repos/{{ repo.id }}/tree/"
+layout: layout.njk
+eleventyComputed:
+  title: "Files | {{ repo.data.title }}"
+  description: "All source files in {{ repo.data.title }}"
+  robots: "noindex, follow"
+---
+{% from "file-tree.njk" import renderNodes %}
+{# The one copy of this repo's file tree: file pages fetch it with htmx (see
+   treeSidebar in file-tree.njk). hx-disable makes the links plain navigation
+   when this page is opened directly, where there's no #file-pane to target. #}
+<div class="file-explorer">
+  <aside id="file-tree" class="file-explorer-tree" hx-disable>
+    {{ renderNodes(repo.tree, repo.id) }}
+  </aside>
+</div>

tests/pages.test.js CHANGED Viewed

@@ -117,7 +117,8 @@ describe("static pages", () => {
     // content repeated thousands of times across repos) and must not be
     // submitted for indexing.
     assert.doesNotMatch(body, /\/repos\/website\/commits\/[0-9a-f]{20,}\//);
-    assert.doesNotMatch(body, /\/repos\/website\/files\/.*\/(history|blame)\//);
+    assert.doesNotMatch(body, /\/repos\/website\/files\/[^<]+\//);
+    assert.doesNotMatch(body, /\/repos\/website\/tree\//);
   });
   test("unknown route returns the 404 page", async () => {
@@ -148,7 +149,7 @@ describe("repo pages", () => {
     assert.equal(jsonLd.description, description);
   });
-  test("commit and file-history/blame pages are noindex to avoid thin/duplicate content", async () => {
+  test("commit, file and tree pages are noindex to avoid thin/duplicate content", async () => {
     await goto(`/repos/${repoId}/commits/`);
     // Scoped to `.event` to grab an actual commit row, not the repo-layout
     // nav's own "Commits" tab link (which also matches the href prefix and
@@ -157,10 +158,10 @@ describe("repo pages", () => {
     await goto(firstCommitHref);
     assert.equal(await page.locator('meta[name="robots"]').getAttribute("content"), "noindex, follow");
-    await goto(`/repos/${repoId}/files/eleventy.config.js/history/`);
+    await goto(`/repos/${repoId}/files/eleventy.config.js/`);
     assert.equal(await page.locator('meta[name="robots"]').getAttribute("content"), "noindex, follow");
-    await goto(`/repos/${repoId}/files/eleventy.config.js/blame/`);
+    await goto(`/repos/${repoId}/tree/`);
     assert.equal(await page.locator('meta[name="robots"]').getAttribute("content"), "noindex, follow");
   });
@@ -182,19 +183,52 @@ describe("repo pages", () => {
   test("repo files index renders the tree and a default file", async () => {
     const response = await goto(`/repos/${repoId}/files/`);
     assert.equal(response.status(), 200);
-    assert.ok((await page.locator(".file-explorer-tree").count()) > 0);
+    await page.locator(".file-explorer-tree a.active-file").waitFor();
   });
-  test("a specific file, its history and blame views render", async () => {
+  test("a specific file renders, and its history and blame views are gone", async () => {
     const filePath = "eleventy.config.js";
     const fileRes = await goto(`/repos/${repoId}/files/${filePath}/`);
     assert.equal(fileRes.status(), 200);
-    const historyRes = await goto(`/repos/${repoId}/files/${filePath}/history/`);
+    assert.equal((await goto(`/repos/${repoId}/files/${filePath}/history/`)).status(), 404);
+    assert.equal((await goto(`/repos/${repoId}/files/${filePath}/blame/`)).status(), 404);
+  });
+  test("file pages load the shared tree instead of embedding it", async () => {
+    const filePath = "src/_data/site.js";
+    const activeHref = `/repos/${repoId}/files/${filePath}/`;
+    const response = await goto(activeHref);
+    const html = await response.text();
+    assert.doesNotMatch(html, /href="\/repos\/website\/files\/package\.json\/"/);
+    const title = await page.title();
+    const active = page.locator(".file-explorer-tree a.active-file");
+    await active.waitFor();
+    assert.equal(await active.getAttribute("href"), activeHref);
+    // Only the folders above the active file open, and the fetched tree page's
+    // <title> doesn't replace this page's.
+    assert.equal(await page.locator(".file-explorer-tree details[open]").count(), 2);
-    assert.equal(historyRes.status(), 200);
+    assert.equal(await page.title(), title);
+  });
+  test("clicking a file in the loaded tree swaps the pane and moves the highlight", async () => {
-    const blameRes = await goto(`/repos/${repoId}/files/${filePath}/blame/`);
+    await goto(`/repos/${repoId}/files/eleventy.config.js/`);
+    await page.locator(".file-explorer-tree a.active-file").waitFor();
+    const href = `/repos/${repoId}/files/package.json/`;
+    await page.click(`.file-explorer-tree a[href='${href}']`);
+    await page.waitForURL(`${server.url}${href}`);
+    await page.locator("#file-pane .title", { hasText: "package.json" }).waitFor();
+    assert.equal(await page.locator(".file-explorer-tree a.active-file").getAttribute("href"), href);
+  });
+  test("the tree page works on its own, with plain links", async () => {
+    const response = await goto(`/repos/${repoId}/tree/`);
-    assert.equal(blameRes.status(), 200);
+    assert.equal(response.status(), 200);
+    const href = `/repos/${repoId}/files/package.json/`;
+    await page.click(`#file-tree a[href='${href}']`);
+    await page.waitForURL(`${server.url}${href}`);
+    await page.locator("#file-pane .title", { hasText: "package.json" }).waitFor();
   });
   test("repo nav tabs swap content via htmx without a full reload", async () => {
@@ -206,9 +240,9 @@ describe("repo pages", () => {
 });
 test("no unexpected console errors were logged across visited pages", () => {
-  // The deliberate 404 test above triggers a browser-level "failed to load
+  // The deliberate 404 tests above trigger a browser-level "failed to load
-  // resource" console entry for its own navigation request — that's the
+  // resource" console entry for their own navigation requests — that's the
-  // behavior under test there, not a bug, so it's excluded here.
+  // behavior under test there, not a bug, so they're excluded here.
-  const unexpected = consoleErrors.filter((msg) => !msg.includes("this-page-does-not-exist"));
+  const unexpected = consoleErrors.filter((msg) => !/this-page-does-not-exist|\/(history|blame)\/\]/.test(msg));
   assert.deepEqual(unexpected, []);
 });