Merge pull request 'docs: ajout guide déploiement Coolify' (#7) from docs/coolify-deployment into main

Reviewed-on: AVQN/starter-astro#7

Dockerfile

@@ -1,19 +1,22 @@
 # Multi-stage build pour Astro
 FROM node:20-alpine AS builder
 
+# Installer pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
 WORKDIR /app
 
 # Copier les fichiers de dépendances
-COPY package*.json ./
+COPY package.json pnpm-lock.yaml ./
 
 # Installer les dépendances
-RUN npm ci
+RUN pnpm install --frozen-lockfile
 
 # Copier le code source
 COPY . .
 
 # Build du projet Astro
-RUN npm run build
+RUN pnpm run build
 
 # Stage de production avec nginx
 FROM nginx:alpine

README.md

@@ -35,10 +35,10 @@ Un starter kit moderne et élégant, optimisé pour la performance et le SEO. Co
 
 ```bash
 # Installer les dépendances
-npm install
+pnpm install
 
 # Lancer le serveur de dev
-npm run dev
+pnpm run dev
 ```
 
 Le site sera accessible sur `http://localhost:4321`
@@ -47,10 +47,10 @@ Le site sera accessible sur `http://localhost:4321`
 
 ```bash
 # Générer les fichiers statiques
-npm run build
+pnpm run build
 
 # Prévisualiser le build
-npm run preview
+pnpm run preview
 ```
 
 ### Docker
@@ -110,4 +110,60 @@ Créez un fichier `.jsx` dans `src/components/` et utilisez-le avec une directiv
 - [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**. 🚀
+
 

src/components/MobileMenu.jsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+
+export default function MobileMenu({ currentPath }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const links = [
+        { href: '/', label: 'Home' },
+        { href: '/about', label: 'About' },
+        { href: '/contact', label: 'Contact' },
+    ];
+
+    return (
+        <>
+            {/* Hamburger Button */}
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="md:hidden flex flex-col gap-1.5 p-2 hover:bg-gray-100 rounded transition-colors"
+                aria-label="Toggle menu"
+            >
+                <span
+                    className={`block w-6 h-0.5 bg-gray-900 transition-transform ${isOpen ? 'rotate-45 translate-y-2' : ''
+                        }`}
+                />
+                <span
+                    className={`block w-6 h-0.5 bg-gray-900 transition-opacity ${isOpen ? 'opacity-0' : ''
+                        }`}
+                />
+                <span
+                    className={`block w-6 h-0.5 bg-gray-900 transition-transform ${isOpen ? '-rotate-45 -translate-y-2' : ''
+                        }`}
+                />
+            </button>
+
+            {/* Mobile Menu Overlay */}
+            {isOpen && (
+                <div
+                    className="fixed inset-0 bg-black/20 z-40 md:hidden"
+                    onClick={() => setIsOpen(false)}
+                />
+            )}
+
+            {/* Mobile Menu Panel */}
+            <div
+                className={`fixed top-0 right-0 h-full w-64 bg-white shadow-xl z-50 transform transition-transform duration-300 md:hidden ${isOpen ? 'translate-x-0' : 'translate-x-full'
+                    }`}
+            >
+                <div className="flex flex-col h-full">
+                    {/* Header */}
+                    <div className="flex items-center justify-between p-6 border-b border-gray-200">
+                        <span className="text-lg font-semibold text-gray-900">Menu</span>
+                        <button
+                            onClick={() => setIsOpen(false)}
+                            className="p-2 hover:bg-gray-100 rounded transition-colors"
+                            aria-label="Close menu"
+                        >
+                            <svg
+                                className="w-6 h-6"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+
+                    {/* Navigation Links */}
+                    <nav className="flex-1 p-6">
+                        <ul className="space-y-4">
+                            {links.map((link) => (
+                                <li key={link.href}>
+                                    <a
+                                        href={link.href}
+                                        className={`block py-3 px-4 rounded-lg text-base font-medium transition-colors ${currentPath === link.href
+                                                ? 'bg-gray-900 text-white'
+                                                : 'text-gray-700 hover:bg-gray-100'
+                                            }`}
+                                        onClick={() => setIsOpen(false)}
+                                    >
+                                        {link.label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+
+                    {/* Footer */}
+                    <div className="p-6 border-t border-gray-200">
+                        <p className="text-xs text-gray-500">Astro Starter Kit</p>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

src/components/Navbar.astro

@@ -1,4 +1,6 @@
 ---
+import MobileMenu from "./MobileMenu.jsx";
+
 const currentPath = Astro.url.pathname;
 ---
 
@@ -12,7 +14,8 @@ const currentPath = Astro.url.pathname;
                 Starter Kit
             </a>
 
-            <div class="flex gap-8">
+            {/* Desktop Navigation */}
+            <div class="hidden md:flex gap-8">
                 <a
                     href="/"
                     class:list={[
@@ -47,6 +50,9 @@ const currentPath = Astro.url.pathname;
                     Contact
                 </a>
             </div>
+
+            {/* Mobile Menu */}
+            <MobileMenu currentPath={currentPath} client:load />
         </div>
     </div>
 </nav>

src/pages/about.astro

@@ -11,7 +11,7 @@ import Navbar from "../components/Navbar.astro";
 
     <main class="max-w-4xl mx-auto px-6 py-16">
         <div class="mb-16">
-            <h1 class="text-5xl font-bold tracking-tight mb-4">About</h1>
+            <h1 class="text-5xl font-bold tracking-tight mb-4">About ✨</h1>
             <p class="text-xl text-gray-600 leading-relaxed">
                 Un starter kit pensé pour la simplicité et l'élégance.
             </p>
@@ -61,7 +61,7 @@ import Navbar from "../components/Navbar.astro";
 
             <div class="mt-12 pt-8 border-t border-gray-200">
                 <p class="text-sm text-gray-500">
-                    Construit avec attention aux détails et à la performance.
+                    Construit avec soin pour la performance et l'élégance.
                 </p>
             </div>
         </div>

src/pages/index.astro

@@ -19,8 +19,15 @@ import Navbar from "../components/Navbar.astro";
 				Un point de départ minimal et élégant pour vos projets web
 				modernes.
 			</p>
+			<div class="mt-3">
+				<span
+					class="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded"
+				>
+					⚡ Powered by pnpm
+				</span>
+			</div>
 			<p class="text-sm text-gray-500 mt-2 italic">
-				✨ Mise à jour de test — Version améliorée
+				✨ Mise à jour de test — Version mobile ready 📱
 			</p>
 		</div>