triliumnotes-branding/README.md

Trilium Notes Branding

Updatefeste Branding- und Theme-Anpassungen fuer TriliumNext Shared Notes

🏰 Website · 📰 Community · 🐘 Mastodon · 💬 Support

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

.
├── 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:

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:

data/custom/share-theme/share-background.jpg

Es wird in custom-share-dark.css referenziert:

--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:

--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 <pre><code>-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:

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:

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:

docker compose config

5. Container starten oder neu erstellen:

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}