# 🚀 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

## 🚀 Déploiement sur Coolify (Production)

Suivez cette procédure étape par étape pour déployer une nouvelle instance de ce site.

### 1. Préparation dans Gitea

1. Allez sur le dépôt du template dans Gitea.
2. Cliquez sur **"Utiliser ce modèle"** (Use this template).
3. Créez votre nouveau dépôt (ex: `mon-nouveau-site`).

### 2. Création du projet dans Coolify

1. Dans Coolify, créez un **New Project**.
2. Choisissez **Private Repository** (avec déploiement via clé privée).
3. Sélectionnez la clé privée : `Gitea`.
4. Sélectionnez le serveur : `avqn-worker`.

### 3. Configuration du Git

Remplissez les informations suivantes :

- **Repository URL** : Utilisez le format SSH court (ex: `git@git.avqn.ch:AVQN/mon-nouveau-site.git`).
  > ⚠️ **Attention** : Ne mettez PAS `ssh://` devant.
- **Branch** : `main`

### 4. Configuration du Build

Coolify va charger le dépôt. Une fois chargé, configurez comme suit :

- **Build Pack** : Choisissez `Nixpacks`.
- **Options** :
  - Cochez la case **Is it a static site?** ✅.
  - **Publish Directory** : Laissez `dist`.

### 5. Configuration du Domaine

Changez le domaine par défaut (ex: `https://mon-site.app.avqn.ch`).

### 6. Fonctionnalités Avancées (Indispensable pour les PRs)

1. Allez dans l'onglet **Features** (ou Configuration -> Advanced).
2. Cochez **Preview Deployments** pour activer les environnements temporaires sur les Pull Requests.

### 7. Configuration des Webhooks (Sécurité)

Pour que Coolify puisse nettoyer les environnements de PR automatiquement :

1. Dans Coolify (menu **Webhooks** du projet), définissez un **Webhook Secret** (générez-en un ou mettez un mot de passe fort).
2. Copiez ce secret.
3. Allez dans **Gitea -> Configuration du dépôt -> Webhooks**.
4. Ajoutez le Webhook Coolify (ou modifiez l'existant) et collez le code dans le champ **Secret**.

### 8. Lancement

Cliquez sur **Deploy**. 🚀



<!-- Webhook test mar. 30 déc. 2025 09:27:22 CET -->