Files

Kroonk a4f3cf738c Fix: Backend-Bugs, fehlende Galerie, Watchtower statt Docker-Socket

- express.urlencoded() hinzugefuegt (Login war komplett kaputt)
- Oeffentliche Galerie zeigt jetzt alle Bilder (statt leere Galerie)
- loadGallery() Aufruf in main.js eingefuegt (fehlte komplett)
- main.min.js neu gebaut mit gulp (Galerie-Code fehlte in minified Version)
- Watchtower Container in docker-compose.yml (auto-updates alle 5 Min)
- Docker-Socket und docker-cli aus Photography-Container entfernt
- runs.json Muell-Datei geloescht
- Brain.md und Feature-Request.md aktualisiert

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-04-12 17:22:49 +02:00

8.0 KiB

Raw Blame History

Brain.md - Projekt-Wissensdatenbank

Projektziel

Eine eigene Fotografie-Portfolio-Website basierend auf dem Template von rampatra/photography. Keine 1:1 Kopie, sondern eine individuell angepasste Version mit eigenen Anspruechen.

Besitzer & Kontakt

Name: Tom Misch
Marke: Mischkomposition
Domain: tom.mischlabs.de
E-Mail: tom@mischlabs.de
Instagram: @Mischkomposition
GitHub Repo: https://github.com/Kroonk/Photography.git
Lokaler Pfad: d:\Vibecoding\Website\Photography

Technologie-Stack

Komponente	Technologie
Static Site Generator	Jekyll (Ruby-basiert)
Backend	Node.js / Express (Auth, API, Static Serving)
Datenbank	SQLite (Nutzerverwaltung, Bildzuweisung)
Templating	Liquid Templates
Styling	SCSS -> kompiliertes CSS
JS Libraries	jQuery, Poptrox (Lightbox), EXIF.js
Build-Tool	Gulp (SCSS kompilieren, JS minifizieren, Bilder resizen)
Hosting	UGREEN NAS (Docker) via Node.js Express
Containerisierung	Docker Multi-Stage (Jekyll Build + Node.js Backend)
Auto-Update	Watchtower (prueft alle 5 Min auf neue Images)
Fonts	FontAwesome, Google Fonts (Source Sans Pro)
Paketmanager	npm (Node), Bundler (Ruby)

Projektstruktur

Photography/
├── _config.yml          # Zentrale Konfiguration (Titel, Social Links, EXIF etc.)
├── _layouts/
│   └── default.html     # Basis-Layout (Head + Body + Scripts)
├── _includes/
│   ├── header.html      # <head> Bereich: CSS, Fonts
│   └── footer.html      # Script-Einbindungen (jQuery, Poptrox, EXIF, Main)
├── index.html           # Hauptseite: Header, Galerie-Grid, Footer/About, Login-Panel
├── admin.html           # Admin-Dashboard (Nutzerverwaltung, Bildzuweisung)
├── backend/
│   ├── server.js        # Express Backend (Auth, API, Static Files, Port 8090)
│   └── database.js      # SQLite Datenbank-Setup (Users, User-Images)
├── assets/
│   ├── css/             # Kompilierte CSS-Dateien (.min.css)
│   ├── sass/            # SCSS Quelldateien
│   │   ├── base/        # Reset, Typography, Page
│   │   ├── components/  # Buttons, Forms, Icons, Panels, Poptrox
│   │   ├── layout/      # Header, Footer, Main, Wrapper
│   │   └── libs/        # Breakpoints, Mixins, Vars, Functions
│   ├── js/              # JavaScript (jQuery, Poptrox, EXIF, Main, Admin)
│   ├── fonts/           # FontAwesome Fonts
│   └── webfonts/        # FA5 Webfonts
├── images/
│   ├── fulls/           # Vollaufloesung Bilder
│   └── thumbs/          # Thumbnails (512px)
├── gulpfile.mjs         # Build: SCSS->CSS, JS minify, Image resize
├── package.json         # Node Dependencies (Express, SQLite, JWT, bcrypt)
├── Gemfile              # Ruby Dependencies (jekyll)
├── Dockerfile           # Multi-Stage: Jekyll Build + Node.js Runtime
├── docker-compose.yml   # Container + Watchtower
├── entrypoint.sh        # Thumbnail-Generierung + Node.js Start
└── nginx.conf           # (Legacy, nicht mehr aktiv - Express dient statische Dateien)

Wie die Galerie funktioniert (Dynamisch)

Bilder hochladen: Fotos in Nextcloud-Ordner Websitebilder ablegen
Volume-Mount: Docker mountet den Nextcloud-Ordner als /app/public/images/fulls/ (read-only)
Thumbnails: entrypoint.sh generiert automatisch 512px Thumbnails via ImageMagick
Thumbnail-Check: Alle 60 Sekunden prueft der Container auf neue Bilder
Express API: /images/fulls/ liefert JSON-Liste der Bilddateien
JavaScript (main.js): Fetcht die JSON-Liste und baut dynamisch <article class="thumb"> Elemente
Poptrox-Lightbox: Klick oeffnet Vollbild + EXIF-Daten (clientseitig via exif.js)
Download-Button: In der Lightbox kann jedes Bild heruntergeladen werden

Zugriffslogik

Nicht eingeloggt / Admin: Alle Bilder sichtbar (oeffentliche Galerie)
Eingeloggter Nutzer: Nur zugewiesene Bilder sichtbar + Download

Nextcloud-Integration

Nextcloud-Pfad: /volume1/nextcloud/data/Tom/files/Websitebilder
Mount im Container: /app/public/images/fulls:ro
Thumbnails-Volume: Docker-Volume thumbs (persistent)
Datenbank-Volume: Docker-Volume database (persistent, SQLite)
Workflow: Bild in Nextcloud hochladen -> max. 60s warten -> Seite neu laden -> fertig

Architektur

Backend: Node.js/Express auf Port 8090
Auth: JWT-Token als httpOnly Cookie (7 Tage gueltig)
Datenbank: SQLite unter /app/data/database.sqlite
Passwort-Hashing: bcryptjs (10 Rounds)

Standard-Admin

Username: admin
Passwort: admin123 (SOFORT AENDERN nach erstem Login!)
Rolle: admin

API-Endpunkte

Endpunkt	Methode	Beschreibung
`/api/auth/login`	POST	Login (username, password)
`/api/auth/logout`	POST	Logout (Cookie loeschen)
`/api/auth/me`	GET	Aktueller User
`/api/admin/users`	GET/POST	Nutzer auflisten / erstellen
`/api/admin/users/:id`	DELETE	Nutzer loeschen
`/api/admin/assign`	GET/POST	Bildzuweisungen anzeigen / setzen
`/images/fulls/`	GET	Bilderliste (gefiltert nach User-Rolle)

Wichtige Konfiguration (_config.yml)

baseurl: URL der Website
title, subtitle, author: Seitentitel und Autor
header.title/subtitle: Header-Anzeige
footer.name/bio: Footer-Infos
social_urls: Links zu Social Media
exif: Welche EXIF-Tags angezeigt werden (Model, FNumber, ExposureTime, ISO)

Build-Befehle

Befehl	Aktion
`bundle install`	Ruby Dependencies installieren
`bundle exec jekyll serve`	Lokaler Dev-Server (nur Frontend)
`npm install`	Node Dependencies installieren
`gulp build`	SCSS kompilieren + JS minifizieren
`gulp resize`	Bilder zu fulls (1024px) + thumbs (512px)
`gulp`	Alles (build + resize)

Docker / NAS Hosting

NAS: UGREEN mit UGOS PRO
Port: 8090 (intern und extern)
Domain: tom.mischlabs.de (via Cloudflare Tunnel)

Docker-Dateien

Dockerfile - Multi-Stage: Ruby/Jekyll baut Site -> Node.js Express serviert alles
docker-compose.yml - Photography Container + Watchtower, Volumes fuer Bilder/Thumbs/DB
entrypoint.sh - Thumbnail-Generierung + Node.js Server-Start
.dockerignore - Haelt Build-Context klein (kein .git, node_modules etc.)

Docker-Befehle (auf NAS via SSH)

Befehl	Aktion
`sudo docker compose up -d`	Container starten
`sudo docker compose down`	Container stoppen
`sudo docker compose logs -f photography`	Logs anzeigen
`sudo docker compose pull && sudo docker compose up -d`	Manuelles Update

Deployment-Workflow (automatisch!)

Aenderungen lokal machen (Code, Design)
gulp build ausfuehren (JS + CSS minifizieren)
Git commit & push nach master
GitHub Actions baut automatisch Docker Image -> GHCR
Watchtower auf NAS erkennt neues Image (alle 5 Min)
Watchtower aktualisiert Container automatisch
Fertig - Website aktualisiert ohne SSH!

Anpassungs-Roadmap

Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch)
Social Media Links aktualisieren (Instagram: @Mischkomposition)
Sponsor-Bereich entfernen
Kontaktformular auf tom@mischlabs.de konfiguriert (Formsubmit.co)
Google Analytics vom Originalautor entfernt
Custom Domain: tom.mischlabs.de eingetragen
Nextcloud-Integration (Bilder aus Websitebilder-Ordner)
Dynamische Galerie (JS statt Jekyll-Loop)
Automatische Thumbnail-Generierung
Login-System mit JWT + SQLite
Admin-Dashboard (Nutzerverwaltung, Bildzuweisung)
Kunden-Portal (zugewiesene Bilder + Download)
Watchtower fuer automatische Updates
Footer Bio-Text schreiben (optional)
Farbschema/Design anpassen
Eigene Kategorien/Alben erstellen (Feature-Erweiterung)
Admin-Passwort aendern!

Letzte Aktualisierung: 2026-04-12

8.0 KiB Raw Blame History