rethink-public/handbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style the live libraries table + add Language column

Browse Source 
- 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>
This commit is contained in:
disqualifier 2026-06-29 20:26:11 -04:00
parent 8fc81fc4f4
commit e5ca1c0ada
2 changed files with 69 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/libraries.md
View File

@ -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() {

61
docs/stylesheets/extra.css
View File

@ -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);