khalidadil/dynamic-sites-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a banner to indicate updates in progress

Browse Source
This commit is contained in:
khalid@traclabs.com
2026-04-23 08:34:47 -05:00
parent 4e014fa648
commit 46247b7733
3 changed files with 86 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/layouts/BaseLayout.astro
View File

@@ -102,9 +102,45 @@ const wsUrl = (process.env.PUBLIC_LIVE_RELOAD_WS_URL ?? import.meta.env.PUBLIC_L
font-size: 0.85rem;
color: var(--color-text-muted);
}
.update-banner {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
height: 32px;
display: none;
align-items: center;
gap: 0.5rem;
padding: 0 1rem;
background: color-mix(in srgb, var(--color-primary), white 92%);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
font-size: 0.85rem;
}
.update-banner[data-visible='true'] {
display: flex;
}
.update-banner__spinner {
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--color-primary), white 70%);
border-top-color: var(--color-primary);
animation: updateBannerSpin 0.9s linear infinite;
flex: 0 0 auto;
}
@keyframes updateBannerSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="update-banner" class="update-banner" data-visible="false" role="status" aria-live="polite">
<span class="update-banner__spinner" aria-hidden="true"></span>
<span id="update-banner-text">Updating…</span>
</div>
<header class="site-header">
<div class="container">
<a href="/" class="site-logo"><slot name="logo">Dynamic Site</slot></a>
@@ -132,12 +168,32 @@ const wsUrl = (process.env.PUBLIC_LIVE_RELOAD_WS_URL ?? import.meta.env.PUBLIC_L
const url = configuredUrl || `${proto}//${host}:${defaultPort}${path.startsWith('/') ? '' : '/'}${path}`;
const bannerEl = document.getElementById('update-banner');
const bannerTextEl = document.getElementById('update-banner-text');
function setBanner(visible, text) {
if (!bannerEl || !bannerTextEl) return;
bannerEl.dataset.visible = visible ? 'true' : 'false';
if (typeof text === 'string' && text.length > 0) bannerTextEl.textContent = text;
}
function connect() {
const ws = new WebSocket(url);
ws.onmessage = (ev) => {
try {
const msg = JSON.parse(String(ev.data || ''));
if (msg && msg.type === 'reload') window.location.reload();
if (!msg || typeof msg !== 'object') return;
if (msg.type === 'reload') {
window.location.reload();
return;
}
if (msg.type === 'update_status') {
if (msg.phase === 'request_received') setBanner(true, 'Processing update request');
else if (msg.phase === 'update_started') setBanner(true, 'Updating website');
else if (msg.phase === 'update_done') setBanner(false);
}
} catch {
// ignore
}