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