mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-08-28 00:45:07 +00:00
feat: config-driven customization system (Phase 1)
Add GET /api/config/theme endpoint serving branding, theme colors, node colors, and home page content from config.json with sensible defaults so unconfigured instances look identical to before. Client-side (app.js): - Fetch theme config on page load, before first render - Override CSS variables from theme.* on document root - Override ROLE_COLORS/ROLE_STYLE from nodeColors.* - Replace nav brand text, logo, favicon from branding.* - Store config in window.SITE_CONFIG for other pages Home page (home.js): - Hero title/subtitle from config.home - Steps and checklist from config.home - Footer links from config.home.footerLinks - Chooser welcome text uses configured siteName Config example updated with all available theme options. No default appearance changes — all overrides are optional.
This commit is contained in:
you
@@ -5,6 +5,48 @@
|
||||
"cert": "/path/to/cert.pem",
|
||||
"key": "/path/to/key.pem"
|
||||
},
|
||||
"branding": {
|
||||
"siteName": "MeshCore Analyzer",
|
||||
"tagline": "Real-time MeshCore LoRa mesh network analyzer",
|
||||
"logoUrl": null,
|
||||
"faviconUrl": null
|
||||
},
|
||||
"theme": {
|
||||
"accent": "#4a9eff",
|
||||
"accentHover": "#6db3ff",
|
||||
"navBg": "#0f0f23",
|
||||
"navBg2": "#1a1a2e",
|
||||
"statusGreen": "#45644c",
|
||||
"statusYellow": "#b08b2d",
|
||||
"statusRed": "#b54a4a"
|
||||
},
|
||||
"nodeColors": {
|
||||
"repeater": "#dc2626",
|
||||
"companion": "#2563eb",
|
||||
"room": "#16a34a",
|
||||
"sensor": "#d97706",
|
||||
"observer": "#8b5cf6"
|
||||
},
|
||||
"home": {
|
||||
"heroTitle": "MeshCore Analyzer",
|
||||
"heroSubtitle": "Find your nodes to start monitoring them.",
|
||||
"steps": [
|
||||
{ "emoji": "📡", "title": "Connect", "description": "Link your node to the mesh" },
|
||||
{ "emoji": "🔍", "title": "Monitor", "description": "Watch packets flow in real-time" },
|
||||
{ "emoji": "📊", "title": "Analyze", "description": "Understand your network's health" }
|
||||
],
|
||||
"checklist": [
|
||||
{ "question": "How do I add my node?", "answer": "Search for your node name or paste your public key." },
|
||||
{ "question": "What regions are covered?", "answer": "Check the map page to see active observers and nodes." }
|
||||
],
|
||||
"footerLinks": [
|
||||
{ "label": "📦 Packets", "url": "#/packets" },
|
||||
{ "label": "🗺️ Network Map", "url": "#/map" },
|
||||
{ "label": "🔴 Live", "url": "#/live" },
|
||||
{ "label": "📡 All Nodes", "url": "#/nodes" },
|
||||
{ "label": "💬 Channels", "url": "#/channels" }
|
||||
]
|
||||
},
|
||||
"mqtt": {
|
||||
"broker": "mqtt://localhost:1883",
|
||||
"topic": "meshcore/+/+/packets"
|
||||
|
||||
@@ -497,6 +497,67 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
setInterval(updateNavStats, 15000);
|
||||
debouncedOnWS(function () { updateNavStats(); });
|
||||
|
||||
// --- Theme Customization ---
|
||||
// Fetch theme config and apply branding/colors before first render
|
||||
fetch('/api/config/theme').then(r => r.json()).then(cfg => {
|
||||
window.SITE_CONFIG = cfg;
|
||||
|
||||
// Apply CSS variable overrides from theme.*
|
||||
if (cfg.theme) {
|
||||
const root = document.documentElement.style;
|
||||
const varMap = {
|
||||
accent: '--accent', accentHover: '--accent-hover',
|
||||
navBg: '--nav-bg', navBg2: '--nav-bg2',
|
||||
statusGreen: '--status-green', statusYellow: '--status-yellow', statusRed: '--status-red',
|
||||
text: '--text', textMuted: '--text-muted', border: '--border',
|
||||
surface0: '--surface-0', surface1: '--surface-1', surface2: '--surface-2', surface3: '--surface-3',
|
||||
cardBg: '--card-bg', contentBg: '--content-bg', inputBg: '--input-bg',
|
||||
rowStripe: '--row-stripe', rowHover: '--row-hover', detailBg: '--detail-bg',
|
||||
selectedBg: '--selected-bg'
|
||||
};
|
||||
for (const [key, cssVar] of Object.entries(varMap)) {
|
||||
if (cfg.theme[key]) root.setProperty(cssVar, cfg.theme[key]);
|
||||
}
|
||||
// Also update nav gradient if navBg is customized
|
||||
if (cfg.theme.navBg) {
|
||||
const nav = document.querySelector('.top-nav');
|
||||
if (nav) nav.style.background = `linear-gradient(135deg, ${cfg.theme.navBg} 0%, ${cfg.theme.navBg2 || cfg.theme.navBg} 50%, ${cfg.theme.navBg} 100%)`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply node color overrides to ROLE_COLORS and ROLE_STYLE
|
||||
if (cfg.nodeColors) {
|
||||
for (const [role, color] of Object.entries(cfg.nodeColors)) {
|
||||
if (window.ROLE_COLORS && role in window.ROLE_COLORS) window.ROLE_COLORS[role] = color;
|
||||
if (window.ROLE_STYLE && window.ROLE_STYLE[role]) window.ROLE_STYLE[role].color = color;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply branding
|
||||
if (cfg.branding) {
|
||||
if (cfg.branding.siteName) {
|
||||
document.title = cfg.branding.siteName;
|
||||
const brandText = document.querySelector('.brand-text');
|
||||
if (brandText) brandText.textContent = cfg.branding.siteName;
|
||||
}
|
||||
if (cfg.branding.logoUrl) {
|
||||
const brandIcon = document.querySelector('.brand-icon');
|
||||
if (brandIcon) {
|
||||
const img = document.createElement('img');
|
||||
img.src = cfg.branding.logoUrl;
|
||||
img.alt = cfg.branding.siteName || 'Logo';
|
||||
img.style.height = '24px';
|
||||
img.style.width = 'auto';
|
||||
brandIcon.replaceWith(img);
|
||||
}
|
||||
}
|
||||
if (cfg.branding.faviconUrl) {
|
||||
const favicon = document.querySelector('link[rel="icon"]');
|
||||
if (favicon) favicon.href = cfg.branding.faviconUrl;
|
||||
}
|
||||
}
|
||||
}).catch(() => { window.SITE_CONFIG = null; });
|
||||
|
||||
if (!location.hash || location.hash === '#/') location.hash = '#/home';
|
||||
else navigate();
|
||||
});
|
||||
|
||||
+16
-7
@@ -39,7 +39,7 @@
|
||||
function showChooser(container) {
|
||||
container.innerHTML = `
|
||||
<section class="home-chooser">
|
||||
<h1>Welcome to Bay Area MeshCore Analyzer</h1>
|
||||
<h1>Welcome to ${escapeHtml(window.SITE_CONFIG?.branding?.siteName || 'MeshCore Analyzer')}</h1>
|
||||
<p>How familiar are you with MeshCore?</p>
|
||||
<div class="chooser-options">
|
||||
<button class="chooser-btn new" id="chooseNew">
|
||||
@@ -62,11 +62,13 @@
|
||||
const exp = isExperienced();
|
||||
const myNodes = getMyNodes();
|
||||
const hasNodes = myNodes.length > 0;
|
||||
const homeCfg = window.SITE_CONFIG?.home || null;
|
||||
const siteName = window.SITE_CONFIG?.branding?.siteName || 'MeshCore Analyzer';
|
||||
|
||||
container.innerHTML = `
|
||||
<section class="home-hero">
|
||||
<h1>${hasNodes ? 'My Mesh' : 'MeshCore Analyzer'}</h1>
|
||||
<p>${hasNodes ? 'Your nodes at a glance. Add more by searching below.' : 'Find your nodes to start monitoring them.'}</p>
|
||||
<h1>${hasNodes ? 'My Mesh' : escapeHtml(homeCfg?.heroTitle || siteName)}</h1>
|
||||
<p>${hasNodes ? 'Your nodes at a glance. Add more by searching below.' : escapeHtml(homeCfg?.heroSubtitle || 'Find your nodes to start monitoring them.')}</p>
|
||||
<div class="home-search-wrap">
|
||||
<input type="text" id="homeSearch" placeholder="Search by node name or public key…" autocomplete="off" aria-label="Search nodes" role="combobox" aria-expanded="false" aria-owns="homeSuggest" aria-autocomplete="list" aria-activedescendant="">
|
||||
<div class="home-suggest" id="homeSuggest" role="listbox"></div>
|
||||
@@ -92,17 +94,18 @@
|
||||
|
||||
${exp ? '' : `
|
||||
<section class="home-checklist">
|
||||
<h2>🚀 Getting on the mesh — SF Bay Area</h2>
|
||||
${checklist()}
|
||||
<h2>🚀 Getting on the mesh${homeCfg?.steps ? '' : ' — SF Bay Area'}</h2>
|
||||
${checklist(homeCfg)}
|
||||
</section>`}
|
||||
|
||||
<section class="home-footer">
|
||||
<div class="home-footer-links">
|
||||
${homeCfg?.footerLinks ? homeCfg.footerLinks.map(l => `<a href="${escapeAttr(l.url)}" class="home-footer-link" target="_blank" rel="noopener">${escapeHtml(l.label)}</a>`).join('') : `
|
||||
<a href="#/packets" class="home-footer-link">📦 Packets</a>
|
||||
<a href="#/map" class="home-footer-link">🗺️ Network Map</a>
|
||||
<a href="#/live" class="home-footer-link">🔴 Live</a>
|
||||
<a href="#/nodes" class="home-footer-link">📡 All Nodes</a>
|
||||
<a href="#/channels" class="home-footer-link">💬 Channels</a>
|
||||
<a href="#/channels" class="home-footer-link">💬 Channels</a>`}
|
||||
</div>
|
||||
<div class="home-level-toggle">
|
||||
<small>${exp ? 'Want setup guides? ' : 'Already know MeshCore? '}
|
||||
@@ -507,7 +510,13 @@
|
||||
function escapeAttr(s) { return String(s).replace(/"/g,'"').replace(/'/g,'''); }
|
||||
function timeSinceMs(d) { return Date.now() - d.getTime(); }
|
||||
|
||||
function checklist() {
|
||||
function checklist(homeCfg) {
|
||||
if (homeCfg?.checklist) {
|
||||
return homeCfg.checklist.map(i => `<div class="checklist-item"><div class="checklist-q" role="button" tabindex="0" aria-expanded="false">${escapeHtml(i.question)}</div><div class="checklist-a"><p>${escapeHtml(i.answer)}</p></div></div>`).join('');
|
||||
}
|
||||
if (homeCfg?.steps) {
|
||||
return homeCfg.steps.map(s => `<div class="checklist-item"><div class="checklist-q" role="button" tabindex="0" aria-expanded="false">${escapeHtml(s.emoji || '')} ${escapeHtml(s.title)}</div><div class="checklist-a"><p>${escapeHtml(s.description)}</p></div></div>`).join('');
|
||||
}
|
||||
const items = [
|
||||
{ q: '💬 First: Join the Bay Area MeshCore Discord',
|
||||
a: '<p>The community Discord is the best place to get help and find local mesh enthusiasts.</p><p><a href="https://discord.gg/q59JzsYTst" target="_blank" rel="noopener" style="color:var(--accent);font-weight:600">Join the Discord ↗</a></p><p>Start with <strong>#intro-to-meshcore</strong> — it has detailed setup instructions.</p>' },
|
||||
|
||||
+2
-2
@@ -84,8 +84,8 @@
|
||||
<script src="region-filter.js?v=1774325000"></script>
|
||||
<script src="hop-resolver.js?v=1774223973"></script>
|
||||
<script src="hop-display.js?v=1774221932"></script>
|
||||
<script src="app.js?v=1774126708"></script>
|
||||
<script src="home.js?v=1774042199"></script>
|
||||
<script src="app.js?v=1774350000"></script>
|
||||
<script src="home.js?v=1774350000"></script>
|
||||
<script src="packets.js?v=1774225004"></script>
|
||||
<script src="map.js?v=1774220756" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
|
||||
@@ -383,6 +383,32 @@ function getObserverIdsForRegions(regionParam) {
|
||||
return ids;
|
||||
}
|
||||
|
||||
app.get('/api/config/theme', (req, res) => {
|
||||
res.json({
|
||||
branding: {
|
||||
siteName: 'MeshCore Analyzer',
|
||||
tagline: 'Real-time MeshCore LoRa mesh network analyzer',
|
||||
...(config.branding || {})
|
||||
},
|
||||
theme: {
|
||||
accent: '#4a9eff',
|
||||
accentHover: '#6db3ff',
|
||||
navBg: '#0f0f23',
|
||||
navBg2: '#1a1a2e',
|
||||
...(config.theme || {})
|
||||
},
|
||||
nodeColors: {
|
||||
repeater: '#dc2626',
|
||||
companion: '#2563eb',
|
||||
room: '#16a34a',
|
||||
sensor: '#d97706',
|
||||
observer: '#8b5cf6',
|
||||
...(config.nodeColors || {})
|
||||
},
|
||||
home: config.home || null,
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/api/config/map', (req, res) => {
|
||||
const defaults = config.mapDefaults || {};
|
||||
res.json({
|
||||
|
||||
Reference in New Issue
Block a user