Personnaliser Joplin server

L’habitude de prendre des notes en Markdown s’est installée chez moi. J’utilise quotidiennement l’excellent Joplin qui m’a séduit par ses fonctionnalités simples et efficaces. On peut même y faire des diagrammes avec mermaid 🙂

Parmi ses nombreuses qualités, j’apprécie particulièrement la possibilité de synchroniser mes notes directement depuis l’application, sans avoir à passer par une application tierce. On peut également se passer des GAFAM en utilisant des solutions telles que WebDAV, Nextcloud… et maintenant Joplin Cloud et Joplin Server.

Joplin Server est la version auto-hébergée de Joplin Cloud. En plus de permettre la synchronisation des notes entre plusieurs appareils et de disposer d’une copie en ligne, ces deux solutions ouvrent la voie à la collaboration et au partage de notes via une URL de partage et un rendu HTML.

Installation de Joplin server via Docker Compose

La solution qui me semble la plus simple pour faire tourner la solution sur votre serveur est de passer via Docker et tout particulièrement Docker Compose.

Ce n’est pas le seul, mais l’excellent tutoriel d’installation de Vultr – How to host Joplin server devrait vous guider vers le succès 😊

Si vous n’êtes pas familier avec ce type d’activité, voici trois astuces bonus :

Je ne peux que vous conseiller de configurer l’envoi des emails ce qui permettra de valider les comptes des personnes que vous pourriez ajouter à votre instance. Les éléments se trouve ici dans le dockerfile du tutoriel.
Vous devrez probablement utiliser un gestionnaire de reverse proxy tel que Nginx Reverse Proxy Manager pour gérer facilement le domaine ou sous-domaine pour votre installation.
Si votre installation Docker n’est pas sur le même serveur que votre proxy, vous devrez générer un certificat sur chacune des machines.

Personnalisation de Joplin server

Joplin Server est génial, mais vous pourriez avoir envie de personnaliser l’icône en haut des pages de partage, la feuille de style CSS, le nom du service, etc. Suivez le guide pour le faire.

⏲️ Modifier la timezone de Joplin server

Par défaut la timezone du conteneur est l’heure/date UTC. J’ai opté pour celle de paris en rajoutant un argument dans le docker-compose.yml

    environment:
      - TZ=Europe/Paris

Il faut intégrer la ligne dans le service « APP » à la suite des éléments de configuration de POSTGRES et des emails.

Modifier les éléments de rendus lors du partage d’une note

Pour y parvenir, j’utilise les volumes docker. Les volumes sont des mécanismes permettant de partager des données entre le système hôte (le serveur) et les conteneurs. Quand un conteneur est arrêté l’ensemble des données non contenus dans l’image disparaissent. Les volumes permettre de les rendre persistantes.

L’utilisation de volumes permet de configurer et de personnaliser les conteneurs Docker de manière flexible. Vous pouvez, par exemple, monter des fichiers de configuration du système hôte dans le conteneur, ce qui facilite les ajustements et les modifications sans avoir à reconstruire l’image du conteneur.

Dans mon cas, j’ai créé un répertoire ./joplin sur mon serveur, dans lequel je stock les différents éléments que je vais vouloir intégrer au conteneur. Pour chaque élément à modifier je vais inscrire une entrée dans le docker-compose.yml

app:
  image: joplin/server:latest
  container_name: joplin-server
volumes:
    - ./public/XXX:la_destination/sur_le_conteneur

🦄 Modifier le logo de Joplin server

Votre cible est un fichier png de 512*512px qui se nomme Logo.png. Et on oublie pas le « L » majuscule ! Voici sont emplacement :

home/joplin/packages/server/public/images/Logo.png

📌 Ajouter une Favicon à Joplin server

Votre Favicon se trouve ici :

/home/joplin/packages/server/public/favicon.ico

💫 Modifier la feuille de style Css de Joplin server

C’est un peu plus « compliqué » comme opération. En effet, ce qui semble être le plus indiqué est d’insérer vos « lignes de style » dans le fichier note.css qui est la dernière feuille de style du <Head>. Le fichier se trouve ici :

home/joplin/packages/server/public/css/items/note.css

Cependant lors de la création de la page, Joplin server importe du css depuis un script JS qui suit l’import de la feuille CSS. On se retrouve avec des paramètres CSS « inline » qui arrivant en dernier, prennent le dessus sur notre configuration. On se retrouve en particulier avec des conflits sur les <H2> et les <H3>. Pour y remédier j’ai entrepris des modification dans noteStyle.js avec de retirer les configuration de balise qui me posaient problème. Le fichier se trouve ici :

/home/joplin/packages/renderer/noteStyle.js

🔎 Vous cherchez d’autres choses à personnaliser sur Joplin server ?

Une solution pour trouver où se cache le morceau de code à cibler dans le conteneur est de « rentrer » dans le conteneur en fonctionnement avec :

docker exec -it ID/Nom_conteur bash

Puis de lancer une investigation en utilisant la fonction de recherche pour retrouver l’élément qui vous intéresse :

grep -rnw ./ -e "1.1em"

413 Request Entity Too Large

Par défaut Nginx limite la taille des fichiers uploadés à 1MB. Si vos fichiers intégrés aux notes dépassent cette taille il faudra modifier la configuration de votre serveur pour augmenter cette taille en utilisant :

client_max_body_size 100M;

Source : https://docs.rackspace.com/support/how-to/limit-file-upload-size-in-nginx/

Supporter Joplin

Joplin est un logiciel libre sous licence AGPL-3.0. Vous pouvez soutenir son créateur Laurent Cozic sur patreon ou en souscrivant un abonnement Joplin Cloud.