From b43ce92c7b16bdefedb7c4c2aef41f9417f1ddf6 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 11 Aug 2026 08:09:47 -0400
Subject: Add language percentages to repo pages

GitHub no longer server-renders the repository sidebar; its React UI
lazily fetches /:owner/:repo/_sidebar as JSON, which carries the
language breakdown (name, percentage, color). getGitHubLanguages() uses
that endpoint, and a new /api/:owner/:repo/languages fragment route
renders the bar and legend the same way refs and latest-commit already
work, so repo page loads still cost a single scrape.

The latest-commit placeholder loader in refs.js is generalized over
.placeholder[data-src] so both placeholders share it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 views/_languages.eta | 17 +++++++++++++++++
 views/_tree.eta      |  2 +-
 views/repo.eta       |  2 ++
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 views/_languages.eta

(limited to 'views')

diff --git a/views/_languages.eta b/views/_languages.eta
new file mode 100644
index 0000000..8aca447
--- /dev/null
+++ b/views/_languages.eta
@@ -0,0 +1,17 @@
+<% if (it.languages.length > 0) { %>
+  <div class="languages box">
+    <div class="language-bar">
+      <% for (const lang of it.languages) { %>
+        <span style="width: <%= lang.percentage %>%; background: <%= lang.color ?? "#ededed" %>" title="<%= lang.name %> <%= lang.percentage %>%"></span>
+      <% } %>
+    </div>
+    <ul class="language-list">
+      <% for (const lang of it.languages) { %>
+        <li>
+          <span class="language-dot" style="background: <%= lang.color ?? "#ededed" %>"></span>
+          <%= lang.name %> <span class="language-percentage"><%= lang.percentage %>%</span>
+        </li>
+      <% } %>
+    </ul>
+  </div>
+<% } %>
diff --git a/views/_tree.eta b/views/_tree.eta
index a0ecfab..2eb445f 100644
--- a/views/_tree.eta
+++ b/views/_tree.eta
@@ -1,7 +1,7 @@
 <%~ include("./_nav.eta", {...it, isTree: true}) %>
 
 <% const commitPath = it.path && it.path !== "/" ? it.path : ""; %>
-<div class="latest-commit-placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">Loading latest commit…</div>
+<div class="placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">Loading latest commit…</div>
 
 <table>
   <% for (const item of it.items) { %>
diff --git a/views/repo.eta b/views/repo.eta
index 683a9ad..9122594 100644
--- a/views/repo.eta
+++ b/views/repo.eta
@@ -29,4 +29,6 @@
   </div>
 <% } %>
 
+<div class="placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/languages">Loading languages…</div>
+
 <%~ include("./_tree", it) %>
-- 
cgit v1.3.1