☰

Git Helper

Guide git de l'installation aux commandes usuelles

  1. // ==UserScript==
  2. // @name         Git Helper 
  3. // @namespace    http://tampermonkey.net/
  4. // @version      10.1
  5. // @description  Guide git de l'installation aux commandes usuelles 
  6. // @author       yglsan
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function () {
  12.     'use strict';
  13.  
  14.     // Ajout de Bootstrap via CDN pour les styles
  15.     const bootstrapStyle = document.createElement("link");
  16.     bootstrapStyle.href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
  17.     bootstrapStyle.rel = "stylesheet";
  18.     document.head.appendChild(bootstrapStyle);
  19.  
  20.     const gitSections = [
  21.         {
  22.             section: "Commandes essentielles (15 principales)",
  23.             details: [
  24.                 {
  25.                     command: "git init",
  26.                     usage: "git init",
  27.                     explanation: "Initialise un nouveau dépôt Git dans le répertoire actuel.",
  28.                     advice: "Utilisez cette commande lorsque vous commencez un nouveau projet Git. Elle est souvent la première commande exécutée dans un nouveau répertoire.",
  29.                     example: "Exemple : `git init` dans le répertoire de votre projet pour initialiser le dépôt."
  30.                 },
  31.                 {
  32.                     command: "git clone",
  33.                     usage: "git clone [URL_du_dépôt]",
  34.                     explanation: "Clone un dépôt distant sur votre machine locale.",
  35.                     advice: "Utilisez cette commande pour récupérer une copie locale d'un projet existant hébergé sur GitHub, GitLab, etc.",
  36.                     example: "Exemple : `git clone https://github.com/username/repository.git`"
  37.                 },
  38.                 {
  39.                     command: "git add",
  40.                     usage: "git add [fichier|dossier|.]",
  41.                     explanation: "Ajoute des fichiers ou des modifications à l'index pour préparer un commit.",
  42.                     advice: "Important pour préparer les fichiers à être commités. Vous pouvez utiliser un point `.` pour ajouter tous les fichiers modifiés dans le répertoire.",
  43.                     example: "Exemple : `git add .` pour ajouter tous les fichiers modifiés dans le répertoire."
  44.                 },
  45.                 {
  46.                     command: "git commit -m",
  47.                     usage: "git commit -m '[message]'",
  48.                     explanation: "Enregistre les changements de l'index dans l'historique avec un message de commit.",
  49.                     advice: "Utilisez des messages clairs et descriptifs pour vos commits. Par exemple, 'Ajout de la fonctionnalité X' ou 'Correction du bug Y'.",
  50.                     example: "Exemple : `git commit -m 'Ajout de la fonctionnalité de recherche'`"
  51.                 },
  52.                 {
  53.                     command: "git commit -am",
  54.                     usage: "git commit -am '[message]'",
  55.                     explanation: "Effectue un commit en ajoutant tous les fichiers suivis modifiés, sans avoir besoin de `git add`.",
  56.                     advice: "Cette commande est très pratique lorsque vous travaillez fréquemment sur un même fichier ou un groupe de fichiers.",
  57.                     example: "Exemple : `git commit -am 'Correction des bugs'`"
  58.                 },
  59.                 {
  60.                     command: "git status",
  61.                     usage: "git status",
  62.                     explanation: "Affiche l'état actuel du dépôt, les fichiers modifiés, ajoutés ou non suivis.",
  63.                     advice: "Utilisez `git status` fréquemment pour vérifier l'état de vos fichiers avant de faire un commit ou de pousser vos changements.",
  64.                     example: "Exemple : `git status`"
  65.                 },
  66.                 {
  67.                     command: "git log",
  68.                     usage: "git log",
  69.                     explanation: "Affiche l'historique des commits dans le dépôt.",
  70.                     advice: "Utilisez `git log --oneline` pour avoir une vue d'ensemble plus concise de l'historique des commits.",
  71.                     example: "Exemple : `git log --oneline`"
  72.                 },
  73.                 {
  74.                     command: "git branch",
  75.                     usage: "git branch [nom]",
  76.                     explanation: "Crée une nouvelle branche locale.",
  77.                     advice: "Créez des branches pour chaque nouvelle fonctionnalité ou correction de bug afin de maintenir une structure claire de votre code.",
  78.                     example: "Exemple : `git branch feature-xyz`"
  79.                 },
  80.                 {
  81.                     command: "git checkout",
  82.                     usage: "git checkout [branche|fichier]",
  83.                     explanation: "Bascule vers une autre branche ou restaure un fichier dans son dernier état.",
  84.                     advice: "Utilisez cette commande pour passer d'une branche à l'autre. N'oubliez pas de valider vos modifications avant de changer de branche.",
  85.                     example: "Exemple : `git checkout feature-xyz`"
  86.                 },
  87.                 {
  88.                     command: "git switch",
  89.                     usage: "git switch [branche]",
  90.                     explanation: "Permet de changer de branche, remplaçant `git checkout` dans ce contexte.",
  91.                     advice: "La commande `git switch` est une alternative plus simple et intuitive à `git checkout` pour le changement de branche.",
  92.                     example: "Exemple : `git switch feature-xyz`"
  93.                 },
  94.                 {
  95.                     command: "git merge",
  96.                     usage: "git merge [branche]",
  97.                     explanation: "Fusionne les changements de la branche spécifiée dans la branche courante.",
  98.                     advice: "Assurez-vous de tester vos changements localement avant de fusionner, et résolvez les conflits si nécessaire.",
  99.                     example: "Exemple : `git merge feature-xyz`"
  100.                 },
  101.                 {
  102.                     command: "git push",
  103.                     usage: "git push [remote] [branche]",
  104.                     explanation: "Pousse les commits locaux vers un dépôt distant.",
  105.                     advice: "Utilisez cette commande pour partager vos changements avec d'autres personnes travaillant sur le projet. Assurez-vous que votre branche est à jour avant de pousser.",
  106.                     example: "Exemple : `git push origin main`"
  107.                 },
  108.                 {
  109.                     command: "git pull",
  110.                     usage: "git pull [remote] [branche]",
  111.                     explanation: "Récupère les modifications du dépôt distant et les fusionne avec la branche courante.",
  112.                     advice: "Avant de pousser vos changements, utilisez `git pull` pour vous assurer que vous travaillez sur la version la plus récente du code.",
  113.                     example: "Exemple : `git pull origin main`"
  114.                 },
  115.                 {
  116.                     command: "git reset",
  117.                     usage: "git reset [--soft|--hard] [commit]",
  118.                     explanation: "Réinitialise l'index ou la branche actuelle à un état donné. `--hard` efface les modifications locales.",
  119.                     advice: "Utilisez `git reset --soft` pour revenir à un commit précédent tout en conservant les modifications dans votre répertoire de travail.",
  120.                     example: "Exemple : `git reset --hard HEAD~1`"
  121.                 },
  122.                 {
  123.                     command: "git stash",
  124.                     usage: "git stash",
  125.                     explanation: "Sauvegarde les changements non validés temporairement, permettant de revenir à un état propre.",
  126.                     advice: "Cette commande est utile lorsque vous devez changer de branche sans vouloir valider vos changements en cours.",
  127.                     example: "Exemple : `git stash`"
  128.                 }
  129.             ]
  130.         }
  131.     ];
  132.  
  133.     // Fonction pour installer Git (instructions pour chaque plateforme)
  134.     function getInstallInstructions() {
  135.         return `
  136.         <h4>Installation de Git :</h4>
  137.         <ul>
  138.             <li><b>Windows :</b> Téléchargez Git à partir de <a href="https://git-scm.com/download/win" target="_blank">Git pour Windows</a> et suivez les instructions de l'installateur.</li>
  139.             <li><b>MacOS :</b> Utilisez Homebrew : <code>brew install git</code> ou téléchargez l'installateur à partir de <a href="https://git-scm.com/download/mac" target="_blank">Git pour Mac</a>.</li>
  140.             <li><b>Linux (Ubuntu) :</b> Exécutez <code>sudo apt install git</code> dans le terminal.</li>
  141.             <li><b>Linux (Fedora) :</b> Exécutez <code>sudo dnf install git</code> dans le terminal.</li>
  142.             <li><b>Linux (Arch) :</b> Exécutez <code>sudo pacman -S git</code> dans le terminal.</li>
  143.         </ul>
  144.         <p>Après l'installation, vérifiez que Git est bien installé en exécutant la commande : <code>git --version</code>.</p>
  145.         `;
  146.     }
  147.  
  148.     // Création du panneau
  149.     const panel = document.createElement("div");
  150.     panel.style.position = "fixed";
  151.     panel.style.bottom = "10px";
  152.     panel.style.right = "10px";
  153.     panel.style.width = "500px";
  154.     panel.style.maxHeight = "80vh";
  155.     panel.style.overflowY = "auto";
  156.     panel.style.backgroundColor = "white";
  157.     panel.style.color = "black";
  158.     panel.style.border = "1px solid #ccc";
  159.     panel.style.borderRadius = "10px";
  160.     panel.style.padding = "20px";
  161.     panel.style.zIndex = "9999";
  162.     panel.style.display = "none"; // initialement caché
  163.  
  164.     // Contenu du panneau : Recherche et explication
  165.     const title = document.createElement("h3");
  166.     title.textContent = "Git Helper";
  167.  
  168.     const searchInput = document.createElement("input");
  169.     searchInput.type = "text";
  170.     searchInput.classList.add("form-control");
  171.     searchInput.placeholder = "Recherche par mots clés...";
  172.  
  173.     const resultsContainer = document.createElement("div");
  174.     resultsContainer.style.marginTop = "10px";
  175.  
  176.     // bouton pour fermer le panneau
  177.     const closeButton = document.createElement("button");
  178.     closeButton.classList.add("btn", "btn-danger");
  179.     closeButton.textContent = "Fermer l'application";
  180.     closeButton.onclick = function () {
  181.         panel.style.display = "none";
  182.     };
  183.  
  184.     // bouton pour afficher l'installation de Git
  185.     const installButton = document.createElement("button");
  186.     installButton.classList.add("btn", "btn-info");
  187.     installButton.textContent = "Installation de Git";
  188.     installButton.onclick = function () {
  189.         resultsContainer.innerHTML = getInstallInstructions();
  190.     };
  191.  
  192.     // bouton pour afficher des explications détaillées
  193.     const explanationButton = document.createElement("button");
  194.     explanationButton.classList.add("btn", "btn-primary");
  195.     explanationButton.textContent = "Afficher les explications";
  196.     explanationButton.onclick = function () {
  197.         resultsContainer.innerHTML = gitSections[0].details.map(command => `
  198.             <div>
  199.                 <strong>${command.command}</strong> : ${command.explanation} <br>
  200.                 <em>Conseil :</em> ${command.advice}<br>
  201.                 <em>Exemple :</em> ${command.example}<br><br>
  202.             </div>
  203.         `).join('');
  204.     };
  205.  
  206.     panel.appendChild(title);
  207.     panel.appendChild(searchInput);
  208.     panel.appendChild(installButton);
  209.     panel.appendChild(explanationButton);
  210.     panel.appendChild(resultsContainer);
  211.     panel.appendChild(closeButton);
  212.  
  213.     // panneau
  214.     document.body.appendChild(panel);
  215.  
  216.     // Fonction de recherche
  217.     function searchCommands(query) {
  218.         const lowerQuery = query.toLowerCase();
  219.         const matches = gitSections[0].details.filter(command => {
  220.             return command.command.toLowerCase().includes(lowerQuery) || command.explanation.toLowerCase().includes(lowerQuery);
  221.         });
  222.  
  223.         resultsContainer.innerHTML = "";
  224.         matches.forEach(command => {
  225.             const commandElem = document.createElement("div");
  226.             commandElem.innerHTML = `<strong>${command.command}</strong> : ${command.explanation}`;
  227.             resultsContainer.appendChild(commandElem);
  228.         });
  229.     }
  230.  
  231.     // Event listener pour la recherche
  232.     searchInput.addEventListener("input", function () {
  233.         searchCommands(searchInput.value);
  234.     });
  235.  
  236.     // Fonction de raccourci clavier pour ouvrir/fermer le panneau
  237.     document.addEventListener("keydown", function (event) {
  238.         if ((event.ctrlKey && event.key === "G") || (event.metaKey && event.key === "G")) {  // Raccourci Ctrl+G ou Cmd+G
  239.             if (panel.style.display === 'none') {
  240.                 panel.style.display = 'block';
  241.                 explanationButton.click();
  242.             } else {
  243.                 panel.style.display = 'none';
  244.             }
  245.         }
  246.     });
  247. })();