Un mot, plusieurs portes

Le cas qui a donné la règle

Dans la grille des semaines du site d'un cours, la case « Semaine 3 - Les DAO » affichait huit puces, dont deux qui se ressemblaient beaucoup :

Services web de données
Chercher un service (outil)
Recettes de DAO
Recevoir et parser du JSON
Recevoir et parser du XML
Exemple JSON
RSS
Liens en cours

Six lignes pour une case de 203 pixels, et le mot « parser » écrit deux fois. La question posée était simple : « si on dit juste Parser JSON et Parser XML, est-ce que les deux rentrent sur une ligne ? » La mesure a répondu non, à 14 pixels près. D'où l'idée : une pilule PARSER avec deux sous-pilules JSON et XML.

Le mécanisme

Sur les accueils calqués sur le gabarit intelligence.projet.autos (tableau modules en JavaScript, grille .semaines, puces .semaine-lien), le tableau accepte une entrée groupée à côté des entrées simples.

Les données

{ texte: "Parser", sousLiens: [
    { texte: "JSON", adresse: "diapo/recevoir-et-parser-du-json/" },
    { texte: "XML",  adresse: "diapo/recevoir-et-parser-du-xml/" }
] },

Le rendu

Dans la fonction qui construit les puces, le cas groupé se traite avant le cas simple :

semaine.liens.forEach(function ajouterLien(lien) {
    if (lien.sousLiens && lien.sousLiens.length > 0) {
        const boiteGroupe = document.createElement("span");
        boiteGroupe.className = "semaine-groupe";
        const etiquette = document.createElement("span");
        etiquette.className = "semaine-groupe-etiquette";
        etiquette.textContent = lien.texte;
        boiteGroupe.appendChild(etiquette);
        lien.sousLiens.forEach(function ajouterSousLien(sousLien) {
            const sousLienElement = document.createElement("a");
            sousLienElement.className = "semaine-sous-lien";
            sousLienElement.href = sousLien.adresse;
            sousLienElement.textContent = sousLien.texte;
            boiteGroupe.appendChild(sousLienElement);
        });
        boiteLiens.appendChild(boiteGroupe);
        return;
    }
    const lienElement = document.createElement("a");
    lienElement.className = "semaine-lien";
    lienElement.href = lien.adresse;
    lienElement.textContent = lien.texte;
    boiteLiens.appendChild(lienElement);
});

Le style

La pilule porteuse reprend le fond des puces ordinaires, les sous-pilules passent en fond blanc, un cran plus petites, et s'allument au survol comme les puces. Les couleurs ci-dessous sont celles du thème chantier du site d'origine : les remplacer par celles du site d'accueil.

.semaine-groupe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fdf1e5;
    border: 1px solid #efc296;
    border-radius: 999px;
    padding: 2px 5px 2px 10px;
}

.semaine-groupe-etiquette {
    color: #b25c00;
    font-size: 0.74em;
    font-weight: 600;
    line-height: 1.3;
}

.semaine-sous-lien {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #efc296;
    border-radius: 999px;
    padding: 1px 8px;
    color: #b25c00;
    text-decoration: none;
    font-size: 0.70em;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.semaine-sous-lien:hover {
    background: #E8710A;
    border-color: #E8710A;
    color: #ffffff;
}

Mesurer, pas estimer

Le script /home/n/ECOLE/ARCHI/mesurer-libelles-semaine.sh prend des couples "ancien=nouveau", les applique dans une copie temporaire de l'accueil, injecte un petit script qui écrit le verdict dans le <title>, et lit ce titre avec google-chrome --headless --dump-dom pour cinq largeurs d'écran.

cd /home/n/ECOLE/ARCHI
./mesurer-libelles-semaine.sh "Parser du JSON=Parser JSON" "Parser du XML=Parser XML"
# MESURE largeurEcran=1280 largeurCase=203 largeurDisponible=173 |
#   Parser JSON haut=818 large=93 | Parser XML haut=846 large=89 | memeLigne=false

Deux puces sont sur la même ligne quand leur haut= (le offsetTop) est identique. La copie temporaire vit dans site/ le temps de la mesure pour garder les chemins relatifs, puis part dans le scratchpad.

Les chiffres du gabarit

Quand s'en servir, et quand s'abstenir

Dès qu'un même mot ouvre deux ou trois portes : Parser (JSON) (XML), Observeur (observé) (observateur), Tests (unitaires) (intégration), Déployer (Apache) (Docker).

Où c'est transposable

Fichiers de référence : /home/n/ECOLE/ARCHI/ajouter-pilule-groupee-parser.py (le correctif appliqué, idempotent, sert de modèle) et /home/n/ECOLE/ARCHI/mesurer-libelles-semaine.sh (la mesure).