MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
366a563b1fb87c722dad7cf8002b6e2467ca8e3e
mischlabs/Brain.md

17 KiB
Raw Blame History

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

  • Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
  • Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
  • Landing Page Design und Implementierung (index.html + style.css)
  • Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
  • PWA-Grundlage fuer iOS/Home-Screen-Installation
  • Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
  • Push zum Remote
  • MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
  • Push des MiChess-Commits (Git-Auth-Token erneuern)

Verwandte Projekte

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:
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):
  • 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.
    • 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:
    • 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.
  • Projekt Matrix & WhatsApp-Integration (Phase 1 & 2) (Stand: 2026-05-22):
    • 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.
    • WhatsApp-Bridge (mautrix-whatsapp): Integration der Bridge als Synapse-Appservice. Generierung sicherer 256-Bit AS/HS-Token und Hinterlegung in data/whatsapp-registration.yaml.
    • 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).
    • Code-Repository-Sync: Alle geänderten Konfigurationsdateien, Docker-Erweiterungen und Hilfsskripte wurden sicher committet und in das neue Repository Matrix.git auf Branch main gepusht.
Reference in New Issue View Git Blame Copy Permalink