From eff2e1e7b31f046c974b88b409296af81b9f5615 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Thu, 22 Jan 2026 18:35:27 -0500
Subject: Add blob view for displaying file contents

---
 cgithub/views/blob.eta | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 cgithub/views/blob.eta

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
new file mode 100644
index 0000000..d3c6a56
--- /dev/null
+++ b/cgithub/views/blob.eta
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path %></title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <header>
+    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
+    <div>branch: <%= it.branch %></div>
+    <div>
+      path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
+      const pathParts = it.path.split('/').filter(p => p);
+      let currentPath = '';
+      for (let i = 0; i < pathParts.length; i++) {
+        const part = pathParts[i];
+        currentPath += (currentPath ? '/' : '') + part;
+        const isLast = i === pathParts.length - 1;
+        if (isLast) {
+          %>/<%= part %><%
+        } else {
+          %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+        }
+      } %>
+    </div>
+    <% if (it.language) { %>
+      <div>language: <%= it.language %></div>
+    <% } %>
+    <div>size: <%= it.size %> bytes</div>
+  </header>
+
+  <pre class="blob"><code><%= it.rawContent %></code></pre>
+
+  <footer>Generated by cgithub</footer>
+</body>
+</html>
-- 
cgit v1.3.1


From a64548630c531d7a7960f5e83d727a8bd423deaa Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Fri, 23 Jan 2026 01:07:48 -0500
Subject: Refactor template layout

---
 cgithub/views/blob.eta   | 38 ++------------------------------
 cgithub/views/layout.eta | 41 +++++++++++++++++++++++++++++++++++
 cgithub/views/tree.eta   | 56 +++++++++++++-----------------------------------
 3 files changed, 58 insertions(+), 77 deletions(-)
 create mode 100644 cgithub/views/layout.eta

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index d3c6a56..566f5b0 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,37 +1,3 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path %></title>
-  <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-  <header>
-    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div>branch: <%= it.branch %></div>
-    <div>
-      path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
-      const pathParts = it.path.split('/').filter(p => p);
-      let currentPath = '';
-      for (let i = 0; i < pathParts.length; i++) {
-        const part = pathParts[i];
-        currentPath += (currentPath ? '/' : '') + part;
-        const isLast = i === pathParts.length - 1;
-        if (isLast) {
-          %>/<%= part %><%
-        } else {
-          %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
-        }
-      } %>
-    </div>
-    <% if (it.language) { %>
-      <div>language: <%= it.language %></div>
-    <% } %>
-    <div>size: <%= it.size %> bytes</div>
-  </header>
+<% layout("./layout") %>
 
-  <pre class="blob"><code><%= it.rawContent %></code></pre>
-
-  <footer>Generated by cgithub</footer>
-</body>
-</html>
+<pre class="blob"><code><%= it.rawContent %></code></pre>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
new file mode 100644
index 0000000..8e5d9d9
--- /dev/null
+++ b/cgithub/views/layout.eta
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || 'root' %></title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <header>
+    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
+    <div>branch: <%= it.branch %></div>
+    <% if (it.path) { %>
+      <div>
+        path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
+        const pathParts = it.path.split('/').filter(p => p);
+        let currentPath = '';
+        for (let i = 0; i < pathParts.length; i++) {
+          const part = pathParts[i];
+          currentPath += (currentPath ? '/' : '') + part;
+          const isLast = i === pathParts.length - 1;
+          if (isLast) {
+            %>/<%= part %><%
+          } else {
+            %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+          }
+        } %>
+      </div>
+    <% } %>
+    <% if (it.language) { %>
+      <div>language: <%= it.language %></div>
+    <% } %>
+    <% if (it.size !== undefined) { %>
+      <div>size: <%= it.size %> bytes</div>
+    <% } %>
+  </header>
+
+  <%~ it.body %>
+
+  <footer>Generated by cgithub</footer>
+</body>
+</html>
diff --git a/cgithub/views/tree.eta b/cgithub/views/tree.eta
index b49668d..911b7ee 100644
--- a/cgithub/views/tree.eta
+++ b/cgithub/views/tree.eta
@@ -1,42 +1,16 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || 'root' %></title>
-  <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-  <header>
-    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div>branch: <%= it.branch %></div>
-    <% if (it.path) { %>
-      <div>
-        path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
-        const pathParts = it.path.split('/').filter(p => p);
-        let currentPath = '';
-        for (const part of pathParts) {
-          currentPath += (currentPath ? '/' : '') + part;
-        %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
-        } %>
-      </div>
-    <% } %>
-  </header>
+<% layout("./layout") %>
 
-  <table>
-    <% for (const item of it.items) { %>
-      <tr>
-        <td>
-          <span class="icon"><%= item.contentType === 'directory' ? '📁' : '📄' %></span>
-          <% if (item.contentType === 'directory') { %>
-            <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
-          <% } else { %>
-            <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
-          <% } %>
-        </td>
-      </tr>
-    <% } %>
-  </table>
-
-  <footer>Generated by cgithub</footer>
-</body>
-</html>
+<table>
+  <% for (const item of it.items) { %>
+    <tr>
+      <td>
+        <span class="icon"><%= item.contentType === 'directory' ? '📁' : '📄' %></span>
+        <% if (item.contentType === 'directory') { %>
+          <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
+        <% } else { %>
+          <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
+        <% } %>
+      </td>
+    </tr>
+  <% } %>
+</table>
-- 
cgit v1.3.1


From 37aa28f1465cfdd26a58c6dd5b752141ea876cde Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Sun, 25 Jan 2026 18:51:27 -0500
Subject: Styling

---
 cgithub/static/style.css | 65 ++++++++++++++++++++++++++++++++++++------------
 cgithub/views/blob.eta   | 11 +++++++-
 cgithub/views/layout.eta | 18 +++++---------
 cgithub/views/repo.eta   |  8 +++---
 4 files changed, 69 insertions(+), 33 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index e552787..1229fce 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -1,33 +1,66 @@
 body {
-  margin: 0;
-  padding: 1rem;
+  margin: 0 1rem;
   font-family: Helvetica, Arial, sans-serif;
-}
-
-.icon {
-  height: 1lh;
-  vertical-align: text-bottom;
-}
 
-pre.blob {
-  margin: 1rem 0;
-  padding: 1rem;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  overflow-x: auto;
-  font-family: monospace;
+  --border-color: #d0d7de;
 }
 
 @media (prefers-color-scheme: dark) {
   body {
     background: #0d1117;
     color: #e6edf3;
+    --border-color: #30363d;
   }
   a {
     color: #4493f8;
   }
   .blob {
-    border-color: #30363d;
     background: #161b22;
   }
 }
+
+a {
+  text-decoration: none;
+}
+
+header, .box {
+  margin: 1rem 0;
+  border: 1px solid var(--border-color);
+  padding: .5rem;
+}
+
+footer {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.icon {
+  height: 1lh;
+  vertical-align: text-bottom;
+}
+
+.repo {
+  margin-bottom: 1rem;
+  font-size: 120%;
+  font-weight: bold;
+}
+
+.branch {
+  display: inline-block;
+  margin-right: 1rem;
+  padding: .2rem;
+  border: 1px solid var(--border-color);
+}
+
+.description {
+  margin-bottom: .2rem;
+}
+
+.count + .count {
+  margin-left: 1rem;
+}
+
+pre.box {
+  /* Instead of scrolling overflow for long lines, grow the box. */
+  width: fit-content;
+}
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 566f5b0..9b478b5 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,3 +1,12 @@
 <% layout("./layout") %>
 
-<pre class="blob"><code><%= it.rawContent %></code></pre>
+<div>
+  <% if (it.language) { %>
+    <div>language: <%= it.language %></div>
+  <% } %>
+  <% if (it.size !== undefined) { %>
+    <div>size: <%= it.size %> bytes</div>
+  <% } %>
+</div>
+
+<pre class="box"><code><%= it.rawContent %></code></pre>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index 982f8c0..a191301 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || 'root' %></title>
+  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || '/' %></title>
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
   <header>
-    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
+    <div class="repo"><%= it.repo.owner %>/<%= it.repo.name %></div>
+    <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
     <% if (it.path) { %>
-      <div>
-        path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
+      <span>
+        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
         const pathParts = it.path.split('/').filter(p => p);
         let currentPath = '';
         for (let i = 0; i < pathParts.length; i++) {
@@ -24,13 +24,7 @@
             %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
           }
         } %>
-      </div>
-    <% } %>
-    <% if (it.language) { %>
-      <div>language: <%= it.language %></div>
-    <% } %>
-    <% if (it.size !== undefined) { %>
-      <div>size: <%= it.size %> bytes</div>
+      </span>
     <% } %>
   </header>
 
diff --git a/cgithub/views/repo.eta b/cgithub/views/repo.eta
index 4338708..4965e75 100644
--- a/cgithub/views/repo.eta
+++ b/cgithub/views/repo.eta
@@ -1,7 +1,7 @@
 <% layout("./layout") %>
 
 <% if (it.info) { %>
-  <div class="repo-info">
+  <div class="box">
     <% if (it.info.description) { %>
       <div class="description"><%= it.info.description %></div>
     <% } %>
@@ -9,13 +9,13 @@
       <div><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= it.info.website %>" rel="noopener noreferrer"><%= it.info.website %></a></div>
     <% } %>
     <% if (it.info.stars) { %>
-      <span><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
+      <span class="count"><img src="/static/icons/star.svg" alt="stars" class="icon"> <%= it.info.stars %></span>
     <% } %>
     <% if (it.info.watchers) { %>
-      <span><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
+      <span class="count"><img src="/static/icons/eye.svg" alt="watchers" class="icon"> <%= it.info.watchers %></span>
     <% } %>
     <% if (it.info.forks) { %>
-      <span><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
+      <span class="count"><img src="/static/icons/git-fork.svg" alt="forks" class="icon"> <%= it.info.forks %></span>
     <% } %>
   </div>
 <% } %>
-- 
cgit v1.3.1


From 1631e0f74a488a8cf42e3fe699e96e9389bbb596 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Mon, 26 Jan 2026 11:47:06 -0500
Subject: Overview (README) in trees

---
 cgithub/.prettierrc      |  3 +++
 cgithub/src/scraper.ts   | 56 +++++++++++++++++++++++++++---------------------
 cgithub/static/style.css | 43 +++++++++++++++++++++++++++++++++++--
 cgithub/views/_tree.eta  |  9 ++++++++
 cgithub/views/blob.eta   |  3 +++
 5 files changed, 88 insertions(+), 26 deletions(-)
 create mode 100644 cgithub/.prettierrc

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/.prettierrc b/cgithub/.prettierrc
new file mode 100644
index 0000000..de753c5
--- /dev/null
+++ b/cgithub/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index a405139..c1bdef5 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -4,6 +4,13 @@ interface TreeItem {
   path: string;
 }
 
+interface OverviewFile {
+  displayName: string;
+  preferredFileType: string;
+  richText?: string;
+  loaded: boolean;
+}
+
 interface RawPayload {
   repo: {
     ownerLogin: string;
@@ -22,6 +29,9 @@ interface RawPayload {
     }[];
     size: number;
   };
+  overview?: {
+    overviewFiles?: OverviewFile[];
+  };
 }
 
 interface GitHubCommon {
@@ -35,6 +45,7 @@ interface GitHubCommon {
 
 export interface GitHubTree extends GitHubCommon {
   items: TreeItem[];
+  overviewHtml?: Record<string, string>;
 }
 
 export interface RepoInfo {
@@ -62,19 +73,14 @@ async function fetchGitHubPage(path: string): Promise<string> {
   const headers = {
     "User-Agent":
       "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
-    Accept:
-      "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+    Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
     "Accept-Language": "en-US,en;q=0.5",
   };
   const response = await fetch(`https://github.com/${path}`, { headers });
   return response.text();
 }
 
-function parsePayload(
-  html: string,
-  dataTarget: string,
-  prop: string[],
-): RawPayload | null {
+function parsePayload(html: string, dataTarget: string, prop: string[]): RawPayload | null {
   const regex = new RegExp(
     `<script type="application/json" data-target="${dataTarget}">([^<]+)</script>`,
     "g",
@@ -99,9 +105,7 @@ function parsePayload(
 function parseRepoInfo(html: string): RepoInfo {
   const descMatch = html.match(/<p[^>]*class="[^"]*f4[^"]*"[^>]*>([\s\S]*?)<\/p>/);
   const description = descMatch?.[1]?.replace(/<[^>]+>/g, "").trim() || null;
-  const websiteMatch = html.match(
-    /<a[^>]*rel="noopener noreferrer nofollow"[^>]*href="([^"]+)"/,
-  );
+  const websiteMatch = html.match(/<a[^>]*rel="noopener noreferrer nofollow"[^>]*href="([^"]+)"/);
   const starsMatch = html.match(/id="repo-stars-counter-star"[^>]*>([^<]+)/);
   const watchersMatch = html.match(/<strong>(\d+)<\/strong>\s*watching/);
   const forksMatch = html.match(/id="repo-network-counter"[^>]*>([^<]+)/);
@@ -115,6 +119,16 @@ function parseRepoInfo(html: string): RepoInfo {
   };
 }
 
+function extractOverviewHtml(payload: RawPayload): Record<string, string> | undefined {
+  const result: Record<string, string> = {};
+  for (const file of payload.overview?.overviewFiles ?? []) {
+    if (file.loaded && file.richText !== undefined) {
+      result[file.displayName] = file.richText;
+    }
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
 function extractGitHub<T>(payload: RawPayload, extra: T): GitHubCommon & T {
   return {
     repo: {
@@ -127,24 +141,19 @@ function extractGitHub<T>(payload: RawPayload, extra: T): GitHubCommon & T {
   };
 }
 
-export async function getGitHubRepo(
-  owner: string,
-  repo: string,
-): Promise<GitHubRepo> {
+export async function getGitHubRepo(owner: string, repo: string): Promise<GitHubRepo> {
   const html = await fetchGitHubPage(`${owner}/${repo}`);
 
-  const payload = parsePayload(html, "react-partial.embeddedData", [
-    "props",
-    "initialPayload",
-  ]);
+  const payload = parsePayload(html, "react-partial.embeddedData", ["props", "initialPayload"]);
 
   if (payload?.tree === undefined) {
     throw new Error("Could not find tree data in embedded JSON");
   }
 
   const info = parseRepoInfo(html);
+  const overviewHtml = extractOverviewHtml(payload);
 
-  return extractGitHub(payload, { items: payload.tree.items, info });
+  return extractGitHub(payload, { items: payload.tree.items, info, overviewHtml });
 }
 
 export async function getGitHubTree(
@@ -158,10 +167,7 @@ export async function getGitHubTree(
   // GitHub uses different formats for root vs subdirectories.
   const payload =
     // Root directory format.
-    parsePayload(html, "react-partial.embeddedData", [
-      "props",
-      "initialPayload",
-    ]) ||
+    parsePayload(html, "react-partial.embeddedData", ["props", "initialPayload"]) ||
     // Subdirectory format.
     parsePayload(html, "react-app.embeddedData", ["payload"]);
 
@@ -169,7 +175,9 @@ export async function getGitHubTree(
     throw new Error("Could not find tree data in embedded JSON");
   }
 
-  return extractGitHub(payload, { items: payload.tree.items });
+  const overviewHtml = extractOverviewHtml(payload);
+
+  return extractGitHub(payload, { items: payload.tree.items, overviewHtml });
 }
 
 export async function getGitHubBlob(
diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index 1229fce..ff787d6 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -3,6 +3,7 @@ body {
   font-family: Helvetica, Arial, sans-serif;
 
   --border-color: #d0d7de;
+  --shade-background: #eeeeee;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -23,10 +24,20 @@ a {
   text-decoration: none;
 }
 
-header, .box {
+body > header, .box {
+  --box-padding: .5rem;
+
   margin: 1rem 0;
   border: 1px solid var(--border-color);
-  padding: .5rem;
+  padding: var(--box-padding);
+
+  > header:first-child {
+    margin: calc(-1 * var(--box-padding));
+    margin-bottom: 0;
+    padding: .5rem;
+    border-bottom: 1px solid var(--border-color);
+    font-weight: bold;
+  }
 }
 
 footer {
@@ -64,3 +75,31 @@ pre.box {
   /* Instead of scrolling overflow for long lines, grow the box. */
   width: fit-content;
 }
+
+.overview {
+  overflow-wrap: break-word;
+  &.box {
+    --box-padding: 1rem;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  h1, h2 {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code {
+    background: var(--shade-background);
+  }
+
+  /* TODO Strip permalinks? */
+  svg.octicon-link {
+    display: none;
+  }
+}
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index 2549bb8..f287c03 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -13,3 +13,12 @@
     </tr>
   <% } %>
 </table>
+
+<% if (it.overviewHtml) { %>
+  <% for (const [filename, html] of Object.entries(it.overviewHtml)) { %>
+    <div class="overview box">
+      <header><%= filename %></header>
+      <%~ html %>
+    </div>
+  <% } %>
+<% } %>
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 9b478b5..7328a62 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -7,6 +7,9 @@
   <% if (it.size !== undefined) { %>
     <div>size: <%= it.size %> bytes</div>
   <% } %>
+  <div>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>">Raw</a>
+  </div>
 </div>
 
 <pre class="box"><code><%= it.rawContent %></code></pre>
-- 
cgit v1.3.1


From 64c397e256b01a2e542e84529e947e237c07edd6 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 27 Jan 2026 16:58:56 -0500
Subject: Split branch and path bread crumbs into separate section

---
 cgithub/static/style.css |  7 +++++--
 cgithub/views/_nav.eta   | 18 ++++++++++++++++++
 cgithub/views/_tree.eta  |  2 ++
 cgithub/views/blob.eta   |  4 +++-
 cgithub/views/layout.eta | 22 ++--------------------
 cgithub/views/repo.eta   |  2 +-
 cgithub/views/tree.eta   |  4 ++--
 7 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 cgithub/views/_nav.eta

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index d21bd32..cccb1ba 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -39,7 +39,11 @@ a {
   color: var(--link-color);
 }
 
-body > header, .box {
+section {
+  margin: 1rem 0;
+}
+
+.box {
   --box-padding: .5rem;
 
   margin: 1rem 0;
@@ -79,7 +83,6 @@ footer {
 }
 
 .repo {
-  margin-bottom: 1rem;
   font-size: 120%;
   font-weight: bold;
 }
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
new file mode 100644
index 0000000..338a6a6
--- /dev/null
+++ b/cgithub/views/_nav.eta
@@ -0,0 +1,18 @@
+<section>
+  <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
+  <% if (it.path && it.path !== "/") { %>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
+    const pathParts = it.path.split('/').filter(p => p);
+    let currentPath = '';
+    for (let i = 0; i < pathParts.length; i++) {
+      const part = pathParts[i];
+      currentPath += (currentPath ? '/' : '') + part;
+      const isLast = i === pathParts.length - 1;
+      if (isLast) {
+        %>/<%= part %><%= it.isTree ? "/" : "" %><%
+      } else {
+        %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+      }
+    } %>
+  <% } %>
+</section>
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index d0c3453..311762f 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -1,3 +1,5 @@
+<%~ include("./_nav.eta", {...it, isTree: true}) %>
+
 <table>
   <% for (const item of it.items) { %>
     <tr>
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 7328a62..277b46d 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,4 +1,6 @@
-<% layout("./layout") %>
+<% layout("./layout.eta") %>
+
+<%~ include("./_nav.eta", it) %>
 
 <div>
   <% if (it.language) { %>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index bfcd370..f053b84 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -6,29 +6,11 @@
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-  <header>
+  <div class="box">
     <div class="repo"><%= it.repo.owner %>/<%= it.repo.name %></div>
-    <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
-    <% if (it.path) { %>
-      <span>
-        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
-        const pathParts = it.path.split('/').filter(p => p);
-        let currentPath = '';
-        for (let i = 0; i < pathParts.length; i++) {
-          const part = pathParts[i];
-          currentPath += (currentPath ? '/' : '') + part;
-          const isLast = i === pathParts.length - 1;
-          if (isLast) {
-            %>/<%= part %><%
-          } else {
-            %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
-          }
-        } %>
-      </span>
-    <% } %>
     <pre><code>git clone https://github.com/<%= it.repo.owner %>/<%= it.repo.name %>.git
 git clone git@github.com:<%= it.repo.owner %>/<%= it.repo.name %>.git</code></pre>
-  </header>
+  </div>
 
   <%~ it.body %>
 
diff --git a/cgithub/views/repo.eta b/cgithub/views/repo.eta
index 5bebb95..9122775 100644
--- a/cgithub/views/repo.eta
+++ b/cgithub/views/repo.eta
@@ -1,4 +1,4 @@
-<% layout("./layout") %>
+<% layout("./layout.eta") %>
 
 <% if (it.info) { %>
   <div class="box">
diff --git a/cgithub/views/tree.eta b/cgithub/views/tree.eta
index 7068754..6e675e1 100644
--- a/cgithub/views/tree.eta
+++ b/cgithub/views/tree.eta
@@ -1,3 +1,3 @@
-<% layout("./layout") %>
+<% layout("./layout.eta") %>
 
-<%~ include("./_tree", it) %>
+<%~ include("./_tree.eta", it) %>
-- 
cgit v1.3.1


From 89a771538a6a673de7cfe658b1db028acdfa0e44 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Wed, 28 Jan 2026 13:05:02 -0500
Subject: Render Markdown blobs

---
 cgithub/src/scraper.test.ts | 38 ++++++++++++++++++++++++++++++++++----
 cgithub/src/scraper.ts      | 39 +++++++++++++++++++--------------------
 cgithub/static/style.css    | 10 +++++-----
 cgithub/views/blob.eta      | 10 ++++++----
 4 files changed, 64 insertions(+), 33 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index e7e65ba..f3a472d 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -59,7 +59,7 @@ describe("GitHub scraper", () => {
       ]);
     });
 
-    it("should fetch blob", async () => {
+    it("should fetch text blob", async () => {
       const data = await getGitHubBlob("actions", "deploy-pages", "main", "LICENSE");
 
       assert.strictEqual(data.repo.owner, "actions");
@@ -67,10 +67,40 @@ describe("GitHub scraper", () => {
       assert.strictEqual(data.branch, "main");
       assert.strictEqual(data.path, "LICENSE");
 
-      assert.strictEqual(data.size, 1068);
+      assert.strictEqual(data.size, "1.04 KB / 21 lines / 17 loc");
       assert.strictEqual(data.language, "Text");
-      assert.match(data.rawContent, /^MIT License\n\n/);
-      assert.match(data.content, /^MIT License\n\n/);
+      assert.strictEqual(data.rawLines?.[0], "MIT License");
+      assert.strictEqual(data.htmlContent, null);
+    });
+
+    it("should fetch Markdown blob", async () => {
+      const data = await getGitHubBlob("actions", "deploy-pages", "main", "README.md");
+
+      assert.strictEqual(data.repo.owner, "actions");
+      assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.strictEqual(data.branch, "main");
+      assert.strictEqual(data.path, "README.md");
+
+      assert.strictEqual(data.size, "8.95 KB / 133 lines / 94 loc");
+      assert.strictEqual(data.language, "Markdown");
+      assert.strictEqual(data.rawLines, null);
+      const firstLine =
+        /^<article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">deploy-pages 🚀<\/h1>/;
+      assert.match(data.htmlContent ?? "", firstLine);
+    });
+
+    it("should fetch code blob", async () => {
+      const data = await getGitHubBlob("actions", "deploy-pages", "main", ".gitattributes");
+
+      assert.strictEqual(data.repo.owner, "actions");
+      assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.strictEqual(data.branch, "main");
+      assert.strictEqual(data.path, ".gitattributes");
+
+      assert.strictEqual(data.size, "39 Bytes / 1 lines / 1 loc");
+      assert.strictEqual(data.language, "Git Attributes");
+      assert.deepStrictEqual(data.rawLines, ["dist/** -diff linguist-generated=true "]);
+      assert.strictEqual(data.htmlContent, null);
     });
 
     it("should fetch issues", async () => {
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index bbf7511..c2983c9 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -16,7 +16,6 @@ interface TreeItem {
 
 interface OverviewFile {
   displayName: string;
-  preferredFileType: string;
   richText?: string;
   loaded: boolean;
 }
@@ -64,12 +63,17 @@ interface RawPayload {
     items: TreeItem[];
   };
   blob?: {
+    headerInfo: {
+      blobSize: string;
+      lineInfo: {
+        truncatedLoc: string;
+        truncatedSloc: string;
+      };
+    };
     language?: string;
-    rawLines?: string[];
-    highlightedLines?: {
-      text?: string;
-    }[];
-    size: number;
+    rawLines: string[] | null;
+    colorizedLines: string[] | null;
+    richText: string | null;
   };
   overview?: {
     overviewFiles?: OverviewFile[];
@@ -110,9 +114,9 @@ export interface GitHubRepo extends GitHubTree {
 
 export interface GitHubBlob extends GitHubNav {
   language: string | null;
-  size: number | null;
-  content: string;
-  rawContent: string;
+  size: string;
+  rawLines: string[] | null;
+  htmlContent: string | null;
 }
 
 interface Issue {
@@ -265,20 +269,15 @@ export async function getGitHubBlob(
     throw new Error("Could not find blob data in embedded JSON");
   }
 
-  const blob = payload.blob;
-  const rawLines = blob.rawLines || [];
-  const rawContent = rawLines.join("\n");
-  const highlightedLines = blob.highlightedLines || [];
-  const content = highlightedLines.map((line) => line.text || "").join("\n");
-
-  // Calculate size from raw content if not provided
-  const size = blob.size ?? (rawContent.length > 0 ? Buffer.byteLength(rawContent, "utf8") : null);
+  const { headerInfo, language, rawLines, richText } = payload.blob;
+  // TODO fine tune
+  const size = `${headerInfo.blobSize} / ${headerInfo.lineInfo.truncatedLoc} lines / ${headerInfo.lineInfo.truncatedSloc} loc`;
 
   return extractGitHub(payload, {
-    content: content || rawContent,
-    rawContent,
-    language: blob.language || null,
+    language: language || null,
     size,
+    rawLines,
+    htmlContent: richText,
   });
 }
 
diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index 7618937..1efbb12 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -163,14 +163,14 @@ pre.box {
   code {
     background: var(--shade-background);
   }
-
-  /* TODO Strip permalinks? */
-  svg.octicon-link {
-    display: none;
-  }
 }
 
 .timestamp {
   white-space: nowrap;
   font-size: .8rem;
 }
+
+/* TODO Strip permalinks? */
+svg.octicon-link {
+  display: none;
+}
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 277b46d..346afab 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -6,12 +6,14 @@
   <% if (it.language) { %>
     <div>language: <%= it.language %></div>
   <% } %>
-  <% if (it.size !== undefined) { %>
-    <div>size: <%= it.size %> bytes</div>
-  <% } %>
+  <div><%= it.size %></div>
   <div>
     <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>">Raw</a>
   </div>
 </div>
 
-<pre class="box"><code><%= it.rawContent %></code></pre>
+<% if (it.htmlContent) { %>
+  <div class="box"><%~ it.htmlContent %></div>
+<% } else { %>
+  <pre class="box"><code><%= it.rawLines.join("\n") %></code></pre>
+<% } %>
-- 
cgit v1.3.1


From 71442a856d2180c68a51a1db480514d611137bd0 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Wed, 28 Jan 2026 14:40:22 -0500
Subject: Syntax highlighting

Sometimes GitHub returns colorizedLines and sometimes it returns a
terser stylingDirectives, which needs to be applied to rawLines.
---
 cgithub/src/scraper.test.ts | 13 ++++++++++---
 cgithub/src/scraper.ts      | 43 ++++++++++++++++++++++++++++++++++++++-----
 cgithub/static/style.css    | 22 ++++++++++++++++++++++
 cgithub/views/blob.eta      |  4 +++-
 4 files changed, 73 insertions(+), 9 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index f3a472d..9326747 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -69,7 +69,10 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.size, "1.04 KB / 21 lines / 17 loc");
       assert.strictEqual(data.language, "Text");
-      assert.strictEqual(data.rawLines?.[0], "MIT License");
+      assert.strictEqual(data.textLines?.length, 21);
+      assert.strictEqual(data.textLines[0], "MIT License");
+      assert.strictEqual(data.htmlLines?.length, 21);
+      assert.strictEqual(data.htmlLines[0], "MIT License");
       assert.strictEqual(data.htmlContent, null);
     });
 
@@ -83,7 +86,8 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.size, "8.95 KB / 133 lines / 94 loc");
       assert.strictEqual(data.language, "Markdown");
-      assert.strictEqual(data.rawLines, null);
+      assert.strictEqual(data.textLines, null);
+      assert.strictEqual(data.htmlLines, null);
       const firstLine =
         /^<article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">deploy-pages 🚀<\/h1>/;
       assert.match(data.htmlContent ?? "", firstLine);
@@ -99,7 +103,10 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.size, "39 Bytes / 1 lines / 1 loc");
       assert.strictEqual(data.language, "Git Attributes");
-      assert.deepStrictEqual(data.rawLines, ["dist/** -diff linguist-generated=true "]);
+      assert.deepStrictEqual(data.textLines, ["dist/** -diff linguist-generated=true "]);
+      assert.deepStrictEqual(data.htmlLines, [
+        '\u003cspan class="pl-e"\u003edist\u003c/span\u003e/\u003cspan class="pl-k"\u003e**\u003c/span\u003e \u003cspan class="pl-k"\u003e-\u003c/span\u003e\u003cspan class="pl-v"\u003ediff\u003c/span\u003e \u003cspan class="pl-v"\u003elinguist-generated\u003c/span\u003e=\u003cspan class="pl-c1"\u003etrue\u003c/span\u003e ',
+      ]);
       assert.strictEqual(data.htmlContent, null);
     });
 
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index c2983c9..05afc33 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -52,6 +52,8 @@ interface IssueIndexPageQuery {
   };
 }
 
+type StylingDirective = [number, number, string];
+
 interface RawPayload {
   repo: {
     ownerLogin: string;
@@ -74,6 +76,7 @@ interface RawPayload {
     rawLines: string[] | null;
     colorizedLines: string[] | null;
     richText: string | null;
+    stylingDirectives: StylingDirective[][] | null;
   };
   overview?: {
     overviewFiles?: OverviewFile[];
@@ -82,6 +85,27 @@ interface RawPayload {
   preloadedQueries?: IssueIndexPageQuery[];
 }
 
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function applyStyling(line: string, directives: StylingDirective[]): string {
+  let result = "";
+  let lastPos = 0;
+  for (const [start, end, className] of directives) {
+    result += escapeHtml(line.substring(lastPos, start));
+    result += `<span class="${className}">${escapeHtml(line.substring(start, end))}</span>`;
+    lastPos = end;
+  }
+  result += escapeHtml(line.substring(lastPos));
+  return result;
+}
+
 interface GitHubCommon {
   repo: {
     owner: string;
@@ -115,7 +139,8 @@ export interface GitHubRepo extends GitHubTree {
 export interface GitHubBlob extends GitHubNav {
   language: string | null;
   size: string;
-  rawLines: string[] | null;
+  textLines: string[] | null;
+  htmlLines: string[] | null;
   htmlContent: string | null;
 }
 
@@ -269,15 +294,23 @@ export async function getGitHubBlob(
     throw new Error("Could not find blob data in embedded JSON");
   }
 
-  const { headerInfo, language, rawLines, richText } = payload.blob;
+  const blob = payload.blob;
+  const { headerInfo, stylingDirectives } = blob;
+
+  let htmlLines = blob.colorizedLines;
+  if (!htmlLines && stylingDirectives && blob.rawLines) {
+    htmlLines = blob.rawLines.map((line, i) => applyStyling(line, stylingDirectives[i]));
+  }
+
   // TODO fine tune
   const size = `${headerInfo.blobSize} / ${headerInfo.lineInfo.truncatedLoc} lines / ${headerInfo.lineInfo.truncatedSloc} loc`;
 
   return extractGitHub(payload, {
-    language: language || null,
+    language: blob.language || null,
     size,
-    rawLines,
-    htmlContent: richText,
+    textLines: blob.rawLines,
+    htmlLines,
+    htmlContent: blob.richText,
   });
 }
 
diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index 1efbb12..2020dc2 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -25,6 +25,14 @@
     oklch(50% 0.15 250),
     oklch(60% 0.15 250)
   );
+
+  --pl-c: light-dark(#6e7781, #8b949e);
+  --pl-c1: light-dark(#0550ae, #79c0ff);
+  --pl-e: light-dark(#6639ba, #d2a8ff);
+  --pl-en: light-dark(#0550ae, #d2a8ff);
+  --pl-k: light-dark(#cf222e, #ff7b72);
+  --pl-s: light-dark(#0a3069, #a5d6ff);
+  --pl-v: light-dark(#953800, #ffa657);
 }
 
 body {
@@ -174,3 +182,17 @@ pre.box {
 svg.octicon-link {
   display: none;
 }
+
+.pl-c { color: var(--pl-c); }
+.pl-c1 { color: var(--pl-c1); }
+.pl-e { color: var(--pl-e); }
+.pl-en { color: var(--pl-en); }
+.pl-k { color: var(--pl-k); }
+.pl-s { color: var(--pl-s); }
+.pl-v { color: var(--pl-v); }
+.pl-ent { color: var(--pl-k); }
+.pl-mh { font-weight: bold; color: var(--pl-en); }
+.pl-bu { color: var(--pl-k); }
+.pl-ii { color: var(--text-color); background-color: var(--pl-k); }
+.pl-pds { color: var(--pl-s); }
+.pl-smi { color: var(--text-color); }
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 346afab..4972209 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -14,6 +14,8 @@
 
 <% if (it.htmlContent) { %>
   <div class="box"><%~ it.htmlContent %></div>
+<% } else if (it.htmlLines) { %>
+  <pre class="box"><code><%~ it.htmlLines.join("\n") %></code></pre>
 <% } else { %>
-  <pre class="box"><code><%= it.rawLines.join("\n") %></code></pre>
+  <pre class="box"><code><%= it.textLines.join("\n") %></code></pre>
 <% } %>
-- 
cgit v1.3.1


From 631bc70d94cd12d0432cca1a220a3642eea6976a Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Wed, 28 Jan 2026 15:10:00 -0500
Subject: Image support

---
 cgithub/src/scraper.test.ts | 24 ++++++++++++++++++++++++
 cgithub/src/scraper.ts      | 18 +++++++++++++-----
 cgithub/views/blob.eta      |  4 +++-
 3 files changed, 40 insertions(+), 6 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index 9326747..ae38c44 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -69,6 +69,8 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.size, "1.04 KB / 21 lines / 17 loc");
       assert.strictEqual(data.language, "Text");
+      assert.strictEqual(data.image, false);
+
       assert.strictEqual(data.textLines?.length, 21);
       assert.strictEqual(data.textLines[0], "MIT License");
       assert.strictEqual(data.htmlLines?.length, 21);
@@ -86,6 +88,8 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.size, "8.95 KB / 133 lines / 94 loc");
       assert.strictEqual(data.language, "Markdown");
+      assert.strictEqual(data.image, false);
+
       assert.strictEqual(data.textLines, null);
       assert.strictEqual(data.htmlLines, null);
       const firstLine =
@@ -103,6 +107,8 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.size, "39 Bytes / 1 lines / 1 loc");
       assert.strictEqual(data.language, "Git Attributes");
+      assert.strictEqual(data.image, false);
+
       assert.deepStrictEqual(data.textLines, ["dist/** -diff linguist-generated=true "]);
       assert.deepStrictEqual(data.htmlLines, [
         '\u003cspan class="pl-e"\u003edist\u003c/span\u003e/\u003cspan class="pl-k"\u003e**\u003c/span\u003e \u003cspan class="pl-k"\u003e-\u003c/span\u003e\u003cspan class="pl-v"\u003ediff\u003c/span\u003e \u003cspan class="pl-v"\u003elinguist-generated\u003c/span\u003e=\u003cspan class="pl-c1"\u003etrue\u003c/span\u003e ',
@@ -124,6 +130,24 @@ describe("GitHub scraper", () => {
     });
   });
 
+  describe("rich file types", () => {
+    it("should support PNG", async () => {
+      const data = await getGitHubBlob("github", "docs", "main", "assets/images/site/logo.png");
+
+      assert.strictEqual(data.repo.owner, "github");
+      assert.strictEqual(data.repo.name, "docs");
+      assert.strictEqual(data.branch, "main");
+      assert.strictEqual(data.path, "assets/images/site/logo.png");
+
+      assert.strictEqual(data.size, "1.26 KB");
+      assert.strictEqual(data.language, null);
+      assert.strictEqual(data.image, true);
+      assert.strictEqual(data.textLines, null);
+      assert.strictEqual(data.htmlLines, null);
+      assert.strictEqual(data.htmlContent, null);
+    });
+  });
+
   describe("error handling", () => {
     it("should throw for non-existent repository", async () => {
       await assert.rejects(getGitHubRepo("nosuchowner", "nosuchrepo"), (err) => {
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index 05afc33..e58402a 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -68,11 +68,12 @@ interface RawPayload {
     headerInfo: {
       blobSize: string;
       lineInfo: {
-        truncatedLoc: string;
-        truncatedSloc: string;
+        truncatedLoc: string | null;
+        truncatedSloc: string | null;
       };
     };
-    language?: string;
+    language: string | null;
+    image: boolean;
     rawLines: string[] | null;
     colorizedLines: string[] | null;
     richText: string | null;
@@ -139,6 +140,7 @@ export interface GitHubRepo extends GitHubTree {
 export interface GitHubBlob extends GitHubNav {
   language: string | null;
   size: string;
+  image: boolean;
   textLines: string[] | null;
   htmlLines: string[] | null;
   htmlContent: string | null;
@@ -302,12 +304,18 @@ export async function getGitHubBlob(
     htmlLines = blob.rawLines.map((line, i) => applyStyling(line, stylingDirectives[i]));
   }
 
-  // TODO fine tune
-  const size = `${headerInfo.blobSize} / ${headerInfo.lineInfo.truncatedLoc} lines / ${headerInfo.lineInfo.truncatedSloc} loc`;
+  let size = headerInfo.blobSize;
+  if (headerInfo.lineInfo.truncatedLoc) {
+    size += ` / ${headerInfo.lineInfo.truncatedLoc} lines`;
+  }
+  if (headerInfo.lineInfo.truncatedSloc) {
+    size += ` / ${headerInfo.lineInfo.truncatedSloc} loc`;
+  }
 
   return extractGitHub(payload, {
     language: blob.language || null,
     size,
+    image: blob.image,
     textLines: blob.rawLines,
     htmlLines,
     htmlContent: blob.richText,
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 4972209..ea07059 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -12,7 +12,9 @@
   </div>
 </div>
 
-<% if (it.htmlContent) { %>
+<% if (it.image) { %>
+  <div class="box"><img src="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>"></div>
+<% } else if (it.htmlContent) { %>
   <div class="box"><%~ it.htmlContent %></div>
 <% } else if (it.htmlLines) { %>
   <pre class="box"><code><%~ it.htmlLines.join("\n") %></code></pre>
-- 
cgit v1.3.1


From c57123139794c3ef174b62c6bd2a54a60bbf3327 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Wed, 27 May 2026 14:02:36 -0400
Subject: Add repo-scoped search support for issues and PRs

We do not support hybrid issue/PR search. Any searches on the issues
endpoint will redirect to an explicit issue-only search.
---
 cgithub/src/index.ts        | 26 +++++++++++++++++++++++++-
 cgithub/src/scraper.test.ts | 15 +++++++++++++++
 cgithub/src/scraper.ts      | 20 ++++++++++----------
 cgithub/static/style.css    | 13 ++++++++++---
 cgithub/views/blob.eta      |  2 +-
 cgithub/views/issues.eta    |  2 +-
 cgithub/views/layout.eta    |  8 ++++++++
 cgithub/views/tree.eta      |  2 +-
 8 files changed, 71 insertions(+), 17 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/src/index.ts b/cgithub/src/index.ts
index eb3a0ee..db9915f 100644
--- a/cgithub/src/index.ts
+++ b/cgithub/src/index.ts
@@ -70,7 +70,31 @@ app.get("/:owner/:repo/raw/:branch/:path{.*}", async (c) => {
 
 app.get("/:owner/:repo/issues", async (c) => {
   const { owner, repo } = c.req.param();
-  return tryRender(c, "issues.eta", getGitHubIssues(owner, repo));
+  const q = c.req.query("q");
+
+  // GitHub supports combined issue/PR search, apparently for legacy. We just
+  // redirect to issue-only search.
+  if (q && !/\bis:issue\b/.test(q)) {
+    return c.redirect(`/${owner}/${repo}/issues?q=${encodeURIComponent(`is:issue ${q}`)}`);
+  }
+
+  return tryRender(c, "issues.eta", getGitHubIssues(owner, repo, { q }));
+});
+
+app.get("/:owner/:repo/search", async (c) => {
+  const { owner, repo } = c.req.param();
+  const q = c.req.query("q") ?? "";
+  const type = c.req.query("type") ?? "issues";
+
+  if (type === "issues") {
+    return c.redirect(`/${owner}/${repo}/issues?q=${encodeURIComponent(q)}`);
+  }
+
+  // Redirect unhandled search types (like code, which requires sign in anyway).
+  c.header("Referrer-Policy", "no-referrer");
+  return c.redirect(
+    `https://github.com/${owner}/${repo}/search?${new URLSearchParams(c.req.query()).toString()}`,
+  );
 });
 
 app.get("/:owner/:repo/commits/:branch/:path{.*}?", async (c) => {
diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index 42ddd6e..236b0f5 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -127,6 +127,7 @@ describe("GitHub scraper", () => {
 
       assert.strictEqual(data.repo.owner, "actions");
       assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.strictEqual(data.q, undefined);
 
       const issue402 = data.issues.find((issue) => issue.number === 402);
       assert.ok(issue402);
@@ -135,6 +136,20 @@ describe("GitHub scraper", () => {
       assert.strictEqual(issue402.createdAt, "2025-07-03T19:07:08Z");
     });
 
+    it("should fetch filtered issues with q", async () => {
+      const data = await getGitHubIssues("actions", "deploy-pages", {
+        q: "is:issue state:closed",
+      });
+
+      assert.strictEqual(data.repo.owner, "actions");
+      assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.strictEqual(data.q, "is:issue state:closed");
+      const issue417 = data.issues.find((issue) => issue.number === 417);
+      assert.ok(issue417);
+      assert.strictEqual(issue417.title, "Chats");
+      assert.ok(data.issues.every((issue) => issue.title !== ""));
+    });
+
     it("should fetch commits", async () => {
       const data = await getGitHubCommits("actions", "deploy-pages", "main", "");
 
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index 04a685b..2412e49 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -258,6 +258,7 @@ interface Issue {
 
 export interface GitHubIssues extends GitHubCommon {
   issues: Issue[];
+  q?: string;
 }
 
 export interface GitHubCommits extends GitHubNav {
@@ -513,9 +514,14 @@ export async function getGitHubBlob(
   });
 }
 
-export async function getGitHubIssues(owner: string, repo: string): Promise<GitHubIssues> {
-  const html = await fetchGitHubPage(`${owner}/${repo}/issues`);
-
+export async function getGitHubIssues(
+  owner: string,
+  repo: string,
+  // We only support is:issue searches (no PR results).
+  { q }: { q?: string } = {},
+): Promise<GitHubIssues> {
+  const suffix = q ? `?q=${encodeURIComponent(q)}` : "";
+  const html = await fetchGitHubPage(`${owner}/${repo}/issues${suffix}`);
   const payload = parsePayload(html);
 
   let issuesQuery: IssueIndexPageQuery | undefined;
@@ -534,13 +540,7 @@ export async function getGitHubIssues(owner: string, repo: string): Promise<GitH
     return { number, title: finalTitle, state, createdAt };
   });
 
-  return {
-    repo: {
-      owner,
-      name: repo,
-    },
-    issues,
-  };
+  return { repo: { owner, name: repo }, issues, q };
 }
 
 export async function getGitHubCommits(
diff --git a/cgithub/static/style.css b/cgithub/static/style.css
index b3ebb46..86a67d8 100644
--- a/cgithub/static/style.css
+++ b/cgithub/static/style.css
@@ -43,14 +43,20 @@ body {
   color: var(--text-color);
 }
 
+a {
+  text-decoration: none;
+  color: var(--link-color);
+}
+
 h1, h2, h3, h4, h5, h6,
 p, pre, ul, ol {
   margin: .5em 0;
 }
 
-a {
-  text-decoration: none;
-  color: var(--link-color);
+input, select, button {
+  background-color: var(--body-background);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
 }
 
 table {
@@ -75,6 +81,7 @@ td {
 
 nav {
   display: flex;
+  margin: .5em 0;
   > a {
     display: block;
     padding-right: .5rem;
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index ea07059..50f92a9 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta") %>
+<% layout("./layout.eta"); it.searchType = "code" %>
 
 <%~ include("./_nav.eta", it) %>
 
diff --git a/cgithub/views/issues.eta b/cgithub/views/issues.eta
index 6e4c9ba..646da46 100644
--- a/cgithub/views/issues.eta
+++ b/cgithub/views/issues.eta
@@ -1,4 +1,4 @@
-<% layout("./layout") %>
+<% layout("./layout"); it.searchType = "issues" %>
 
 <table>
   <% for (const issue of it.issues) { %>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index ec3c7b8..f31c6e0 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -19,6 +19,14 @@ git clone git@github.com:<%= it.repo.owner %>/<%= it.repo.name %>.git</code></pr
         <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/commits/<%= it.branch %><%= it.path && it.path !== '/' ? '/' + it.path : '' %>">Commits</a>
       <% } %>
     </nav>
+    <form action="/<%= it.repo.owner %>/<%= it.repo.name %>/search" method="get">
+      <input type="text" name="q" placeholder="Search…" value="<%= it.q ?? "" %>">
+      <select name="type">
+        <option value="issues" <%= it.searchType === "issues" ? "selected" : "" %>>Issues</option>
+        <option value="code" <%= it.searchType === "code" || it.searchType == null ? "selected" : "" %>>Code</option>
+      </select>
+      <button type="submit">Search</button>
+    </form>
   </div>
 
   <%~ it.body %>
diff --git a/cgithub/views/tree.eta b/cgithub/views/tree.eta
index 6e675e1..41ded06 100644
--- a/cgithub/views/tree.eta
+++ b/cgithub/views/tree.eta
@@ -1,3 +1,3 @@
-<% layout("./layout.eta") %>
+<% layout("./layout.eta"); it.searchType = "code" %>
 
 <%~ include("./_tree.eta", it) %>
-- 
cgit v1.3.1


From 866f99c414cb3d102483ce21c68a0e62b394baaa Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 11 Aug 2026 13:32:44 -0400
Subject: Keep the ref picker on the current view and path

---
 cgithub/public/static/refs.js |  6 +++--
 cgithub/src/app.test.ts       | 52 ++++++++++++++++++++++++++++++++++++++++++-
 cgithub/src/app.ts            | 12 +++++++---
 cgithub/views/_nav.eta        |  4 ++--
 cgithub/views/_refs.eta       |  6 ++++-
 cgithub/views/_tree.eta       |  2 +-
 cgithub/views/blob.eta        |  2 +-
 cgithub/views/commits.eta     |  2 +-
 8 files changed, 74 insertions(+), 12 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/public/static/refs.js b/cgithub/public/static/refs.js
index ffff505..f3e07e8 100644
--- a/cgithub/public/static/refs.js
+++ b/cgithub/public/static/refs.js
@@ -7,7 +7,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const dialog = document.querySelector(".ref-selector-menu");
   if (dialog) {
     const list = dialog.querySelector(".ref-selector-list");
-    const { owner, repo } = dialog.dataset;
+    // The view and path let the picker link to the same place on another ref
+    // rather than to the repository root.
+    const { owner, repo, view, path = "" } = dialog.dataset;
     const cache = {};
 
     async function load(type) {
@@ -17,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       list.textContent = "Loading…";
       try {
-        const res = await fetch(`/api/${owner}/${repo}/refs/${type}`);
+        const res = await fetch(`/api/${owner}/${repo}/refs/${type}/${view}/${path}`);
         const html = res.ok ? await res.text() : "";
         cache[type] = html || "Failed to load.";
         list.innerHTML = cache[type];
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 498d8a6..6544f03 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -8,6 +8,56 @@ import { createApp } from "./app.ts";
 const eta = new Eta({ views: path.join(import.meta.dirname, "..", "views") });
 const app = createApp(eta);
 
+describe("branch picker", () => {
+  const repo = { owner: "actions", name: "deploy-pages" };
+  const refs = [{ name: "main", isDefault: true }, { name: "v4" }];
+
+  it("should keep the current view and path", () => {
+    const blob = eta.render("_refs.eta", {
+      repo,
+      refs,
+      type: "branches",
+      view: "blob",
+      path: "src/main.ts",
+    });
+    const tree = eta.render("_refs.eta", {
+      repo,
+      refs,
+      type: "branches",
+      view: "tree",
+      path: "src",
+    });
+
+    assert.match(blob, /href="\/actions\/deploy-pages\/blob\/main\/src\/main.ts"/);
+    assert.match(blob, /href="\/actions\/deploy-pages\/blob\/v4\/src\/main.ts"/);
+    assert.match(tree, /href="\/actions\/deploy-pages\/tree\/v4\/src"/);
+  });
+
+  it("should link to the root tree without a path", () => {
+    const html = eta.render("_refs.eta", { repo, refs, type: "branches", view: "tree", path: "" });
+
+    assert.match(html, /href="\/actions\/deploy-pages\/tree\/main"/);
+  });
+
+  it("should not build ref links for views it does not serve", async () => {
+    const res = await app.request("http://cgithub.example/api/a/b/refs/branches/raw/README.md");
+
+    assert.strictEqual(res.status, 404);
+  });
+
+  it("should tell the refs endpoint where the picker was opened", () => {
+    const nav = { repo, branch: "main", path: "src" };
+
+    const blob = eta.render("_nav.eta", { ...nav, view: "blob", path: "src/main.ts" });
+    assert.match(blob, /data-view="blob" data-path="src\/main.ts"/);
+    assert.match(
+      eta.render("_nav.eta", { ...nav, view: "tree" }),
+      /data-view="tree" data-path="src"/,
+    );
+    assert.doesNotMatch(eta.render("_nav.eta", { ...nav, view: "tree", path: "" }), /data-path=/);
+  });
+});
+
 describe("redirects to GitHub", () => {
   // An HTTP redirect would be caught by the extension's declarativeNetRequest
   // rules and bounced straight back here.
@@ -21,7 +71,7 @@ describe("redirects to GitHub", () => {
     const body = await res.text();
     assert.match(
       body,
-      /<meta http-equiv="refresh" content="2; url=https:\/\/github.com\/a\/b\/c\?x=1">/,
+      /<meta http-equiv="refresh" content="1; url=https:\/\/github.com\/a\/b\/c\?x=1">/,
     );
     assert.doesNotMatch(body, /<script/);
   });
diff --git a/cgithub/src/app.ts b/cgithub/src/app.ts
index 9a7ee8e..81e47fd 100644
--- a/cgithub/src/app.ts
+++ b/cgithub/src/app.ts
@@ -155,12 +155,18 @@ export function createApp(eta: Eta) {
   // be visited directly. Keep the site's initial page loads plain server-
   // rendered HTML while still surfacing data (branches/tags, latest commit)
   // that would otherwise require an extra scrape on every page view.
-  app.get("/api/:owner/:repo/refs/:type", async (c) => {
-    const { owner, repo, type } = c.req.param();
+  // The view and path are where the picker was opened, so each ref can link to
+  // the same page on another ref.
+  app.get("/api/:owner/:repo/refs/:type/:view/:path{.*}?", async (c) => {
+    const { owner, repo, type, view, path = "" } = c.req.param();
     if (type !== "branches" && type !== "tags") {
       return c.notFound();
     }
-    return tryRenderFragment(c, "_refs.eta", getGitHubRefs(owner, repo, type));
+    if (view !== "tree" && view !== "blob" && view !== "commits") {
+      return c.notFound();
+    }
+    const refs = getGitHubRefs(owner, repo, type).then((data) => ({ ...data, view, path }));
+    return tryRenderFragment(c, "_refs.eta", refs);
   });
 
   app.get("/api/:owner/:repo/latest-commit/:branch/:path{.*}?", async (c) => {
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index eb7ed42..a20fbbc 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -6,7 +6,7 @@
   <button type="button" class="ref-selector-button branch" command="show-modal" commandfor="ref-selector-menu">
     <img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= refLabel %> ▾
   </button>
-  <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>">
+  <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>" data-view="<%= it.view %>"<% if (it.path && it.path !== "/") { %> data-path="<%= it.path %>"<% } %>>
     <div class="ref-selector-tabs">
       <button type="button" class="active" data-ref-type="branches">Branches</button>
       <button type="button" data-ref-type="tags">Tags</button>
@@ -22,7 +22,7 @@
       currentPath += (currentPath ? '/' : '') + part;
       const isLast = i === pathParts.length - 1;
       if (isLast) {
-        %>/<%= part %><%= it.isTree ? "/" : "" %><%
+        %>/<%= part %><%= it.view === "tree" ? "/" : "" %><%
       } else {
         %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
       }
diff --git a/cgithub/views/_refs.eta b/cgithub/views/_refs.eta
index 2450c4b..9d951cc 100644
--- a/cgithub/views/_refs.eta
+++ b/cgithub/views/_refs.eta
@@ -1,10 +1,14 @@
+<%
+const linkPrefix = `/${it.repo.owner}/${it.repo.name}/${it.view}/`;
+const linkSuffix = it.path ? `/${it.path}` : "";
+%>
 <% if (it.refs.length === 0) { %>
   <div class="ref-selector-empty">No <%= it.type %> found.</div>
 <% } else { %>
   <ul class="ref-selector-items">
     <% for (const ref of it.refs) { %>
       <li>
-        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= ref.name %>"><%= ref.name %></a>
+        <a href="<%= linkPrefix %><%= ref.name %><%= linkSuffix %>"><%= ref.name %></a>
         <% if (ref.isDefault) { %><span class="ref-selector-badge">default</span><% } %>
       </li>
     <% } %>
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index fc7707b..a3c943d 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -1,4 +1,4 @@
-<%~ include("./_nav.eta", {...it, isTree: true}) %>
+<%~ include("./_nav.eta", {...it, view: "tree"}) %>
 
 <% const commitPath = it.path && it.path !== "/" ? it.path : ""; %>
 <div class="placeholder commit box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 50f92a9..ed1e84b 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,6 +1,6 @@
 <% layout("./layout.eta"); it.searchType = "code" %>
 
-<%~ include("./_nav.eta", it) %>
+<%~ include("./_nav.eta", {...it, view: "blob"}) %>
 
 <div>
   <% if (it.language) { %>
diff --git a/cgithub/views/commits.eta b/cgithub/views/commits.eta
index 2ddcba3..5cf0beb 100644
--- a/cgithub/views/commits.eta
+++ b/cgithub/views/commits.eta
@@ -1,6 +1,6 @@
 <% layout("./layout.eta") %>
 
-<%~ include("./_nav.eta", {...it, isTree: false}) %>
+<%~ include("./_nav.eta", {...it, view: "commits"}) %>
 
 <% for (const group of it.commitGroups) { %>
   <h3><%= group.title %></h3>
-- 
cgit v1.3.1


From e8461b57674b9c4e6ed93151d06dbc6149703178 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Wed, 12 Aug 2026 01:38:24 -0400
Subject: Handle blobs GitHub cannot preview

Binary files with no preview (a .ttf, say) have no rawLines, no
colorizedLines and no richText, so the blob view's final branch threw on
a null textLines and the page 500ed. Offer the raw file instead.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 cgithub/src/app.test.ts     | 22 ++++++++++++++++++++++
 cgithub/src/scraper.test.ts | 18 ++++++++++++++++++
 cgithub/views/blob.eta      |  6 ++++--
 3 files changed, 44 insertions(+), 2 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 59ed352..94bf205 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -92,6 +92,28 @@ describe("sidebar fragment", () => {
   });
 });
 
+describe("blob view", () => {
+  const blob = {
+    repo: { owner: "justrajdeep", name: "fonts" },
+    branch: "master",
+    path: "Times New Roman.ttf",
+    language: null,
+    size: "815 KB",
+    image: false,
+    textLines: null,
+    htmlLines: null,
+    htmlContent: null,
+  };
+
+  // GitHub previews neither the text nor the bytes of most binary files.
+  it("should offer the raw file when there is nothing to display", () => {
+    const html = eta.render("blob.eta", blob);
+
+    assert.match(html, /This file cannot be displayed\./);
+    assert.match(html, /href="\/justrajdeep\/fonts\/raw\/master\/Times New Roman.ttf">View raw/);
+  });
+});
+
 describe("redirects to GitHub", () => {
   // An HTTP redirect would be caught by the extension's declarativeNetRequest
   // rules and bounced straight back here.
diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index 24fdfc0..836235e 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -332,6 +332,24 @@ describe("GitHub scraper", () => {
       assert.strictEqual(data.htmlLines, null);
       assert.strictEqual(data.htmlContent, null);
     });
+
+    // A binary file GitHub has no preview for: no content of any kind, and the
+    // path exercises escaping of a space.
+    it("should support an unpreviewable binary file", async () => {
+      const data = await getGitHubBlob("justrajdeep", "fonts", "master", "Times New Roman.ttf");
+
+      assert.strictEqual(data.repo.owner, "justrajdeep");
+      assert.strictEqual(data.repo.name, "fonts");
+      assert.strictEqual(data.branch, "master");
+      assert.strictEqual(data.path, "Times New Roman.ttf");
+
+      assert.strictEqual(data.size, "815 KB");
+      assert.strictEqual(data.language, null);
+      assert.strictEqual(data.image, false);
+      assert.strictEqual(data.textLines, null);
+      assert.strictEqual(data.htmlLines, null);
+      assert.strictEqual(data.htmlContent, null);
+    });
   });
 
   describe("owner pages", () => {
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index ed1e84b..c7315f6 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -8,7 +8,7 @@
   <% } %>
   <div><%= it.size %></div>
   <div>
-    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>">Raw</a>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>">View raw</a>
   </div>
 </div>
 
@@ -18,6 +18,8 @@
   <div class="box"><%~ it.htmlContent %></div>
 <% } else if (it.htmlLines) { %>
   <pre class="box"><code><%~ it.htmlLines.join("\n") %></code></pre>
-<% } else { %>
+<% } else if (it.textLines) { %>
   <pre class="box"><code><%= it.textLines.join("\n") %></code></pre>
+<% } else { %>
+  <div class="box">This file cannot be displayed</div>
 <% } %>
-- 
cgit v1.3.1


From 0d60b8c8235c3c07f675aba7a56dd37b62519f9e Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Thu, 27 Aug 2026 14:08:06 -0400
Subject: Display PDF blobs

GitHub renders a PDF with a viewer of its own and so ships no content for
one, leaving the blob view with nothing to show. Its raw bytes come as
application/octet-stream, which browsers download rather than display, so
serve them from a new embed route that retypes them and point an <object>
at that.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BErPR92xppzGFXkPqXPYj2
---
 cgithub/public/static/style.css |  7 +++++
 cgithub/src/app.test.ts         | 68 +++++++++++++++++++++++++++++++++++++++--
 cgithub/src/app.ts              | 26 ++++++++++++++++
 cgithub/src/scraper.test.ts     | 32 +++++++++++++++++++
 cgithub/src/scraper.ts          | 28 ++++++++++++++---
 cgithub/views/blob.eta          |  7 ++++-
 6 files changed, 161 insertions(+), 7 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/public/static/style.css b/cgithub/public/static/style.css
index ed64bc6..157cc15 100644
--- a/cgithub/public/static/style.css
+++ b/cgithub/public/static/style.css
@@ -276,6 +276,13 @@ body > footer {
   }
 }
 
+object.pdf {
+  display: block;
+  width: 100%;
+  height: 80vh;
+  padding: 0;
+}
+
 pre.box {
   /* Instead of scrolling overflow for long lines, grow the box. */
   width: fit-content;
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 94bf205..e28c375 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert";
 import path from "node:path";
-import { describe, it } from "node:test";
+import { describe, it, type TestContext } from "node:test";
 import { Eta } from "eta";
 import { createApp } from "./app.ts";
 
@@ -100,12 +100,30 @@ describe("blob view", () => {
     language: null,
     size: "815 KB",
     image: false,
+    renderFileType: null,
     textLines: null,
     htmlLines: null,
     htmlContent: null,
   };
 
-  // GitHub previews neither the text nor the bytes of most binary files.
+  it("should embed a PDF", () => {
+    const html = eta.render("blob.eta", {
+      ...blob,
+      path: "test/pdfs/basicapi.pdf",
+      renderFileType: "pdf",
+    });
+
+    assert.match(html, /<object[^>]*type="application\/pdf"/);
+    assert.match(html, /data="\/justrajdeep\/fonts\/embed\/pdf\/master\/test\/pdfs\/basicapi.pdf"/);
+  });
+
+  it("should not embed a file type it has no viewer for", () => {
+    const html = eta.render("blob.eta", { ...blob, renderFileType: "stl" });
+
+    assert.doesNotMatch(html, /<object/);
+    assert.match(html, /This file cannot be displayed\./);
+  });
+
   it("should offer the raw file when there is nothing to display", () => {
     const html = eta.render("blob.eta", blob);
 
@@ -114,6 +132,52 @@ describe("blob view", () => {
   });
 });
 
+describe("embedded files", () => {
+  function stubGitHub(t: TestContext, body: string, contentType: string, status = 200) {
+    t.mock.method(
+      globalThis,
+      "fetch",
+      async () => new Response(body, { status, headers: { "Content-Type": contentType } }),
+    );
+  }
+
+  it("should retype a PDF GitHub sends as a download", async (t) => {
+    stubGitHub(t, "%PDF-1.6", "application/octet-stream");
+
+    const res = await app.request("http://cgithub.example/mozilla/pdf.js/embed/pdf/master/doc.pdf");
+
+    assert.strictEqual(res.status, 200);
+    assert.strictEqual(res.headers.get("Content-Type"), "application/pdf");
+    assert.strictEqual(await res.text(), "%PDF-1.6");
+  });
+
+  it("should pass on a type GitHub already got right", async (t) => {
+    stubGitHub(t, "%PDF-1.6", "application/pdf");
+
+    const res = await app.request("http://cgithub.example/mozilla/pdf.js/embed/pdf/master/doc.pdf");
+
+    assert.strictEqual(res.headers.get("Content-Type"), "application/pdf");
+  });
+
+  it("should not serve a file type it has no viewer for", async (t) => {
+    stubGitHub(t, "<script>", "text/html");
+
+    const res = await app.request("http://cgithub.example/mozilla/pdf.js/embed/html/master/x.html");
+
+    assert.strictEqual(res.status, 404);
+  });
+
+  it("should pass on the status of a file GitHub does not have", async (t) => {
+    stubGitHub(t, "404: Not Found", "text/plain", 404);
+
+    const res = await app.request(
+      "http://cgithub.example/mozilla/pdf.js/embed/pdf/master/nope.pdf",
+    );
+
+    assert.strictEqual(res.status, 404);
+  });
+});
+
 describe("redirects to GitHub", () => {
   // An HTTP redirect would be caught by the extension's declarativeNetRequest
   // rules and bounced straight back here.
diff --git a/cgithub/src/app.ts b/cgithub/src/app.ts
index 9781a98..33b408e 100644
--- a/cgithub/src/app.ts
+++ b/cgithub/src/app.ts
@@ -10,6 +10,7 @@ import {
   getGitHubLatestCommit,
   getGitHubOwner,
   getGitHubPulls,
+  getGitHubRaw,
   getGitHubRefs,
   getGitHubRelease,
   getGitHubReleases,
@@ -120,6 +121,31 @@ export function createApp(eta: Eta) {
     );
   });
 
+  // This is not a native GitHub route, but instead it lets us render blob
+  // content whose raw headers prevent hotlinking.
+  app.get("/:owner/:repo/embed/:type/:branch/:path{.*}", async (c) => {
+    const { owner, repo, type, branch, path } = c.req.param();
+
+    if (type !== "pdf") {
+      return c.notFound();
+    }
+
+    let response: Response;
+    try {
+      response = await getGitHubRaw(owner, repo, branch, path);
+    } catch (e) {
+      c.status(e instanceof GitHubHTTPError ? (e.status as StatusCode) : 500);
+      return c.body(null);
+    }
+
+    let contentType = response.headers.get("Content-Type");
+    if (contentType === null || contentType === "application/octet-stream") {
+      contentType = "application/pdf";
+    }
+
+    return new Response(response.body, { headers: { "Content-Type": contentType } });
+  });
+
   app.get("/:owner/:repo/issues", async (c) => {
     const { owner, repo } = c.req.param();
     const q = c.req.query("q");
diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index 836235e..88e9271 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -7,6 +7,7 @@ import {
   getGitHubSidebar,
   getGitHubLatestCommit,
   getGitHubPulls,
+  getGitHubRaw,
   getGitHubRefs,
   getGitHubRelease,
   getGitHubReleases,
@@ -328,11 +329,41 @@ describe("GitHub scraper", () => {
       assert.strictEqual(data.size, "1.26 KB");
       assert.strictEqual(data.language, null);
       assert.strictEqual(data.image, true);
+      assert.strictEqual(data.renderFileType, null);
       assert.strictEqual(data.textLines, null);
       assert.strictEqual(data.htmlLines, null);
       assert.strictEqual(data.htmlContent, null);
     });
 
+    // GitHub renders a PDF with a viewer of its own, so the page carries no
+    // content for it beyond the file type.
+    it("should support PDF", async () => {
+      const data = await getGitHubBlob("mozilla", "pdf.js", "master", "test/pdfs/basicapi.pdf");
+
+      assert.strictEqual(data.repo.owner, "mozilla");
+      assert.strictEqual(data.repo.name, "pdf.js");
+      assert.strictEqual(data.branch, "master");
+      assert.strictEqual(data.path, "test/pdfs/basicapi.pdf");
+
+      assert.strictEqual(data.size, "103 KB");
+      assert.strictEqual(data.language, null);
+      assert.strictEqual(data.image, false);
+      assert.strictEqual(data.renderFileType, "pdf");
+      assert.strictEqual(data.textLines, null);
+      assert.strictEqual(data.htmlLines, null);
+      assert.strictEqual(data.htmlContent, null);
+    });
+
+    // Why the embed route exists rather than the blob view pointing a viewer
+    // at GitHub: as application/octet-stream a browser downloads the file
+    // instead of displaying it.
+    it("should fetch a raw PDF that GitHub types as a download", async () => {
+      const response = await getGitHubRaw("mozilla", "pdf.js", "master", "test/pdfs/basicapi.pdf");
+
+      assert.strictEqual(response.headers.get("Content-Type"), "application/octet-stream");
+      assert.ok((await response.text()).startsWith("%PDF-"));
+    });
+
     // A binary file GitHub has no preview for: no content of any kind, and the
     // path exercises escaping of a space.
     it("should support an unpreviewable binary file", async () => {
@@ -346,6 +377,7 @@ describe("GitHub scraper", () => {
       assert.strictEqual(data.size, "815 KB");
       assert.strictEqual(data.language, null);
       assert.strictEqual(data.image, false);
+      assert.strictEqual(data.renderFileType, null);
       assert.strictEqual(data.textLines, null);
       assert.strictEqual(data.htmlLines, null);
       assert.strictEqual(data.htmlContent, null);
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index 4220dc4..1a67d05 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -141,6 +141,7 @@ interface CodeViewBlobLayoutRouteStyledBlob {
 
 interface CodeViewBlobRoute {
   richText: string | null;
+  renderedFileInfo?: { renderFileType: string | null } | null;
 }
 
 interface SidebarAbout {
@@ -250,6 +251,7 @@ export interface GitHubBlob extends GitHubNav {
   language: string | null;
   size: string;
   image: boolean;
+  renderFileType: string | null;
   textLines: string[] | null;
   htmlLines: string[] | null;
   htmlContent: string | null;
@@ -378,15 +380,19 @@ export interface GitHubOwner {
   repos: OwnerRepo[];
 }
 
-async function fetchGitHubResponse(path: string, accept: string): Promise<Response> {
-  // GitHub throttles/blocks requests without realistic browser headers.
-  // These headers make the request appear as a standard browser visit.
-  const headers = {
+// GitHub throttles/blocks requests without realistic browser headers.
+// These headers make the request appear as a standard browser visit.
+function browserHeaders(accept: string): Record<string, string> {
+  return {
     "User-Agent":
       "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
     Accept: accept,
     "Accept-Language": "en-US,en;q=0.5",
   };
+}
+
+async function fetchGitHubResponse(path: string, accept: string): Promise<Response> {
+  const headers = browserHeaders(accept);
   const response = await fetch(`https://github.com/${path}`, { headers, redirect: "manual" });
   if (response.status === 301 || response.status === 302) {
     const location = response.headers.get("location");
@@ -546,12 +552,26 @@ export async function getGitHubBlob(
     language: blob.language || null,
     size,
     image: blob.image,
+    renderFileType: payload?.codeViewBlobRoute?.renderedFileInfo?.renderFileType ?? null,
     textLines: styledBlob?.rawLines ?? null,
     htmlLines,
     htmlContent: payload?.codeViewBlobRoute?.richText ?? null,
   });
 }
 
+// For proxying embeds.
+export async function getGitHubRaw(
+  owner: string,
+  repo: string,
+  branch: string,
+  path: string,
+): Promise<Response> {
+  const url = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${path}`;
+  const response = await fetch(url, { headers: browserHeaders("*/*") });
+  if (!response.ok) throw new GitHubHTTPError(response.status, response.statusText);
+  return response;
+}
+
 export async function getGitHubIssues(
   owner: string,
   repo: string,
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index c7315f6..444508e 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -14,6 +14,11 @@
 
 <% if (it.image) { %>
   <div class="box"><img src="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>"></div>
+<% } else if (it.renderFileType === "pdf") { %>
+  <object class="box pdf" type="application/pdf"
+          data="/<%= it.repo.owner %>/<%= it.repo.name %>/embed/<%= it.renderFileType %>/<%= it.branch %>/<%= it.path %>">
+    This file cannot be displayed.
+  </object>
 <% } else if (it.htmlContent) { %>
   <div class="box"><%~ it.htmlContent %></div>
 <% } else if (it.htmlLines) { %>
@@ -21,5 +26,5 @@
 <% } else if (it.textLines) { %>
   <pre class="box"><code><%= it.textLines.join("\n") %></code></pre>
 <% } else { %>
-  <div class="box">This file cannot be displayed</div>
+  <div class="box">This file cannot be displayed.</div>
 <% } %>
-- 
cgit v1.3.1


From 501587e256a065816f7eb6007030e728955a32dc Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Thu, 3 Sep 2026 01:26:44 -0400
Subject: Anchor blob lines so #L fragments work

Wrap each rendered line in a <span id="Ln">, for both syntax-highlighted
and plain-text blobs, and shade the line a fragment targets.
---
 cgithub/public/static/style.css |  4 ++++
 cgithub/src/app.test.ts         | 23 +++++++++++++++++++++++
 cgithub/views/blob.eta          |  6 ++++--
 3 files changed, 31 insertions(+), 2 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/public/static/style.css b/cgithub/public/static/style.css
index a83e128..1d277b7 100644
--- a/cgithub/public/static/style.css
+++ b/cgithub/public/static/style.css
@@ -286,6 +286,10 @@ object.pdf {
 pre.box {
   /* Instead of scrolling overflow for long lines, grow the box. */
   width: fit-content;
+
+  span:target {
+    background: var(--shade-background);
+  }
 }
 
 .overview, .release, .wiki {
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 3ecebd0..265465e 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -124,6 +124,29 @@ describe("blob view", () => {
     assert.match(html, /This file cannot be displayed\./);
   });
 
+  it("should give each syntax-highlighted line an anchor", () => {
+    const html = eta.render("blob.eta", {
+      ...blob,
+      path: "src/app.ts",
+      htmlLines: ['<span class="pl-k">const</span> x;', "x++;"],
+    });
+
+    assert.match(
+      html,
+      /<code><span id="L1"><span class="pl-k">const<\/span> x;<\/span>\n<span id="L2">x\+\+;<\/span><\/code>/,
+    );
+  });
+
+  it("should give each plain-text line an anchor", () => {
+    const html = eta.render("blob.eta", {
+      ...blob,
+      path: "notes.txt",
+      textLines: ["a < b", "c"],
+    });
+
+    assert.match(html, /<code><span id="L1">a &lt; b<\/span>\n<span id="L2">c<\/span><\/code>/);
+  });
+
   it("should offer the raw file when there is nothing to display", () => {
     const html = eta.render("blob.eta", blob);
 
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 444508e..be9a57e 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -22,9 +22,11 @@
 <% } else if (it.htmlContent) { %>
   <div class="box"><%~ it.htmlContent %></div>
 <% } else if (it.htmlLines) { %>
-  <pre class="box"><code><%~ it.htmlLines.join("\n") %></code></pre>
+  <pre class="box"><code><% for (const [i, line] of it.htmlLines.entries()) {
+    %><%= i ? "\n" : "" %><span id="L<%= i + 1 %>"><%~ line %></span><% } %></code></pre>
 <% } else if (it.textLines) { %>
-  <pre class="box"><code><%= it.textLines.join("\n") %></code></pre>
+  <pre class="box"><code><% for (const [i, line] of it.textLines.entries()) {
+    %><%= i ? "\n" : "" %><span id="L<%= i + 1 %>"><%= line %></span><% } %></code></pre>
 <% } else { %>
   <div class="box">This file cannot be displayed.</div>
 <% } %>
-- 
cgit v1.3.1


From a61a96c6d72d4297b2539f4033fbfbd0a3d178ab Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Thu, 3 Sep 2026 01:37:35 -0400
Subject: Link blobs to their history and back

Nothing in a commits payload says whether the path it lists is a file or
a directory: currentBlobPath, despite the name, is only the path filter,
and is set for a directory just the same. GitHub's own UI cannot tell
either, and points its browse button at /blob/<oid>/<path> so that the
redirect resolves a file to its blob. We do the same, and the blob route
already turns that redirect into one of our own tree URLs.

Breadcrumbs now stay in the view they were clicked from, so walking up
from a history lands in the history of each parent directory rather than
in its listing. The last crumb remains the page you are already on.

A path with no commits now says so rather than rendering an empty page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01R7pRKdmTvNDgT4ZXrwkbH8
---
 cgithub/CLAUDE.md           |  1 +
 cgithub/src/app.test.ts     | 56 +++++++++++++++++++++++++++++++++++++++++++++
 cgithub/src/scraper.test.ts | 33 ++++++++++++++++++++++++++
 cgithub/views/_nav.eta      |  7 ++++--
 cgithub/views/blob.eta      |  3 +++
 cgithub/views/commits.eta   |  8 +++++++
 6 files changed, 106 insertions(+), 2 deletions(-)

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/CLAUDE.md b/cgithub/CLAUDE.md
index c0c211d..3f0cd61 100644
--- a/cgithub/CLAUDE.md
+++ b/cgithub/CLAUDE.md
@@ -33,6 +33,7 @@ pnpm test
 - `GET /:owner/:repo` - Repository info with directory listing
 - `GET /:owner/:repo/tree/:branch/:path*` - Directory listing
 - `GET /:owner/:repo/blob/:branch/:path` - File content view
+- `GET /:owner/:repo/commits/:branch/:path*` - Commit history of the repository, a directory, or a file
 - `GET /:owner/:repo/wiki` - Wiki home page
 - `GET /:owner/:repo/wiki/:page` - Wiki page (also `/:page/:oid` for a revision)
 - `GET /:owner/:repo/wiki/_pages` - Wiki page index
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 265465e..8519d91 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -155,6 +155,62 @@ describe("blob view", () => {
   });
 });
 
+describe("commit history", () => {
+  const repo = { owner: "actions", name: "deploy-pages" };
+  const oid = "b39c421b98f49d83ae50ec502c3ddfc3bf28f2c6";
+  const commitGroups = [
+    {
+      title: "Apr 18, 2023",
+      commits: [
+        { oid, shortMessage: "Remove deprecated input parameters", authors: [{ login: "jmg" }] },
+      ],
+    },
+  ];
+  const history = { repo, branch: "main", path: "src/index.js", commitGroups };
+
+  // A commits payload never says whether its path is a file or a directory, so
+  // every link goes to the tree and GitHub redirects a file's to its blob.
+  it("should browse a file's history at each of its commits", () => {
+    const html = eta.render("commits.eta", history);
+
+    assert.match(html, new RegExp(`href="/actions/deploy-pages/blob/${oid}/src/index.js">Browse`));
+  });
+
+  it("should browse a directory's history the same way", () => {
+    const html = eta.render("commits.eta", { ...history, path: "src" });
+
+    assert.match(html, new RegExp(`href="/actions/deploy-pages/blob/${oid}/src">Browse`));
+  });
+
+  it("should browse the whole repository when the history has no path", () => {
+    const html = eta.render("commits.eta", { ...history, path: "" });
+
+    assert.match(html, new RegExp(`href="/actions/deploy-pages/blob/${oid}">Browse`));
+  });
+
+  // Walking up from a history stays in the history, and its last crumb is the
+  // page you are already on, just as a blob or a tree ends on itself.
+  it("should walk up through the history of each parent directory", () => {
+    const html = eta.render("commits.eta", { ...history, path: "src/lib/index.js" });
+
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main">\(top\)</);
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main\/src">src</);
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main\/src\/lib">lib<\/a>\/index\.js/);
+  });
+
+  it("should say so when a path has no history", () => {
+    const html = eta.render("commits.eta", { ...history, commitGroups: [] });
+
+    assert.match(html, /No commits found\./);
+  });
+
+  it("should link a blob to its own history", () => {
+    const html = eta.render("blob.eta", { ...history, textLines: ["x"] });
+
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main\/src\/index.js">History/);
+  });
+});
+
 describe("embedded files", () => {
   function stubGitHub(t: TestContext, body: string, contentType: string, status = 200) {
     t.mock.method(
diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index 2690f71..f6be2b6 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -195,6 +195,39 @@ describe("GitHub scraper", () => {
       assert.ok(data.commitGroups.length > 0);
     });
 
+    // GitHub serves a file's history from the same route as a directory's.
+    it("should fetch the history of a blob", async () => {
+      const data = await getGitHubCommits("actions", "deploy-pages", "main", "src/index.js");
+
+      assert.strictEqual(data.path, "src/index.js");
+
+      assert.ok(data.commitGroups.length > 0);
+      const commit = data.commitGroups[0].commits[0];
+      assert.strictEqual(commit.oid.length, 40);
+      assert.ok(commit.shortMessage.length > 0);
+    });
+
+    // What a history page's "Browse" link resolves to: the file as it stood at
+    // one of its commits. Nothing in a commits payload says whether the path is
+    // a file or a directory, so those links all point at the tree and rely on
+    // GitHub redirecting a file's to its blob.
+    it("should redirect a blob browsed at a commit to its blob view", async () => {
+      const oid = "b39c421b98f49d83ae50ec502c3ddfc3bf28f2c6";
+
+      await assert.rejects(getGitHubTree("actions", "deploy-pages", oid, "src/index.js"), (err) => {
+        assert(err instanceof RedirectError, "error should be a RedirectError");
+        assert.strictEqual(err.location, `/actions/deploy-pages/blob/${oid}/src/index.js`);
+        return true;
+      });
+
+      const data = await getGitHubBlob("actions", "deploy-pages", oid, "src/index.js");
+
+      assert.strictEqual(data.branch, oid);
+      assert.strictEqual(data.path, "src/index.js");
+      assert.strictEqual(data.size, "1.37 KB / 51 lines / 40 loc");
+      assert.strictEqual(data.textLines?.length, 51);
+    });
+
     it("should fetch releases", async () => {
       const data = await getGitHubReleases("actions", "deploy-pages");
 
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index a20fbbc..a20741b 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -14,7 +14,10 @@
     <div class="ref-selector-list">Loading…</div>
   </dialog>
   <% if (it.path && it.path !== "/") { %>
-    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
+    <%
+    const crumbHrefBase = `/${it.repo.owner}/${it.repo.name}/${it.view === "blob" ? "tree" : it.view}/${it.branch}`;
+    %>
+    <a href="<%= crumbHrefBase %>">(top)</a><%
     const pathParts = it.path.split('/').filter(p => p);
     let currentPath = '';
     for (let i = 0; i < pathParts.length; i++) {
@@ -24,7 +27,7 @@
       if (isLast) {
         %>/<%= part %><%= it.view === "tree" ? "/" : "" %><%
       } else {
-        %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+        %>/<a href="<%= crumbHrefBase %>/<%= currentPath %>"><%= part %></a><%
       }
     } %>
   <% } %>
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index be9a57e..2014b14 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -7,6 +7,9 @@
     <div>language: <%= it.language %></div>
   <% } %>
   <div><%= it.size %></div>
+  <div>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/commits/<%= it.branch %>/<%= it.path %>">History</a>
+  </div>
   <div>
     <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>">View raw</a>
   </div>
diff --git a/cgithub/views/commits.eta b/cgithub/views/commits.eta
index 5cf0beb..c29693d 100644
--- a/cgithub/views/commits.eta
+++ b/cgithub/views/commits.eta
@@ -2,6 +2,12 @@
 
 <%~ include("./_nav.eta", {...it, view: "commits"}) %>
 
+<% const pathSuffix = it.path && it.path !== "/" ? "/" + it.path : "" %>
+
+<% if (it.commitGroups.length === 0) { %>
+  <div class="box">No commits found.</div>
+<% } %>
+
 <% for (const group of it.commitGroups) { %>
   <h3><%= group.title %></h3>
   <% for (const commit of group.commits) { %>
@@ -19,6 +25,8 @@
       </div>
       <div class="commit-sha">
         <code><%= commit.oid.substring(0, 7) %></code>
+        <% /* Like GitHub, blindly link to blob and redirect for trees */ %>
+        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= commit.oid %><%= pathSuffix %>">Browse</a>
       </div>
     </div>
   <% } %>
-- 
cgit v1.3.1


From 53ac3bc511a45e4e2e3f234a8b8dcf853b0c38d9 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Fri, 4 Sep 2026 21:26:21 -0400
Subject: Split the page shell out of the repository layout

layout.eta was two things at once: the HTML shell every page needs and
the repository chrome around it. owner.eta, being the one page that is
not about a repository, could use neither and carried its own copy of
the shell, which had drifted -- its footer named no build commit and
did not link to the original page on GitHub.

The shell moves to views/layouts/base.eta, taking its title and any
deferred scripts as layout data, and the chrome to views/layouts/repo.eta,
a layout over it that adds the clone commands, nav, search box, and the
"/" shortcut that focuses it. Repository pages point at repo.eta and
render as before; owner.eta uses base.eta directly and so gains the
footer it was missing.

Templates now live in more than one directory, so scripts/build.ts walks
views/ recursively and keys each template by its path underneath it.
Names crossing a directory are written from the views root
("/layouts/base.eta"), the one form both Eta's filesystem resolver and
the precompiled resolver in worker.ts agree on; siblings stay relative.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ba5p88cWtCq42vf3uweweL
---
 cgithub/CLAUDE.md              |   2 +-
 cgithub/scripts/build.ts       |  20 ++++++--
 cgithub/src/app.ts             |   2 +-
 cgithub/src/worker.ts          |   5 +-
 cgithub/views/blob.eta         |   2 +-
 cgithub/views/commits.eta      |   2 +-
 cgithub/views/issues.eta       |   2 +-
 cgithub/views/layout.eta       |  66 -------------------------
 cgithub/views/layouts/base.eta |  17 +++++++
 cgithub/views/layouts/repo.eta |  59 +++++++++++++++++++++++
 cgithub/views/owner.eta        | 107 ++++++++++++++++++-----------------------
 cgithub/views/pulls.eta        |   2 +-
 cgithub/views/release.eta      |   2 +-
 cgithub/views/releases.eta     |   2 +-
 cgithub/views/repo.eta         |   2 +-
 cgithub/views/tree.eta         |   2 +-
 cgithub/views/wiki.eta         |   2 +-
 cgithub/views/wikiPages.eta    |   2 +-
 18 files changed, 156 insertions(+), 142 deletions(-)
 delete mode 100644 cgithub/views/layout.eta
 create mode 100644 cgithub/views/layouts/base.eta
 create mode 100644 cgithub/views/layouts/repo.eta

(limited to 'cgithub/views/blob.eta')

diff --git a/cgithub/CLAUDE.md b/cgithub/CLAUDE.md
index edb33f5..6c6dc60 100644
--- a/cgithub/CLAUDE.md
+++ b/cgithub/CLAUDE.md
@@ -24,7 +24,7 @@ pnpm test
 - `src/worker.ts` - Cloudflare Workers entry (config in `wrangler.jsonc`)
 - `src/scraper.ts` - GitHub HTML fetching and JSON extraction logic
 
-**Templates:** `views/*.eta` - Eta templates with layout inheritance (`layout.eta` as base). On Workers, runtime code generation is disallowed, so `scripts/build.ts` precompiles templates to `src/views.generated.ts`. The same script records the build's `git describe` output in `src/build.generated.ts` for the page footer. Both are gitignored and regenerated by the `dev`/`deploy` scripts.
+**Templates:** `views/*.eta` - Eta templates with layout inheritance. `views/layouts/base.eta` is the HTML shell every page uses; `views/layouts/repo.eta` wraps it with the repository header, nav, and search box. Templates address each other from the views root (`/layouts/base.eta`) or as siblings (`./_tree`). On Workers, runtime code generation is disallowed, so `scripts/build.ts` precompiles templates to `src/views.generated.ts`. The same script records the build's `git describe` output in `src/build.generated.ts` for the page footer. Both are gitignored and regenerated by the `dev`/`deploy` scripts.
 
 **Static files:** `public/static/*`, served by Workers Static Assets.
 
diff --git a/cgithub/scripts/build.ts b/cgithub/scripts/build.ts
index 76d88a0..4908532 100644
--- a/cgithub/scripts/build.ts
+++ b/cgithub/scripts/build.ts
@@ -14,10 +14,22 @@ const root = path.join(import.meta.dirname, "..");
 const viewsDir = path.join(root, "views");
 const eta = new Eta({ views: viewsDir });
 
-const names = fs
-  .readdirSync(viewsDir)
-  .filter((name) => name.endsWith(".eta"))
-  .sort();
+// Names are the templates' paths under views/, e.g. "layouts/base.eta", which
+// is how the templates address each other (see src/worker.ts).
+function templateNames(dir: string, prefix = ""): string[] {
+  const names: string[] = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const name = prefix + entry.name;
+    if (entry.isDirectory()) {
+      names.push(...templateNames(path.join(dir, entry.name), `${name}/`));
+    } else if (entry.name.endsWith(".eta")) {
+      names.push(name);
+    }
+  }
+  return names.sort();
+}
+
+const names = templateNames(viewsDir);
 
 let out = `// @ts-nocheck
 // Generated by scripts/build.ts -- do not edit.
diff --git a/cgithub/src/app.ts b/cgithub/src/app.ts
index 2fa5832..a040aaa 100644
--- a/cgithub/src/app.ts
+++ b/cgithub/src/app.ts
@@ -39,7 +39,7 @@ export function createApp(eta: Eta) {
   const app = new Hono();
 
   app.use(async (c, next) => {
-    // Include render data for layout.eta.
+    // Include render data for views/layouts/base.eta.
     c.setRenderer((template, data) =>
       c.html(eta.render(template, { ...data, githubUrl: githubUrlFor(c), buildCommit })),
     );
diff --git a/cgithub/src/worker.ts b/cgithub/src/worker.ts
index 7bf9100..e59c690 100644
--- a/cgithub/src/worker.ts
+++ b/cgithub/src/worker.ts
@@ -9,8 +9,11 @@ import { views } from "./views.generated.ts";
 // cache: true, Eta serves them from the cache and never compiles.
 const eta = new Eta({ cache: true });
 
+// Templates name each other as siblings ("./_tree") or from the views root
+// ("/layouts/base.eta"); either way the name is the path under views/ that
+// scripts/build.ts keyed the template by.
 eta.resolvePath = (templatePath: string) => {
-  let name = templatePath.replace(/^\.\//, "");
+  let name = templatePath.replace(/^\.?\//, "");
   if (!name.endsWith(".eta")) name += ".eta";
   return name;
 };
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 2014b14..9f6706e 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta"); it.searchType = "code" %>
+<% layout("/layouts/repo.eta"); it.searchType = "code" %>
 
 <%~ include("./_nav.eta", {...it, view: "blob"}) %>
 
diff --git a/cgithub/views/commits.eta b/cgithub/views/commits.eta
index c29693d..a80ef07 100644
--- a/cgithub/views/commits.eta
+++ b/cgithub/views/commits.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta") %>
+<% layout("/layouts/repo.eta") %>
 
 <%~ include("./_nav.eta", {...it, view: "commits"}) %>
 
diff --git a/cgithub/views/issues.eta b/cgithub/views/issues.eta
index 646da46..754afb8 100644
--- a/cgithub/views/issues.eta
+++ b/cgithub/views/issues.eta
@@ -1,4 +1,4 @@
-<% layout("./layout"); it.searchType = "issues" %>
+<% layout("/layouts/repo.eta"); it.searchType = "issues" %>
 
 <table>
   <% for (const issue of it.issues) { %>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
deleted file mode 100644
index 37289dd..0000000
--- a/cgithub/views/layout.eta
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || '/' %></title>
-  <link rel="stylesheet" href="/static/style.css">
-  <script src="/static/refs.js" defer></script>
-</head>
-<body>
-  <div class="box">
-    <div class="repo"><a href="/<%= it.repo.owner %>"><%= it.repo.owner %></a>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>"><%= it.repo.name %></a></div>
-    <pre><code>git clone https://github.com/<%= it.repo.owner %>/<%= it.repo.name %>.git
-git clone git@github.com:<%= it.repo.owner %>/<%= it.repo.name %>.git</code></pre>
-    <nav>
-      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>">Code</a>
-      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/issues">Issues</a>
-      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/pulls">Pull requests</a>
-      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases">Releases</a>
-      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/wiki">Wiki</a>
-      <% if (it.branch) { %>
-        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/commits/<%= it.branch %><%= it.path && it.path !== '/' ? '/' + it.path : '' %>">Commits</a>
-      <% } %>
-    </nav>
-    <form action="/<%= it.repo.owner %>/<%= it.repo.name %>/search" method="get">
-      <input id="search-input" type="text" name="q" placeholder="Search…" value="<%= it.q ?? "" %>">
-      <select name="type">
-        <option value="issues" <%= it.searchType === "issues" ? "selected" : "" %>>Issues</option>
-        <option value="pullrequests" <%= it.searchType === "pullrequests" ? "selected" : "" %>>Pull requests</option>
-        <option value="code" <%= it.searchType === "code" || it.searchType == null ? "selected" : "" %>>Code</option>
-      </select>
-      <button type="submit">Search</button>
-    </form>
-  </div>
-
-  <%~ it.body %>
-
-  <footer>Generated by cgithub commit <code><%= it.buildCommit %></code> · <a href="<%= it.githubUrl %>" rel="noreferrer">View original</a></footer>
-
-  <script>
-    document.addEventListener("keydown", function(e) {
-      let shortcut = "";
-      if (e.ctrlKey || e.metaKey) shortcut += "C-";
-      if (e.altKey) shortcut += "A-";
-      if (e.shiftKey) shortcut += "S-";
-      shortcut += e.key;
-
-      if (shortcut === "Escape") {
-        document.activeElement.blur();
-        return;
-      }
-
-      if (["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
-        return;
-      }
-
-      if (shortcut === "/") {
-        e.preventDefault();
-        const input = document.getElementById('search-input');
-        input.select();
-        input.scrollIntoView({ block: "nearest" });
-      }
-    });
-  </script>
-</body>
-</html>
diff --git a/cgithub/views/layouts/base.eta b/cgithub/views/layouts/base.eta
new file mode 100644
index 0000000..fb644f5
--- /dev/null
+++ b/cgithub/views/layouts/base.eta
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= it.title %></title>
+  <link rel="stylesheet" href="/static/style.css">
+  <% for (const src of it.scripts ?? []) { %>
+    <script src="<%= src %>" defer></script>
+  <% } %>
+</head>
+<body>
+  <%~ it.body %>
+
+  <footer>Generated by cgithub commit <code><%= it.buildCommit %></code> · <a href="<%= it.githubUrl %>" rel="noreferrer">View original</a></footer>
+</body>
+</html>
diff --git a/cgithub/views/layouts/repo.eta b/cgithub/views/layouts/repo.eta
new file mode 100644
index 0000000..e4f7880
--- /dev/null
+++ b/cgithub/views/layouts/repo.eta
@@ -0,0 +1,59 @@
+<%
+layout("/layouts/base.eta", {
+  title: `${it.repo.owner}/${it.repo.name} - ${it.path || "/"}`,
+  scripts: ["/static/refs.js"],
+})
+%>
+
+<div class="box">
+  <div class="repo"><a href="/<%= it.repo.owner %>"><%= it.repo.owner %></a>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>"><%= it.repo.name %></a></div>
+  <pre><code>git clone https://github.com/<%= it.repo.owner %>/<%= it.repo.name %>.git
+git clone git@github.com:<%= it.repo.owner %>/<%= it.repo.name %>.git</code></pre>
+  <nav>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>">Code</a>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/issues">Issues</a>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/pulls">Pull requests</a>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/releases">Releases</a>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/wiki">Wiki</a>
+    <% if (it.branch) { %>
+      <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/commits/<%= it.branch %><%= it.path && it.path !== '/' ? '/' + it.path : '' %>">Commits</a>
+    <% } %>
+  </nav>
+  <form action="/<%= it.repo.owner %>/<%= it.repo.name %>/search" method="get">
+    <input id="search-input" type="text" name="q" placeholder="Search…" value="<%= it.q ?? "" %>">
+    <select name="type">
+      <option value="issues" <%= it.searchType === "issues" ? "selected" : "" %>>Issues</option>
+      <option value="pullrequests" <%= it.searchType === "pullrequests" ? "selected" : "" %>>Pull requests</option>
+      <option value="code" <%= it.searchType === "code" || it.searchType == null ? "selected" : "" %>>Code</option>
+    </select>
+    <button type="submit">Search</button>
+  </form>
+</div>
+
+<%~ it.body %>
+
+<script>
+  document.addEventListener("keydown", function(e) {
+    let shortcut = "";
+    if (e.ctrlKey || e.metaKey) shortcut += "C-";
+    if (e.altKey) shortcut += "A-";
+    if (e.shiftKey) shortcut += "S-";
+    shortcut += e.key;
+
+    if (shortcut === "Escape") {
+      document.activeElement.blur();
+      return;
+    }
+
+    if (["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
+      return;
+    }
+
+    if (shortcut === "/") {
+      e.preventDefault();
+      const input = document.getElementById('search-input');
+      input.select();
+      input.scrollIntoView({ block: "nearest" });
+    }
+  });
+</script>
diff --git a/cgithub/views/owner.eta b/cgithub/views/owner.eta
index e5667fb..b3304fb 100644
--- a/cgithub/views/owner.eta
+++ b/cgithub/views/owner.eta
@@ -1,65 +1,54 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title><%= it.name ? `${it.name} (${it.login})` : it.login %></title>
-  <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-  <div class="box">
-    <% if (it.avatarUrl) { %>
-      <img class="avatar" src="<%= it.avatarUrl %>" alt="" width="64" height="64">
-    <% } %>
-    <div class="repo"><%= it.name || it.login %></div>
-    <div><%= it.login %><%= it.type === "organization" ? " (organization)" : "" %></div>
-    <% if (it.location) { %>
-      <div><%= it.location %></div>
-    <% } %>
-    <% if (it.nav.length > 0) { %>
-      <nav>
-        <% for (const item of it.nav) { %>
-          <a href="<%= item.href %>"><%= item.text %></a>
-        <% } %>
-      </nav>
-    <% } %>
-  </div>
+<% layout("/layouts/base.eta", { title: it.name ? `${it.name} (${it.login})` : it.login }) %>
 
-  <% if (it.bio || it.links.length > 0 || it.followers || it.company) { %>
-    <div class="box repo-info">
-      <% if (it.bio) { %>
-        <div class="description"><%= it.bio %></div>
-      <% } %>
-      <% for (const link of it.links) { %>
-        <div class="detail"><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= link.href %>" rel="noopener noreferrer"><%= link.text %></a></div>
-      <% } %>
-      <% if (it.followers) { %>
-        <div class="detail"><img src="/static/icons/eye.svg" alt="" class="icon"> <%= it.followers %> followers<%= it.following ? ` · ${it.following} following` : "" %></div>
-      <% } %>
-      <% if (it.company) { %>
-        <div class="detail"><%= it.company %></div>
-      <% } %>
-    </div>
+<div class="box">
+  <% if (it.avatarUrl) { %>
+    <img class="avatar" src="<%= it.avatarUrl %>" alt="" width="64" height="64">
   <% } %>
-
-  <% if (it.pinned.length > 0) { %>
-    <section>
-      <h2>Pinned</h2>
-      <% for (const repo of it.pinned) { %>
-        <%~ include("./_ownerRepo", { repo, login: it.login }) %>
-      <% } %>
-    </section>
+  <div class="repo"><%= it.name || it.login %></div>
+  <div><%= it.login %><%= it.type === "organization" ? " (organization)" : "" %></div>
+  <% if (it.location) { %>
+    <div><%= it.location %></div>
   <% } %>
-
-  <% if (it.repos.length > 0) { %>
-    <section>
-      <h2>Repositories</h2>
-      <% for (const repo of it.repos) { %>
-        <%~ include("./_ownerRepo", { repo, login: it.login }) %>
+  <% if (it.nav.length > 0) { %>
+    <nav>
+      <% for (const item of it.nav) { %>
+        <a href="<%= item.href %>"><%= item.text %></a>
       <% } %>
-    </section>
+    </nav>
   <% } %>
+</div>
+
+<% if (it.bio || it.links.length > 0 || it.followers || it.company) { %>
+  <div class="box repo-info">
+    <% if (it.bio) { %>
+      <div class="description"><%= it.bio %></div>
+    <% } %>
+    <% for (const link of it.links) { %>
+      <div class="detail"><img src="/static/icons/link.svg" alt="" class="icon"> <a href="<%= link.href %>" rel="noopener noreferrer"><%= link.text %></a></div>
+    <% } %>
+    <% if (it.followers) { %>
+      <div class="detail"><img src="/static/icons/eye.svg" alt="" class="icon"> <%= it.followers %> followers<%= it.following ? ` · ${it.following} following` : "" %></div>
+    <% } %>
+    <% if (it.company) { %>
+      <div class="detail"><%= it.company %></div>
+    <% } %>
+  </div>
+<% } %>
 
-  <footer>Generated by cgithub</footer>
-</body>
-</html>
+<% if (it.pinned.length > 0) { %>
+  <section>
+    <h2>Pinned</h2>
+    <% for (const repo of it.pinned) { %>
+      <%~ include("./_ownerRepo", { repo, login: it.login }) %>
+    <% } %>
+  </section>
+<% } %>
+
+<% if (it.repos.length > 0) { %>
+  <section>
+    <h2>Repositories</h2>
+    <% for (const repo of it.repos) { %>
+      <%~ include("./_ownerRepo", { repo, login: it.login }) %>
+    <% } %>
+  </section>
+<% } %>
diff --git a/cgithub/views/pulls.eta b/cgithub/views/pulls.eta
index 9ec5ca1..697f6b1 100644
--- a/cgithub/views/pulls.eta
+++ b/cgithub/views/pulls.eta
@@ -1,4 +1,4 @@
-<% layout("./layout"); it.searchType = "pullrequests" %>
+<% layout("/layouts/repo.eta"); it.searchType = "pullrequests" %>
 
 <table>
   <% for (const pull of it.pulls) { %>
diff --git a/cgithub/views/release.eta b/cgithub/views/release.eta
index 46dd5db..64cca35 100644
--- a/cgithub/views/release.eta
+++ b/cgithub/views/release.eta
@@ -1,3 +1,3 @@
-<% layout("./layout.eta") %>
+<% layout("/layouts/repo.eta") %>
 
 <%~ include("./_release.eta", { repo: it.repo, release: it.release, linkToDetail: false }) %>
diff --git a/cgithub/views/releases.eta b/cgithub/views/releases.eta
index 840908c..4ede28b 100644
--- a/cgithub/views/releases.eta
+++ b/cgithub/views/releases.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta") %>
+<% layout("/layouts/repo.eta") %>
 
 <% for (const release of it.releases) { %>
   <%~ include("./_release.eta", { repo: it.repo, release, linkToDetail: true }) %>
diff --git a/cgithub/views/repo.eta b/cgithub/views/repo.eta
index 5dc6beb..60746df 100644
--- a/cgithub/views/repo.eta
+++ b/cgithub/views/repo.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta") %>
+<% layout("/layouts/repo.eta") %>
 
 <% if (it.info) { %>
   <div class="box repo-info">
diff --git a/cgithub/views/tree.eta b/cgithub/views/tree.eta
index 41ded06..fabf5b9 100644
--- a/cgithub/views/tree.eta
+++ b/cgithub/views/tree.eta
@@ -1,3 +1,3 @@
-<% layout("./layout.eta"); it.searchType = "code" %>
+<% layout("/layouts/repo.eta"); it.searchType = "code" %>
 
 <%~ include("./_tree.eta", it) %>
diff --git a/cgithub/views/wiki.eta b/cgithub/views/wiki.eta
index d6047e1..781caff 100644
--- a/cgithub/views/wiki.eta
+++ b/cgithub/views/wiki.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta"); it.path = "wiki/" + it.title %>
+<% layout("/layouts/repo.eta"); it.path = "wiki/" + it.title %>
 
 <%~ include("./_wikiNav.eta", it) %>
 
diff --git a/cgithub/views/wikiPages.eta b/cgithub/views/wikiPages.eta
index 58d6d21..eb90781 100644
--- a/cgithub/views/wikiPages.eta
+++ b/cgithub/views/wikiPages.eta
@@ -1,4 +1,4 @@
-<% layout("./layout.eta"); it.path = "wiki/_pages" %>
+<% layout("/layouts/repo.eta"); it.path = "wiki/_pages" %>
 
 <%~ include("./_wikiNav.eta", it) %>
 
-- 
cgit v1.3.1