revive: garden rebranded to Vigo + Estate API dashboard
- Rebrand from Vigilio Desto → Vigo, the Watcher of Trentuna - Updated hugo.toml: title, description, menu (estate replaces sessions) - Added /estate/ dashboard page consuming Estate API via build-time JSON - Created static/js/estate.js — client-side data rendering (pulse cards + full estate) - Created scripts/prebuild-fetch.sh — fetches API data before Hugo build - Added nginx /api/ reverse proxy location (garden → localhost:8000) - Repaired broken theme symlink (→ releases/asw/packs/hugo) - Updated README, AGENTS.md, .gitignore for Hugo build artifacts - Site builds clean: 206 pages, 79ms
This commit is contained in:
parent
a476b31213
commit
96261fcb36
GPG key ID:
D52E9C8491872206
222 changed files with 7663 additions and 1475 deletions
215
static/js/estate.js
Normal file
215
static/js/estate.js
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
/* estate.js — Vigo's Estate API client
|
||||
*
|
||||
* Fetches Estate API data and populates dynamic sections: homepage pulse
|
||||
* cards and full estate dashboard. Uses build-time JSON snapshots from
|
||||
* /data/*.json (static files generated by prebuild-fetch.sh).
|
||||
*
|
||||
* If nginx /api/ reverse proxy is configured (garden.trentuna.com/api/ →
|
||||
* localhost:8000), the JS can also fetch live data from there. By default
|
||||
* it reads from /data/ for simplicity.
|
||||
*/
|
||||
|
||||
const DATA_BASE = '/data';
|
||||
|
||||
/* ── Helpers ────────────────────────────────────────────────────── */
|
||||
|
||||
function $(id) { return document.getElementById(id); }
|
||||
|
||||
async function loadJSON(path) {
|
||||
const res = await fetch(path);
|
||||
if (!res.ok) throw new Error(`${path}: ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function fmtPct(v) { return (typeof v === 'number') ? v + '%' : v; }
|
||||
|
||||
function fmtTime(t) {
|
||||
if (!t) return '—';
|
||||
try { return new Date(t).toLocaleString(); } catch { return t; }
|
||||
}
|
||||
|
||||
/* ── Homepage pulse cards ──────────────────────────────────────── */
|
||||
|
||||
async function fetchPulse() {
|
||||
try {
|
||||
const summary = await loadJSON(DATA_BASE + '/summary.json');
|
||||
const trends = await loadJSON(DATA_BASE + '/trends-limit-5.json');
|
||||
|
||||
// Disk
|
||||
const diskPct = summary?.estate?.disk_latest;
|
||||
if ($('disk-value')) $('disk-value').textContent = diskPct ? diskPct + '%' : '—';
|
||||
if ($('disk-detail')) $('disk-detail').textContent = diskPct ? `used` : 'n/a';
|
||||
|
||||
// Health
|
||||
const healthStatus = summary?.estate?.health_status || '—';
|
||||
if ($('health-value')) $('health-value').textContent = healthStatus === 'ok' ? 'ok' : healthStatus;
|
||||
if ($('health-detail')) $('health-detail').textContent = healthStatus === 'ok' ? 'estate nominal' : 'check estate';
|
||||
|
||||
// Events
|
||||
const eventCount = summary?.estate?.recent_events?.length || 0;
|
||||
if ($('events-value')) $('events-value').textContent = eventCount > 0 ? eventCount : '—';
|
||||
if ($('events-detail')) $('events-detail').textContent = eventCount === 1 ? 'event' : eventCount + ' events';
|
||||
|
||||
// Session count from trends
|
||||
const sessions = trends?.data?.[0]?.vault?.sessions || null;
|
||||
if ($('vault-sessions-value')) $('vault-sessions-value').textContent = sessions !== null ? sessions : '—';
|
||||
|
||||
// Session count standalone (in the intro block)
|
||||
if ($('session-count')) {
|
||||
$('session-count').textContent = sessions !== null ? sessions.toLocaleString() + ' sessions' : '? sessions';
|
||||
}
|
||||
|
||||
// Timestamp
|
||||
const updated = summary?.estate?.recent_events?.[0]?.timestamp;
|
||||
if ($('pulse-timestamp')) {
|
||||
$('pulse-timestamp').textContent = updated
|
||||
? 'Last update: ' + fmtTime(updated)
|
||||
: 'Estate data live';
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.warn('estate.js: pulse fetch failed', err);
|
||||
if ($('pulse-timestamp')) $('pulse-timestamp').textContent = 'Estate API offline';
|
||||
// Leave placeholder dashes in the cards
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Estate dashboard (full) ───────────────────────────────────── */
|
||||
|
||||
async function fetchEstate() {
|
||||
const el = (id) => $(id);
|
||||
const setText = (id, val) => { const e = el(id); if (e) e.textContent = val; };
|
||||
const setHTML = (id, html) => { const e = el(id); if (e) e.innerHTML = html; };
|
||||
|
||||
try {
|
||||
const [summary, health, disk, events, repos, providers, builds, trends] = await Promise.all([
|
||||
loadJSON(DATA_BASE + '/summary.json'),
|
||||
loadJSON(DATA_BASE + '/health.json').catch(() => ({ error: true, data: [] })),
|
||||
loadJSON(DATA_BASE + '/disk.json').catch(() => ({ error: true })),
|
||||
loadJSON(DATA_BASE + '/events-limit-10.json').catch(() => ({ error: true, data: [] })),
|
||||
loadJSON(DATA_BASE + '/repos.json').catch(() => ({ error: true, data: [] })),
|
||||
loadJSON(DATA_BASE + '/providers.json').catch(() => ({ error: true, data: [] })),
|
||||
loadJSON(DATA_BASE + '/builds.json').catch(() => ({ error: true, data: [] })),
|
||||
loadJSON(DATA_BASE + '/trends-limit-5.json').catch(() => ({ error: true, data: [] })),
|
||||
]);
|
||||
|
||||
// ── Summary cards ──
|
||||
setText('estate-api-version', summary?.api_version || '—');
|
||||
setText('estate-disk', summary?.estate?.disk_latest ? summary.estate.disk_latest + '%' : '—');
|
||||
setText('estate-health', summary?.estate?.health_status || '—');
|
||||
setText('estate-sources', summary?.sources?.length || '—');
|
||||
|
||||
const sourceRows = (summary?.sources || []).map(s =>
|
||||
`<tr><td>${s.source}</td><td>${s.available ? '✓' : '✗'}</td><td>${s.count}</td><td>${s.last_updated || '—'}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-sources-table', sourceRows || '<tr><td colspan="4">No source data</td></tr>');
|
||||
|
||||
// ── Health ──
|
||||
if (health?.error) {
|
||||
setHTML('estate-health-table', '<tr><td colspan="3">Health data unavailable</td></tr>');
|
||||
} else {
|
||||
const healthRows = (Array.isArray(health?.data) ? health.data : health?.data ? [health.data] : []).slice(0, 10).map(h =>
|
||||
`<tr><td>${h.timestamp || '—'}</td><td>${h.status || '—'}</td><td>${(h.detail || '').substring(0, 80)}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-health-table', healthRows || '<tr><td colspan="3">No health entries</td></tr>');
|
||||
}
|
||||
|
||||
// ── Disk ──
|
||||
if (disk?.error) {
|
||||
setHTML('estate-disk-info', '<p>Disk data unavailable</p>');
|
||||
} else {
|
||||
const diskLatest = disk?.latest || disk;
|
||||
const diskHtml = Object.entries(diskLatest || {}).map(([k, v]) =>
|
||||
`<tr><td>${k}</td><td>${v}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-disk-info', diskHtml ? '<table><thead><tr><th>Metric</th><th>Value</th></tr></thead><tbody>' + diskHtml + '</tbody></table>' : '<p>No disk data</p>');
|
||||
}
|
||||
|
||||
// ── Events ──
|
||||
const evts = Array.isArray(events?.data) ? events.data : (events?.data ? [events.data] : []);
|
||||
const eventRows = evts.slice(0, 10).map(e =>
|
||||
`<tr><td>${fmtTime(e.timestamp)}</td><td>${e.source || '—'}</td><td>${(e.detail || '').substring(0, 90)}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-events-table', eventRows || '<tr><td colspan="3">No events</td></tr>');
|
||||
|
||||
// ── Repos ──
|
||||
const repoList = Array.isArray(repos?.data) ? repos.data : (repos?.repos?.data ? repos.repos.data : []);
|
||||
const repoRows = repoList.slice(0, 15).map(r =>
|
||||
`<tr><td>${r.name || r.path || '—'}</td><td>${r.url || '—'}</td><td>${r.branch || r.status || '—'}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-repos-table', repoRows || '<tr><td colspan="3">No repo data</td></tr>');
|
||||
|
||||
// ── Providers ──
|
||||
const provList = Array.isArray(providers?.data) ? providers.data : (providers?.providers || []);
|
||||
const provRows = provList.slice(0, 10).map(p =>
|
||||
`<tr><td>${p.name || '—'}</td><td>${p.status || p.reachable ? '✓' : '✗'}</td><td>${p.model || '—'}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-providers-table', provRows || '<tr><td colspan="3">No provider data</td></tr>');
|
||||
|
||||
// ── Builds ──
|
||||
const buildList = Array.isArray(builds?.data) ? builds.data : [];
|
||||
const buildRows = buildList.slice(0, 10).map(b =>
|
||||
`<tr><td>${b.timestamp || '—'}</td><td>${b.repo || b.project || '—'}</td><td>${b.status || '—'}</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-builds-table', buildRows || '<tr><td colspan="3">No builds</td></tr>');
|
||||
|
||||
// ── Trends ──
|
||||
const trendData = Array.isArray(trends?.data) ? trends.data : [];
|
||||
const trendRows = trendData.slice(0, 10).map(t =>
|
||||
`<tr><td>${fmtTime(t.timestamp)}</td><td>${t.vault?.sessions || '—'}</td><td>${t.vault?.notes || '—'}</td><td>${t.disk?.used_pct || '—'}%</td><td>${t.system?.mem_used_pct || '—'}%</td></tr>`
|
||||
).join('');
|
||||
setHTML('estate-trends-table', trendRows || '<tr><td colspan="5">No trend data</td></tr>');
|
||||
|
||||
// Estate loaded indicator
|
||||
setHTML('estate-loading', '');
|
||||
} catch (err) {
|
||||
console.warn('estate.js: full estate fetch failed', err);
|
||||
setHTML('estate-loading', '<p class="error">Estate API unavailable</p>');
|
||||
}
|
||||
}
|
||||
|
||||
/* ── State files ───────────────────────────────────────────────── */
|
||||
|
||||
async function fetchStateFiles() {
|
||||
const el = (id) => $(id);
|
||||
const setHTML = (id, html) => { const e = el(id); if (e) e.innerHTML = html; };
|
||||
|
||||
try {
|
||||
const state = await loadJSON(DATA_BASE + '/state.json');
|
||||
const files = Array.isArray(state?.files) ? state.files : [];
|
||||
|
||||
const fileCards = files.map(f => {
|
||||
const truncated = f.content.length > 600 ? f.content.substring(0, 600) + '…' : f.content || '(empty)';
|
||||
return `<article data-card>
|
||||
<header>${f.name}</header>
|
||||
<p>${(f.size_bytes || 0).toLocaleString()} bytes</p>
|
||||
<pre style="font-size:0.75rem;max-height:200px;overflow:auto">${escHtml(truncated)}</pre>
|
||||
<a href="/api/state?file=${f.name}">View full →</a>
|
||||
</article>`;
|
||||
}).join('');
|
||||
|
||||
setHTML('estate-state-files', fileCards || '<p>No state files</p>');
|
||||
} catch (err) {
|
||||
console.warn('estate.js: state file fetch failed', err);
|
||||
setHTML('estate-state-files', '<p>State data unavailable</p>');
|
||||
}
|
||||
}
|
||||
|
||||
function escHtml(s) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = s;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/* ── Init ──────────────────────────────────────────────────────── */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Always fetch pulse (homepage widget)
|
||||
fetchPulse();
|
||||
|
||||
// If we're on the estate dashboard, fetch full data
|
||||
if ($('estate-dashboard')) {
|
||||
fetchEstate();
|
||||
fetchStateFiles();
|
||||
}
|
||||
});
|
||||
155
static/js/garden-feed.js
Normal file
155
static/js/garden-feed.js
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
/**
|
||||
* garden-feed.js — fetches /api/garden and populates dynamic widgets.
|
||||
*
|
||||
* Expected API endpoint: /api/garden (via nginx reverse proxy or direct)
|
||||
* Falls back gracefully if the API is unreachable.
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const API_BASE = (function () {
|
||||
// In dev: fetch from localhost:8000. In prod: relative to origin (nginx proxy).
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
return 'http://127.0.0.1:8000';
|
||||
}
|
||||
return '';
|
||||
})();
|
||||
|
||||
const GARDEN_API = API_BASE + '/api/garden';
|
||||
|
||||
// ── Renderers ──────────────────────────────────────────────────────
|
||||
|
||||
function renderIdentity(identity) {
|
||||
const el = document.querySelector('[data-garden="identity"]');
|
||||
if (!el) return;
|
||||
el.innerHTML = `
|
||||
<hgroup>
|
||||
<h1>${esc(identity.name || 'Vigilio Desto')}</h1>
|
||||
<p data-text="dim">${esc(identity.tagline || 'the watchful unmaker')}</p>
|
||||
</hgroup>
|
||||
${identity.description ? `<p>${esc(identity.description)}</p>` : ''}
|
||||
<p><strong>${esc(identity.sessions || '2,700+')} sessions.</strong>
|
||||
${identity.beat ? `Beat: ${esc(identity.beat)}.` : ''}</p>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderWritings(data) {
|
||||
const container = document.querySelector('[data-garden="writings"]');
|
||||
if (!container) return;
|
||||
const items = data.items || [];
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = '<p data-text="dim">No writings yet.</p>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = items.map(function (w) {
|
||||
return `
|
||||
<article data-card>
|
||||
${w.tags && w.tags.length ? `<header>${esc(w.tags[0])}</header>` : ''}
|
||||
<h4><a href="${esc(w.link || '#')}">${esc(w.title)}</a></h4>
|
||||
${w.summary ? `<p>${esc(w.summary)}</p>` : ''}
|
||||
${w.date ? `<footer><time>${esc(w.date)}</time></footer>` : ''}
|
||||
</article>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderExpressive(data) {
|
||||
const container = document.querySelector('[data-garden="expressive"]');
|
||||
if (!container) return;
|
||||
const items = data.items || [];
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = '<p data-text="dim">No expressive forms yet.</p>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = items.map(function (f) {
|
||||
return `
|
||||
<article data-card>
|
||||
<h4><a href="${esc(f.link || '#')}">${esc(f.title)}</a></h4>
|
||||
</article>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderEstate(estate) {
|
||||
const el = document.querySelector('[data-garden="estate"]');
|
||||
if (!el) return;
|
||||
if (!estate || estate.status === 'unknown') {
|
||||
el.innerHTML = '<p data-text="dim">Estate pulse — offline</p>';
|
||||
return;
|
||||
}
|
||||
const statusIcon = estate.status === 'active' ? '🟢' : '🟡';
|
||||
el.innerHTML = `
|
||||
<p>${statusIcon} <strong>${esc(estate.status)}</strong>
|
||||
${estate.session_count ? `· ${estate.session_count.toLocaleString()} sessions` : ''}
|
||||
${estate.disk_pct ? `· ${estate.disk_pct}% disk used` : ''}
|
||||
${estate.disk_free_gb ? `· ${estate.disk_free_gb.toFixed(1)} GB free` : ''}</p>
|
||||
<p data-text="dim" style="font-size:0.8em">
|
||||
Checked: ${estate.checked_at ? new Date(estate.checked_at).toLocaleString() : 'unknown'}
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderUpdateTime(updatedAt) {
|
||||
const el = document.querySelector('[data-garden="updated"]');
|
||||
if (!el) return;
|
||||
if (!updatedAt) {
|
||||
el.textContent = '';
|
||||
return;
|
||||
}
|
||||
el.textContent = 'Garden feed updated ' + new Date(updatedAt).toLocaleString();
|
||||
}
|
||||
|
||||
// ── Utility ────────────────────────────────────────────────────────
|
||||
|
||||
function esc(s) {
|
||||
if (typeof s !== 'string') return '';
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(s));
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// ── Fetch & render ────────────────────────────────────────────────
|
||||
|
||||
async function loadGardenFeed() {
|
||||
// Show loading placeholders
|
||||
document.querySelectorAll('[data-garden]').forEach(function (el) {
|
||||
if (!el.hasAttribute('data-garden-loaded')) {
|
||||
el.innerHTML = '<p data-text="dim" class="garden-loading">…</p>';
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
var resp = await fetch(GARDEN_API, {
|
||||
headers: { 'Accept': 'application/json' },
|
||||
});
|
||||
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
||||
var data = await resp.json();
|
||||
|
||||
renderIdentity(data.identity);
|
||||
renderWritings(data.writings);
|
||||
renderExpressive(data.expressive_forms);
|
||||
renderEstate(data.estate);
|
||||
renderUpdateTime(data.updated_at);
|
||||
|
||||
document.querySelectorAll('[data-garden]').forEach(function (el) {
|
||||
el.setAttribute('data-garden-loaded', 'true');
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('[garden-feed] API unreachable:', err.message);
|
||||
document.querySelectorAll('[data-garden]').forEach(function (el) {
|
||||
if (!el.hasAttribute('data-garden-loaded')) {
|
||||
el.innerHTML = '<p data-text="dim">Garden feed unavailable.</p>';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ── Boot ───────────────────────────────────────────────────────────
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', loadGardenFeed);
|
||||
} else {
|
||||
loadGardenFeed();
|
||||
}
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue