From e5ca1c0ada6969dfa97f48a66d185d19895388e8 Mon Sep 17 00:00:00 2001
From: disqualifier <dev@disqualifier.me>
Date: Mon, 29 Jun 2026 20:26:11 -0400
Subject: [PATCH] style the live libraries table + add Language column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- libraries.md: render the live lib list as a 3-column table (Library /
  What it does / Language), wrapped in .rt-lib-table so it picks up
  explicit styling (Material only auto-styles markdown tables, not
  innerHTML-injected ones — that's why it rendered bare before).
- extra.css: branded table (navy header, blue borders, hover rows,
  code-styled linked names) and a blue Language badge.

Verified in-browser against real Gitea API data (14 repos fetched,
handbook denylisted -> 13 libs): table renders sorted with language
badges, matches the theme. Live load on prod still needs Gitea CORS
(app.ini [cors] ALLOW_DOMAIN = the docs origin).

Signed-off-by: disqualifier <dev@disqualifier.me>
---
 docs/libraries.md          | 11 +++++--
 docs/stylesheets/extra.css | 61 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/docs/libraries.md b/docs/libraries.md
index 86a16b7..416b25b 100644
--- a/docs/libraries.md
+++ b/docs/libraries.md
@@ -89,12 +89,17 @@ Pin a tag in your dependencies — never an unpinned branch:
     var rows = libs.map(function (r) {
       var url = r.html_url || (REPO_BASE + "/" + r.name);
       var desc = r.description ? escapeHtml(r.description) : "<em>No description.</em>";
+      var lang = r.language
+        ? '<span class="rt-lang">' + escapeHtml(r.language) + "</span>"
+        : '<span class="rt-lang rt-lang--none">—</span>';
       return '<tr><td><a href="' + escapeHtml(url) + '"><code>' +
-        escapeHtml(r.name) + '</code></a></td><td>' + desc + '</td></tr>';
+        escapeHtml(r.name) + "</code></a></td><td>" + desc +
+        "</td><td>" + lang + "</td></tr>";
     }).join("");
     el.innerHTML =
-      '<table><thead><tr><th>Library</th><th>What it does</th></tr></thead>' +
-      '<tbody>' + rows + '</tbody></table>';
+      '<div class="rt-lib-table"><table>' +
+      "<thead><tr><th>Library</th><th>What it does</th><th>Language</th></tr></thead>" +
+      "<tbody>" + rows + "</tbody></table></div>";
   }
 
   function fail() {
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 259864b..d2b5586 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -151,6 +151,67 @@
   background-color: rgba(85, 187, 255, 0.1);
 }
 
+/* Live libraries table — JS-injected, so it needs explicit Material-style rules
+   (Material only auto-styles markdown tables, not innerHTML ones). */
+.rt-lib-table {
+  overflow-x: auto;
+  margin: 1em 0;
+}
+.rt-lib-table table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--rt-border);
+  font-size: 0.74rem;
+}
+.rt-lib-table th,
+.rt-lib-table td {
+  text-align: left;
+  padding: 0.55em 0.9em;
+  vertical-align: top;
+}
+.rt-lib-table thead th {
+  background-color: var(--rt-nav);
+  color: var(--rt-text);
+  font-weight: 700;
+  border-bottom: 1px solid var(--rt-border);
+}
+.rt-lib-table tbody tr {
+  border-top: 1px solid rgba(41, 66, 116, 0.5);
+  transition: background-color 0.15s;
+}
+.rt-lib-table tbody tr:hover {
+  background-color: rgba(86, 155, 204, 0.08);
+}
+.rt-lib-table td code {
+  background-color: var(--rt-surface);
+  color: var(--rt-primary-light);
+  padding: 0.1em 0.4em;
+  font-size: 0.85em;
+}
+.rt-lib-table a {
+  color: var(--rt-primary);
+}
+.rt-lib-table a:hover {
+  color: var(--rt-accent);
+}
+
+/* Language badge in the libs table. */
+.rt-lang {
+  display: inline-block;
+  padding: 0.1em 0.5em;
+  border: 1px solid var(--rt-border);
+  border-radius: 0;
+  background-color: rgba(86, 155, 204, 0.1);
+  color: var(--rt-primary-light);
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+.rt-lang--none {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--rt-muted);
+}
+
 /* Code annotation markers (the (1) callouts) in brand blue. */
 .md-typeset .md-annotation__index {
   background-color: var(--rt-primary);