ab6b2bb8fe
- Galerie laedt Bilder dynamisch per JavaScript statt Jekyll-Loop - nginx autoindex liefert JSON-Bilderliste - Nextcloud-Ordner (Websitebilder) wird als Volume gemountet - ImageMagick generiert automatisch 512px Thumbnails - Hintergrund-Check alle 60s fuer neue Bilder - Neuer entrypoint.sh fuer Thumbnail-Generierung + nginx Start Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
145 lines
5.9 KiB
Markdown
145 lines
5.9 KiB
Markdown
# 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) |
|
|
| 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 nginx |
|
|
| Containerisierung | Docker Multi-Stage (Jekyll Build + nginx) |
|
|
| 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, Google Analytics
|
|
│ └── footer.html # Script-Einbindungen (jQuery, Poptrox, EXIF, Main)
|
|
├── index.html # Hauptseite: Header, Galerie-Grid, Footer/About
|
|
├── 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)
|
|
│ ├── 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
|
|
├── Gemfile # Ruby Dependencies (jekyll)
|
|
└── CNAME # Custom Domain Config
|
|
```
|
|
|
|
## Wie die Galerie funktioniert (Dynamisch)
|
|
|
|
1. **Bilder hochladen**: Fotos in Nextcloud-Ordner `Websitebilder` ablegen
|
|
2. **Volume-Mount**: Docker mountet den Nextcloud-Ordner als `/images/fulls/` (read-only)
|
|
3. **Thumbnails**: `entrypoint.sh` generiert automatisch 512px Thumbnails via ImageMagick
|
|
4. **Thumbnail-Check**: Alle 60 Sekunden prueft der Container auf neue Bilder
|
|
5. **nginx autoindex**: Liefert JSON-Liste aller Dateien in `/images/fulls/`
|
|
6. **JavaScript (main.js)**: Fetcht die JSON-Liste und baut dynamisch `<article class="thumb">` Elemente
|
|
7. **Poptrox-Lightbox**: Klick oeffnet Vollbild + EXIF-Daten (clientseitig via exif.js)
|
|
|
|
### Nextcloud-Integration
|
|
- **Nextcloud-Pfad**: `/volume1/nextcloud/data/Tom/files/Websitebilder`
|
|
- **Mount im Container**: `/usr/share/nginx/html/images/fulls:ro`
|
|
- **Thumbnails-Volume**: Docker-Volume `thumbs` (persistent)
|
|
- **Workflow**: Bild in Nextcloud hochladen -> max. 60s warten -> Seite neu laden -> fertig
|
|
|
|
## Wichtige Konfiguration (_config.yml)
|
|
|
|
- `baseurl`: URL der Website (leer fuer lokal)
|
|
- `title`, `subtitle`, `author`: Seitentitel und Autor
|
|
- `header.title/subtitle`: Header-Anzeige
|
|
- `footer.name/bio/github`: Footer-Infos
|
|
- `social_urls`: Links zu Social Media
|
|
- `exif`: Welche EXIF-Tags angezeigt werden (Model, FNumber, ExposureTime, ISO)
|
|
- `google_analytics`: Tracking-ID
|
|
|
|
## Build-Befehle
|
|
|
|
| Befehl | Aktion |
|
|
|---|---|
|
|
| `bundle install` | Ruby Dependencies installieren |
|
|
| `bundle exec jekyll serve` | Lokaler Dev-Server |
|
|
| `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**: 8080 (Port 80 ist belegt)
|
|
- **Zugriff**: `http://NAS-IP:8080` -> spaeter `https://tom.mischlabs.de`
|
|
- **Domain**: tom.mischlabs.de (Reverse Proxy auf NAS einrichten)
|
|
|
|
### Docker-Dateien
|
|
- `Dockerfile` - Multi-Stage: Ruby/Jekyll baut Site -> nginx serviert statische Dateien
|
|
- `docker-compose.yml` - Container-Definition, Port 8080:80, Nextcloud-Volume, auto-restart
|
|
- `entrypoint.sh` - Thumbnail-Generierung + periodischer Check (alle 60s)
|
|
- `nginx.conf` - Webserver-Config mit Caching und Sicherheit
|
|
- `.dockerignore` - Haelt Build-Context klein (kein .git, node_modules etc.)
|
|
|
|
### Docker-Befehle
|
|
| Befehl | Aktion |
|
|
|---|---|
|
|
| `docker compose up -d --build` | Container bauen und starten |
|
|
| `docker compose down` | Container stoppen |
|
|
| `docker compose logs -f` | Logs anzeigen |
|
|
| `docker compose up -d --build --force-recreate` | Neu bauen nach Aenderungen |
|
|
|
|
### Deployment-Workflow
|
|
1. Aenderungen lokal machen (Bilder, Config, Design)
|
|
2. Git commit & push
|
|
3. Auf NAS: `git pull && docker compose up -d --build`
|
|
4. Fertig - Website aktualisiert
|
|
|
|
## Anpassungs-Roadmap (TODO - mit Besitzer besprechen)
|
|
|
|
- [x] Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch)
|
|
- [x] Social Media Links aktualisieren (Instagram: @Mischkomposition)
|
|
- [x] Sponsor-Bereich entfernen
|
|
- [x] Kontaktformular auf tom@mischlabs.de konfiguriert
|
|
- [x] Google Analytics vom Originalautor entfernt
|
|
- [x] Custom Domain: tom.mischlabs.de eingetragen
|
|
- [x] Nextcloud-Integration (Bilder aus Websitebilder-Ordner)
|
|
- [x] Dynamische Galerie (JS statt Jekyll-Loop)
|
|
- [x] Automatische Thumbnail-Generierung
|
|
- [ ] Footer Bio-Text schreiben (optional)
|
|
- [ ] Farbschema/Design anpassen
|
|
- [ ] Eigene Kategorien/Alben erstellen (Feature-Erweiterung)
|
|
|
|
---
|
|
|
|
*Letzte Aktualisierung: 2026-04-12*
|