Annexe — Légendes visuelles (badges, attributs, champs)

1) Badges : signification et usages

Badge (preset)	Emoji	Signifie	Quand l’utiliser
`new`	🆕	Nouveau	Mise en avant d’un ajout récent (quelques semaines)
`updated`	✚	Mis à jour	Nouvelle version d’un document connu
`star`	⭐	Coup de cœur	Incontournable / point d’entrée
`beta`	🧪	Bêta	Document en test, susceptible d’évoluer
`free`	✅	Gratuit	Accès libre
`oss`	🐧	Libre / OSS	Projet open source
`edu`	📚	Pédagogie	Tutoriel, support de cours
`ai`	🪄	IA	Contenu lié à l’IA / automatisation
`tip`	💡	Astuce	Conseil pratique
`pdf`	📄	Type PDF	Indiquer visuellement le format
`image`	🖼️	Type image	—
`video`	▶️	Type vidéo	—
`audio`	🔊	Type audio	—
`zip`	🗜️	Archive	—
`md`	📝	Texte/MD	—
`script`	🧩	Script	—

Familles de style : MINT → new, updated, free, oss, pdf, image, video, audio, zip, md · LILAC → star, beta, edu, ai, tip, script.

Badge personnalisé (couleur libre) :

"badges": [{ "variant": "custom", "label": "Premium", "emoji": "💎", "color": "#ff0077" }]

2) Légende des attributs d’interface (HTML/CSS)

Sélecteur / Attribut	Rôle	Exemple
`.card`	Carte d’un item	`<article class="card">…</article>`
`.media`	Zone vignette	`<div class="media"><img class="thumb" …></div>`
`.badges`	Conteneur de badges	`<div class="badges"><span class="badge" …></span></div>`
`.badge` + `data-v`	Capsule de badge (preset)	`<span class="badge" data-v="star">⭐ Coup de cœur</span>`
`data-color`	Couleur libre du badge	`data-color="#10b981"`
`.tags`	Liste des tags	`<ul class="tags">…</ul>`
`.btn` + `data-act`	Bouton d’action	`data-act="preview\|download\|open\|info\|run"`
`.chip`	Filtre (type/tag)	`<button class="chip" aria-pressed="false">PDF</button>`
`#search`	Recherche	`<input id="search" …>`
`<dialog id="preview">`	Modale d’aperçu	`<dialog id="preview">…</dialog>`

3) Champs `manifest.json` (vue non-technique)

Clé	Ce que c’est	Exemple
`title`	Titre lisible	`"Brochure 2025"`
`description`	Phrase d’explication	`"Présentation de l’association"`
`url`	Chemin vers le fichier/page	`"./pdfs/brochure.pdf"`
`type`	Famille (pdf, image, video, audio, zip, md, script, html)	`"pdf"`
`tags`	Mots-clés pour filtrer	`["atelier","budget"]`
`created`	Date d’ajout (AAAA-MM-JJ)	`"2025-08-02"`
`thumb`	Vignette (image 16:9)	`"./thumbs/brochure.jpg"`
`badges`	Étiquettes visuelles	`["new","star"]` ou objet personnalisé
`info`	Lien “Plus d’info”	`"https://exemple.org/brochure"`
`run`	Lien “Exécuter / Démo”	`"./demos/index.html"`
`size`	Taille (octets, optionnel)	`734003`

4) Extensions de fichiers → type détecté

Type	Extensions
`pdf`	.pdf
`image`	.png .jpg .jpeg .gif .webp .svg
`video`	.mp4 .webm .mov .mkv
`audio`	.mp3 .ogg .wav .flac .m4a
`zip`	.zip .7z .rar .tar .gz .xz
`md`	.md .markdown .txt .rtf
`script`	.sh .py .js .ts .lua .rb .php .bat .ps1
`html`	.html .htm (ou lien de page)

Si type est absent, il est généralement déduit depuis l’extension de url.

5) Boutons : quand apparaissent-ils ?

Bouton	Apparaît si…	Utilité
Aperçu	`url` (ou `run`) est prévisualisable (image, vidéo, audio, PDF, texte/MD)	Voir/écouter dans la page
Télécharger	`url` pointe vers un fichier	Enregistrer sur l’appareil
Ouvrir ↗	`url` est une page HTML ou un lien externe	Ouvrir dans un nouvel onglet
Plus d’info	`info` est défini et différent de `url`	Accéder à une page de contexte
Exécuter / Voir	`run` est défini	Lancer une démo / page interactive

6) Mini “poster” récapitulatif

BADGES : 🆕 Nouveau · ✚ MAJ · ⭐ Coup de cœur · 🧪 Bêta · ✅ Gratuit · 🐧 OSS · 📚 Pédago · 🪄 IA · 💡 Astuce
TYPES  : 📄 PDF · 🖼️ Image · ▶️ Vidéo · 🔊 Audio · 🗜️ Archive · 📝 Texte/MD · 🧩 Script
FAMILLES : MINT (formats & accès) · LILAC (mise en avant & statut)

ATTRIBUTS :
- <span class="badge" data-v="star">⭐ Coup de cœur</span> (+ optionnel data-color="#…")
- Boutons : data-act="preview" | "download" | "open" | "info" | "run"
- Filtres : .chip (type/tag), Recherche : #search, Modale : <dialog id="preview">

MANIFEST (clés) :
title, description, url, type, tags, created, thumb, badges, info, run, size

APERÇU : image, vidéo, audio, PDF, texte/MD
TÉLÉCHARGER : tous les fichiers (pdf, image, zip, audio/vidéo…)
OUVRIR ↗ : pages HTML / liens externes