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

9
docs/frontend/header.md Normal file
View file

@ -0,0 +1,9 @@
# Header
``` bash
cd /opt/instant-workstation/frontend/header
```
## Installation
## Updates

5
docs/frontend/index.md Normal file
View file

@ -0,0 +1,5 @@
# Frontend
| Frontend | Language | Toolchain | Route | Last Updated |
| --- | --- | --- | --- | --- |
| [Header](header.md) | JavaScript | None | / | 2026-09-05 |

4
docs/index.md
View file

@ -5,8 +5,12 @@
```mermaid ```mermaid
architecture-beta architecture-beta
group backend(server)[Backend] group backend(server)[Backend]
group frontend(internet)[Frontend]
service workstations(server)[Workstations] in backend service workstations(server)[Workstations] in backend
service header(internet)[Header] in frontend
header:R --> L:workstations
``` ```
## Installation ## Installation

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

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

@ -1,6 +1,8 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link href="assets/favicon.ico" rel="icon">
<link href="css/brand.css" rel="stylesheet"> <link href="css/brand.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet"> <link href="css/header.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet"> <link href="css/nav.css" rel="stylesheet">
@ -11,13 +13,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="news-ticker.js" type="module"></script>
<title>Instant Workstation</title> <title>Instant Workstation</title>
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<a class="brand-link" href="/"> <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> <span class="brand-title screen-wide">Instant Workstation</span>
</a> </a>
@ -28,7 +32,7 @@
<a class="nav-link screen-wide" href="https://docs.instantworkstation.com">Technical Documentation</a> <a class="nav-link screen-wide" href="https://docs.instantworkstation.com">Technical Documentation</a>
<span class="news-ticker"> <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> </span>
<a class="nav-link nav-link-account" href="/account">Account</a> <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 = '';
}
}

3
mkdocs.yml
View file

@ -14,6 +14,9 @@ nav:
- Backend: - Backend:
- backend/index.md - backend/index.md
- Workstations: backend/workstations.md - Workstations: backend/workstations.md
- Frontend:
- frontend/index.md
- Header: frontend/header.md
- Overview: index.md - Overview: index.md
plugins: plugins:
- git-revision-date-localized: - git-revision-date-localized: