html-slideshow

Que fait html-slideshow ?

Un diaporama responsive intégré dans un seul fichier .html autonome et minifié. Rédigez les diapositives en HTML ; le moteur (assets/base.css + base.js) et une construction Bun produisent le fichier final. Nécessite Bun.

Flux de travail

1. Vérifier l'environnement d'exécution — bun --version (installez à partir de bun.sh si absent ; vérifié avec la version 1.4.0).
2. Copier le modèle — copiez assets/base.html, assets/base.css, et assets/base.js dans un dossier de diaporama dans l'espace de travail de l'utilisateur (côte à côte). Le .html peut être renommé librement (ex. mon-diapo.html) ; base.css et base.js sont référencés par chemin relatif depuis le .html, donc les renommer nécessite de mettre à jour ces références.
3. Définir le titre — dans le .html, modifiez <title>. Le diaporama s'affiche par défaut en mode sombre ; l'impression passe automatiquement à une palette claire forcée.
4. Ajouter des diapositives — dans <main id="deck">, une <section class="slide"> par diapositive :

   <section class="slide">
     <h2>Résultats trimestriels</h2>
     <ul><li>Chiffre d'affaires en hausse de 24 %</li></ul>
   </section>
   

5. CSS/JS personnalisés — fichiers liés uniquement, jamais en ligne. N'ajoutez pas de blocs <style> ou <script> dans le .html — il ne contient que le squelette de la page et le contenu des diapositives ; la construction intègre les fichiers liés dans le fichier final autonome, ce qui permet de modifier la source et de maintenir le moteur comme source unique. Deux emplacements autorisés pour le code personnalisé : modifiez base.css / base.js directement, ou — pour un style/comportement spécifique au diaporama, isolé du moteur — ajoutez <link rel="stylesheet" href="extra.css"> / <script src="extra.js" defer></script> (la construction les intègre ; conservez base.* non modifié dans la mesure du possible — voir references/bundling-assets.md). (Les recettes dans references/slide-patterns.md suivent cette règle.)
6. Dimensionner avec des unités de conteneur — jamais de px. Chaque diapositive est un conteneur de requête CSS, utilisez donc cqw/cqh/cqmin et clamp() et le contenu s'adapte à n'importe quel écran. px/pt cassent la réactivité — ne les utilisez pas (le cadre extérieur utilise svh). C'est la règle que les agents comprennent mal ; guide complet dans references/responsive-units.md. Les fenêtres en mode portrait sont gérées pour vous : les diapositives s'affichent sur leur zone paysage et se mettent à l'échelle, donc les tableaux/grilles larges ne débordent jamais d'un écran de téléphone (--slide-w/--slide-h sur :root, par défaut 16/9).
7. Construire — exécutez le script de construction de la compétence : bun scripts/build.js mon-diapo.html (enveloppe bun build --compile --target=browser --minify mon-diapo.html --outdir dist ; fonctionne sur tout système d'exploitation compatible Bun) → dist/mon-diapo.html : un fichier unique, minifié et autonome contenant le CSS, le JS et toutes les ressources référencées intégrées. C'est le fichier que vous distribuez.
8. Vérifier le fichier construit dans un outil de navigation (une URL file:// vers dist/mon-diapo.html). Succès : les commandes s'affichent ; Flèche droite avance le compteur à "2 / N" et définit location.hash sur #2 ; une fenêtre d'environ 400×800 px affiche toujours une diapositive entièrement visible avec letterbox ; O active la vue d'ensemble ; l'émulation du média d'impression produit une diapositive par page. Les signaux sont documentés dans references/using-the-deck.md. Si aucun outil de navigation n'est disponible, indiquez que la vérification visuelle a été ignorée.
9. Nettoyer — rien d'autre que le résultat de la construction n'est créé ; conservez mon-diapo.html, base.css et base.js (la source modifiable) à côté de dist/mon-diapo.html (le fichier à distribuer). Si l'utilisateur ne souhaite qu'un seul fichier, déplacez dist/mon-diapo.html à l'endroit où il attend le diaporama et conservez le dossier du diaporama comme source.

Index des références

Chargez à la demande — pas tout d'un coup :

• references/using-the-deck.md — configuration, le contrat de la diapositive, navigation complète, liens profonds (#5 ouvre la diapositive 5 ; #some-id ouvre la diapositive contenant cet identifiant ; utilisez pour les citations → sources), la construction et l'impression.
• references/slide-patterns.md — recettes de diapositives prêtes à l'emploi + conseils de rédaction.
• references/responsive-units.md — le guide de dimensionnement fluide sans px.
• references/bundling-assets.md — ressources SVG intégrées / data-URI (la construction intègre également les références relatives).
• references/engine-anatomy.md — plan du moteur (base.html / base.css / base.js) pour le modifier.
• examples/quickstart.html — un diaporama complet (source ; construisez-le pour obtenir un fichier autonome).
• examples/README.md — les deux formes du diaporama exemple (source lisible vs autonome construit) et comment reconstruire l'autonome après modifications.

Quand l'utiliser

Lorsque la sortie doit être affichée un écran à la fois : une conférence, une leçon, une démo, un compte rendu ou un pitch. Pas pour une lecture en continu ou des documents.