Passer au contenu principal

Les Timelines

WIP / les timelines c'est compliqué !

accentsPour l'instant, l'édition de timelines est réservée au staff wiki

Avant de commencer

  • Les Timelines utilisent Vega : une grammaire qui permet de décrire une visualisation en JSON pour qu'elle s'affiche en image directement dans un navigateur.
  • Pour intégrer cette fonction à Bookstack, il faut passer par une intégration en Javascript. Pour que les balises HTML restent intactes, il faut obligatoirement utiliser l'éditeur Markdown de Bookstack.
  • Le code de la Timeline doit donc être stocké dans une variable JS, ce qui implique quelques contraintes, notamment sur l'encodage des caractères, des smileys, et interdit le double saut de ligne.
  • Toute la description de la timeline est stockée dans la variable timelineSpec sous forme d'un dictionnaire. Pour modifier une timeline, il ne faut modifier que le contenu de cette variable (entre l'accolade ouvrante ligne 4 et fermante ligne 349 sur le modèle). En aucun cas il ne faut modifier tout ce qu'il y a autour sous peine de tout péter.
Encodage des caractères spéciaux

Table des caractères spéciaux courants et leur équivalent à inscrire dans le code des timeline.

LettreEncodage
 Lettre Encodage
é \xE9


à \xE0
è \xE8


ù \xF9
â \xE2


ê \xEA
î \xEE


ô \xF4
û \xF9


ä \xE4
ë \xEB


ï \xEF
ö \xF6


ü \xFC


Pour une liste exhaustive : https://outils-javascript.aliasdmc.fr/encodage-caracteres-accentues/encode-caractere-00E9-html-css-js-autre.html

Correspondance champ "statut" <> Emoji

tableInscrire directement des emojis dans le code des timelines est assez compliqué, le champ statut /de chaque membre contient donc un mot clef qui est associé à un emoji au moment du rendu de la timeline.

Statut Emoji
décès ⚰️
départ ✈️
consenti  🚪 
dissolution ❌
démantèlement  👮 
trahison 💢
renvoi  📢 

jsonSi dansle jsmembre dansn'a html

éditeur markdown

format date y m d

remplacer contenu de timelineSpec de { à }

pas de doublestatut, retouril faut laisser ce champ à la lignevaleur null.

Format des dates

rangerToutes les membresdates parutilisées ordre chrono

editeur markdown

pas toucher les balises HTML

juste modifier / remplacerpour le contenurendu entresont lesau accoladesformat ouvrantesYYYY-MM-DD. L4Par etexemple L3492022-02-03 correspond au 3 Février 2022.
Si un champ de date est mis à la valeur null, il sera converti à la date du jour lors du rendu (sur le modèle, 7ème, lignecorrespond en partantgénéral à un membre actif de la fin)

statut null

date de fin nulll'entité).

Créer une nouvelle Timeline

  • Etagère CaliRP > Livre Timelines
  • Nouvelle page
  • Modification du brouillon > Basculer vers l'éditeur Markdown (contenu nettoyé) > Continuer
  • Modèles > [Modèle de Timeline]
  • Remplacer les placeholders dans value de membre, chef, et events
  • Adapter les couleurs des rect de chef et membre aux couleurs de l'entité (champ fill.value, code hexadécimal)

Intégrer une Timeline dans une page

  • sur la page de la timeline, double-cliquer sur l'image pour faire apparaitre la popup d'intégration

  • image.png

  • copier le lien (dans le cas de la Timeline modèle : https://wiki.calirp.fr/link/56#bkmrk-timeline)
  • garder uniquement l'identifiant de la page et le marque-page (ici 56#bkmrk-timeline)
  • et les insérer entre double accolades dans la page associée à cette timeline
    {{56#bkmrk-timeline}}
  • la partie après le # devrait toujours être "bkmrk-timeline", il n'y a que l'identifiant de la page qui change d'une timeline à une autre.

Mettre à jour une Timeline

Même si il est tout à fait possible de mettre à jour une Timeline directement dans l'éditeur Bookstack, je conseille fortement d'utiliser un éditeur externe avec un minimum de compréhension syntaxique pour rendre le code plus lisible (notepad++ configuré sur json, ou votre IDE préféré) et de vérifier dans l'éditeur Vega en ligne que le résultat des modifications correspond à ce que vous souhaitez faire : https://vega.github.io/editor/#/edited

l'escape des caractères spéciaux nécessaire sur le Wiki ne fonctionne pas dans l'éditeur en ligne, désolé :'(

ArrivéeAjout d'un membre

 

Départ d'un membre

 

Nouvel évènement marquant

 

Nouveau chef ou changement de chef

 

Ajout d'un échelon hiérarchique

 

Retour en haut