Ajouter des onglets pour les informations complémentaires

[YannisDelmas]

Onglet "ressources" pour lier des ressources pédagogiques ou pratiques, à la façon de Can I Use : 1 onglet "message", un onglet "références", un onglet "problèmes connus" et un onglet "feedback".

[enguerranws]

Je peux proposer quelque chose pour cette fonctionnalité, mais ça implique de revoir la structure des données passées à cssSelectorExplain() :

cssSelectorExplain({
    ...
    references: { 
        id: { // un objet pour structurer les 
                    "Références" : [ // les clés utilisées sont les titres des sections, utilisées dans la vue
                       // Liste de liens sous forme de tableau
                        "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity",
                        "https://www.w3.org/TR/CSS1/#cascading-order"
                    ],
                    "Problèmes connus": [
                        "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity",
                    ]
                },
    },
});

Ça met en avant plusieurs questions :

• la clé de l'objet, si utilisée comme titre de section dans la vue, implique que cette donnée est déjà définie comme étant en français. Ça ne me semble pas déconnant : les explications elles-mêmes sont en français aussi. Si on veut rendre ces données prêtes à être exploitées quelque soit la langue, il faut passer par un système intermédiaire qui va mapper les propriétés de cet objet, vers un label défini dans un fichier de traductions.
• en l'état, on ne pourrait afficher qu'une liste de liens. Si on prend exemple sur CanIUse, les liens sont accompagnés d'un titre. Il pourrait être bon alors de modifier la liste de liens afin de passer sur une liste d'objets :

  {
  url: "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity",
  titre: "Doc MDN concernant la spécificité en CSS",
  }

L'avantage de cette solution serait aussi de pouvoir, à l'avenir, rajouter des champs sans modifier le type de donnée.

Tu en penses quoi @YannisDelmas ?

[enguerranws]

En fait, je pense que je confonds les problèmes #7 et #8...

[YannisDelmas]

Tu peux peut-être déplacer ce commentaire dans le #7 ? Comme ça je commenterai au bon endroit. Il me semble qu'il faut bien distinguer les ressources pour la page et les ressources (plutôt pédagogiques, vu l'outil) pour chaque structure d'expression.

[enguerranws]

C'est fait. Selon ce qui est évoqué en #7, on aurait un système (par exemple un tooltip), pour préciser les références, problèmes connus, etc., liés à un élément (par exemple, <section>).

Mais, si j'ai bien compris le problème sur ce ticket, il faudrait mettre en place des onglets qui précisent les références, problèmes connus, etc, mais à l'échelle de la page (donc de l'expression renseignée, ex : * > section:hover article).

En quoi ça consisterait au final ? Une compilation des éléments déjà proposés en tooltip sur chaque élément ? (en reprenant l'exemple, ces onglets compileraient les infos proposées en tooltip pour section, :hover, article, * et on les afficherait dans les onglets de page de page)

[YannisDelmas]

Pour les onglets de page, j'imaginais des informations liées aux sélecteurs CSS en général : les recommandations, le MDN, d'autres ressources pédagogiques etc. Mais, effectivement, tu suggères quelque chose d'intéressant : on pourrait ajouter des éléments spécifiques à l'expression renseignée, par exemple, oui, en collectant les références évoquées dans l'explication.

[enguerranws]

À voir : je pense que c'est à rediscuter après avoir traité le #7, s'il y a vraiment une utilité ?