Trilium Notes Branding
Updatefeste Branding- und Theme-Anpassungen fuer TriliumNext Shared Notes
## Ueber dieses Projekt
Dieses Repository enthaelt updatefeste Anpassungen fuer eine TriliumNext-Installation. Ziel ist, eigene Branding-Dateien, ein angepasstes Dark-Theme fuer Shared Notes, ein Hintergrundbild und kleine Komfortfunktionen per Docker-Volume einzubinden, ohne Dateien im Container-Image dauerhaft zu veraendern.
Die Dateien liegen bewusst unter `./data/custom`, damit alle persistenten Konfigurationen und Assets an einem Ort liegen.
## Funktionen
- eigenes Logo fuer Shared Notes
- eigenes Favicon fuer Shared Notes und die Hauptanwendung
- eigenes Login-Logo
- eigenes PWA/App-Icon
- Dark-only Theme fuer Shared Notes
- Hintergrundbild fuer Shared Notes
- Kopierbutton fuer Codebloecke
- Seitenleiste in Shared Notes standardmaessig eingeklappt
- Burger-Menue bleibt erhalten, damit freigegebene Verzeichnisse weiter navigierbar sind
- alle Anpassungen als read-only Docker-Bind-Mounts
## Ordnerstruktur
```text
.
โโโ data/
โ โโโ custom/
โ โโโ branding/
โ โ โโโ techniverse-favicon.ico
โ โ โโโ techniverse-icon-180.png
โ โ โโโ techniverse-icon-32.png
โ โ โโโ techniverse-icon-512.png
โ โ โโโ techniverse-icon-64.png
โ โ โโโ techniverse-logo-256.png
โ โ โโโ techniverse-logo-original.png
โ โ โโโ techniverse-logo.svg
โ โโโ share-theme/
โ โโโ custom-share-copy.js
โ โโโ custom-share-dark.css
โ โโโ page.ejs
โ โโโ share-background.jpg
โ โโโ share-background.jpg.old
โโโ docker-compose.yaml
```
## Docker-Mounts
Die relevanten Dateien werden in `docker-compose.yaml` read-only in den Container gemountet:
```yaml
volumes:
- ./data/trilium-data:/home/node/trilium-data
- ./data/custom/share-theme/page.ejs:/usr/src/app/share-theme/templates/page.ejs:ro
- ./data/custom/share-theme/custom-share-dark.css:/usr/src/app/share-theme/assets/custom-share-dark.css:ro
- ./data/custom/share-theme/custom-share-copy.js:/usr/src/app/share-theme/assets/custom-share-copy.js:ro
- ./data/custom/share-theme/share-background.jpg:/usr/src/app/share-theme/assets/share-background.jpg:ro
- ./data/custom/branding/techniverse-logo-256.png:/usr/src/app/share-theme/assets/techniverse-logo-256.png:ro
- ./data/custom/branding/techniverse-icon-64.png:/usr/src/app/share-theme/assets/techniverse-icon-64.png:ro
- ./data/custom/branding/techniverse-logo.svg:/usr/src/app/assets/images/icon-color.svg:ro
- ./data/custom/branding/techniverse-icon-180.png:/usr/src/app/assets/images/app-icons/ios/apple-touch-icon.png:ro
- ./data/custom/branding/techniverse-icon-512.png:/usr/src/app/public/assets/icon.png:ro
- ./data/custom/branding/techniverse-favicon.ico:/usr/src/app/public/favicon.ico:ro
- ./data/custom/branding/techniverse-favicon.ico:/usr/src/app/assets/icon.ico:ro
```
## Shared Notes Theme
Die Datei `data/custom/share-theme/custom-share-dark.css` ueberschreibt das Standard-Theme der TriliumNext Shared Notes. Der Lightmode wird dabei absichtlich nicht separat gepflegt:
- `html.theme-light` und `html.theme-dark` verwenden dieselben dunklen Variablen
- `color-scheme: dark` ist gesetzt
- die Theme-Auswahl wird per CSS ausgeblendet
Dadurch muss nur ein konsistenter Darkmode gepflegt werden.
## Hintergrundbild
Das Hintergrundbild liegt unter:
```text
data/custom/share-theme/share-background.jpg
```
Es wird in `custom-share-dark.css` referenziert:
```css
--mtp-share-background: url("share-background.jpg?v=20260605");
```
Wenn das Bild ausgetauscht wird, kann der Browser die alte Version noch im Cache haben. In dem Fall entweder hart neu laden oder den Cache-Buster in der CSS-Datei erhoehen, zum Beispiel:
```css
--mtp-share-background: url("share-background.jpg?v=20260605-2");
```
Ein Container-Neustart ist nur noetig, wenn der Dateiname oder der Docker-Mount geaendert wird.
## Kopierbutton fuer Codebloecke
Die Datei `data/custom/share-theme/custom-share-copy.js` fuegt in Shared Notes an alle echten Codebloecke einen Button hinzu.
Der Button:
- erscheint bei ``-Bloecken
- kopiert den Code in die Zwischenablage
- zeigt nach dem Klick kurz `Kopiert`
- nutzt die Clipboard API mit Fallback fuer aeltere Browser
## Seitenleiste und Burger-Menue
Die Seitenleiste startet fuer neue Besucher standardmaessig eingeklappt. Das Burger-Menue bleibt sichtbar und kann die Navigation weiterhin oeffnen.
Das ist wichtig fuer freigegebene Verzeichnisse, weil dort die Unterseiten ueber die Seitenleiste erreichbar sind.
Technisch wird beim ersten Aufruf gesetzt:
```js
localStorage.setItem("left-pane-collapsed", "true");
```
Wenn ein Besucher die Seitenleiste oeffnet, speichert Trilium diese Entscheidung wie gewohnt im Browser.
## Branding
Die Branding-Dateien liegen unter:
```text
data/custom/branding/
```
Verwendete Dateien:
- `techniverse-logo-256.png`: Logo in Shared Notes
- `techniverse-icon-64.png`: Favicon fuer Shared Notes
- `techniverse-logo.svg`: Ersatz fuer Triliums Login-Logo `icon-color.svg`
- `techniverse-icon-180.png`: Apple-Touch-Icon
- `techniverse-icon-512.png`: PWA/App-Icon
- `techniverse-icon-32.png`: kleine Icon-Variante, aktuell Reserve/Quelle fuer weitere Mounts
- `techniverse-favicon.ico`: Favicon der Hauptanwendung
- `techniverse-logo-original.png`: Originaldatei als Quelle
Die Datei `share-background.jpg.old` ist nur eine lokale Sicherung des vorherigen Hintergrundbildes und wird nicht in den Container gemountet.
## Installation
1. Repository auf den Docker-Host kopieren.
2. Trilium-Daten unter `data/trilium-data` bereitstellen oder vorhandene Daten dort belassen.
3. `docker-compose.yaml` bei Bedarf an Port, Netzwerk oder Containername anpassen.
4. Compose-Konfiguration pruefen:
```bash
docker compose config
```
5. Container starten oder neu erstellen:
```bash
docker compose up -d
```
## Update-Hinweise
Die Anpassungen sind updatefest, weil sie als read-only Volumes eingebunden werden. Beim Update des TriliumNext-Images bleiben die Dateien unter `data/custom` erhalten.
Wichtig ist nur `data/custom/share-theme/page.ejs`: Diese Datei basiert auf dem TriliumNext Share-Template und enthaelt zusaetzliche Includes fuer CSS, JavaScript, Logo und Favicon. Wenn TriliumNext das Share-Template groesser veraendert, sollte die neue Upstream-Version mit dieser Datei verglichen werden.
Beibehalten werden sollten:
- Include fuer `custom-share-dark.css`
- Include fuer `custom-share-copy.js`
- Branding-Variablen fuer Logo und Favicon
- Default-Collapse-Logik fuer die Seitenleiste
## Cache-Hinweise
Browser cachen CSS, Bilder und Favicons oft aggressiv. Wenn eine Aenderung nicht sichtbar ist:
- Seite hart neu laden
- Inkognito-Fenster testen
- Cache-Buster in CSS oder Template erhoehen
- bei geaenderten Mounts den Container neu erstellen
ยฉ Patrick Asmus ยท Techniverse Network ยท Lizenz