Composants
Utilisez ces composants d’interface pour construire des surfaces interactives et structurées sur BHDicaire.com.
Chaque composant représente un élément d’interface nommé avec un rôle stable. Réutilisez les motifs existants autant que possible; créez-en de nouveaux seulement lorsque les différences fonctionnelles sont voulues et appelées à se répéter. Pour les balises Markdown destinées à la rédaction, consultez les Shortcodes.
Les comportements d’accordéon, de citation en exergue et d’onglets sont des shortcodes de rédaction — details, pullquote et tabs — pas dupliqués ici. Une page qui s’ouvre sur un encadré d’artefacts manquants décrit un composant spécifié mais pas encore construit; la page des artefacts manquants les suit tous.
Les pages de composants utilisent des métadonnées d’interface partagées pour que cette section puisse être groupée, filtrée et reliée à la référence des shortcodes avec le temps. Les champs canoniques sont interface_kind, interface_category, interface_status, interface_preview, interface_implementation, interface_consumers et related_interfaces. Chaque composant implémenté a une carte interface_implementation soutenue par le code source et un manifeste d’interface; les composants spécifiés attendent volontairement des preuves sources. Suivez la recette de migration des composants avant d’ajouter un manifeste.
Chaque composant implémenté a besoin d’une preuve observable. Utilisez component-preview pour un état autonome, y compris mode="inline" pour les petits utilitaires. Le vrai balisage ou un shortcode actif convient directement lorsqu’un cadre supplémentaire n’ajoute aucune information. Déclarez interface_preview: "page" lorsque l’habillage de la page courante rend le composant, "render-hook" lorsque le rendu Markdown produit l’exemple, ou "consumer" avec interface_preview_page lorsque de vraies données de page fournissent l’état. Une preuve dans une page consommatrice utilise component-relationship; une interface spécifiée utilise implementation-status jusqu’à son implémentation. N’inventez pas de maquette décorative.
Navigation
| Articles associés | Une liste de fin de page des pages étroitement liées, déclarée dans le front matter | |
| Barre latérale de documentation | La navigation générée dans le rail gauche de la section Documentation | |
| Fil d’Ariane | La piste de navigation qui montre où se situe une page dans la hiérarchie de la documentation | |
| Index d’ancrage | Une rangée de liens compacts avec libellé pour accéder aux sections répétées d’une page | |
| Lien compagnon | Un pointeur en début de page d’une note ciblée vers son article compagnon plus large | |
| Lien d’évitement | Le premier lien, masqué, qui permet aux utilisateurs du clavier de sauter l’en-tête pour atteindre le contenu principal | |
| Navigation | La navigation principale de l’en-tête, pilotée par les menus, avec sous-menus déroulants révélés au survol ou au focus | |
| Navigation de collection | Une liste de fin d’article qui relie les entrées d’une même collection éditoriale | |
| Pagination | Contrôles de pages pour les longues listes rendues par le serveur et les jeux de données côté client | |
| Retour en haut | Un lien de fragment fixe qui ramène la lectrice ou le lecteur en haut d’une longue page | |
| Sélecteur de langue | La paire EN / FR dans l’en-tête du site menant à la traduction de la page courante |
Action
| Bouton | Contrôles d’action uniques, stylés par des classes propres à chaque contexte qui partagent une même forme | |
| Copier en Markdown | Un bouton offert au lecteur qui copie la version Markdown canonique d’un article | |
| Groupes de boutons | Contrôles groupés pour des choix liés : grappes reliées et rangées d’actions espacées | |
| Liste déroulante | Un contrôle à liste dépliable pour choisir une seule option parmi un ensemble | |
| Recherche | La fenêtre modale Pagefind, déclenchée depuis l’en-tête, qui cherche dans le site courant depuis n’importe quelle page | |
| Sélecteur de thème | Un sélecteur de thème clair ou sombre qui démarre sur la préférence du système |
Contenu
| Annonce | Une bannière pleine largeur en haut de page pour les nouvelles ou les promotions | |
| Avatar | Une vignette circulaire qui identifie une personne dans les en-têtes, les cartes et les attributions | |
| Badge | La petite pastille non interactive nommant le type de ressource vers lequel un lien pointe | |
| Bloc de code | La visionneuse sombre qui encadre chaque bloc de code clôturé avec coloration syntaxique et bouton de copie | |
| Cartes | Blocs de contenu répétés et encadrés, rendus par les gabarits comme tuiles liées en grille | |
| État du site | Un indicateur opérationnel lié à l’état du site ou d’un domaine | |
| Infobulle | Un court texte contextuel affiché au survol, au focus ou au toucher | |
| Vidéo intégrée | Un aperçu accessible qui diffère le chargement d’une vidéo intégrée jusqu’à son activation |
Données
| Changelog | Historique des changements, alimenté par les données, pour les pages système | |
| Liste de descriptions | Une liste sémantique à deux colonnes pour des faits et valeurs compacts avec libellé | |
| Rangée de filtres | Une rangée compacte de contrôles actifs qui modifie le jeu de données visible | |
| Rangée de métadonnées | La bande sous le titre d’un article portant les dates, le temps de lecture et le bouton de copie | |
| Table de données | Données tabulaires structurées avec contrôles prévisibles |
Mise en page
| En-tête de page | Le bloc de titre standard : lien de section, titre, rangée de métadonnées et description optionnelle | |
| Pied de page | Le pied de page commun avec le droit d’auteur, les liens d’information propres à chaque site et les icônes sociales optionnelles |