Initial

2026-06-05 16:28:13 +02:00
parent 7f3debcd6c
commit 4bdc7ef496
18 changed files with 1028 additions and 4 deletions
--- a/README.md
+++ b/README.md
@@ -4,10 +4,10 @@
  </a>
 </p>

-<h1 align="center">Name des Projekts</h1>
+<h1 align="center">Trilium Notes Branding</h1>

 <h4 align="center">
-  Kurzbeschreibung des Projekts/Anwendung, um die es geht
+  Updatefeste Branding- und Theme-Anpassungen fuer TriliumNext Shared Notes
 </h4>

 <h6 align="center">
@@ -22,7 +22,189 @@
 <br><br>


-CONTENT BEREICH
+## 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 `<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:
+
+```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
+
+## Dokumentation
+
+Die Projektdokumentation liegt bewusst zentral in dieser `README.md`. Zusaetzliche README-Dateien in Unterordnern wurden entfernt, damit spaeter beim Veroeffentlichen des Repositories keine widerspruechlichen oder veralteten Hinweise entstehen.


 <br><br>
@@ -34,4 +216,4 @@ CONTENT BEREICH
  <sub>
     © Patrick Asmus · Techniverse Network · <a href="./LICENSE">Lizenz</a>
  </sub>
-</p>
+</p>