Skip to content

Commit ea112fd

Browse files
Y-PicotY-Picot
authored
Update README.md
1 parent bbf7139 commit ea112fd

File tree

1 file changed

+196
-64
lines changed

1 file changed

+196
-64
lines changed

‎README.md

Lines changed: 196 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,216 @@
1-
# GitHub Actions HTML/CSS/JS
1+
# GitHub Actions pour HTML/CSS/JS
2+
3+
Une démonstration complète et didactique de l'intégration des GitHub Actions pour automatiser les tests, le linting et la validation de code dans un projet web front-end. Ce projet sert d'exemple pratique pour mettre en place une pipeline CI/CD robuste.
4+
5+
## 🔧 Statut des Actions GitHub
26

3-
### Statut des Actions GitHub
47
![Tests Unitaires](https://github.com/Y-Picot/github-actions-html-css-js/workflows/unit_tests/badge.svg)
58
![Linting](https://github.com/Y-Picot/github-actions-html-css-js/workflows/super_linter_hcjs/badge.svg)
69
![Tests Deno](https://github.com/Y-Picot/github-actions-html-css-js/workflows/deno_lint/badge.svg)
710
![Statut des Actions](https://img.shields.io/github/actions/workflow/status/Y-Picot/github-actions-html-css-js/unit_tests.yml?branch=main)
811

9-
## Description
10-
Ce projet est un exemple d'utilisation des GitHub Actions pour automatiser les tests, le linting et d'autres tâches pour un projet HTML/CSS/JS. Il est conçu pour être didactique et facile à utiliser.
12+
## 🚀 Technologies utilisées
13+
14+
- **HTML5** - Structure sémantique des pages web
15+
- **CSS3** - Styles et mise en page responsive
16+
- **JavaScript ES6+** - Logique interactive côté client
17+
- **Jest** - Framework de tests unitaires
18+
- **Deno** - Runtime JavaScript moderne et sécurisé
19+
- **GitHub Actions** - Pipeline CI/CD automatisée
20+
- **Super-Linter** - Validation multi-langages
21+
22+
## ✨ Fonctionnalités
23+
24+
- **Tests automatisés** - Exécution de tests unitaires avec Jest et Deno
25+
- **Linting continu** - Vérification automatique du code avec Super-Linter
26+
- **Pipeline CI/CD** - Intégration et déploiement continus via GitHub Actions
27+
- **Multi-environnements** - Support des runtimes Node.js et Deno
28+
- **Badges de statut** - Visualisation en temps réel de l'état du projet
29+
- **Documentation complète** - Guide détaillé pour l'utilisation et la contribution
30+
31+
## 📦 Prérequis
1132

12-
## Installation
33+
- **Node.js** (version 16 ou supérieure)
34+
- **npm** ou **yarn** pour la gestion des dépendances
35+
- **Deno** (optionnel, pour les tests Deno)
36+
- **Git** pour le contrôle de version
37+
- Compte **GitHub** avec accès aux Actions
1338

14-
1. Clonez le dépôt :
39+
## 🛠️ Installation
40+
41+
1. **Cloner le dépôt**
1542
```bash
1643
git clone https://github.com/Y-Picot/github-actions-html-css-js.git
1744
```
1845

19-
2. Accédez au dossier du projet :
46+
2. **Naviguer dans le dossier**
2047
```bash
2148
cd github-actions-html-css-js
2249
```
2350

24-
3. Installez les dépendances :
51+
3. **Installer les dépendances**
2552
```bash
2653
npm install
2754
```
2855

29-
## Utilisation
30-
31-
### Lancer les tests
32-
- Pour exécuter les tests Jest :
33-
```bash
34-
npm run test-jest
35-
```
36-
- Pour exécuter les tests Deno :
37-
```bash
38-
deno test
39-
```
40-
41-
### Lancer le linting
42-
- Pour vérifier le linting avec Super-Linter :
43-
Les erreurs de linting seront automatiquement détectées lors des pushs sur la branche `main`.
44-
45-
## Scripts disponibles
46-
47-
### Tests
48-
- **Jest** :
49-
```bash
50-
npm run test-jest
51-
```
52-
Exécute les tests unitaires pour les fichiers JavaScript avec Jest.
53-
54-
- **Deno** :
55-
```bash
56-
npm run test-deno
57-
```
58-
Exécute les tests unitaires pour les fichiers JavaScript avec Deno.
59-
60-
### Fichiers ignorés
61-
Un fichier `.gitignore` a été ajouté pour exclure les fichiers et dossiers suivants :
62-
- `node_modules/`
63-
- Fichiers de logs (`*.log`)
64-
- Dossiers spécifiques à Deno (`.deno_modules/`, `.deno_test_cache/`)
65-
- Fichiers système (`.DS_Store`, `Thumbs.db`)
66-
- Dossiers de couverture (`coverage/`)
67-
- Dossiers de build (`build/`, `dist/`)
68-
69-
## Normes de nommage
70-
71-
### HTML/CSS/JS
72-
- **HTML** : Utilisez des noms de classes et d'identifiants en kebab-case (ex. `main-container`).
73-
- **CSS** : Respectez la méthodologie BEM (Block Element Modifier).
74-
- **JavaScript** : Utilisez le camelCase pour les variables et fonctions, et PascalCase pour les classes.
75-
76-
### Nom du dépôt
77-
- Utilisez des noms descriptifs en kebab-case (ex. `action-git-html-css-js`).
78-
79-
## Contribuer
80-
Les contributions sont les bienvenues ! Veuillez suivre les étapes suivantes :
81-
1. Forkez le projet.
82-
2. Créez une branche pour votre fonctionnalité : `git checkout -b feature/ma-fonctionnalite`.
83-
3. Faites vos modifications et testez-les.
84-
4. Soumettez une pull request.
56+
4. **Vérifier l'installation**
57+
```bash
58+
npm run test-jest
59+
```
60+
61+
## 💡 Utilisation
62+
63+
### Exécution des tests
64+
65+
#### Tests Jest (Node.js)
66+
```bash
67+
npm run test-jest
68+
```
69+
Exécute la suite complète de tests unitaires avec Jest et génère un rapport de couverture.
70+
71+
#### Tests Deno
72+
```bash
73+
npm run test-deno
74+
```
75+
ou directement avec Deno :
76+
```bash
77+
deno test
78+
```
79+
80+
### Validation du code
81+
82+
#### Linting automatique
83+
Le linting s'exécute automatiquement lors des pushs sur la branche `main` via GitHub Actions.
84+
85+
#### Linting local (si configuré)
86+
```bash
87+
npm run lint
88+
```
89+
90+
### Scripts disponibles
91+
92+
| Commande | Description |
93+
|----------|-------------|
94+
| `npm run test-jest` | Tests unitaires avec Jest |
95+
| `npm run test-deno` | Tests unitaires avec Deno |
96+
| `npm run lint` | Vérification du code (si configuré) |
97+
| `npm start` | Démarre le serveur de développement (si configuré) |
98+
99+
## 📁 Structure du projet
100+
101+
```
102+
github-actions-html-css-js/
103+
├── .github/
104+
│ └── workflows/ # Fichiers de configuration GitHub Actions
105+
│ ├── unit_tests.yml # Pipeline de tests Jest
106+
│ ├── super_linter_hcjs.yml # Pipeline de linting
107+
│ └── deno_lint.yml # Pipeline de tests Deno
108+
├── src/ # Code source
109+
│ ├── index.html # Page principale
110+
│ ├── style.css # Feuilles de style
111+
│ └── script.js # Scripts JavaScript
112+
├── tests/ # Tests unitaires
113+
│ ├── jest/ # Tests Jest
114+
│ └── deno/ # Tests Deno
115+
├── package.json # Configuration npm
116+
├── .gitignore # Fichiers à ignorer
117+
├── README.md # Documentation
118+
└── LICENSE # Licence du projet
119+
```
120+
121+
## ⚙️ Configuration des GitHub Actions
122+
123+
### Workflows automatisés
124+
125+
1. **Tests Unitaires** (`unit_tests.yml`)
126+
- Exécution des tests Jest
127+
- Génération de rapports de couverture
128+
- Compatible multi-OS (Ubuntu, Windows, macOS)
129+
130+
2. **Super-Linter** (`super_linter_hcjs.yml`)
131+
- Validation HTML, CSS, JavaScript
132+
- Détection d'erreurs de syntaxe
133+
- Vérification des bonnes pratiques
134+
135+
3. **Tests Deno** (`deno_lint.yml`)
136+
- Tests avec le runtime Deno
137+
- Validation TypeScript native
138+
- Sécurité renforcée
139+
140+
## 🎨 Conventions de développement
141+
142+
### HTML
143+
- **Nommage** : Classes et IDs en `kebab-case`
144+
- **Structure** : HTML5 sémantique
145+
- **Accessibilité** : Attributs ARIA appropriés
146+
147+
### CSS
148+
- **Méthodologie** : BEM (Block Element Modifier)
149+
- **Nommage** : Classes en `kebab-case`
150+
- **Organisation** : Feuilles de style modulaires
151+
152+
### JavaScript
153+
- **Variables/Fonctions** : `camelCase`
154+
- **Classes** : `PascalCase`
155+
- **Constantes** : `UPPER_SNAKE_CASE`
156+
- **Fichiers** : `kebab-case.js`
157+
158+
### Dépôt
159+
- **Nom** : Format `kebab-case`
160+
- **Branches** : `feature/nom-fonctionnalite`
161+
- **Commits** : Messages descriptifs en français
162+
163+
## 🚫 Fichiers ignorés
164+
165+
Le projet exclut automatiquement :
166+
- `node_modules/` - Dépendances Node.js
167+
- `*.log` - Fichiers de logs
168+
- `.deno_modules/`, `.deno_test_cache/` - Cache Deno
169+
- `.DS_Store`, `Thumbs.db` - Fichiers système
170+
- `coverage/` - Rapports de couverture
171+
- `build/`, `dist/` - Dossiers de build
172+
173+
## 🤝 Contribution
174+
175+
Les contributions sont encouragées ! Pour contribuer :
176+
177+
1. **Fork** le projet
178+
2. **Créez** votre branche (`git checkout -b feature/amelioration`)
179+
3. **Testez** vos modifications (`npm run test-jest`)
180+
4. **Committez** (`git commit -m 'Ajout d'une fonctionnalité'`)
181+
5. **Poussez** (`git push origin feature/amelioration`)
182+
6. **Ouvrez** une Pull Request
183+
184+
### Checklist avant PR
185+
- [ ] Tests passent localement
186+
- [ ] Code respecte les conventions
187+
- [ ] Documentation mise à jour
188+
- [ ] Badges de statut fonctionnels
189+
190+
### Suggestions d'améliorations
191+
- Ajout de tests end-to-end avec Playwright
192+
- Intégration de Lighthouse pour les performances
193+
- Pipeline de déploiement automatique
194+
- Analyse de sécurité avec CodeQL
195+
- Support de TypeScript
196+
197+
## 🎯 Objectifs pédagogiques
198+
199+
Ce projet démontre :
200+
- **Configuration CI/CD** avec GitHub Actions
201+
- **Tests multi-environnements** (Node.js vs Deno)
202+
- **Automatisation du linting** et validation
203+
- **Intégration continue** et bonnes pratiques
204+
- **Documentation technique** complète
205+
206+
## 📄 Licence
207+
208+
Ce projet est sous licence MIT. Voir le fichier [LICENSE](LICENSE) pour plus de détails.
209+
210+
## 👤 Auteur
211+
212+
**Y-Picot** - [GitHub](https://github.com/Y-Picot)
213+
214+
---
215+
216+
⭐ N'hésitez pas à donner une étoile si ce projet vous aide à comprendre GitHub Actions !

0 commit comments

Comments
 (0)