senior
19bc3cf991
- index.html: replace Image() probe with fetch(no-cors) + AbortController
timeout. fetch resolves for any network response (incl. 4xx/5xx) so
resolve -> 'up', reject/timeout -> 'down'. Fixes the bug where 401/404
services were marked green.
- services.json: add Homepage service under 'dev' (was missing; the
homepage is one of the public homelab services). Now 21 services.
- services.json: fix ethereum category icon (' Ξ' -> 'Ξ') leading space.
- .gitignore (new): ignore /.playwright-mcp/ and services-page.png.
- git rm --cached the three stray dev artifacts so they leave the repo.
139 lines
5.7 KiB
HTML
139 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="ffaerber — self-hosted homelab services: media, AI, Ethereum infrastructure, observability and more.">
|
|
<title>ffaerber — services</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<h1 class="site-title">ffaerber</h1>
|
|
<p class="site-tagline">Self-hosted homelab — every service running in the house, one click away.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<!-- Section: Services (rendered from services.json) -->
|
|
<section class="section" id="services">
|
|
<div class="section-head">
|
|
<h2 class="section-title">Services</h2>
|
|
<p class="section-lede">All public-facing services from the homelab, grouped by what they do. A green dot means the service answered just now; grey means it is down or unreachable from your browser.</p>
|
|
</div>
|
|
<div id="services-root" class="services-root" data-source="services.json">
|
|
<p class="services-loading">Loading services…</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section: Projects (kept — links to the GitHub orgs) -->
|
|
<section class="section" id="projects">
|
|
<div class="section-head">
|
|
<h2 class="section-title">Projects</h2>
|
|
<p class="section-lede">The code behind the services lives across a few GitHub orgs.</p>
|
|
</div>
|
|
<ul class="orgs">
|
|
<li><a href="https://github.com/ffaerber" rel="noopener noreferrer" target="_blank">github.com/ffaerber ↗</a> — dapps, Ethereum infra, GPU speech services</li>
|
|
<li><a href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a> — AI companion platform</li>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<nav class="footer-links">
|
|
<a href="https://github.com/ffaerber" rel="noopener noreferrer" target="_blank">github.com/ffaerber ↗</a>
|
|
<a href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a>
|
|
</nav>
|
|
<p class="footer-meta">Served from a container built in <a href="https://git.ffaerber.duckdns.org/ffaerber/homepage" rel="noopener">ffaerber/homepage</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
var root = document.getElementById("services-root");
|
|
if (!root) return;
|
|
var src = root.getAttribute("data-source");
|
|
if (!src) return;
|
|
|
|
function escapeHtml(s) {
|
|
return String(s).replace(/[&<>"']/g, function (c) {
|
|
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c];
|
|
});
|
|
}
|
|
|
|
function setStatusDot(dot, state) {
|
|
dot.className = "status-dot status-" + state;
|
|
dot.setAttribute("aria-label",
|
|
state === "up" ? "service is up" :
|
|
state === "down" ? "service is down" : "status unknown");
|
|
}
|
|
|
|
function probe(url, dot) {
|
|
setStatusDot(dot, "pending");
|
|
var done = false;
|
|
function settle(state) {
|
|
if (done) return;
|
|
done = true;
|
|
setStatusDot(dot, state);
|
|
}
|
|
var controller = window.AbortController ? new AbortController() : null;
|
|
var timeout = setTimeout(function () {
|
|
if (controller) controller.abort();
|
|
settle("down");
|
|
}, 6000);
|
|
fetch(url, { mode: "no-cors", cache: "no-store", redirect: "follow", signal: controller ? controller.signal : undefined })
|
|
.then(function () { clearTimeout(timeout); settle("up"); })
|
|
.catch(function () { clearTimeout(timeout); settle("down"); });
|
|
}
|
|
|
|
fetch(src)
|
|
.then(function (r) {
|
|
if (!r.ok) throw new Error("HTTP " + r.status);
|
|
return r.json();
|
|
})
|
|
.then(function (data) {
|
|
var html = "";
|
|
(data.categories || []).forEach(function (cat) {
|
|
html += '<div class="service-group" id="cat-' + escapeHtml(cat.name) + '">';
|
|
html += '<h3 class="group-title"><span class="group-icon" aria-hidden="true">' +
|
|
escapeHtml(cat.icon || "") + '</span>' + escapeHtml(cat.label || cat.name) + '</h3>';
|
|
html += '<ul class="service-list">';
|
|
(cat.services || []).forEach(function (svc) {
|
|
var safeName = escapeHtml(svc.name);
|
|
var safeUrl = escapeHtml(svc.url);
|
|
var safeDesc = escapeHtml(svc.desc || "");
|
|
var safeIcon = escapeHtml(svc.icon || "");
|
|
html += '<li class="service" data-url="' + safeUrl + '">';
|
|
html += '<a class="service-link" href="' + safeUrl + '" rel="noopener noreferrer" target="_blank">';
|
|
html += '<span class="service-icon" aria-hidden="true">' + safeIcon + '</span>';
|
|
html += '<span class="service-body">';
|
|
html += '<span class="service-name">' + safeName + '</span>';
|
|
html += '<span class="service-desc">' + safeDesc + '</span>';
|
|
html += '</span>';
|
|
html += '<span class="status-dot status-pending" role="img" aria-label="status unknown"></span>';
|
|
html += '</a>';
|
|
html += '</li>';
|
|
});
|
|
html += '</ul>';
|
|
html += '</div>';
|
|
});
|
|
root.innerHTML = html;
|
|
Array.prototype.forEach.call(root.querySelectorAll(".service"), function (li) {
|
|
var url = li.getAttribute("data-url");
|
|
var dot = li.querySelector(".status-dot");
|
|
if (url && dot) probe(url, dot);
|
|
});
|
|
})
|
|
.catch(function (err) {
|
|
root.innerHTML = '<p class="services-error">Could not load the services list. (' +
|
|
escapeHtml(String(err.message || err)) + ')</p>';
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |