Files
Homepage/index.html

106 lines
4.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Services Homepage</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<header>
<h1>My Services</h1>
<p class="subtitle">Quick links to the commonly used containers on this host</p>
</header>
<main>
<section class="grid" id="services-grid">
<!-- Services will be populated dynamically from /services.xml -->
</section>
<section class="notes">
<h2>Notes</h2>
<ul>
<li>If any service is behind a reverse proxy or uses host networking, the path/host may differ.</li>
<li>Edit <code>services.xml</code> in this repo to add/remove links.</li>
</ul>
</section>
</main>
<footer>
<small>Generated: static homepage — served by nginx in a container. Edit and rebuild to update.</small>
</footer>
<script>
// Fetch services.xml and render the service cards with logos.
(async function(){
const grid = document.getElementById('services-grid');
const host = window.location.hostname;
try{
const res = await fetch('/services.xml', {cache: 'no-cache'});
if(!res.ok){ throw new Error('Failed to load services.xml'); }
const text = await res.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'application/xml');
const services = Array.from(doc.getElementsByTagName('service'));
if(services.length===0){ grid.innerHTML = '<p class="notes">No services found in services.xml</p>'; return; }
services.forEach(s=>{
const name = s.getAttribute('name') || s.getAttribute('id') || 'unknown';
const proto = s.getAttribute('proto') || 'http';
const port = s.getAttribute('port') || '';
const logo = s.getAttribute('logo') || '';
const hostAttr = s.getAttribute('host'); // optional public hostname or full URL
// Build href: prefer explicit host attribute when present.
// Rules:
// - If hostAttr starts with http(s)://, use it as-is.
// - If hostAttr is a hostname (no protocol) and does NOT include a port, prefer HTTPS and DO NOT append the service port.
// - If hostAttr includes a port (example.com:8096), use it as provided (no extra port appended).
// - If no hostAttr, fall back to current page hostname and use the service port.
let href = '';
if(hostAttr){
if(/^https?:\/\//i.test(hostAttr)){
href = hostAttr;
} else {
const hasPortInHost = /:\d+$/.test(hostAttr);
if(hasPortInHost){
// host includes port, use the host as provided with the proto
href = `${proto}://${hostAttr}`;
} else {
// Hostname without port: prefer HTTPS and do NOT append numeric port.
href = `https://${hostAttr}`;
}
}
} else {
// Fallback to current page hostname and include port if non-standard
let portPart = '';
if(port && !((proto==='http'&&port==='80')||(proto==='https'&&port==='443'))){ portPart = ':'+port; }
href = `${proto}://${host}${portPart}`;
}
const a = document.createElement('a');
a.className = 'card';
a.href = href;
a.target = '_blank';
a.rel = 'noreferrer';
const img = document.createElement('img');
img.className = 'logo';
img.src = logo ? ('/logos/'+logo) : '/logos/default.svg';
img.alt = name + ' logo';
const span = document.createElement('div');
span.className = 'label';
span.textContent = `${name}`;
a.appendChild(img);
a.appendChild(span);
grid.appendChild(a);
});
}catch(err){
console.error(err);
grid.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';
}
})();
</script>
</body>
</html>