Guide de contribution

Apprenez comment contribuer au projet de documentation CDA Valenciennes P2 en suivant les bonnes pratiques de développement.

Merci de votre intérêt pour contribuer à la documentation CDA Valenciennes P2 ! Ce guide vous explique comment participer au développement du projet en respectant les standards professionnels.

Prérequis

Avant de commencer, assurez-vous d'avoir :

  • Node.js (version 18 ou supérieure)
  • Git installé et configuré
  • Un compte GitHub
  • Une connaissance de base de React, Next.js et MDX

Architecture du projet

Ce projet utilise une stack moderne :

  • Next.js 15 - Framework React avec App Router
  • TypeScript - Typage statique
  • Tailwind CSS - Framework CSS utility-first
  • MDX - Markdown enrichi avec composants React
  • Internationalisation - Support français/anglais

Workflow de contribution (Angular Style)

Nous suivons le Git Flow et les conventions Angular pour une collaboration efficace.

1. Fork et clone

# Fork le repository sur GitHub puis clonez votre fork
git clone https://github.com/VOTRE_USERNAME/concepteur-developpeur.com.git
cd concepteur-developpeur.com

# Ajoutez le repository original comme remote
git remote add upstream https://github.com/urahost/concepteur-developpeur.com.git

### 2. Types de branches

Utilisez les préfixes suivants pour vos branches :

- `feature/` - Nouvelles fonctionnalités
- `fix/` - Corrections de bugs
- `docs/` - Modifications de documentation
- `style/` - Améliorations CSS/UI
- `refactor/` - Refactoring de code
- `test/` - Ajout de tests

**Exemple :**
```bash
git checkout -b feature/add-javascript-section
git checkout -b docs/improve-git-tutorial
git checkout -b fix/navbar-responsive-issue

### 3. Convention de commits (Angular)

Respectez la convention Angular pour vos messages de commit :

<type>(<scope>): <description>

[optional body]

[optional footer]

**Types autorisés :**
- `feat` - Nouvelle fonctionnalité
- `fix` - Correction de bug
- `docs` - Documentation uniquement
- `style` - Formatage, espaces, virgules manquantes, etc.
- `refactor` - Refactoring sans ajout de fonctionnalité
- `test` - Ajout de tests
- `chore` - Maintenance, dépendances, config

**Exemples :**
```bash
git commit -m "feat(content): add JavaScript fundamentals section"
git commit -m "fix(navbar): resolve mobile menu overlay issue"
git commit -m "docs(git): improve branch management explanation"
git commit -m "style(components): update button hover animations"

### 4. Développement local

```bash
# Installez les dépendances
npm install

# Lancez le serveur de développement
npm run dev

# Ouvrez http://localhost:3000

### 5. Ajout de contenu

#### Structure des fichiers

contents/docs/
├── fr/                    # Version française
│   ├── getting-started/
│   ├── basics/
│   ├── code-style/
│   └── conception/
└── en/                    # Version anglaise
    ├── getting-started/
    ├── basics/
    ├── code-style/
    └── conception/

#### Format MDX

Chaque article doit respecter cette structure :


---
title: "Titre de l'article"
description: "Description SEO de l'article"
---

# Titre principal

Contenu de l'article avec composants MDX disponibles :

<Note>
Information importante
</Note>

<Note type="warning">
Avertissement
</Note>

\`\`\`javascript
// Code avec coloration syntaxique
const example = "Hello World";
\`\`\`

<Image src="/images/docs/example.png" alt="Description" />

### 6. Tests et qualité

Avant de soumettre votre PR :

```bash
# Vérifiez le build
npm run build

# Vérifiez le linting
npm run lint

# Vérifiez les types TypeScript
npm run type-check

### 7. Pull Request

1. **Poussez votre branche** :
```bash
git push origin feature/your-feature-name

2. **Créez la PR** sur GitHub avec :
   - **Titre** : Respectez la convention Angular
   - **Description** : Expliquez les changements
   - **Test plan** : Comment tester vos modifications

3. **Template de PR** :

## Summary
- [x] Brief description of changes

## Type of change
- [ ] Bug fix
- [ ] New feature
- [ ] Documentation update
- [ ] Style/UI improvement

## Test plan
- [ ] Build passes
- [ ] Linting passes
- [ ] Manual testing completed

## Screenshots (if applicable)
[Add screenshots here]

## Guidelines spécifiques

### Contenu éditorial

- **Français** : Utilisez le tutoiement et un ton pédagogique
- **Anglais** : Ton professionnel mais accessible
- **Exemples** : Privilégiez des exemples concrets et pratiques
- **Images** : Optimisées et avec alt text descriptif

### Code et composants

- **TypeScript** : Typez toujours vos composants
- **Responsive** : Testez sur mobile et desktop
- **Accessibilité** : Respectez les standards WCAG
- **Performance** : Optimisez images et bundles

### Documentation

- **Internationalisation** : Créez toujours les versions FR et EN
- **SEO** : Frontmatter avec title et description
- **Navigation** : Mettez à jour `lib/routes-config.ts`
- **Assets** : Placez les images dans `public/images/docs/`

## Processus de review

1. **Review automatique** : Actions GitHub (build, lint, types)
2. **Review humaine** : Mainteneur du projet
3. **Feedback** : Apportez les corrections demandées
4. **Merge** : Squash and merge dans `main`

## Ressources utiles

- [Next.js Documentation](https://nextjs.org/docs)
- [MDX Documentation](https://mdxjs.com/)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [Conventional Commits](https://www.conventionalcommits.org/)
- [Angular Commit Guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit)

## Besoin d'aide ?

- 💬 **Discussions** : GitHub Discussions pour questions générales
- 🐛 **Issues** : GitHub Issues pour bugs et suggestions
- 📧 **Contact** : Mainteneurs du projet

<Note>
Votre contribution, quelle qu'elle soit, est précieuse ! N'hésitez pas à commencer petit et à apprendre progressivement.
</Note>

---

**Merci de contribuer à l'amélioration de la formation CDA Valenciennes P2 !** 🚀