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

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