MayaTheShy/Homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add JavaScript modules for enhanced functionality and dynamic content loading

Browse Source
This commit is contained in:
MayaChat
2025-11-24 01:32:16 -05:00
parent 7caeb56def
commit 3b09920eee
7 changed files with 485 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -10,6 +10,8 @@ services:
- ./services.xml:/usr/share/nginx/html/services.xml:ro
- ./styles.css:/usr/share/nginx/html/styles.css:ro
- ./logos:/usr/share/nginx/html/logos:ro
- ./js:/usr/share/nginx/html/js:ro
- ./README.md:/usr/share/nginx/html/README.md:ro
restart: unless-stopped
logging:
driver: json-file

462
index.html
View File

@@ -33,462 +33,12 @@
<footer>
<small>Generated: static homepage — served by nginx in a container. Edit and rebuild to update.</small>
</footer>
<script>
// Galaxy background - exact CodePen recreation with moon and terrain
(function initGalaxy(){
console.clear();
var ww = window.innerWidth,
wh = window.innerHeight;
var renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.querySelector('#galaxy-canvas')
});
renderer.setSize(ww, wh);
renderer.setClearColor(0x001a2d);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x001a2d, 80, 140);
var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
camera.position.x = 70;
camera.position.y = 30;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3());
/* LIGHTS */
var moonLight = new THREE.PointLight(0xffffff, 2, 150);
scene.add(moonLight);
var moon;
function createMoon() {
var geometry = new THREE.SphereGeometry(8, 32, 32);
var material = new THREE.MeshPhongMaterial({
color: 0x26fdd9,
shininess: 15,
emissive: 0x2bb2e6,
emissiveIntensity: 0.8
});
moon = new THREE.Mesh(geometry, material);
moon.position.x = -9;
moon.position.z = -6.5;
moon.position.y = 1;
moon.rotation.y = -1;
scene.add(moon);
moonLight.position.copy(moon.position);
moonLight.position.y += 4;
var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
scene.add(moonLight2);
moonLight2.position.x += 20;
moonLight2.position.y -= 20;
moonLight2.position.z -= 25;
}
// Initialize simplex noise
var noise = new SimplexNoise();
function createTerrain() {
var geometry = new THREE.PlaneGeometry(150, 150, 120, 120);
var m = new THREE.Matrix4();
m.makeRotationX(Math.PI * -0.5);
geometry.applyMatrix4(m);
var positions = geometry.attributes.position;
for(var i = 0; i < positions.count; i++) {
var x = positions.getX(i);
var z = positions.getZ(i);
var ratio = noise.noise3D(x * 0.03, z * 0.03, 0);
positions.setY(i, ratio * 10);
}
positions.needsUpdate = true;
geometry.computeVertexNormals();
var material = new THREE.MeshPhongMaterial({
color: 0x198257,
emissive: 0x032f50
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
}
var stars = new THREE.Group();
scene.add(stars);
var starsLights = new THREE.Group();
scene.add(starsLights);
var starsAmount = 20;
function createStars() {
var geometry = new THREE.SphereGeometry(0.3, 16, 16);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
for(var i = 0; i < starsAmount; i++) {
var star = new THREE.Mesh(geometry, material);
star.position.x = (Math.random() - 0.5) * 150;
star.position.z = (Math.random() - 0.5) * 150;
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
star.position.y = ratio * 10 + 0.3;
stars.add(star);
var velX = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
var velY = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
star.vel = new THREE.Vector2(velX, velY);
var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
starLight.position.copy(star.position);
starLight.position.y += 0.5;
starsLights.add(starLight);
}
}
function updateStar(star, index) {
if(star.position.x < -75) {
star.position.x = 75;
}
if(star.position.x > 75) {
star.position.x = -75;
}
if(star.position.z < -75) {
star.position.z = 75;
}
if(star.position.z > 75) {
star.position.z = -75;
}
star.position.x += star.vel.x;
star.position.z += star.vel.y;
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
star.position.y = ratio * 10 + 0.3;
starsLights.children[index].position.copy(star.position);
starsLights.children[index].position.y += 0.5;
}
function render(a) {
requestAnimationFrame(render);
for(var i = 0; i < starsAmount; i++) {
updateStar(stars.children[i], i);
}
renderer.render(scene, camera);
}
function onResize() {
ww = window.innerWidth;
wh = window.innerHeight;
camera.aspect = ww / wh;
camera.updateProjectionMatrix();
renderer.setSize(ww, wh);
}
createMoon();
createTerrain();
createStars();
requestAnimationFrame(render);
window.addEventListener('resize', onResize);
})();
</script>
<script>
// Fetch services.xml and render the service cards with logos.
(async function(){
const container = document.getElementById('services-container');
const searchInput = document.getElementById('search-input');
const host = window.location.hostname;
let allServices = []; // Store all service elements for filtering
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');
// Check for XML parsing errors
const parseError = doc.querySelector('parsererror');
if(parseError){
throw new Error('XML parsing error: ' + parseError.textContent);
}
// Check if we have groups or just services
const groups = Array.from(doc.getElementsByTagName('group'));
const hasGroups = groups.length > 0;
console.log('Found', groups.length, 'groups');
if(hasGroups){
// Render grouped services
groups.forEach(group => {
const groupName = group.getAttribute('name') || 'Services';
const services = Array.from(group.getElementsByTagName('service'));
console.log('Group:', groupName, 'has', services.length, 'services');
if(services.length === 0) return;
// Create group section
const groupSection = document.createElement('section');
groupSection.className = 'service-group';
const groupHeader = document.createElement('h2');
groupHeader.className = 'group-header';
groupHeader.textContent = groupName;
groupSection.appendChild(groupHeader);
const grid = document.createElement('div');
grid.className = 'grid';
services.forEach(s => {
const card = createServiceCard(s, host, allServices);
grid.appendChild(card);
});
groupSection.appendChild(grid);
container.appendChild(groupSection);
});
} else {
// Fallback: render ungrouped services
const services = Array.from(doc.getElementsByTagName('service'));
if(services.length === 0){
container.innerHTML = '<p class="notes">No services found in services.xml</p>';
return;
}
const grid = document.createElement('div');
grid.className = 'grid';
grid.id = 'services-grid';
services.forEach(s => {
const card = createServiceCard(s, host, allServices);
grid.appendChild(card);
});
container.appendChild(grid);
}
// Function to create a service card
function createServiceCard(s, host, allServices) {
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
const manualStatus = s.getAttribute('status'); // optional: 'online', 'offline', 'maintenance'
const checkHealth = s.getAttribute('check-health') !== 'false'; // default true, set to false to disable
// 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';
a.dataset.serviceName = name.toLowerCase(); // For search filtering
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);
// Add status indicator - will be updated by health check
const statusDot = document.createElement('span');
statusDot.className = 'status-dot status-checking';
statusDot.title = 'Checking status...';
let currentStatus = 'checking';
// If maintenance mode is set manually, use that and skip health check
if(manualStatus === 'maintenance'){
statusDot.className = 'status-dot status-maintenance';
statusDot.title = 'Status: maintenance';
currentStatus = 'maintenance';
a.appendChild(statusDot);
} else if(checkHealth && href){
// Show checking indicator initially
a.appendChild(statusDot);
// Perform health check
(async function performHealthCheck(){
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
const response = await fetch(href, {
method: 'HEAD',
mode: 'no-cors', // Allow cross-origin requests
cache: 'no-cache',
signal: controller.signal
});
clearTimeout(timeoutId);
// In no-cors mode, opaque responses mean the server responded
// We consider this as "online"
currentStatus = 'online';
statusDot.className = 'status-dot status-online';
statusDot.title = 'Status: online';
} catch(err) {
// Connection failed or timed out
currentStatus = 'offline';
statusDot.className = 'status-dot status-offline';
statusDot.title = 'Status: offline';
}
})();
} else if(manualStatus){
// Use manual status if health check is disabled
statusDot.className = `status-dot status-${manualStatus}`;
statusDot.title = `Status: ${manualStatus}`;
currentStatus = manualStatus;
a.appendChild(statusDot);
}
// Add info button if both hostname and port are available
if((hostAttr || host) && port){
const infoBtn = document.createElement('button');
infoBtn.className = 'info-btn';
infoBtn.title = 'Connection details';
infoBtn.innerHTML = 'ⓘ';
infoBtn.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
const displayHost = hostAttr || host;
const details = `Service: ${name}\nHost: ${displayHost}\nPort: ${port}\nProtocol: ${proto}`;
alert(details);
};
a.appendChild(infoBtn);
}
allServices.push(a);
return a;
}
// Search functionality
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase().trim();
let visibleCount = 0;
// Also hide/show group headers
const groupSections = container.querySelectorAll('.service-group');
allServices.forEach(card => {
const serviceName = card.dataset.serviceName;
if(serviceName.includes(searchTerm)){
card.style.display = '';
visibleCount++;
} else {
card.style.display = 'none';
}
});
// Hide empty groups
groupSections.forEach(section => {
const visibleCards = section.querySelectorAll('.card:not([style*="display: none"])');
section.style.display = visibleCards.length > 0 ? '' : 'none';
});
// Show message if no results
const existingMsg = container.querySelector('.no-results');
if(existingMsg) existingMsg.remove();
if(visibleCount === 0 && searchTerm !== ''){
const msg = document.createElement('p');
msg.className = 'notes no-results';
msg.textContent = `No services found matching "${e.target.value}"`;
container.appendChild(msg);
}
});
// Focus search on '/' key
document.addEventListener('keydown', (e) => {
if(e.key === '/' && document.activeElement !== searchInput){
e.preventDefault();
searchInput.focus();
}
});
// Keyboard navigation for service cards
let selectedIndex = -1;
const selectCard = (index) => {
const visibleCards = allServices.filter(card => card.style.display !== 'none');
if(visibleCards.length === 0) return;
// Remove previous selection
visibleCards.forEach(card => card.classList.remove('selected'));
// Update index
if(index < 0) index = visibleCards.length - 1;
if(index >= visibleCards.length) index = 0;
selectedIndex = index;
// Add selection
visibleCards[selectedIndex].classList.add('selected');
visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
};
document.addEventListener('keydown', (e) => {
if(document.activeElement === searchInput) return;
const visibleCards = allServices.filter(card => card.style.display !== 'none');
if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
e.preventDefault();
selectCard(selectedIndex + 1);
} else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
e.preventDefault();
selectCard(selectedIndex - 1);
} else if(e.key === 'Enter' && selectedIndex >= 0){
e.preventDefault();
visibleCards[selectedIndex].click();
} else if(e.key === 'Escape'){
visibleCards.forEach(card => card.classList.remove('selected'));
selectedIndex = -1;
}
});
}catch(err){
console.error(err);
container.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';
}
})();
// Fetch and render README.md
(async function loadReadme(){
try {
const response = await fetch('/README.md', {cache: 'no-cache'});
if(!response.ok) throw new Error('README not found');
const markdown = await response.text();
const html = marked.parse(markdown);
document.getElementById('readme-content').innerHTML = html;
} catch(err) {
console.error('Error loading README:', err);
document.getElementById('readme-content').innerHTML = '<p>Documentation unavailable.</p>';
}
})();
</script>
<!-- JavaScript modules -->
<script src="/js/galaxy-background.js"></script>
<script src="/js/services-loader.js"></script>
<script src="/js/search.js"></script>
<script src="/js/keyboard-nav.js"></script>
<script src="/js/readme-loader.js"></script>
</body>
</html>

149
js/galaxy-background.js Normal file
View File

@@ -0,0 +1,149 @@
// Galaxy background - moonlit terrain with floating stars
(function initGalaxy(){
console.clear();
var ww = window.innerWidth,
wh = window.innerHeight;
var renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.querySelector('#galaxy-canvas')
});
renderer.setSize(ww, wh);
renderer.setClearColor(0x001a2d);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x001a2d, 80, 140);
var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200);
camera.position.x = 70;
camera.position.y = 30;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3());
/* LIGHTS */
var moonLight = new THREE.PointLight(0xffffff, 2, 150);
scene.add(moonLight);
var moon;
function createMoon() {
var geometry = new THREE.SphereGeometry(8, 32, 32);
var material = new THREE.MeshPhongMaterial({
color: 0x26fdd9,
shininess: 15,
emissive: 0x2bb2e6,
emissiveIntensity: 0.8
});
moon = new THREE.Mesh(geometry, material);
moon.position.x = -9;
moon.position.z = -6.5;
moon.position.y = 1;
moon.rotation.y = -1;
scene.add(moon);
moonLight.position.copy(moon.position);
moonLight.position.y += 4;
var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150);
scene.add(moonLight2);
moonLight2.position.x += 20;
moonLight2.position.y -= 20;
moonLight2.position.z -= 25;
}
// Initialize simplex noise
var noise = new SimplexNoise();
function createTerrain() {
var geometry = new THREE.PlaneGeometry(150, 150, 120, 120);
var m = new THREE.Matrix4();
m.makeRotationX(Math.PI * -0.5);
geometry.applyMatrix4(m);
var positions = geometry.attributes.position;
for(var i = 0; i < positions.count; i++) {
var x = positions.getX(i);
var z = positions.getZ(i);
var ratio = noise.noise3D(x * 0.03, z * 0.03, 0);
positions.setY(i, ratio * 10);
}
positions.needsUpdate = true;
geometry.computeVertexNormals();
var material = new THREE.MeshPhongMaterial({
color: 0x198257,
emissive: 0x032f50
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
}
var stars = new THREE.Group();
scene.add(stars);
var starsLights = new THREE.Group();
scene.add(starsLights);
var starsAmount = 20;
function createStars() {
var geometry = new THREE.SphereGeometry(0.3, 16, 16);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
for(var i = 0; i < starsAmount; i++) {
var star = new THREE.Mesh(geometry, material);
star.position.x = (Math.random() - 0.5) * 150;
star.position.z = (Math.random() - 0.5) * 150;
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
star.position.y = ratio * 10 + 0.3;
stars.add(star);
var velX = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
var velY = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1);
star.vel = new THREE.Vector2(velX, velY);
var starLight = new THREE.PointLight(0xffffff, 0.8, 3);
starLight.position.copy(star.position);
starLight.position.y += 0.5;
starsLights.add(starLight);
}
}
function updateStar(star, index) {
if(star.position.x < -75) {
star.position.x = 75;
}
if(star.position.x > 75) {
star.position.x = -75;
}
if(star.position.z < -75) {
star.position.z = 75;
}
if(star.position.z > 75) {
star.position.z = -75;
}
star.position.x += star.vel.x;
star.position.z += star.vel.y;
var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0);
star.position.y = ratio * 10 + 0.3;
starsLights.children[index].position.copy(star.position);
starsLights.children[index].position.y += 0.5;
}
function render(a) {
requestAnimationFrame(render);
for(var i = 0; i < starsAmount; i++) {
updateStar(stars.children[i], i);
}
renderer.render(scene, camera);
}
function onResize() {
ww = window.innerWidth;
wh = window.innerHeight;
camera.aspect = ww / wh;
camera.updateProjectionMatrix();
renderer.setSize(ww, wh);
}
createMoon();
createTerrain();
createStars();
requestAnimationFrame(render);
window.addEventListener('resize', onResize);
})();

54
js/keyboard-nav.js Normal file
View File

@@ -0,0 +1,54 @@
// Keyboard navigation for service cards
(function initKeyboardNav(){
let selectedIndex = -1;
const searchInput = document.getElementById('search-input');
// Wait for services to load
const checkServicesLoaded = setInterval(() => {
if(window.servicesData){
clearInterval(checkServicesLoaded);
setupKeyboardNav();
}
}, 100);
function setupKeyboardNav(){
const { allServices } = window.servicesData;
const selectCard = (index) => {
const visibleCards = allServices.filter(card => card.style.display !== 'none');
if(visibleCards.length === 0) return;
// Remove previous selection
visibleCards.forEach(card => card.classList.remove('selected'));
// Update index
if(index < 0) index = visibleCards.length - 1;
if(index >= visibleCards.length) index = 0;
selectedIndex = index;
// Add selection
visibleCards[selectedIndex].classList.add('selected');
visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
};
document.addEventListener('keydown', (e) => {
if(document.activeElement === searchInput) return;
const visibleCards = allServices.filter(card => card.style.display !== 'none');
if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
e.preventDefault();
selectCard(selectedIndex + 1);
} else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
e.preventDefault();
selectCard(selectedIndex - 1);
} else if(e.key === 'Enter' && selectedIndex >= 0){
e.preventDefault();
visibleCards[selectedIndex].click();
} else if(e.key === 'Escape'){
visibleCards.forEach(card => card.classList.remove('selected'));
selectedIndex = -1;
}
});
}
})();

13
js/readme-loader.js Normal file
View File

@@ -0,0 +1,13 @@
// Fetch and render README.md
(async function loadReadme(){
try {
const response = await fetch('/README.md', {cache: 'no-cache'});
if(!response.ok) throw new Error('README not found');
const markdown = await response.text();
const html = marked.parse(markdown);
document.getElementById('readme-content').innerHTML = html;
} catch(err) {
console.error('Error loading README:', err);
document.getElementById('readme-content').innerHTML = '<p>Documentation unavailable.</p>';
}
})();

58
js/search.js Normal file
View File

@@ -0,0 +1,58 @@
// Search functionality
(function initSearch(){
const searchInput = document.getElementById('search-input');
// Wait for services to load
const checkServicesLoaded = setInterval(() => {
if(window.servicesData){
clearInterval(checkServicesLoaded);
setupSearch();
}
}, 100);
function setupSearch(){
const { allServices, container } = window.servicesData;
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase().trim();
let visibleCount = 0;
// Also hide/show group headers
const groupSections = container.querySelectorAll('.service-group');
allServices.forEach(card => {
const serviceName = card.dataset.serviceName;
if(serviceName.includes(searchTerm)){
card.style.display = '';
visibleCount++;
} else {
card.style.display = 'none';
}
});
// Hide empty groups
groupSections.forEach(section => {
const visibleCards = section.querySelectorAll('.card:not([style*="display: none"])');
section.style.display = visibleCards.length > 0 ? '' : 'none';
});
// Show message if no results
const existingMsg = container.querySelector('.no-results');
if(existingMsg) existingMsg.remove();
if(visibleCount === 0 && searchTerm !== ''){
const msg = document.createElement('p');
msg.className = 'notes no-results';
msg.textContent = `No services found matching "${e.target.value}"`;
container.appendChild(msg);
}
});
// Focus search on '/' key
document.addEventListener('keydown', (e) => {
if(e.key === '/' && document.activeElement !== searchInput){
e.preventDefault();
searchInput.focus();
}
});
}
})();

202
js/services-loader.js Normal file
View File

@@ -0,0 +1,202 @@
// Fetch services.xml and render the service cards with logos.
(async function(){
const container = document.getElementById('services-container');
const searchInput = document.getElementById('search-input');
const host = window.location.hostname;
let allServices = []; // Store all service elements for filtering
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');
// Check for XML parsing errors
const parseError = doc.querySelector('parsererror');
if(parseError){
throw new Error('XML parsing error: ' + parseError.textContent);
}
// Check if we have groups or just services
const groups = Array.from(doc.getElementsByTagName('group'));
const hasGroups = groups.length > 0;
console.log('Found', groups.length, 'groups');
if(hasGroups){
// Render grouped services
groups.forEach(group => {
const groupName = group.getAttribute('name') || 'Services';
const services = Array.from(group.getElementsByTagName('service'));
console.log('Group:', groupName, 'has', services.length, 'services');
if(services.length === 0) return;
// Create group section
const groupSection = document.createElement('section');
groupSection.className = 'service-group';
const groupHeader = document.createElement('h2');
groupHeader.className = 'group-header';
groupHeader.textContent = groupName;
groupSection.appendChild(groupHeader);
const grid = document.createElement('div');
grid.className = 'grid';
services.forEach(s => {
const card = createServiceCard(s, host, allServices);
grid.appendChild(card);
});
groupSection.appendChild(grid);
container.appendChild(groupSection);
});
} else {
// Fallback: render ungrouped services
const services = Array.from(doc.getElementsByTagName('service'));
if(services.length === 0){
container.innerHTML = '<p class="notes">No services found in services.xml</p>';
return;
}
const grid = document.createElement('div');
grid.className = 'grid';
grid.id = 'services-grid';
services.forEach(s => {
const card = createServiceCard(s, host, allServices);
grid.appendChild(card);
});
container.appendChild(grid);
}
// Function to create a service card
function createServiceCard(s, host, allServices) {
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
const manualStatus = s.getAttribute('status'); // optional: 'online', 'offline', 'maintenance'
const checkHealth = s.getAttribute('check-health') !== 'false'; // default true, set to false to disable
// Build href: prefer explicit host attribute when present.
let href = '';
if(hostAttr){
if(/^https?:\/\//i.test(hostAttr)){
href = hostAttr;
} else {
const hasPortInHost = /:\d+$/.test(hostAttr);
if(hasPortInHost){
href = `${proto}://${hostAttr}`;
} else {
href = `https://${hostAttr}`;
}
}
} else {
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';
a.dataset.serviceName = name.toLowerCase(); // For search filtering
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);
// Add status indicator - will be updated by health check
const statusDot = document.createElement('span');
statusDot.className = 'status-dot status-checking';
statusDot.title = 'Checking status...';
let currentStatus = 'checking';
// If maintenance mode is set manually, use that and skip health check
if(manualStatus === 'maintenance'){
statusDot.className = 'status-dot status-maintenance';
statusDot.title = 'Status: maintenance';
currentStatus = 'maintenance';
a.appendChild(statusDot);
} else if(checkHealth && href){
// Show checking indicator initially
a.appendChild(statusDot);
// Perform health check
(async function performHealthCheck(){
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
const response = await fetch(href, {
method: 'HEAD',
mode: 'no-cors', // Allow cross-origin requests
cache: 'no-cache',
signal: controller.signal
});
clearTimeout(timeoutId);
// In no-cors mode, opaque responses mean the server responded
currentStatus = 'online';
statusDot.className = 'status-dot status-online';
statusDot.title = 'Status: online';
} catch(err) {
// Connection failed or timed out
currentStatus = 'offline';
statusDot.className = 'status-dot status-offline';
statusDot.title = 'Status: offline';
}
})();
} else if(manualStatus){
// Use manual status if health check is disabled
statusDot.className = `status-dot status-${manualStatus}`;
statusDot.title = `Status: ${manualStatus}`;
currentStatus = manualStatus;
a.appendChild(statusDot);
}
// Add info button if both hostname and port are available
if((hostAttr || host) && port){
const infoBtn = document.createElement('button');
infoBtn.className = 'info-btn';
infoBtn.title = 'Connection details';
infoBtn.innerHTML = 'ⓘ';
infoBtn.onclick = (e) => {
e.preventDefault();
e.stopPropagation();
const displayHost = hostAttr || host;
const details = `Service: ${name}\nHost: ${displayHost}\nPort: ${port}\nProtocol: ${proto}`;
alert(details);
};
a.appendChild(infoBtn);
}
allServices.push(a);
return a;
}
// Export allServices for use by search and keyboard navigation
window.servicesData = { allServices, container };
}catch(err){
console.error(err);
container.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';
}
})();