# 🚀 Astro Starter Kit

Un starter kit moderne et élégant, optimisé pour la performance et le SEO. Construit avec **Astro**, **React** et **Tailwind CSS**.

## ✨ Fonctionnalités

- ⚡ **Ultra rapide** : Génération statique avec Astro
- ⚛️ **React** : Hydratation partielle intelligente (Islands Architecture)
- 🎨 **Tailwind CSS** : Styling moderne et responsive
- 🔍 **SEO optimisé** : Meta tags et structure HTML5
- 🐳 **Docker ready** : Build multi-stage optimisé

## 📦 Structure du projet

```
/
├── src/
│   ├── layouts/
│   │   └── BaseLayout.astro    # Layout de base avec SEO
│   ├── components/
│   │   └── InteractiveCounter.jsx  # Composant React démo
│   ├── pages/
│   │   └── index.astro         # Page d'accueil
│   └── styles/
│       └── global.css          # Styles Tailwind
├── public/
├── Dockerfile                  # Build multi-stage
├── docker-compose.yml
└── astro.config.mjs
```

## 🚀 Démarrage rapide

### Développement local

```bash
# Installer les dépendances
pnpm install

# Lancer le serveur de dev
pnpm run dev
```

Le site sera accessible sur `http://localhost:4321`

### Build de production

```bash
# Générer les fichiers statiques
pnpm run build

# Prévisualiser le build
pnpm run preview
```

### Docker

```bash
# Build et lancement avec Docker Compose
docker compose up -d --build

# Le site sera accessible sur http://localhost:8080
```

## 🎯 Concepts clés

### Hydratation partielle (Islands Architecture)

Astro envoie **zéro JavaScript par défaut**. Les composants React ne sont hydratés que si vous utilisez une directive `client:*` :

```astro
<!-- Rendu statique uniquement (pas de JS) -->
<InteractiveCounter />

<!-- Hydraté côté client (interactif) -->
<InteractiveCounter client:load />
```

### Directives client disponibles

- `client:load` : Hydrate immédiatement
- `client:idle` : Hydrate quand le navigateur est inactif
- `client:visible` : Hydrate quand visible dans le viewport
- `client:media` : Hydrate selon une media query

## 📝 Personnalisation

### Ajouter une nouvelle page

Créez un fichier `.astro` dans `src/pages/` :

```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Ma nouvelle page">
  <h1>Contenu de ma page</h1>
</BaseLayout>
```

### Ajouter un composant React

Créez un fichier `.jsx` dans `src/components/` et utilisez-le avec une directive `client:*` pour l'interactivité.

## 🛠️ Technologies

- [Astro](https://astro.build) - Framework web moderne
- [React](https://react.dev) - Bibliothèque UI
- [Tailwind CSS](https://tailwindcss.com) - Framework CSS utility-first
- [Docker](https://www.docker.com) - Containerisation