S'assurer qu'on peut faire évoluer l'UI avec du hot reload

[laem]

The problem

641 introduces changes in the local development workflow. In particular, when editing a <Trans i18nKey="..."> component's content, the modification isn't reflected in the local preview -- a yarn generate:ui must be executed to achieve this.

• Temporary solution for french hot reloading: https://github.com/datagir/nosgestesclimat-site/issues/702#issuecomment-1293273319

List of related tasks

• [ ] Restore hot reloading when updating french content.
• [ ] Use markdown as much as possible (except for simple UI components which doesn't needs to specify a i18n key, such as buttons.).
• [ ] Add documentation for conflict management when modifying translated texts.

Orignal comment in french

> L'étape de traduction `yarn run generate:ui` casse le hot reload quand on itère sur des textes de l'interface. > > Il faut qu'on trouve un moyen de pouvoir itérer dans la langue principale du site. > > - [ ] rétablir le hot reload pour le contenu français

[laem]

En guise de solution partielle, je pense qu'il faut qu'on utilise un maximum le markdown, qui évite les problèmes de <0> qui devient <1> et casse la traduction.

Dans cette capture :

• j'ai d'abord corrigé la traduction anglaise, de "In concrete terms" vers "Practically speaking"
• la maj du texte en français déclenche une retraduction anglaise, qui écrase mes modifs
• c'est du coup compliqué de s'y retrouver, surtout que c'est le travail d'un dev et que le dev n'a pas forcément connaissance du langage dont il est question ici, donc ne peut pas trancher le conflit

@EmileRolley un point pas facile

• [ ] mettre les contenus (au-delà des boutons d'UI simples) en markdown
• [ ] documenter un peu la gestion des conflits

[laem]

• [ ] globalement, la PR trad nous fait perdre le hot reload en général : même un changement de CSS fait recharger toute l'app, ce qui avec le parsing du modèle rend les choses bien moins fluides

[EmileRolley]

Hot reloading quick fix

A first solution to enable hot reloading on <Trans i18nKey="..."> components changes is to use a watching daemon to run yarn generate:ui on file changes.

For example with nodemon you'll just need to run:

npx nodemon --watch source/ --exec "yarn generate:ui"

[EmileRolley]

• [ ] globalement, la PR trad nous fait perdre le hot reload en général : même un changement de CSS fait recharger toute l'app, ce qui avec le parsing du modèle rend les choses bien moins fluides

I don't get why the #641 modifies the behavior of CSS editing?

[laem]

Also, I believe translating whole blocks of text instead of small fragments makes for better deepl translations :)