Aujourd'hui je vous propose de vous présenter deux solutions pour rendre plus sexy les instructions bash que vous insérez dans vos articles web.
Deux solutions se présentent à vous :
- Termynal.js une bibliothèque permettant de créer des animations réalistes que l'on retrouverait dans une fenêtre bash ordinaire, mais attention elle n'est pas maintenue !
- Créer son propre design comme fait ici
1-Termynal
Créé par Ines Montani, cette bibliothèque évoquée lors de l'édition 2019 du Devoxx France a attiré mon attention car elle permet de dynamiser ses guides d'installation.
Pour commencer il faut importer le fichier de style de la bibliothèque :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="termynal.css">
</head>
<body>
...
</body>
</html>
Puis le script JS en spécifiant l'id de la balise contenant le code Termynal
<!doctype html>
<html lang="fr">
<head>
...
</head>
<body>
...
<script src="termynal.js" data-termynal-container="#termynal"></script>
</body>
</html>
Enfin il faut écrire la structure de la fenêtre bash :
<!doctype html>
<html lang="fr">
<head>
...
</head>
<body>
<div id="termynal" data-termynal data-ty-typeDelay="40" data-ty-lineDelay="700">
<span data-ty="input" data-ty-prompt="▲">npm uninstall react</span>
<span data-ty>Are you sure you want to uninstall 'react'?</span>
<span data-ty="input" data-ty-typeDelay="1000" data-ty-prompt="(y/n)">y</span>
<span data-ty="progress" data-ty-progressChar="·"></span>
<span data-ty>Uninstalled 'react'</span>
<span data-ty="input" data-ty-prompt="▲">node</span>
<span data-ty="input" data-ty-prompt=">">Array(5).fill('🦄 ')</span>
<span data-ty>['🦄', '🦄', '🦄', '🦄', '🦄']</span>
<span data-ty="input" data-ty-prompt="▲">cd ~/repos</span>
<span data-ty="input" data-ty-prompt="▲ ~/repos"> git checkout branch master</span>
<span data-ty="input" data-ty-prompt="▲ ~/repos (master)">git commit -m "Fix things"</span>
</div>
...
</body>
</html>
Résultat :
Avantages :
- Dynamic
Points négatifs :
- Non responsive
- Utilisant les fonctions
await
etasync
ce ne sera pas compatible avec tous les navigateurs
2-Style CSS
La deuxième solution est de créer son propre thème. Ça demande un peu plus de temps et d'investissement mais voici une base :
Récupérez le style depuis le dépôt GitLab : https://git.martin-abadie.fr/MartinAbadie/terminal-style
Ajoutez-le directement dans le header de votre page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="console.css">
</head>
<body>
...
</body>
</html>
Créez la structure de la fenêtre bash :
<!doctype html>
<html lang="fr">
<head>
...
</head>
<body>
<div console-window>
<div console-head>
<div console-dot="close"></div>
<div console-dot="reduce"></div>
<div console-dot="extend"></div>
</div>
<div console-body>
<span console="input" console-prompt="> ~/devs/my-project (develop)">node -v</span>
<span console>v12.18.1</span>
<span console="input" console-prompt="> ~/devs/my-project">cd ..</span>
<span console="input" console-prompt="> ~/devs">sudo apt upgrade</span>
<span console="input" console-prompt="[sudo] password for user:"></span>
<span console="input" console-prompt="Reading package lists... Done"></span>
<span console="input" console-prompt="Building dependency tree"></span>
<span console="input" console-prompt="Reading state information... Done"></span>
<span console="input" console-prompt="Calculating upgrade... Done"></span>
<span console="input" console-prompt="The following packages will be upgraded:"></span>
<span console="input" console-prompt=" azure-cli"></span>
<span console="input" console-prompt="1 upgraded, 0 newly installed, 0 to remove and 0 not upgraded."></span>
<span console="input" console-prompt="Need to get 174 MB of archives."></span>
<span console="input" console-prompt="After this operation, 11.8 MB of additional disk space will be used."></span>
<span console="input" console-prompt="Do you want to continue? [Y/n]">y</span>
<span console="input" console-prompt="[######################################## ] 80%"></span>
</div>
</div>
</body>
</html>
Et voici le résultat :
Avantages :
- Responsive
- Le prompt est non sélectionnable et donc seul les instructions à jouer pourront être copiées par les lecteurs
Points négatifs :
- Non dynamique