Header Integration

2026-09-05 13:28:49 +03:00 · 2026-09-05 13:28:49 +03:00 · a37d322994
commit a37d322994
parent 59da4a7cc5
13 changed files with 80 additions and 3 deletions
--- a/docs/frontend/header.md
+++ b/docs/frontend/header.md
@ -0,0 +1,9 @@
+# Header
+
+``` bash
+cd /opt/instant-workstation/frontend/header
+```
+
+## Installation
+
+## Updates
--- a/docs/frontend/index.md
+++ b/docs/frontend/index.md
@ -0,0 +1,5 @@
+# Frontend
+
+| Frontend | Language | Toolchain | Route | Last Updated |
+| --- | --- | --- | --- | --- |
+| [Header](header.md) | JavaScript | None | / | 2026-09-05 |
--- a/docs/index.md
+++ b/docs/index.md
@ -5,8 +5,12 @@
 ```mermaid
 architecture-beta
    group backend(server)[Backend]
+    group frontend(internet)[Frontend]

    service workstations(server)[Workstations] in backend
+    service header(internet)[Header] in frontend
+
+    header:R --> L:workstations
 ```

 ## Installation
--- a/frontend/header/assets/favicon.ico
+++ b/frontend/header/assets/favicon.ico
--- a/frontend/header/assets/logo.svg
+++ b/frontend/header/assets/logo.svg
--- a/frontend/header/css/brand.css
+++ b/frontend/header/css/brand.css
--- a/frontend/header/css/desktop.css
+++ b/frontend/header/css/desktop.css
--- a/frontend/header/css/header.css
+++ b/frontend/header/css/header.css
--- a/frontend/header/css/hover.css
+++ b/frontend/header/css/hover.css
--- a/frontend/header/css/nav.css
+++ b/frontend/header/css/nav.css
@ -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%);
    }
--- a/frontend/shell/app-shell.html
+++ b/frontend/shell/app-shell.html
@ -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>
--- a/frontend/header/news-ticker.js
+++ b/frontend/header/news-ticker.js
@ -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 = '';
+    }
+}
--- a/mkdocs.yml
+++ b/mkdocs.yml
@ -14,6 +14,9 @@ nav:
    - Backend:
        - backend/index.md
        - Workstations: backend/workstations.md
+    - Frontend:
+        - frontend/index.md
+        - Header: frontend/header.md
    - Overview: index.md
 plugins:
    - git-revision-date-localized: