Henrik/instant-workstation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header Integration

Browse source
This commit is contained in:
Henrik Brüsecke 2026-09-05 13:28:49 +03:00
parent 59da4a7cc5
commit a37d322994
13 changed files with 80 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/header/assets/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

0
frontend/shell/logo.svg → frontend/header/assets/logo.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

0
frontend/shell/css/brand.css → frontend/header/css/brand.css
View file

0
frontend/shell/css/desktop.css → frontend/header/css/desktop.css
View file

0
frontend/shell/css/header.css → frontend/header/css/header.css
View file

0
frontend/shell/css/hover.css → frontend/header/css/hover.css
View file

8
frontend/shell/css/nav.css → frontend/header/css/nav.css
View file

@ -32,7 +32,8 @@
}
.news-ticker-content {
animation: news-ticker-animation 10s linear forwards;
animation: news-ticker-animation 10s linear infinite;
animation-play-state: paused;
display: inline-block;
padding-left: 100%;
}
@ -42,6 +43,11 @@
transform: translateX(0);
}
/* Finish the animation early to create a delay between announcements */
90% {
transform: translateX(-100%);
}
to {
transform: translateX(-100%);
}

8
frontend/shell/app-shell.html → frontend/header/header.html
View file

@ -1,6 +1,8 @@
<!doctype html>
<html>
<head>
<link href="assets/favicon.ico" rel="icon">
<link href="css/brand.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
@ -11,13 +13,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="news-ticker.js" type="module"></script>
<title>Instant Workstation</title>
</head>
<body>
<header class="header">
<a class="brand-link" href="/">
<img alt="" class="brand-logo" src="logo.svg">
<img alt="" class="brand-logo" src="assets/logo.svg">
<span class="brand-title screen-wide">Instant Workstation</span>
</a>
@ -28,7 +32,7 @@
<a class="nav-link screen-wide" href="https://docs.instantworkstation.com">Technical Documentation</a>
<span class="news-ticker">
<span class="news-ticker-content">Ubuntu 26.04 x86 64 LE is now available</span>
<span class="news-ticker-content" id="news-ticker-content"></span>
</span>
<a class="nav-link nav-link-account" href="/account">Account</a>

46
frontend/header/news-ticker.js Normal file
View file

@ -0,0 +1,46 @@
const response = await fetch('https://api.instantworkstation.com/workstations');
const workstations = await response.json();
const now = new Date();
const recent = new Date(now);
recent.setUTCDate(now.getUTCDate() - 30);
recent.setUTCHours(0, 0, 0, 0);
const recentWorkstations = workstations.filter(isRecent);
const news = recentWorkstations.flatMap(generateNews);
const ticker = document.getElementById('news-ticker-content');
let index = 0;
if (news.length > 0) {
ticker.textContent = news[index];
ticker.addEventListener('animationiteration', showNextAnnouncement);
ticker.style.animationPlayState = 'running';
}
function generateNews(workstation) {
return workstation.architectures.map(architecture => {
const workstationDetails = `${workstation.os} ${workstation.version}`;
const architectureDetails = `${architecture.cpu} ${architecture.bitness} ${architecture.endianness}`;
return `${workstationDetails} ${architectureDetails} is now available`;
});
}
function isRecent(workstation) {
const added = new Date(workstation.added);
return added >= recent;
}
function showNextAnnouncement() {
index++;
if (index < news.length) {
ticker.textContent = news[index];
} else {
ticker.removeEventListener('animationiteration', showNextAnnouncement);
ticker.style.animationPlayState = 'paused';
ticker.textContent = '';
}
}