From 0be1fdd2635fbc49d7451d3711b5772e1e9990e2 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>
---
 cgithub/public/static/refs.js   | 21 ++++++++++-----------
 cgithub/public/static/style.css | 37 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 12 deletions(-)

(limited to 'cgithub/public/static')

diff --git a/cgithub/public/static/refs.js b/cgithub/public/static/refs.js
index 28b8373..ffff505 100644
--- a/cgithub/public/static/refs.js
+++ b/cgithub/public/static/refs.js
@@ -1,8 +1,8 @@
-// Progressive enhancement for two bits of data GitHub itself loads lazily:
-// the branch/tag dropdown and the latest-commit bar above a file listing.
-// Both degrade gracefully without JS: the button's command/commandfor still
-// opens the (empty) dialog natively; the commit placeholder just never fills
-// in.
+// Progressive enhancement for the bits of data GitHub itself loads lazily:
+// the branch/tag dropdown, the latest-commit bar above a file listing, and the
+// language breakdown. All degrade gracefully without JS: the button's
+// command/commandfor still opens the (empty) dialog natively; the placeholders
+// just never fill in.
 document.addEventListener("DOMContentLoaded", () => {
   const dialog = document.querySelector(".ref-selector-menu");
   if (dialog) {
@@ -44,17 +44,16 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   }
 
-  const commitPlaceholder = document.querySelector(".latest-commit-placeholder");
-  if (commitPlaceholder) {
-    fetch(commitPlaceholder.dataset.src)
+  for (const placeholder of document.querySelectorAll(".placeholder[data-src]")) {
+    fetch(placeholder.dataset.src)
       .then((res) => (res.ok ? res.text() : ""))
       .then((html) => {
         if (html.trim()) {
-          commitPlaceholder.outerHTML = html;
+          placeholder.outerHTML = html;
         } else {
-          commitPlaceholder.remove();
+          placeholder.remove();
         }
       })
-      .catch(() => commitPlaceholder.remove());
+      .catch(() => placeholder.remove());
   }
 });
diff --git a/cgithub/public/static/style.css b/cgithub/public/static/style.css
index 983cb86..ed64bc6 100644
--- a/cgithub/public/static/style.css
+++ b/cgithub/public/static/style.css
@@ -218,10 +218,45 @@ body > footer {
   font-size: 0.85rem;
 }
 
-.latest-commit-placeholder {
+.placeholder {
   opacity: 0.7;
 }
 
+.languages {
+  .language-bar {
+    display: flex;
+    height: .5rem;
+    border-radius: .25rem;
+    overflow: hidden;
+
+    span {
+      /* Keep slivers of tiny languages visible. */
+      min-width: 1px;
+    }
+  }
+
+  .language-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .2rem 1rem;
+    list-style: none;
+    margin: .5rem 0 0;
+    padding: 0;
+    font-size: 0.85rem;
+  }
+
+  .language-dot {
+    display: inline-block;
+    width: .6rem;
+    height: .6rem;
+    border-radius: 50%;
+  }
+
+  .language-percentage {
+    opacity: 0.7;
+  }
+}
+
 .repo-info {
   .description {
     margin-bottom: .2rem;
-- 
cgit v1.3.1