/
├── 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

# 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

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

# Prévisualiser le build
pnpm run preview

Docker

# 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:* :

<!-- 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/ :

---
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 - Framework web moderne
React - Bibliothèque UI
Tailwind CSS - Framework CSS utility-first
Docker - 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

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

2. Création du projet dans Coolify

Dans Coolify, créez un New Project.
Choisissez Private Repository (avec déploiement via clé privée).
Sélectionnez la clé privée : Gitea.
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)

Allez dans l'onglet Features (ou Configuration -> Advanced).
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 :

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

8. Lancement

Cliquez sur Deploy. 🚀