Skip to content

Commit 349f271

Browse files
authored
Update README.md
1 parent ea112fd commit 349f271

File tree

1 file changed

+33
-165
lines changed

1 file changed

+33
-165
lines changed

README.md

Lines changed: 33 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# GitHub Actions pour HTML/CSS/JS
22

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.
3+
Exemple pratique d'automatisation des tests et du linting pour projets web avec GitHub Actions. Pipeline CI/CD complète avec Jest, Deno et Super-Linter.
44

5-
## 🔧 Statut des Actions GitHub
5+
## 🔧 Statut des Actions
66

77
![Tests Unitaires](https://github.com/Y-Picot/github-actions-html-css-js/workflows/unit_tests/badge.svg)
88
![Linting](https://github.com/Y-Picot/github-actions-html-css-js/workflows/super_linter_hcjs/badge.svg)
@@ -11,206 +11,74 @@ Une démonstration complète et didactique de l'intégration des GitHub Actions
1111

1212
## 🚀 Technologies utilisées
1313

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
14+
- **HTML5/CSS3/JavaScript** - Technologies front-end
15+
- **Jest & Deno** - Frameworks de tests
16+
- **GitHub Actions** - Pipeline CI/CD
17+
- **Super-Linter** - Validation de code
2118

2219
## ✨ Fonctionnalités
2320

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
21+
- **Tests automatisés** - Jest et Deno en parallèle
22+
- **Linting continu** - Validation automatique du code
23+
- **Multi-environnements** - Support Node.js et Deno
24+
- **Badges de statut** - Suivi visuel en temps réel
3025

3126
## 📦 Prérequis
3227

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
28+
- Node.js (version 16+) et npm
29+
- Deno (optionnel pour tests Deno)
30+
- Compte GitHub avec Actions activées
3831

3932
## 🛠️ Installation
4033

41-
1. **Cloner le dépôt**
42-
```bash
43-
git clone https://github.com/Y-Picot/github-actions-html-css-js.git
44-
```
45-
46-
2. **Naviguer dans le dossier**
47-
```bash
48-
cd github-actions-html-css-js
49-
```
50-
51-
3. **Installer les dépendances**
52-
```bash
53-
npm install
54-
```
55-
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)
6634
```bash
35+
git clone https://github.com/Y-Picot/github-actions-html-css-js.git
36+
cd github-actions-html-css-js
37+
npm install
6738
npm run test-jest
6839
```
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-
```
8940

90-
### Scripts disponibles
41+
## 💡 Scripts disponibles
9142

9243
| Commande | Description |
9344
|----------|-------------|
9445
| `npm run test-jest` | Tests unitaires avec Jest |
9546
| `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é) |
47+
| `deno test` | Tests Deno directement |
9848

9949
## 📁 Structure du projet
10050

10151
```
10252
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
53+
├── .github/workflows/ # GitHub Actions
54+
├── src/ # Code source HTML/CSS/JS
55+
├── tests/ # Tests Jest et Deno
11556
├── package.json # Configuration npm
116-
├── .gitignore # Fichiers à ignorer
117-
├── README.md # Documentation
118-
└── LICENSE # Licence du projet
57+
└── README.md # Documentation
11958
```
12059

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
60+
## ⚙️ GitHub Actions configurées
16461

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
62+
- **Tests Jest** - Tests unitaires Node.js avec couverture
63+
- **Super-Linter** - Validation HTML/CSS/JS automatique
64+
- **Tests Deno** - Tests avec runtime sécurisé Deno
17265

17366
## 🤝 Contribution
17467

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
68+
1. Fork le projet
69+
2. Créez votre branche (`git checkout -b feature/amelioration`)
70+
3. Testez (`npm run test-jest`)
71+
4. Committez (`git commit -m 'Nouvelle fonctionnalité'`)
72+
5. Ouvrez une Pull Request
20573

20674
## 📄 Licence
20775

208-
Ce projet est sous licence MIT. Voir le fichier [LICENSE](LICENSE) pour plus de détails.
76+
Licence MIT - voir [LICENSE](LICENSE) pour les détails.
20977

21078
## 👤 Auteur
21179

21280
**Y-Picot** - [GitHub](https://github.com/Y-Picot)
21381

21482
---
21583

216-
⭐ N'hésitez pas à donner une étoile si ce projet vous aide à comprendre GitHub Actions !
84+
Projet utile ? N'hésitez pas à lui donner une étoile !

0 commit comments

Comments
 (0)