Compare commits
3 Commits
master
...
setup-matr
| Author | SHA1 | Date | |
|---|---|---|---|
|
366a563b1f | ||
|
|
88627711be | ||
|
|
9927d57755 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -5,6 +5,3 @@ Thumbs.db
|
|||||||
*~
|
*~
|
||||||
.vscode/
|
.vscode/
|
||||||
.claude/
|
.claude/
|
||||||
filebrowser.db
|
|
||||||
filebrowser.db-journal
|
|
||||||
mischlabs_ssh_key
|
|
||||||
|
|||||||
21
Brain.md
21
Brain.md
@@ -186,6 +186,7 @@ volumes:
|
|||||||
- **Git Deployment & Sync:**
|
- **Git Deployment & Sync:**
|
||||||
- Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (`https://git.mischlabs.de/MrDiderot/mischlabs.git`, Branch `master`) gepusht.
|
- Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (`https://git.mischlabs.de/MrDiderot/mischlabs.git`, Branch `master`) gepusht.
|
||||||
- **Frontend Optimierung & Mobile Usability (Stand: 2026-05-22):**
|
- **Frontend Optimierung & Mobile Usability (Stand: 2026-05-22):**
|
||||||
|
- **Frontend Optimierung & Mobile Usability:**
|
||||||
- **PWA-Kachel Entfernung:** Die ungenutzte "PWA Installierbar"-Statistik-Kachel wurde aus der oberen Übersichtsleiste (`index.html`) entfernt. Das Layout der verbleibenden zwei Kacheln ("Online" & "Dienste") wurde in `style.css` auf ein stabiles, zentriertes 2-Spalten-Raster für Desktop und mobile Ansichten angepasst.
|
- **PWA-Kachel Entfernung:** Die ungenutzte "PWA Installierbar"-Statistik-Kachel wurde aus der oberen Übersichtsleiste (`index.html`) entfernt. Das Layout der verbleibenden zwei Kacheln ("Online" & "Dienste") wurde in `style.css` auf ein stabiles, zentriertes 2-Spalten-Raster für Desktop und mobile Ansichten angepasst.
|
||||||
- **Kompakte Service-Kategoriefilter:** Die Kategorieauswahl (`.segments`) wurde aus der klebrigen (`sticky`) oberen `.control-bar` herausgelöst und in einem separaten `#categoryFilters`-Bereich direkt über dem Dienste-Grid platziert. Sie verbraucht dadurch im ungescrollten Zustand keinen kostbaren Platz mehr auf Mobilgeräten.
|
- **Kompakte Service-Kategoriefilter:** Die Kategorieauswahl (`.segments`) wurde aus der klebrigen (`sticky`) oberen `.control-bar` herausgelöst und in einem separaten `#categoryFilters`-Bereich direkt über dem Dienste-Grid platziert. Sie verbraucht dadurch im ungescrollten Zustand keinen kostbaren Platz mehr auf Mobilgeräten.
|
||||||
- **Visual-Premium Redesign & Untertitel:** Die Filter-Pills wurden verkleinert (Höhe von 36px auf 28px reduziert, kleinere Schriftgröße `0.78rem` und kompakteres Padding), linksbündig ausgerichtet und mit sanften Hover- & Aktiv-Transitions versehen. Zudem wurde der fälschlicherweise hinzugefügte dunkle Hintergrundbalken auf der `.control-bar` vollständig entfernt, um den nahtlosen Backdrop-Blur-Effekt über dem globalen Farbverlauf wiederherzustellen. Der Untertitel der Landing Page wurde von *"Cloud, Medien, Code..."* auf den prägnanten Namen *"Die Selfhost-Werkstatt"* abgeändert.
|
- **Visual-Premium Redesign & Untertitel:** Die Filter-Pills wurden verkleinert (Höhe von 36px auf 28px reduziert, kleinere Schriftgröße `0.78rem` und kompakteres Padding), linksbündig ausgerichtet und mit sanften Hover- & Aktiv-Transitions versehen. Zudem wurde der fälschlicherweise hinzugefügte dunkle Hintergrundbalken auf der `.control-bar` vollständig entfernt, um den nahtlosen Backdrop-Blur-Effekt über dem globalen Farbverlauf wiederherzustellen. Der Untertitel der Landing Page wurde von *"Cloud, Medien, Code..."* auf den prägnanten Namen *"Die Selfhost-Werkstatt"* abgeändert.
|
||||||
@@ -193,20 +194,12 @@ volumes:
|
|||||||
- **Service Worker API-Bypass & PWA Update:** Der Service-Worker (`sw.js`) ignoriert und reicht nun alle API-Anfragen unter `/api/` (z.B. `/api/favorites`, `/api/status`) direkt an das Netzwerk durch, anstatt sie lokal zu cachen. Dadurch werden neu angelegte Favoriten beim einfachen Navigieren auf das Dashboard sofort und ohne manuelles Strg+F5-Neuladen geladen.
|
- **Service Worker API-Bypass & PWA Update:** Der Service-Worker (`sw.js`) ignoriert und reicht nun alle API-Anfragen unter `/api/` (z.B. `/api/favorites`, `/api/status`) direkt an das Netzwerk durch, anstatt sie lokal zu cachen. Dadurch werden neu angelegte Favoriten beim einfachen Navigieren auf das Dashboard sofort und ohne manuelles Strg+F5-Neuladen geladen.
|
||||||
- **Automatisches SSO-Login im Admin Panel:** `/admin.html` prüft nun beim Laden, ob bereits eine aktive Sitzung vorliegt. Falls nicht und kein Fehler vorliegt, wird der Benutzer automatisch an den Keycloak SSO Login (`login()`) weitergeleitet. Dadurch entfällt der zusätzliche Anmelde-Klick komplett. Zum Schutz vor unendlichen Weiterleitungsschleifen nach einer Abmeldung wurde eine temporäre Logout-Erkennung via `sessionStorage` implementiert. Der Cache-Buster für `admin.js` wurde in `admin.html` auf `v=29` erhöht.
|
- **Automatisches SSO-Login im Admin Panel:** `/admin.html` prüft nun beim Laden, ob bereits eine aktive Sitzung vorliegt. Falls nicht und kein Fehler vorliegt, wird der Benutzer automatisch an den Keycloak SSO Login (`login()`) weitergeleitet. Dadurch entfällt der zusätzliche Anmelde-Klick komplett. Zum Schutz vor unendlichen Weiterleitungsschleifen nach einer Abmeldung wurde eine temporäre Logout-Erkennung via `sessionStorage` implementiert. Der Cache-Buster für `admin.js` wurde in `admin.html` auf `v=29` erhöht.
|
||||||
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` und `app.js` wurden in `index.html` auf `v=33` bzw. `v=40` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v26` erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.
|
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` und `app.js` wurden in `index.html` auf `v=33` bzw. `v=40` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v26` erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.
|
||||||
- **Header User Badge & Fix CSS Specificity (Stand: 2026-05-22):**
|
- **Header User Badge & Fix CSS Specificity:**
|
||||||
- **Behebung des CSS-Spezifitätskonflikts:** Ein globaler CSS-Reset `[hidden] { display: none !important; }` wurde am Anfang von `style.css` hinzugefügt. Zuvor hat die Spezifität von `.ghost-button { display: inline-flex; }` die Standard-Browserregel für das `hidden`-Attribut überschrieben, was dazu führte, dass sowohl der Login- als auch der Logout-Button fälschlicherweise gleichzeitig dauerhaft angezeigt wurden.
|
- **Behebung des CSS-Spezifitätskonflikts:** Ein globaler CSS-Reset `[hidden] { display: none !important; }` wurde am Anfang von `style.css` hinzugefügt. Zuvor hat die Spezifität von `.ghost-button { display: inline-flex; }` die Standard-Browserregel für das `hidden`-Attribut überschrieben, was dazu führte, dass sowohl der Login- als auch der Logout-Button fälschlicherweise gleichzeitig dauerhaft angezeigt wurden.
|
||||||
- **Premium Header-User-Badge:** In der Kopfzeile von `admin.html` wurde ein neues Element `<span class="admin-user-badge" id="headerUserBadge" hidden></span>` implementiert, welches bei einer erfolgreichen Authentifizierung in `admin.js` mit dem Text `"Angemeldet als [Nutzername]"` befüllt und stilvoll eingeblendet wird. Der Badge wurde mit einem eleganten Glassmorphismus, dezenter Randlinie und einem 👤-Emoji modern und hochwertig designt.
|
- **Premium Header-User-Badge:** In der Kopfzeile von `admin.html` wurde ein neues Element `<span class="admin-user-badge" id="headerUserBadge" hidden></span>` implementiert, welches bei einer erfolgreichen Authentifizierung in `admin.js` mit dem Text `"Angemeldet als [Nutzername]"` befüllt und stilvoll eingeblendet wird. Der Badge wurde mit einem eleganten Glassmorphismus, dezenter Randlinie und einem 👤-Emoji modern und hochwertig designt.
|
||||||
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` wurden in `index.html`, `admin.html` und `favorites.html` auf `v=34` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v27` erhöht, um ein sofortiges Update der App-Shell im Browser aller Anwender zu erzwingen. In `admin.html` wurde der Script-Buster von `admin.js` auf `v=30` erhöht.
|
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` wurden in `index.html`, `admin.html` und `favorites.html` auf `v=34` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v27` erhöht, um ein sofortiges Update der App-Shell im Browser aller Anwender zu erzwingen. In `admin.html` wurde der Script-Buster von `admin.js` auf `v=30` erhöht.
|
||||||
|
- **Projekt Matrix & WhatsApp-Integration (Phase 1 & 2) (Stand: 2026-05-22):**
|
||||||
- **Migration zu Homepage (gethomepage.dev) & Aufteilung in Public/Admin (Stand: 2026-07-01):**
|
- **Matrix-Infrastruktur (Synapse + Element Web):** Ein sicherer, datenbankgestützter (PostgreSQL 16) Matrix Homeserver (Synapse) unter `matrix.mischlabs.de` und ein Element-Web-Client unter `chat.mischlabs.de` wurden erfolgreich als Docker-Compose-Infrastruktur im Verzeichnis `D:\Vibecoding\Website\Matrix` aufgesetzt. SSO über Keycloak (`auth.mischlabs.de`) wurde nahtlos integriert. Native `.well-known`-Delegierung wurde im Node.js-Backend der Haupt-Landingpage implementiert und deployed.
|
||||||
- **Ablösung des Custom Dashboards:** Das selbstgebaute Node.js-basierte Dashboard (mischlabs.de) wurde vollständig durch die professionelle, open-source Dashboard-Lösung **Homepage (gethomepage.dev)** abgelöst.
|
- **WhatsApp-Bridge (mautrix-whatsapp):** Integration der Bridge als Synapse-Appservice. Generierung sicherer 256-Bit AS/HS-Token und Hinterlegung in `data/whatsapp-registration.yaml`.
|
||||||
- **Trennung in öffentliche und administrative Ansicht:**
|
- **Automatisierungs-Skript:** Erstellung von `configure-whatsapp.sh`, welches nach dem ersten Bridge-Start die Standard-`config.yaml` auf dem NAS vollautomatisch anpasst (SQLite-Datenbank, Port-Bindung `0.0.0.0`, Adressierung im Docker-Netzwerk und Sicherheits-Token).
|
||||||
- Aus Sicherheitsgründen wurde das Dashboard in zwei separate Homepage-Instanzen aufgeteilt.
|
- **Code-Repository-Sync:** Alle geänderten Konfigurationsdateien, Docker-Erweiterungen und Hilfsskripte wurden sicher committet und in das neue Repository [Matrix.git](https://git.mischlabs.de/MrDiderot/Matrix.git) auf Branch `main` gepusht.
|
||||||
- **Öffentliches Dashboard (`mischlabs` / Port 8085):** Verwendet das Konfigurationsverzeichnis `config-public/`. Zeigt nur öffentliche Dienste (Drive, Movies, Audiobooks, Books, MiChess, Tom) ohne sensible Server-Statuswerte oder Administrationslinks.
|
|
||||||
- **Admin-Dashboard (`mischlabs-admin` / Port 8086):** Verwendet das Konfigurationsverzeichnis `config-admin/`. Zeigt alle 9 Dienste (inkl. Keycloak SSO, Passwords und Git), verfügt über eine Anbindung an den Docker-Socket für Live-Statusanzeigen und liest die NAS-Hardware-Ressourcen (CPU, RAM, Disks) aus.
|
|
||||||
- **Aktualisierung des Docker-Compose Setups:**
|
|
||||||
- `docker-compose.yml` (lokal) / `docker-compose.override.yml` (NAS): Definiert beide Homepage-Services und bindet ihre jeweiligen Konfigurationspfade (`./config-public` und `./config-admin`) ein.
|
|
||||||
- **Deployment-Ergebnis, Styling & Hotfix:** Alle Änderungen wurden erfolgreich in das Gitea-Repository gepusht und direkt auf dem NAS via SSH deployt. Die Host-Validierung wurde mittels `HOMEPAGE_ALLOWED_HOSTS` für beide Instanzen so konfiguriert, dass Zugriffe über Domains (z. B. `mischlabs.de`, `admin.mischlabs.de`) und IP-Adressen autorisiert sind. Zudem wurde ein hochwertiges Glassmorphismus-Design (`custom.css`) und ein atmosphärisches, dunkles Fantasy-Hintergrundbild (`background.png`) für beide Instanzen integriert, um eine harmonische, erstklassige Optik zu erzielen. Beide Instanzen laufen stabil und die Homepage lädt fehlerfrei.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 984 KiB |
@@ -1,46 +0,0 @@
|
|||||||
/* Glassmorphism theme override */
|
|
||||||
.theme-dark {
|
|
||||||
--theme-bg: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-image: url('/background.png') !important;
|
|
||||||
background-size: cover !important;
|
|
||||||
background-position: center !important;
|
|
||||||
background-attachment: fixed !important;
|
|
||||||
background-repeat: no-repeat !important;
|
|
||||||
background-color: #0f172a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set the layout wrapper to be 85% dominant dark slate, letting the background peek through subtly (15% visibility) */
|
|
||||||
#__next, #__next > div, main, .layout, #layout-wrapper {
|
|
||||||
background-color: rgba(15, 23, 42, 0.85) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Semi-transparent blur cards */
|
|
||||||
.card, .widget, .resource-widget {
|
|
||||||
background-color: rgba(30, 41, 59, 0.45) !important;
|
|
||||||
backdrop-filter: blur(10px) saturate(120%) !important;
|
|
||||||
-webkit-backdrop-filter: blur(10px) saturate(120%) !important;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05) !important;
|
|
||||||
border-radius: 12px !important;
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
|
|
||||||
transition: all 0.3s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
background-color: rgba(51, 65, 85, 0.55) !important;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
|
||||||
transform: translateY(-2px) !important;
|
|
||||||
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style headers and category names */
|
|
||||||
h2, h3 {
|
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Resources widget style matching the glass theme */
|
|
||||||
.resource-widget {
|
|
||||||
padding: 12px !important;
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
local:
|
|
||||||
socket: /var/run/docker.sock
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
- Zugang:
|
|
||||||
- Single Sign-On:
|
|
||||||
icon: keycloak.png
|
|
||||||
href: https://auth.mischlabs.de/realms/mischlabs/account
|
|
||||||
description: Account, Sitzungen und Sicherheit
|
|
||||||
server: local
|
|
||||||
container: auth
|
|
||||||
- Passwords:
|
|
||||||
icon: vaultwarden.png
|
|
||||||
href: https://password.mischlabs.de
|
|
||||||
description: Passwort-Manager
|
|
||||||
server: local
|
|
||||||
container: vaultwarden
|
|
||||||
|
|
||||||
- Medien:
|
|
||||||
- Drive:
|
|
||||||
icon: nextcloud.png
|
|
||||||
href: https://drive.mischlabs.de
|
|
||||||
description: Cloud-Speicher
|
|
||||||
server: local
|
|
||||||
container: nextcloud_app
|
|
||||||
- Movies:
|
|
||||||
icon: jellyfin.png
|
|
||||||
href: http://192.168.178.111:8096
|
|
||||||
description: Filme & Serien (VM)
|
|
||||||
siteMonitor: http://192.168.178.111:8096
|
|
||||||
- Plex:
|
|
||||||
icon: plex.png
|
|
||||||
href: http://192.168.178.111:32400
|
|
||||||
description: Plex Media Server (VM)
|
|
||||||
siteMonitor: http://192.168.178.111:32400
|
|
||||||
- Audiobooks:
|
|
||||||
icon: audiobookshelf.png
|
|
||||||
href: https://audiobook.mischlabs.de
|
|
||||||
description: Hörbücher
|
|
||||||
server: local
|
|
||||||
container: audiobookshelf
|
|
||||||
- Books:
|
|
||||||
icon: calibre-web.png
|
|
||||||
href: https://books.mischlabs.de
|
|
||||||
description: Bücher & Bibliothek
|
|
||||||
server: local
|
|
||||||
container: calibre-web
|
|
||||||
|
|
||||||
- Servarr (VM):
|
|
||||||
- Jellyseerr:
|
|
||||||
icon: jellyseerr.png
|
|
||||||
href: http://192.168.178.111:5055
|
|
||||||
description: Medienanfragen verwalten
|
|
||||||
siteMonitor: http://192.168.178.111:5055
|
|
||||||
- Sonarr:
|
|
||||||
icon: sonarr.png
|
|
||||||
href: http://192.168.178.111:8989
|
|
||||||
description: Serien verwalten
|
|
||||||
siteMonitor: http://192.168.178.111:8989
|
|
||||||
- Radarr:
|
|
||||||
icon: radarr.png
|
|
||||||
href: http://192.168.178.111:7878
|
|
||||||
description: Filme verwalten
|
|
||||||
siteMonitor: http://192.168.178.111:7878
|
|
||||||
- Prowlarr:
|
|
||||||
icon: prowlarr.png
|
|
||||||
href: http://192.168.178.111:9696
|
|
||||||
description: Indexer Manager
|
|
||||||
siteMonitor: http://192.168.178.111:9696
|
|
||||||
- SABnzbd:
|
|
||||||
icon: sabnzbd.png
|
|
||||||
href: http://192.168.178.111:8080
|
|
||||||
description: Usenet Downloader
|
|
||||||
siteMonitor: http://192.168.178.111:8080
|
|
||||||
|
|
||||||
- Arbeit & Admin:
|
|
||||||
- Git:
|
|
||||||
icon: gitea.png
|
|
||||||
href: https://git.mischlabs.de
|
|
||||||
description: Code-Repositories
|
|
||||||
server: local
|
|
||||||
container: gitea
|
|
||||||
- Config-Editor:
|
|
||||||
icon: filebrowser.png
|
|
||||||
href: https://editor.mischlabs.de
|
|
||||||
description: Dashboard Config bearbeiten
|
|
||||||
server: local
|
|
||||||
container: mischlabs-editor
|
|
||||||
- Portainer (VM):
|
|
||||||
icon: portainer.png
|
|
||||||
href: https://192.168.178.111:9443
|
|
||||||
description: VM Container verwalten
|
|
||||||
siteMonitor: https://192.168.178.111:9443
|
|
||||||
|
|
||||||
- Persönlich:
|
|
||||||
- MiChess:
|
|
||||||
icon: lichess.png
|
|
||||||
href: https://michess.mischlabs.de
|
|
||||||
description: Schach spielen
|
|
||||||
server: local
|
|
||||||
container: michess
|
|
||||||
- Tom:
|
|
||||||
icon: user-circle.png
|
|
||||||
href: https://tom.mischlabs.de
|
|
||||||
description: Portfolio & Fotos
|
|
||||||
server: local
|
|
||||||
container: photography-website
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
title: MischLabs Admin
|
|
||||||
theme: dark
|
|
||||||
language: de
|
|
||||||
tlsInsecure: true
|
|
||||||
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
- search:
|
|
||||||
provider: duckduckgo
|
|
||||||
focus: true
|
|
||||||
target: _blank
|
|
||||||
|
|
||||||
- resources:
|
|
||||||
label: NAS Status
|
|
||||||
cpu: true
|
|
||||||
memory: true
|
|
||||||
disk:
|
|
||||||
- /host/volume1
|
|
||||||
- /host/volume2
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 984 KiB |
@@ -1,46 +0,0 @@
|
|||||||
/* Glassmorphism theme override */
|
|
||||||
.theme-dark {
|
|
||||||
--theme-bg: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-image: url('/background.png') !important;
|
|
||||||
background-size: cover !important;
|
|
||||||
background-position: center !important;
|
|
||||||
background-attachment: fixed !important;
|
|
||||||
background-repeat: no-repeat !important;
|
|
||||||
background-color: #0f172a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set the layout wrapper to be 85% dominant dark slate, letting the background peek through subtly (15% visibility) */
|
|
||||||
#__next, #__next > div, main, .layout, #layout-wrapper {
|
|
||||||
background-color: rgba(15, 23, 42, 0.85) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Semi-transparent blur cards */
|
|
||||||
.card, .widget, .resource-widget {
|
|
||||||
background-color: rgba(30, 41, 59, 0.45) !important;
|
|
||||||
backdrop-filter: blur(10px) saturate(120%) !important;
|
|
||||||
-webkit-backdrop-filter: blur(10px) saturate(120%) !important;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05) !important;
|
|
||||||
border-radius: 12px !important;
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
|
|
||||||
transition: all 0.3s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
background-color: rgba(51, 65, 85, 0.55) !important;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
|
||||||
transform: translateY(-2px) !important;
|
|
||||||
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style headers and category names */
|
|
||||||
h2, h3 {
|
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Resources widget style matching the glass theme */
|
|
||||||
.resource-widget {
|
|
||||||
padding: 12px !important;
|
|
||||||
}
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
- Medien:
|
|
||||||
- Drive:
|
|
||||||
icon: nextcloud.png
|
|
||||||
href: https://drive.mischlabs.de
|
|
||||||
description: Cloud-Speicher
|
|
||||||
- Movies:
|
|
||||||
icon: jellyfin.png
|
|
||||||
href: http://192.168.178.111:8096
|
|
||||||
description: Filme & Serien
|
|
||||||
siteMonitor: http://192.168.178.111:8096
|
|
||||||
- Audiobooks:
|
|
||||||
icon: audiobookshelf.png
|
|
||||||
href: https://audiobook.mischlabs.de
|
|
||||||
description: Hörbücher
|
|
||||||
- Books:
|
|
||||||
icon: calibre-web.png
|
|
||||||
href: https://books.mischlabs.de
|
|
||||||
description: Bücher & Bibliothek
|
|
||||||
- Plex:
|
|
||||||
icon: plex.png
|
|
||||||
href: http://192.168.178.111:32400
|
|
||||||
description: Plex Media Server
|
|
||||||
siteMonitor: http://192.168.178.111:32400
|
|
||||||
|
|
||||||
- Persönlich:
|
|
||||||
- MiChess:
|
|
||||||
icon: lichess.png
|
|
||||||
href: https://michess.mischlabs.de
|
|
||||||
description: Schach spielen
|
|
||||||
- Tom:
|
|
||||||
icon: user-circle.png
|
|
||||||
href: https://tom.mischlabs.de
|
|
||||||
description: Portfolio & Fotos
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
title: MischLabs
|
|
||||||
theme: dark
|
|
||||||
language: de
|
|
||||||
tlsInsecure: true
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
- search:
|
|
||||||
provider: duckduckgo
|
|
||||||
focus: true
|
|
||||||
target: _blank
|
|
||||||
@@ -1,45 +1,15 @@
|
|||||||
services:
|
services:
|
||||||
mischlabs:
|
mischlabs:
|
||||||
image: ghcr.io/gethomepage/homepage:latest
|
image: git.mischlabs.de/mrdiderot/mischlabs:latest
|
||||||
container_name: mischlabs
|
container_name: mischlabs
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
- "8085:3000"
|
- "8085:80"
|
||||||
environment:
|
|
||||||
HOMEPAGE_ALLOWED_HOSTS: mischlabs.de,www.mischlabs.de,192.168.178.88,192.168.178.88:8085,localhost,127.0.0.1
|
|
||||||
volumes:
|
volumes:
|
||||||
- ./config-public:/app/config
|
- /var/run/docker.sock:/var/run/docker.sock
|
||||||
- ./config-public/background.png:/app/public/background.png:ro
|
|
||||||
- mischlabs_data:/app/data
|
|
||||||
|
|
||||||
mischlabs-admin:
|
|
||||||
image: ghcr.io/gethomepage/homepage:latest
|
|
||||||
container_name: mischlabs-admin
|
|
||||||
restart: unless-stopped
|
|
||||||
ports:
|
|
||||||
- "8086:3000"
|
|
||||||
environment:
|
|
||||||
HOMEPAGE_ALLOWED_HOSTS: admin.mischlabs.de,192.168.178.88,192.168.178.88:8086,localhost,127.0.0.1
|
|
||||||
volumes:
|
|
||||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
|
||||||
- /volume1:/host/volume1:ro
|
- /volume1:/host/volume1:ro
|
||||||
- /volume2:/host/volume2:ro
|
- /volume2:/host/volume2:ro
|
||||||
- ./config-admin:/app/config
|
- mischlabs_data:/app/data
|
||||||
- ./config-admin/background.png:/app/public/background.png:ro
|
|
||||||
- mischlabs_admin_data:/app/data
|
|
||||||
|
|
||||||
mischlabs-editor:
|
|
||||||
image: filebrowser/filebrowser:latest
|
|
||||||
container_name: mischlabs-editor
|
|
||||||
restart: unless-stopped
|
|
||||||
ports:
|
|
||||||
- "8087:80"
|
|
||||||
volumes:
|
|
||||||
- .:/srv
|
|
||||||
- ./filebrowser.db:/database/filebrowser.db
|
|
||||||
|
|
||||||
volumes:
|
volumes:
|
||||||
mischlabs_data:
|
mischlabs_data:
|
||||||
mischlabs_admin_data:
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
199
docs/Brain.md
199
docs/Brain.md
@@ -1,199 +0,0 @@
|
|||||||
# Brain.md - Projekt mischlabs.de Landing Page
|
|
||||||
|
|
||||||
## Projektziel
|
|
||||||
Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.
|
|
||||||
|
|
||||||
Aktueller Stand: Die Seite ist keine reine Linkliste mehr, sondern ein kompaktes Service-Dashboard mit Kategorien, Suche, Hintergrund-Statuscheck und PWA-Unterstuetzung.
|
|
||||||
|
|
||||||
## Status
|
|
||||||
- [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
|
|
||||||
- [x] Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
|
|
||||||
- [x] Landing Page Design und Implementierung (index.html + style.css)
|
|
||||||
- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
|
|
||||||
- [x] PWA-Grundlage fuer iOS/Home-Screen-Installation
|
|
||||||
- [x] Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
|
|
||||||
- [x] Push zum Remote
|
|
||||||
- [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
|
|
||||||
- [ ] Push des MiChess-Commits (Git-Auth-Token erneuern)
|
|
||||||
|
|
||||||
## Verwandte Projekte
|
|
||||||
- **auth** (d:\Vibecoding\Website\auth) - Keycloak SSO fuer alle Dienste
|
|
||||||
- Repo: https://git.mischlabs.de/MrDiderot/auth.git
|
|
||||||
- Subdomain: auth.mischlabs.de
|
|
||||||
- Siehe auth/Brain.md fuer Details
|
|
||||||
|
|
||||||
## Dienste-Uebersicht (8 Stueck)
|
|
||||||
| # | Subdomain | Beschreibung | Farbe/Accent |
|
|
||||||
|---|-----------|-------------|--------------|
|
|
||||||
| 1 | drive.mischlabs.de | Cloud-Speicher | #4285f4 (Blau) |
|
|
||||||
| 2 | git.mischlabs.de | Code-Repositories | #f05033 (Rot) |
|
|
||||||
| 3 | movies.mischlabs.de | Filme & Serien | #a855f7 (Lila) |
|
|
||||||
| 4 | audiobook.mischlabs.de | Hoerbuecher | #22c55e (Gruen) |
|
|
||||||
| 5 | password.mischlabs.de | Passwort-Manager | #eab308 (Gelb) |
|
|
||||||
| 6 | docs.mischlabs.de | Dokumentation | #06b6d4 (Cyan) |
|
|
||||||
| 7 | michess.mischlabs.de | Schach | #10b981 (Gruen) |
|
|
||||||
| 8 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) |
|
|
||||||
|
|
||||||
## Technische Entscheidungen
|
|
||||||
- **Reines HTML + CSS mit minimalem Dashboard-/PWA-JS** (kein Framework) - maximale Performance, minimales Docker-Image
|
|
||||||
- **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
|
|
||||||
- **Google Fonts (Inter)** fuer moderne Typografie
|
|
||||||
- **Inline SVG Icons** - keine externen Dependencies
|
|
||||||
- **CSS Grid** mit `auto-fill` + `minmax(240px, 1fr)` fuer responsives Layout
|
|
||||||
- **Dark Theme** mit subtilen Glow-Effekten
|
|
||||||
- **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck)
|
|
||||||
- **PWA**: Manifest, Apple-Touch-Icon, App-Icons und Service Worker fuer installierbare iOS/Web-App
|
|
||||||
- **Dashboard**: Kategorien `Zugang`, `Medien`, `Arbeit`, `Persoenlich`, Suche und clientseitige no-cors Statuschecks
|
|
||||||
- **Auth-Link**: Zeigt auf die Keycloak Account Console (`/realms/mischlabs/account`), nicht mehr auf die Admin-Konsole
|
|
||||||
- **Adminseite**: `/admin.html` nutzt Keycloak Authorization Code + PKCE fuer Login und bietet Editor/Statusdiagnose fuer Dienste
|
|
||||||
|
|
||||||
## Docker-Setup
|
|
||||||
- **Container-Name**: `mischlabs`
|
|
||||||
- **Base-Image**: `nginx:alpine`
|
|
||||||
- **Port-Mapping**: `8085:80` (anpassbar in docker-compose.yml)
|
|
||||||
- **Restart-Policy**: `unless-stopped`
|
|
||||||
- **nginx.conf**: Caching fuer Static Assets (7 Tage), Security-Headers
|
|
||||||
|
|
||||||
## Dateistruktur
|
|
||||||
```
|
|
||||||
mischlabs/
|
|
||||||
index.html - Haupt-HTML mit allen 9 Service-Kacheln
|
|
||||||
style.css - Komplettes Styling (Dark Theme, Grid, Animationen)
|
|
||||||
app.js - Suche, Filter, Statuschecks, Service-Worker-Registrierung
|
|
||||||
admin.html - SSO-geschuetzte Adminoberflaeche
|
|
||||||
admin.js - Keycloak PKCE Login, Editor, Statusdiagnose
|
|
||||||
services.json - Zentrale Service-/Kategorie-Konfiguration
|
|
||||||
offline.html - Offline-Fallback fuer installierte PWA
|
|
||||||
manifest.webmanifest - PWA-Metadaten fuer installierbare App
|
|
||||||
sw.js - Schlanker Service Worker mit App-Shell-Cache
|
|
||||||
icons/ - App-Icons fuer iOS/PWA
|
|
||||||
Dockerfile - nginx:alpine mit kopierten Static Files
|
|
||||||
docker-compose.yml - Container-Definition (Name: mischlabs, Port 8085)
|
|
||||||
nginx.conf - Server-Konfiguration, Caching, Security-Headers
|
|
||||||
.gitignore - Git-Ausschluesse
|
|
||||||
Brain.md - Dieses Dokument (KI-Uebergabe)
|
|
||||||
```
|
|
||||||
|
|
||||||
## Deployment-Workflow
|
|
||||||
1. Code aendern und committen
|
|
||||||
2. Push zu git.mischlabs.de
|
|
||||||
3. Auf dem Server: `git pull && docker compose up -d --build`
|
|
||||||
|
|
||||||
## Erkenntnisse & Notizen
|
|
||||||
- Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports
|
|
||||||
- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains (Cloudflare Tunnel)
|
|
||||||
- Port 8085 gewaehlt da gaengige Ports (80, 8080, 8090) bereits belegt
|
|
||||||
- Kein JavaScript noetig - pure CSS reicht fuer alle Effekte
|
|
||||||
- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende
|
|
||||||
- Git-Push-Fehler aufgetreten (Authentication failed) - Token muss erneuert werden
|
|
||||||
- DNS: Alte A-Records (185.181.104.242) von INWX wurden geloescht, nur noch Tunnel-Eintraege
|
|
||||||
- NAS hat kein git installiert - entweder Git Server Paket installieren oder wget nutzen
|
|
||||||
|
|
||||||
## PWA-Stand 2026-05-21
|
|
||||||
- MischLabs wurde als PWA vorbereitet.
|
|
||||||
- iOS-relevante Meta-Tags in `index.html`:
|
|
||||||
- `apple-mobile-web-app-capable`
|
|
||||||
- `apple-mobile-web-app-status-bar-style`
|
|
||||||
- `apple-mobile-web-app-title`
|
|
||||||
- `apple-touch-icon`
|
|
||||||
- Manifest:
|
|
||||||
- `name`: MischLabs
|
|
||||||
- `display`: standalone
|
|
||||||
- `theme_color`: #10b981
|
|
||||||
- `background_color`: #0a0a0f
|
|
||||||
- Icons:
|
|
||||||
- `icons/app-icon-source.png` (1024x1024, quadratischer Ausschnitt aus dem MischLabs-Bild)
|
|
||||||
- `icons/apple-touch-icon-v2.png` (180x180, frischer Dateiname gegen iOS-Icon-Cache)
|
|
||||||
- `icons/apple-touch-icon.png` (180x180, alte Kompatibilitaetskopie)
|
|
||||||
- `icons/icon-192.png` (192x192)
|
|
||||||
- `icons/icon-512.png` (512x512)
|
|
||||||
- `icons/maskable-512.png` (512x512, maskable)
|
|
||||||
- Service Worker:
|
|
||||||
- Cache-Name: `mischlabs-pwa-v4`
|
|
||||||
- Cached die App-Shell (`/`, `index.html`, `offline.html`, `style.css?v=10`, `app.js?v=2`, `services.json?v=1`, Manifest und Icons)
|
|
||||||
- Navigationen fallen offline auf `offline.html` zurueck
|
|
||||||
- Dockerfile kopiert Manifest, Service Worker und Icons in das Nginx-Image.
|
|
||||||
- `nginx.conf` liefert `manifest.webmanifest` mit `application/manifest+json` und `sw.js` mit harten No-Cache-Headern aus.
|
|
||||||
|
|
||||||
## Dashboard-v2-Stand 2026-05-21
|
|
||||||
- Neues Logo oben nutzt `icons/app-icon-source.png`.
|
|
||||||
- Die alte oeffentliche Auth-Kachel wurde auf die Keycloak Account Console umgebogen:
|
|
||||||
`https://auth.mischlabs.de/realms/mischlabs/account`
|
|
||||||
- Kategorien:
|
|
||||||
- Zugang: SSO, Drive, Passwords
|
|
||||||
- Medien: Movies, Audiobooks, Books
|
|
||||||
- Arbeit: Git, MiChess
|
|
||||||
- Persoenlich: Tom
|
|
||||||
- `app.js` prueft Dienste im Hintergrund per `fetch(..., { mode: "no-cors" })`. Das ist bewusst nur ein Erreichbarkeitsindikator, kein vollwertiges Monitoring.
|
|
||||||
|
|
||||||
## Adminseite Stand 2026-05-21
|
|
||||||
- URL: `https://mischlabs.de/admin.html`
|
|
||||||
- SSO-Client in Keycloak benoetigt:
|
|
||||||
- Client ID: `mischlabs-admin`
|
|
||||||
- Client type: OpenID Connect
|
|
||||||
- Client authentication: Off/Public Client
|
|
||||||
- Standard flow: On
|
|
||||||
- Valid redirect URI: `https://mischlabs.de/admin.html`
|
|
||||||
- Valid post logout redirect URI: `https://mischlabs.de/admin.html`
|
|
||||||
- Web origin: `https://mischlabs.de`
|
|
||||||
- Scopes: `openid email profile`
|
|
||||||
- Erlaubter Admin in der statischen UI:
|
|
||||||
- `preferred_username=mrdiderot` oder `email=mail.misch@pm.me`
|
|
||||||
- Aktuelle Grenze: Weil mischlabs noch rein statisch ueber Nginx laeuft, kann `/admin.html` globale Aenderungen noch nicht serverseitig speichern. Der Editor speichert lokal im Browser (`localStorage`) und kann eine neue `services.json` exportieren. Fuer echte Live-Aenderungen braucht der naechste Schritt ein kleines Backend oder einen Gitea-Commit-Workflow.
|
|
||||||
- Statusdiagnose nutzt Browser-Fetch mit `mode: "no-cors"`. Dadurch erkennt sie Erreichbarkeit/Timeouts, aber bei fremden Subdomains keine echten HTTP-Statuscodes.
|
|
||||||
- Wenn der Browser die Pruefung wegen CORS/CORB blockiert (`Failed to fetch`), wird der Dienst **nicht** mehr als offline markiert, sondern als "Nicht im Browser pruefbar". Das betraf z. B. Vaultwarden/`password.mischlabs.de`.
|
|
||||||
- Fuer echte Fehlerdetails braucht es ein kleines Backend bzw. einen Statusproxy, der serverseitig `HEAD`/`GET` prueft.
|
|
||||||
|
|
||||||
## Statusproxy Stand 2026-05-21
|
|
||||||
- `mischlabs` wurde von Nginx auf einen kleinen Node-Server (`server.js`) umgestellt.
|
|
||||||
- Der Node-Server serviert die statischen Dateien weiter und stellt `/api/status` bereit.
|
|
||||||
- `/api/status` liefert:
|
|
||||||
- Docker-Container via `/var/run/docker.sock`
|
|
||||||
- Watchtower-Logs und letzten Watchtower-Lauf
|
|
||||||
- Speicherplatz fuer `/volume1` und `/volume2`, im Container gemountet als `/host/volume1` und `/host/volume2`
|
|
||||||
- Serverseitige Service-Checks mit HTTP-Status und Latenz
|
|
||||||
- NAS-Compose fuer `mischlabs` braucht diese Mounts:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
volumes:
|
|
||||||
- /var/run/docker.sock:/var/run/docker.sock
|
|
||||||
- /volume1:/host/volume1:ro
|
|
||||||
- /volume2:/host/volume2:ro
|
|
||||||
```
|
|
||||||
|
|
||||||
- Aktuelle NAS-Werte bei Planung:
|
|
||||||
- `/volume1`: 3.7T total, 2.5T used, 1.2T free, 68%
|
|
||||||
- `/volume2`: 104G total, 88G used, 12G free, 89%
|
|
||||||
- Watchtower: `Scanned=23`, `Updated=0`, `Failed=0` beim manuellen Lauf um 2026-05-21 14:16 UTC
|
|
||||||
|
|
||||||
## Globale KI-Systemeinstellung (WICHTIG!)
|
|
||||||
> [!IMPORTANT]
|
|
||||||
> **Arbeitsanweisung für alle KI-Systeme (LLM / Agenten):**
|
|
||||||
> Nach dem erfolgreichen Abschluss einer Aufgabe oder eines Meilensteins MUSS automatisch ein strukturierter Eintrag in dieser `Brain.md` vorgenommen werden. Dieser Eintrag soll dokumentieren:
|
|
||||||
> 1. Welche Änderungen an welchen Dateien vorgenommen wurden (inklusive Begründung).
|
|
||||||
> 2. Welche neuen Features, Endpoints oder Design-Anpassungen integriert wurden.
|
|
||||||
> 3. Der aktuelle Stand des Deployments und eventuelle offene Punkte oder nächste Schritte.
|
|
||||||
> Dies stellt sicher, dass alle nachfolgenden KI-Systeme und der Benutzer stets einen konsistenten, lückenlosen Projektverlauf nachvollziehen können.
|
|
||||||
|
|
||||||
## Letzte Änderungen & Meilensteine (Stand: 2026-05-21)
|
|
||||||
- **Erweitertes Admin-Tool (Universal Admin Panel):**
|
|
||||||
- **Docker Container Logs Modal:** Integration eines interaktiven, terminal-ähnlichen Log-Overlays in `admin.html` und `admin.js`. Jeder Container auf der Übersicht sowie Watchtower bieten nun einen **Logs**-Button. Logs können dynamisch mit Tiefenbeschränkungen (`50`, `150`, `300`, `500` Zeilen) abgefragt und manuell aktualisiert werden. Backend-Endpunkt: GET `/api/containers/:name/logs`.
|
|
||||||
- **Live Service-Inspektion (`🔍`):** Status-Kacheln der Dienste bieten ein Lupensymbol. Klicks darauf starten eine serverseitige Node-Anfrage (CORS-frei) an die Zieladresse und geben Antwortlatenz, HTTP-Statuscode, vollständige HTTP-Header und eine Vorschau der ersten 1000 Zeichen der Antwort zurück. Backend-Endpunkt: GET `/api/services/inspect`.
|
|
||||||
- **Interaktiver NAS Verzeichnis-Scanner:** Hinzufügen eines Ordnergrößen-Scanners im NAS-Speicher-Panel. Berechnet rekursiv Ordnergrößen für gemountete Volumes (`/host/volume1`, `/host/volume2`), sortiert sie absteigend und erlaubt durch Anklicken von Unterordnern ein direktes Weiterscannen im entsprechenden Pfad. Backend-Endpunkt: GET `/api/disks/scan-folder`.
|
|
||||||
- **Premium Design-Branding:**
|
|
||||||
- **Textlogo mit Farbverlauf:** Das "MischLabs"-Textlogo (`.brand h1`) auf dem Dashboard (`index.html`) und im Adminbereich (`admin.html`) erstrahlt nun in einem modernen, dynamischen Farbverlauf von Blau (`#38bdf8`) zu Lila/Flieder (`#c084fc`) unter Verwendung von Text-Maskierungen.
|
|
||||||
- **Cache-Buster-Update:** Cache-Busting-Parameter in den CSS-Verknüpfungen wurden auf `v=26` erhöht, damit der geänderte Farbverlauf sofort ohne manuelles Cache-Leeren im Browser gerendert wird.
|
|
||||||
- **Git Deployment & Sync:**
|
|
||||||
- Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (`https://git.mischlabs.de/MrDiderot/mischlabs.git`, Branch `master`) gepusht.
|
|
||||||
- **Frontend Optimierung & Mobile Usability (Stand: 2026-05-22):**
|
|
||||||
- **PWA-Kachel Entfernung:** Die ungenutzte "PWA Installierbar"-Statistik-Kachel wurde aus der oberen Übersichtsleiste (`index.html`) entfernt. Das Layout der verbleibenden zwei Kacheln ("Online" & "Dienste") wurde in `style.css` auf ein stabiles, zentriertes 2-Spalten-Raster für Desktop und mobile Ansichten angepasst.
|
|
||||||
- **Kompakte Service-Kategoriefilter:** Die Kategorieauswahl (`.segments`) wurde aus der klebrigen (`sticky`) oberen `.control-bar` herausgelöst und in einem separaten `#categoryFilters`-Bereich direkt über dem Dienste-Grid platziert. Sie verbraucht dadurch im ungescrollten Zustand keinen kostbaren Platz mehr auf Mobilgeräten.
|
|
||||||
- **Visual-Premium Redesign & Untertitel:** Die Filter-Pills wurden verkleinert (Höhe von 36px auf 28px reduziert, kleinere Schriftgröße `0.78rem` und kompakteres Padding), linksbündig ausgerichtet und mit sanften Hover- & Aktiv-Transitions versehen. Zudem wurde der fälschlicherweise hinzugefügte dunkle Hintergrundbalken auf der `.control-bar` vollständig entfernt, um den nahtlosen Backdrop-Blur-Effekt über dem globalen Farbverlauf wiederherzustellen. Der Untertitel der Landing Page wurde von *"Cloud, Medien, Code..."* auf den prägnanten Namen *"Die Selfhost-Werkstatt"* abgeändert.
|
|
||||||
- **Favoriten-Zähler statt Online-Status:** Die "Online"-Statistik-Kachel in der Kopfzeile wurde durch eine dynamische "Favoriten"-Statistik-Kachel ersetzt, um direkt die Anzahl der geladenen Lesezeichen anzuzeigen. Die Reihenfolge wurde auf "Dienste" zuerst und "Favoriten" an zweiter Stelle geändert. Das Erreichbarkeits-Monitoring im Hintergrund läuft weiterhin stabil, um die Status-Punkte der einzelnen Dienste-Karten aktuell zu halten.
|
|
||||||
- **Service Worker API-Bypass & PWA Update:** Der Service-Worker (`sw.js`) ignoriert und reicht nun alle API-Anfragen unter `/api/` (z.B. `/api/favorites`, `/api/status`) direkt an das Netzwerk durch, anstatt sie lokal zu cachen. Dadurch werden neu angelegte Favoriten beim einfachen Navigieren auf das Dashboard sofort und ohne manuelles Strg+F5-Neuladen geladen.
|
|
||||||
- **Automatisches SSO-Login im Admin Panel:** `/admin.html` prüft nun beim Laden, ob bereits eine aktive Sitzung vorliegt. Falls nicht und kein Fehler vorliegt, wird der Benutzer automatisch an den Keycloak SSO Login (`login()`) weitergeleitet. Dadurch entfällt der zusätzliche Anmelde-Klick komplett. Zum Schutz vor unendlichen Weiterleitungsschleifen nach einer Abmeldung wurde eine temporäre Logout-Erkennung via `sessionStorage` implementiert. Der Cache-Buster für `admin.js` wurde in `admin.html` auf `v=29` erhöht.
|
|
||||||
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` und `app.js` wurden in `index.html` auf `v=33` bzw. `v=40` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v26` erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.
|
|
||||||
- **Header User Badge & Fix CSS Specificity (Stand: 2026-05-22):**
|
|
||||||
- **Behebung des CSS-Spezifitätskonflikts:** Ein globaler CSS-Reset `[hidden] { display: none !important; }` wurde am Anfang von `style.css` hinzugefügt. Zuvor hat die Spezifität von `.ghost-button { display: inline-flex; }` die Standard-Browserregel für das `hidden`-Attribut überschrieben, was dazu führte, dass sowohl der Login- als auch der Logout-Button fälschlicherweise gleichzeitig dauerhaft angezeigt wurden.
|
|
||||||
- **Premium Header-User-Badge:** In der Kopfzeile von `admin.html` wurde ein neues Element `<span class="admin-user-badge" id="headerUserBadge" hidden></span>` implementiert, welches bei einer erfolgreichen Authentifizierung in `admin.js` mit dem Text `"Angemeldet als [Nutzername]"` befüllt und stilvoll eingeblendet wird. Der Badge wurde mit einem eleganten Glassmorphismus, dezenter Randlinie und einem 👤-Emoji modern und hochwertig designt.
|
|
||||||
- **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` wurden in `index.html`, `admin.html` und `favorites.html` auf `v=34` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v27` erhöht, um ein sofortiges Update der App-Shell im Browser aller Anwender zu erzwingen. In `admin.html` wurde der Script-Buster von `admin.js` auf `v=30` erhöht.
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
# 2. Wie ändere ich Dienste, Widgets oder Einstellungen?
|
|
||||||
|
|
||||||
Die gesamte Homepage wird über YAML-Dateien konfiguriert. Du musst dafür keinen Code schreiben oder das Docker-Image neu bauen. Homepage lädt diese Dateien im laufenden Betrieb automatisch neu!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Dienste verwalten (services.yaml)
|
|
||||||
Hier legst du die Kacheln für deine Dienste fest.
|
|
||||||
|
|
||||||
### Beispiel für einen einfachen Dienst (Öffentlich):
|
|
||||||
```yaml
|
|
||||||
- Medien: # Dies ist die Kategorie-Überschrift
|
|
||||||
- Drive: # Name des Dienstes auf der Kachel
|
|
||||||
icon: nextcloud.png # Icon-Name (aus dem Homepage-Iconset)
|
|
||||||
href: https://drive.mischlabs.de
|
|
||||||
description: Cloud-Speicher
|
|
||||||
```
|
|
||||||
|
|
||||||
### Beispiel mit Live-Docker-Status (Nur für Admin):
|
|
||||||
```yaml
|
|
||||||
- Arbeit:
|
|
||||||
- Git:
|
|
||||||
icon: gitea.png
|
|
||||||
href: https://git.mischlabs.de
|
|
||||||
description: Code-Repositories
|
|
||||||
server: local # Verweist auf docker.yaml
|
|
||||||
container: gitea # Exakter Name des Containers auf dem NAS
|
|
||||||
```
|
|
||||||
*Tipp: Wenn du `server: local` und `container: [name]` angibst, fragt Homepage den Docker-Status ab und zeigt an, ob der Container läuft (grüner Punkt) oder beendet ist (roter Punkt).*
|
|
||||||
|
|
||||||
*Eine Liste aller unterstützten App-Icons findest du in der [Homepage Dokumentation](https://gethomepage.dev/configs/services/).*
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Einstellungen anpassen (settings.yaml)
|
|
||||||
Hier werden grundlegende Einstellungen wie Sprache und Titel definiert:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
title: MischLabs Admin # Der Name oben links im Dashboard
|
|
||||||
theme: dark # Standard-Theme (dark oder light)
|
|
||||||
language: de # Sprache für Datumsangaben und Container-Zustände (z.B. "Wird ausgeführt")
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Widgets verwalten (widgets.yaml)
|
|
||||||
Widgets werden ganz oben auf der Seite als schmale Infoleisten oder Suchboxen angezeigt.
|
|
||||||
|
|
||||||
### Beispiel für Suchleiste + Hardware-Widgets (Admin):
|
|
||||||
```yaml
|
|
||||||
- search:
|
|
||||||
provider: duckduckgo # Suchanbieter (google, duckduckgo, etc.)
|
|
||||||
focus: true # Suchbox bei Seitenaufruf fokussieren
|
|
||||||
|
|
||||||
- resources:
|
|
||||||
label: NAS Status
|
|
||||||
cpu: true
|
|
||||||
memory: true
|
|
||||||
disk:
|
|
||||||
- /host/volume1 # Überwacht Volume 1 des NAS
|
|
||||||
- /host/volume2 # Überwacht Volume 2 des NAS
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
* [[Mischlabs Struktur|Zurück: Struktur]] | [[Mischlabs Anleitung|Zurück zur Übersicht]] | [[Mischlabs Deployment|Weiter zu: Deployment]]
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
# Mischlabs Dashboard Anleitung
|
|
||||||
|
|
||||||
Willkommen im Handbuch für dein neues Homepage-Dashboard!
|
|
||||||
|
|
||||||
Da deine Homepage nun auf **Homepage (gethomepage.dev)** basiert, ist die Verwaltung deutlich einfacher und professioneller geworden. Das System ist in zwei Instanzen aufgeteilt (Öffentlich und Admin).
|
|
||||||
|
|
||||||
Hier findest du die einzelnen Themen als separate Notizen, die dich durch die Verwaltung führen:
|
|
||||||
|
|
||||||
* [[Mischlabs Struktur|1. Struktur der Homepage (Wo liegt was?)]]
|
|
||||||
* [[Mischlabs Aendern|2. Wie ändere ich Dienste, Widgets oder Einstellungen?]]
|
|
||||||
* [[Mischlabs Deployment|3. Wie werden Änderungen auf das NAS übertragen (Deployment)?]]
|
|
||||||
* [[Mischlabs Editor|4. Dashboard-Editor nutzen (Filebrowser)]]
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
# 3. Wie wird die Seite deployed / aktualisiert?
|
|
||||||
|
|
||||||
Wenn du Änderungen an deinen Config-Dateien (in `config-public` oder `config-admin`) oder an der Compose-Datei vornimmst, müssen diese auf das NAS übertragen werden.
|
|
||||||
|
|
||||||
Dank des eingerichteten SSH-Schlüssels auf deinem Windows-Rechner kannst du das bequem über die Windows PowerShell erledigen.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Schritt-für-Schritt-Anleitung
|
|
||||||
|
|
||||||
### Schritt 1: Lokale Änderungen machen & Git sichern
|
|
||||||
1. Bearbeite die Dateien lokal in deinem Git-Repository auf deinem Windows-Rechner (`d:\Vibecoding\Website\mischlabs`).
|
|
||||||
2. Öffne ein Terminal in diesem Ordner und sichere deine Änderungen im Git (Gitea):
|
|
||||||
```bash
|
|
||||||
git add .
|
|
||||||
git commit -m "Beschreibung deiner Änderung"
|
|
||||||
git push
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Schritt 2: Änderungen auf das NAS hochladen (Deployment)
|
|
||||||
Du musst die Dateien nicht manuell hochladen. Öffne die **PowerShell** auf deinem Windows-Rechner und führe folgende Befehle aus:
|
|
||||||
|
|
||||||
#### 1. Nur die YAML-Konfigurationen synchronisieren:
|
|
||||||
```powershell
|
|
||||||
scp -r -i C:\Users\tommi\.ssh\codex_mischnas_ed25519 d:\Vibecoding\Website\mischlabs\config-public d:\Vibecoding\Website\mischlabs\config-admin MrDiderot@192.168.178.88:/volume2/docker/mischlabs/
|
|
||||||
```
|
|
||||||
*Da Homepage Dateiänderungen automatisch überwacht, sind deine Änderungen im Browser **sofort live**! Du musst den Docker-Container bei reinen Inhaltsänderungen nicht neu starten.*
|
|
||||||
|
|
||||||
#### 2. Falls sich die docker-compose.yml geändert hat:
|
|
||||||
Wenn du z.B. Ports oder Mount-Pfade änderst, lade die Datei hoch und starte die Container neu:
|
|
||||||
```powershell
|
|
||||||
# Compose-Datei hochladen
|
|
||||||
scp -i C:\Users\tommi\.ssh\codex_mischnas_ed25519 d:\Vibecoding\Website\mischlabs\docker-compose.yml MrDiderot@192.168.178.88:/volume2/docker/mischlabs/docker-compose.override.yml
|
|
||||||
|
|
||||||
# Container auf dem NAS neu starten
|
|
||||||
ssh -i C:\Users\tommi\.ssh\codex_mischnas_ed25519 MrDiderot@192.168.178.88 "cd /volume2/docker/mischlabs && docker compose down mischlabs && docker compose up -d mischlabs mischlabs-admin"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
* [[Mischlabs Aendern|Zurück: Dienste ändern]] | [[Mischlabs Anleitung|Zurück zur Übersicht]]
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
# 4. Dashboard-Editor nutzen (Filebrowser)
|
|
||||||
|
|
||||||
Du hast jetzt einen integrierten Web-Editor (**Filebrowser**), den du direkt über dein Admin-Dashboard aufrufen kannst. Damit kannst du deine Dashboards verwalten, ohne dich per SSH einloggen oder Git-Befehle nutzen zu müssen.
|
|
||||||
|
|
||||||
## Zugriff & Login
|
|
||||||
|
|
||||||
* **Adresse:** `http://192.168.178.88:8087` (oder falls eingerichtet: `https://editor.mischlabs.de`)
|
|
||||||
* **Standard-Benutzername:** `admin`
|
|
||||||
* **Einmal-Passwort (für den ersten Login):** `kd5hzSdaRcsHoq_c`
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
|
||||||
> Bitte ändere das Passwort direkt nach deinem ersten Login in den Filebrowser-Einstellungen (unten links auf das Zahnrad-Symbol -> *Settings* -> *Change Password*).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Wie bearbeite ich die Homepage?
|
|
||||||
|
|
||||||
1. Nach dem Login siehst du die Ordnerstruktur deines Homepage-Projekts.
|
|
||||||
2. Navigiere in die Config-Ordner:
|
|
||||||
* **Öffentlich:** Ordner `config-public`
|
|
||||||
* **Admin:** Ordner `config-admin`
|
|
||||||
3. Klicke auf die Datei, die du bearbeiten möchtest (z.B. `services.yaml` oder `settings.yaml`).
|
|
||||||
4. Der Editor öffnet sich direkt im Browser mit Syntax-Hervorhebung.
|
|
||||||
5. Nimm deine Änderungen vor und klicke oben rechts auf das **Speichern-Symbol** (die Diskette).
|
|
||||||
6. Deine Änderungen sind **sofort live** im Dashboard sichtbar!
|
|
||||||
|
|
||||||
---
|
|
||||||
* [[Mischlabs Anleitung|Zurück zur Übersicht]]
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
# 1. Struktur der Homepage
|
|
||||||
|
|
||||||
Deine Homepage besteht aus zwei getrennten Instanzen, um deine privaten Dienste (wie Passwörter oder Gitea) und Server-Statistiken vor der Öffentlichkeit zu schützen.
|
|
||||||
|
|
||||||
## Verzeichnisstruktur (Lokal & NAS)
|
|
||||||
In deinem Projektverzeichnis findest du zwei Hauptordner für die Konfigurationen:
|
|
||||||
|
|
||||||
```
|
|
||||||
mischlabs/
|
|
||||||
├── config-public/ # Konfiguration für die öffentliche Seite (Port 8085)
|
|
||||||
│ ├── settings.yaml # Titel, Theme und Sprache
|
|
||||||
│ ├── services.yaml # Nur öffentliche Dienste (Drive, Movies, etc.)
|
|
||||||
│ └── widgets.yaml # Nur die Suchleiste
|
|
||||||
│
|
|
||||||
├── config-admin/ # Konfiguration für die Admin-Seite (Port 8086)
|
|
||||||
│ ├── settings.yaml # Titel, Theme und Sprache
|
|
||||||
│ ├── services.yaml # Alle 9 Dienste mit Docker-Status
|
|
||||||
│ ├── widgets.yaml # Suchleiste + NAS Hardware-Auslastung
|
|
||||||
│ └── docker.yaml # Anbindung an den Docker-Socket
|
|
||||||
│
|
|
||||||
└── docker-compose.yml # Container-Konfiguration (Image, Ports, Volumes)
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Die zwei Instanzen im Detail
|
|
||||||
|
|
||||||
### 1. Öffentliche Homepage (mischlabs)
|
|
||||||
* **Domain:** `https://mischlabs.de` (Port `8085` auf dem NAS)
|
|
||||||
* **Sicherheit:** Hat **keinen** Zugriff auf den Docker-Socket oder deine NAS-Verzeichnisgrößen.
|
|
||||||
* **Inhalt:** Zeigt nur Services, die einen eigenen Login haben (Nextcloud, Jellyfin, Audiobookshelf, Calibre-Web, Lichess, Tom).
|
|
||||||
|
|
||||||
### 2. Admin-Homepage (mischlabs-admin)
|
|
||||||
* **Domain:** `https://admin.mischlabs.de` (Port `8086` auf dem NAS)
|
|
||||||
* **Sicherheit:** Sollte über Cloudflare Access oder VPN geschützt sein.
|
|
||||||
* **Inhalt:** Zeigt alle 9 Dienste inkl. Keycloak SSO, Vaultwarden Passwörter und Gitea.
|
|
||||||
* **Widgets:** Zeigt live CPU-, RAM- und Festplatten-Auslastung deines NAS an.
|
|
||||||
|
|
||||||
---
|
|
||||||
* [[Mischlabs Anleitung|Zurück zur Übersicht]] | [[Mischlabs Aendern|Weiter zu: Wie ändere ich Dienste oder Einstellungen?]]
|
|
||||||
14
nginx.conf
14
nginx.conf
@@ -25,6 +25,20 @@ server {
|
|||||||
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" always;
|
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" always;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
# Matrix Server Delegation (.well-known)
|
||||||
|
location /.well-known/matrix/server {
|
||||||
|
default_type application/json;
|
||||||
|
add_header Access-Control-Allow-Origin * always;
|
||||||
|
return 200 '{"m.server": "matrix.mischlabs.de:443"}';
|
||||||
|
}
|
||||||
|
|
||||||
|
# Matrix Client Delegation (.well-known)
|
||||||
|
location /.well-known/matrix/client {
|
||||||
|
default_type application/json;
|
||||||
|
add_header Access-Control-Allow-Origin * always;
|
||||||
|
return 200 '{"m.homeserver":{"base_url":"https://matrix.mischlabs.de"},"org.matrix.msc3575.proxy":{"url":"https://matrix.mischlabs.de"}}';
|
||||||
|
}
|
||||||
|
|
||||||
# Cache static assets
|
# Cache static assets
|
||||||
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
|
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
|
||||||
expires 7d;
|
expires 7d;
|
||||||
|
|||||||
Reference in New Issue
Block a user