create-nc-decoupe

Un générateur de projet de découpe moderne et accessible pour les développeurs web.

🚀 Description

create-nc-decoupe est un outil CLI qui génère automatiquement un projet de découpe HTML/CSS/JavaScript avec une architecture moderne, des outils de développement optimisés et des tests d'accessibilité intégrés.

✨ Fonctionnalités

• Architecture moderne : Basée sur Vite, TypeScript et Sass
• Accessibilité intégrée : Tests automatiques avec pa11y-ci
• Générateur de contenu : Utilisation de Faker.js pour les données de test
• Optimisation des images : Compression WebP automatique
• Structure organisée : Templates HTML, composants SCSS, et scripts TypeScript
• Hooks Git : Vérification automatique de l'accessibilité avant commit

📦 Installation

# Installation globale
npm install -g create-nc-decoupe

# Ou avec pnpm
pnpm add -g create-nc-decoupe

🛠️ Utilisation

Créer un nouveau projet

# Créer un projet avec le nom par défaut
create-nc-decoupe

# Créer un projet avec un nom personnalisé
create-nc-decoupe mon-projet-decoupe

Commandes disponibles

Une fois le projet créé, naviguez dans le dossier et utilisez les commandes suivantes :

# Démarrer le serveur de développement
pnpm dev

# Construire le projet pour la production
pnpm build

# Prévisualiser la version de production
pnpm preview

🏗️ Structure du projet

projet/
├── public/                 # Assets statiques
├── src/
│   ├── img/               # Images et SVG
│   ├── js/                # Scripts TypeScript
│   ├── partials/          # Templates HTML partiels
│   │   ├── carte/         # Composants de cartes
│   │   ├── categorie/     # Composants de catégories
│   │   ├── faq/           # Composants FAQ
│   │   └── ui/            # Composants UI réutilisables
│   └── scss/              # Styles Sass
│       ├── composants/    # Styles des composants
│       ├── global/        # Styles globaux
│       └── pages/         # Styles spécifiques aux pages
├── scripts/
│   └── test-accessibility.js  # Tests d'accessibilité
└── template/              # Pages HTML

🎨 Composants disponibles

Templates HTML

• Pages principales : index.html, 404.html, connexion.html
• Pages de contenu : detail-actu.html, liste-actus.html, liste-recherche.html
• Pages utilitaires : faq.html, plan-du-site.html, page-standard.html

Composants SCSS

• Navigation : Header, menu, ariane de navigation
• Contenu : Cartes, catégories, accordéons
• UI : Boutons, pagination, formulaires
• Accessibilité : Skip links, mode éco

🔧 Configuration

Vite

Le projet utilise Vite avec les plugins suivants :

• vite-plugin-html-inject : Injection automatique de contenu HTML
• vite-plugin-webp-compress : Compression automatique des images en WebP

TypeScript

Configuration TypeScript optimisée pour le développement moderne avec support des modules ES.

Sass

Utilisation de sass-embedded pour des performances optimales avec des variables et mixins organisés.

♿ Accessibilité

Le projet intègre des tests d'accessibilité automatiques :

Tests avant commit

Les hooks Git vérifient automatiquement l'accessibilité avant chaque commit :

• Vérification que le serveur de développement est en cours d'exécution
• Tests pa11y-ci sur toutes les pages
• Blocage du commit en cas d'erreurs d'accessibilité

Bonnes pratiques intégrées

• Skip links pour la navigation au clavier
• Contraste des couleurs optimisé
• Structure sémantique HTML
• Support des lecteurs d'écran

📝 Scripts disponibles

# Développement
pnpm dev          # Démarrer le serveur de développement
pnpm build        # Construire pour la production
pnpm preview      # Prévisualiser la version de production

# Tests
pnpm test         # Exécuter les tests (à configurer)

🛠️ Dépendances principales

Développement

• Vite : Build tool moderne
• TypeScript : Support du typage statique
• Sass : Préprocesseur CSS
• pa11y-ci : Tests d'accessibilité
• Husky : Hooks Git

Production

• Faker.js : Génération de données de test
• Glob : Recherche de fichiers
• vite-plugin-html-inject : Injection de contenu HTML
• vite-plugin-webp-compress : Compression d'images

🤝 Contribution

1. Fork le projet
2. Créez une branche pour votre fonctionnalité (git checkout -b feature/AmazingFeature)
3. Committez vos changements (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrez une Pull Request

📄 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

👨‍💻 Auteur

Sébastien Gortais

🚀 Démarrage rapide

# 1. Créer un nouveau projet
create-nc-decoupe mon-projet

# 2. Naviguer dans le projet
cd mon-projet

# 3. Installer les dépendances
pnpm install

# 4. Démarrer le serveur de développement
pnpm dev

# 5. Ouvrir http://localhost:4173 dans votre navigateur

Votre projet de découpe est maintenant prêt ! 🎉