senior
d84002da33
- Add services.json: hand-maintained source of truth with 20 public homelab services across 7 categories (edge, observability, media, downloads, ethereum, ai, dev), each with name/url/desc/icon. - Rewrite index.html: Services section rendered client-side from services.json with a tiny up/down status probe (green dot = up, grey = down/unreachable; graceful fallback on CORS/offline). Keep a small Projects section linking the GitHub orgs so the old content is not lost. - Add services grid + status dot styles to styles.css. - Dockerfile: COPY services.json into the nginx html root.
138 lines
5.6 KiB
HTML
138 lines
5.6 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 img = new Image();
|
|
img.onload = function () { settle("up"); };
|
|
img.onerror = function () { settle("up"); };
|
|
img.onloadstart = function () {};
|
|
var timeout = setTimeout(function () { settle("down"); }, 6000);
|
|
img.src = url + "?_probe=" + Date.now();
|
|
window.addEventListener("beforeunload", function () { clearTimeout(timeout); });
|
|
}
|
|
|
|
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> |