Différences

Ci-dessous, les différences entre deux révisions de la page.

--- services:mobilizon.chapril.org:personnalisation [2026/04/11 17:40] – supprimée - modification externe (Date inconnue) 127.0.0.1
+++ services:mobilizon.chapril.org:personnalisation [2026/04/11 17:40] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. pitchum
@@ Ligne 1: / Ligne 1: @@
+====== Personnaliser Mobilizon  ======
+Voir aussi:[[services:mobilizon.chapril.org|le service Mobilizon]]
+===== Avancement =====
+==== Choses faites: ====
+  * une favicon chapril
+  * un logo dans la barre de menu
+  * une palette de couleur incorporant le bleu Chapril: **rgb(0,81,132)**, alias **#ff5e00**
+  * l'image par défaut des évènements reprend une illustration de David Revoy
+  * quelques marges différentes
+  * ajout d'une liste de services en ligne dans la page de documents pour les groupes
+  * la barre de menus du chapril
+==== Prévues: ====
+- rien de plus pour le moment que ce qui est en production sur https://mobilizon.chapril.org
+===== Elements de personnalisation =====
+====== Via l'administration web ======
+Changer le texte de présentation de l'instance:
+https://mobilizon.chapril.org/settings/admin/settings
+nom de l'instance, slogan, description courte, description longue, lien vers les CGU du chapril.
+https://www.chapril.org/cgu.html
+ne pas oublier d'enregistrer.
+s'abonner aux autres instances le plus tôt possible pour profiter de la fédération.
+liste des autres instances: https://instances.joinmobilizon.org
+====== Comment personnaliser ======
+===== changer les images =====
+Les images par défaut des évènements créé sans avoir uploadé d'affiche ont une image par défaut que l'on peut changer.
+Pareillement pour le favicon et le logo dans la barre de navigation.
+Dans les sources du projet,
+certaines images ont été remplacées dans le dossier **js/public/img**
+Pour les palettes de couleur, les variables scss ont été modifiées dans **js/src/variables.scss**
+les espacements ont été modifiés dans **js/src/common.scss**
+Pour les liens dans le composant de Ressources
+**js/src/views/Resources/ResourceFolder.vue**
+une simple liste de liens à été ajoutée.
+===== Personnaliser le code source =====
+Mettre en place un environnement de développement local permet de personnaliser au mieux sa version de Mobilizon.
+Pour cela il faut comprendre sa stack technique, constituée d'un côté d'un projet Phoenix écrit en Elixir / Erlang, avec une base de données Postgresql, une interface en GraphQL qui communique avec la lib Absinthe, et de l'autre côté pour le front end: une app en vueJS version 3 (dans le dossier js), utilisant Appollo pour parler avec GraphQL.
+Le code du front end est majoritairement en typescript et les feuilles de style en SCSS.
+Pour personnaliser les couleurs, il faut enlever les définitions de couleurs dans les composants vue pour éviter les surcharges indésirées, et modifier les couleurs dans les fichiers js/src/variables.sccss et faire référence à ces variables ailleurs dans les composants vue si nécessaire.
+Le gros du style est fourni par la lib CSS Bulma ( https://www.bulma.io ) et agrémenté de quelques retouches dans le fichier common.scss
+Pour avoir son instance fonctionnant localement il faut installer les dépendances de dev du back (les dépendances Elixir) et du front (les dépendances NPM), configurer l'accès à la base de données postgresql dans le fichier de config .exs, effectuer les migrations de la base avec Ecto (mix ecto.migrate) puis lancer la commande.
+**mix phx.server**
+ce qui permet de lancer un serveur sur localhost:8000 qui se rafraîchira à l'enregistrement de vos modifications grâce à des filewatcher inode.
+===== Dépot de sources =====
+On a une version personnalisée de Mobilizon, mise à disposition sur la forge
+https://forge.april.org/Chapril/mobilizon.chapril.org
+Sa branche **master** est notre version personnalisée. Nous la rebasons quand nécessaire par dessus la branche master de
+l'upstream, fournie par framagit.
+===== Contribuer au code =====
+Pour proposer du code, il convient de créer une branche, faire ses commits, vérifier que les tests passent, faire une
+merge request avec au moins une autre personne révisant le code à fusionner, et si tout passe bien, fusionner dans la
+branche master.
+En cas de question concernant le logiciel libre Mobilizon, se référer en premier lieu à la documentation officielle du
+dépot upstream.
+https://docs.joinMobilizon.org/