From cc52ab9145d91cdf056a463f03e3717844ad73b8 Mon Sep 17 00:00:00 2001 From: Kroonk Date: Wed, 1 Jul 2026 17:59:59 +0200 Subject: [PATCH] Add homepage documentation to docs folder --- docs/Brain.md | 199 +++++++++++++++++++++++++++++++++++ docs/Mischlabs Aendern.md | 65 ++++++++++++ docs/Mischlabs Anleitung.md | 11 ++ docs/Mischlabs Deployment.md | 42 ++++++++ docs/Mischlabs Struktur.md | 40 +++++++ 5 files changed, 357 insertions(+) create mode 100644 docs/Brain.md create mode 100644 docs/Mischlabs Aendern.md create mode 100644 docs/Mischlabs Anleitung.md create mode 100644 docs/Mischlabs Deployment.md create mode 100644 docs/Mischlabs Struktur.md diff --git a/docs/Brain.md b/docs/Brain.md new file mode 100644 index 0000000..4163438 --- /dev/null +++ b/docs/Brain.md @@ -0,0 +1,199 @@ +# 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 `` 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. diff --git a/docs/Mischlabs Aendern.md b/docs/Mischlabs Aendern.md new file mode 100644 index 0000000..b0efeb2 --- /dev/null +++ b/docs/Mischlabs Aendern.md @@ -0,0 +1,65 @@ +# 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]] diff --git a/docs/Mischlabs Anleitung.md b/docs/Mischlabs Anleitung.md new file mode 100644 index 0000000..f1b7913 --- /dev/null +++ b/docs/Mischlabs Anleitung.md @@ -0,0 +1,11 @@ +# 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)?]] diff --git a/docs/Mischlabs Deployment.md b/docs/Mischlabs Deployment.md new file mode 100644 index 0000000..0ca9121 --- /dev/null +++ b/docs/Mischlabs Deployment.md @@ -0,0 +1,42 @@ +# 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]] diff --git a/docs/Mischlabs Struktur.md b/docs/Mischlabs Struktur.md new file mode 100644 index 0000000..a2db1d9 --- /dev/null +++ b/docs/Mischlabs Struktur.md @@ -0,0 +1,40 @@ +# 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?]]