From a37d32299422dc29a169752af8957383bd667af1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Br=C3=BCsecke?= Date: Sat, 5 Sep 2026 13:28:49 +0300 Subject: [PATCH] Header Integration --- docs/frontend/header.md | 9 ++++ docs/frontend/index.md | 5 ++ docs/index.md | 4 ++ frontend/header/assets/favicon.ico | Bin 0 -> 67646 bytes frontend/{shell => header/assets}/logo.svg | 0 frontend/{shell => header}/css/brand.css | 0 frontend/{shell => header}/css/desktop.css | 0 frontend/{shell => header}/css/header.css | 0 frontend/{shell => header}/css/hover.css | 0 frontend/{shell => header}/css/nav.css | 8 ++- .../app-shell.html => header/header.html} | 8 ++- frontend/header/news-ticker.js | 46 ++++++++++++++++++ mkdocs.yml | 3 ++ 13 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 docs/frontend/header.md create mode 100644 docs/frontend/index.md create mode 100644 frontend/header/assets/favicon.ico rename frontend/{shell => header/assets}/logo.svg (100%) rename frontend/{shell => header}/css/brand.css (100%) rename frontend/{shell => header}/css/desktop.css (100%) rename frontend/{shell => header}/css/header.css (100%) rename frontend/{shell => header}/css/hover.css (100%) rename frontend/{shell => header}/css/nav.css (76%) rename frontend/{shell/app-shell.html => header/header.html} (82%) create mode 100644 frontend/header/news-ticker.js diff --git a/docs/frontend/header.md b/docs/frontend/header.md new file mode 100644 index 0000000..0c32f3a --- /dev/null +++ b/docs/frontend/header.md @@ -0,0 +1,9 @@ +# Header + +``` bash +cd /opt/instant-workstation/frontend/header +``` + +## Installation + +## Updates \ No newline at end of file diff --git a/docs/frontend/index.md b/docs/frontend/index.md new file mode 100644 index 0000000..65558f9 --- /dev/null +++ b/docs/frontend/index.md @@ -0,0 +1,5 @@ +# Frontend + +| Frontend | Language | Toolchain | Route | Last Updated | +| --- | --- | --- | --- | --- | +| [Header](header.md) | JavaScript | None | / | 2026-09-05 | \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 4cfda15..1c6805a 100644 --- 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 diff --git a/frontend/header/assets/favicon.ico b/frontend/header/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4069bec986cbcd2fed21f3f1003e9796fd3ba099 GIT binary patch literal 67646 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 TKx9Bke literal 0 HcmV?d00001 diff --git a/frontend/shell/logo.svg b/frontend/header/assets/logo.svg similarity index 100% rename from frontend/shell/logo.svg rename to frontend/header/assets/logo.svg diff --git a/frontend/shell/css/brand.css b/frontend/header/css/brand.css similarity index 100% rename from frontend/shell/css/brand.css rename to frontend/header/css/brand.css diff --git a/frontend/shell/css/desktop.css b/frontend/header/css/desktop.css similarity index 100% rename from frontend/shell/css/desktop.css rename to frontend/header/css/desktop.css diff --git a/frontend/shell/css/header.css b/frontend/header/css/header.css similarity index 100% rename from frontend/shell/css/header.css rename to frontend/header/css/header.css diff --git a/frontend/shell/css/hover.css b/frontend/header/css/hover.css similarity index 100% rename from frontend/shell/css/hover.css rename to frontend/header/css/hover.css diff --git a/frontend/shell/css/nav.css b/frontend/header/css/nav.css similarity index 76% rename from frontend/shell/css/nav.css rename to frontend/header/css/nav.css index ccb7163..777fed0 100644 --- a/frontend/shell/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%); } diff --git a/frontend/shell/app-shell.html b/frontend/header/header.html similarity index 82% rename from frontend/shell/app-shell.html rename to frontend/header/header.html index b33963a..e3c3cee 100644 --- a/frontend/shell/app-shell.html +++ b/frontend/header/header.html @@ -1,6 +1,8 @@ + + @@ -11,13 +13,15 @@ + + Instant Workstation
- + Instant Workstation @@ -28,7 +32,7 @@ Technical Documentation - Ubuntu 26.04 x86 64 LE is now available + diff --git a/frontend/header/news-ticker.js b/frontend/header/news-ticker.js new file mode 100644 index 0000000..f8e3a9f --- /dev/null +++ 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 = ''; + } +} \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 5d2d63d..8c6f228 100644 --- 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: