215 lines
7.7 KiB
Markdown
215 lines
7.7 KiB
Markdown
<p align="center">
|
|
<a href="https://techniverse.net">
|
|
<img src="https://assets.techniverse.net/f1/git/graphics/repo-techniverse-logo.png" alt="Techniverse Community" height="70" />
|
|
</a>
|
|
</p>
|
|
|
|
<h1 align="center">Trilium Notes Branding</h1>
|
|
|
|
<h4 align="center">
|
|
Updatefeste Branding- und Theme-Anpassungen fuer TriliumNext Shared Notes
|
|
</h4>
|
|
|
|
<h6 align="center">
|
|
<a href="https://www.cleveradmin.de">🏰 Website</a>
|
|
·
|
|
<a href="https://techniverse.net">📰 Community</a>
|
|
·
|
|
<a href="https://social.techniverse.net/@donnerwolke">🐘 Mastodon</a>
|
|
·
|
|
<a href="https://matrix.to/#/#support:techniverse.net">💬 Support</a>
|
|
</h6>
|
|
<br><br>
|
|
|
|
|
|
## 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
|
|
|
|
<br><br>
|
|
<p align="center">
|
|
<img src="https://assets.techniverse.net/f1/git/graphics/gray0-catonline.svg" alt="">
|
|
</p>
|
|
|
|
<p align="center">
|
|
<sub>
|
|
© Patrick Asmus · Techniverse Network · <a href="./LICENSE">Lizenz</a>
|
|
</sub>
|
|
</p>
|