mischlabs/Brain.md

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

• 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.