marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ux: improve demo onboarding

Browse source
This commit is contained in:
Marco Allegretti 2026-02-06 17:56:54 +01:00
parent c8f7150fac
commit 33dfa8708e
1 changed files with 95 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
frontend/src/pages/demo.astro
View file

@ -17,16 +17,26 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
A governance platform cannot be understood from screenshots or empty interfaces.
Explore a live instance with real communities, ongoing decisions, and visible history.
</p>
<div class="demo-primary-actions">
<a href={`/demo?enter=1${nextQuery || '&next=%2Fcommunities'}`} class="ui-btn ui-btn-primary ui-btn-xl">Enter the Demo</a>
<a href="/demo?enter=1&next=%2Fcommunities" class="ui-btn ui-btn-secondary ui-btn-xl">Browse Communities</a>
</div>
<p class="demo-primary-hint">No registration required to browse. Use a demo account below to vote and participate.</p>
</header>
${nextParam ? `
{nextParam ? (
<div class="demo-status-banner" id="demo-continue">
<p>
You were trying to open <code>${nextParam.replace(/</g, '&lt;')}</code>.
You were trying to open <code>{nextParam}</code>.
Enter the demo to continue.
</p>
<div class="state-actions">
<a href={`/demo?enter=1${nextQuery}`} class="ui-btn ui-btn-primary">Continue</a>
<a href="/demo" class="ui-btn ui-btn-secondary">Stay on the demo page</a>
</div>
</div>
` : ''}
) : null}
<div class="demo-status-banner" id="demo-status">
<p>Loading demo status...</p>
@ -313,6 +323,21 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
line-height: 1.6;
}
.demo-primary-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.75rem;
}
.demo-primary-hint {
margin: 1rem auto 0;
max-width: 70ch;
color: var(--color-text-muted);
font-size: 0.9375rem;
}
@media (max-width: 640px) {
.lead {
font-size: 1.05rem;
@ -343,6 +368,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
margin-top: 2rem;
}
.start-grid .state-card {
grid-column: 1 / -1;
}
@media (max-width: 900px) {
.start-grid {
grid-template-columns: 1fr;
@ -826,6 +855,20 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
margin: 0;
font-size: 0.9375rem;
}
.demo-status-banner .hint {
margin-top: 0.5rem;
color: var(--color-text-muted);
font-size: 0.875rem;
}
.state-actions {
margin-top: 1.25rem;
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
</style>
<script define:vars={{ API_BASE }}>
@ -857,7 +900,20 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
if (!grid) return;
if (!cards || !cards.length) {
grid.innerHTML = '<div class="start-card ui-card ui-card-pad-lg"><p class="loading-text">No journeys available.</p></div>';
grid.innerHTML =
'<div class="state-card ui-card">' +
'<p class="empty">No journeys available.</p>' +
'<p class="hint">You can still enter the demo and browse communities.</p>' +
'<div class="state-actions">' +
'<a class="ui-btn ui-btn-primary" href="/demo?enter=1&next=%2Fcommunities">Enter the Demo</a>' +
'<button type="button" class="ui-btn ui-btn-secondary" id="retry-journeys">Retry</button>' +
'</div>' +
'</div>';
var retry = document.getElementById('retry-journeys');
if (retry) {
retry.addEventListener('click', loadSuggestedJourneys);
}
return;
}
@ -1012,11 +1068,24 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
// Update demo status indicator if needed
const statusBanner = document.getElementById('demo-status');
if (statusBanner) {
const nextTarget = nextPath || '/communities';
const enterHref = '/demo?enter=1&next=' + encodeURIComponent(nextTarget);
if (status.demo_mode) {
statusBanner.innerHTML = '<p>✓ Demo mode is active. Explore freely!</p>';
statusBanner.innerHTML =
'<p>✓ Demo mode is active. Explore freely!</p>' +
'<div class="state-actions">' +
'<a class="ui-btn ui-btn-primary" href="' + enterHref + '">Enter the Demo</a>' +
'<a class="ui-btn ui-btn-secondary" href="/demo?enter=1&next=%2Fcommunities">Browse Communities</a>' +
'</div>';
statusBanner.classList.remove('inactive');
} else {
statusBanner.innerHTML = '<p>Demo mode is not currently enabled on this instance.</p>';
statusBanner.innerHTML =
'<p>Demo mode is not currently enabled on this instance.</p>' +
'<p class="hint">You can still explore Likwid on the public site.</p>' +
'<div class="state-actions">' +
'<a class="ui-btn ui-btn-secondary" href="/">Back to home</a>' +
'</div>';
statusBanner.classList.add('inactive');
}
}
@ -1042,6 +1111,26 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
}
} catch (error) {
console.log('Demo API not available:', error.message);
const statusBanner = document.getElementById('demo-status');
if (statusBanner) {
statusBanner.innerHTML =
'<p>Could not load demo status.</p>' +
'<p class="hint">Please try again.</p>' +
'<div class="state-actions">' +
'<button type="button" class="ui-btn ui-btn-secondary" id="retry-demo-status">Retry</button>' +
'</div>';
statusBanner.classList.add('inactive');
const retryBtn = document.getElementById('retry-demo-status');
if (retryBtn) {
retryBtn.addEventListener('click', function() {
loadDemoData();
loadSuggestedJourneys();
});
}
}
// Show fallback stats
['stats-aurora', 'stats-civic-commons', 'stats-makers'].forEach(function(id) {
const el = document.getElementById(id);