# REBOURS — Documentation technique ## Architecture du projet ``` rebours/ ├── src/ │ ├── layouts/ │ │ └── Base.astro # Layout HTML commun (SEO, fonts, CSS) │ ├── lib/ │ │ └── sanity.mjs # Client Sanity + queries + image helper │ ├── pages/ │ │ ├── index.astro # Page principale (hero, collection, newsletter) │ │ ├── collection/ │ │ │ └── [slug].astro # Pages produits statiques (SSG) │ │ ├── success.astro # Page de confirmation Stripe │ │ ├── robots.txt.ts # robots.txt généré au build │ │ └── sitemap.xml.ts # sitemap.xml généré au build │ └── scripts/ │ └── main.js # JS client (cursor CAD, grid, panel, routing, checkout) ├── public/ │ ├── style.css # CSS global │ └── assets/ # Images statiques (fallback), favicon, son ambiant ├── sanity/ # Sanity Studio (projet séparé) │ ├── sanity.config.ts │ ├── sanity.cli.ts │ └── schemas/ │ ├── product.ts # Schéma produit │ └── index.ts ├── server.mjs # Serveur API Fastify (Stripe uniquement) ├── astro.config.mjs # Config Astro (SSG, proxy dev) ├── nginx.conf # Config nginx de référence └── .env # Variables d'environnement (non versionné) ``` ## Stack | Couche | Techno | |--------|--------| | Front (SSG) | Astro + HTML/CSS/JS vanilla + GSAP | | CMS | Sanity (headless, hébergé) | | API | Fastify (Node.js) | | Paiement | Stripe Checkout (price_data inline) | | Images | Sanity CDN (avec transformations) | | Reverse proxy | Nginx | | Hébergement | VPS (Debian) | | Fonts | Space Mono (Google Fonts) | --- ## Développement local ### Prérequis - Node.js >= 18 - Un compte Sanity avec un projet créé - Un fichier `.env` à la racine (voir `.env.example`) ### Variables d'environnement (.env) ```env SANITY_PROJECT_ID=your_project_id SANITY_DATASET=production SANITY_API_TOKEN= # Optionnel STRIPE_SECRET_KEY=sk_test_... STRIPE_WEBHOOK_SECRET=whsec_... DOMAIN=http://localhost:4321 PORT=8888 ``` ### Lancer le projet ```bash npm install npm run dev ``` Cela lance en parallèle (via `concurrently`) : - `astro dev` sur http://localhost:4321 - `node --watch server.mjs` (mode dev, PORT=8888) Le proxy Vite dans `astro.config.mjs` redirige `/api/*` vers `http://127.0.0.1:8888`. ### Sanity Studio ```bash cd sanity npm install npx sanity dev ``` Accessible sur http://localhost:3333 ### Build ```bash npm run build # Génère ./dist/ (fichiers statiques Astro) ``` --- ## CMS — Sanity ### Accès - Studio local : `npx sanity dev` - Studio déployé : `npx sanity deploy` - Dashboard : https://www.sanity.io/manage ### Schéma Produit Champs principaux : - **name** : Nom technique (Solar_Altar) - **productDisplayName** : Nom affiché (Solar Altar) - **slug** : Auto-généré depuis le nom - **image** : Image avec hotspot + texte alt - **price** : En centimes (180000 = 1 800 EUR). Vide = non disponible - **isPublished** : Toggle pour masquer sans supprimer ### Ajouter un produit 1. Ouvrir Sanity Studio 2. Créer un nouveau document "Produit" 3. Remplir les champs, uploader l'image 4. Publier 5. Rebuild le site : `npm run build` + déployer ### Images Les images sont servies via le CDN Sanity avec transformations automatiques. --- ## Stripe ### Architecture Le checkout utilise `price_data` inline — pas de prix pré-créés dans Stripe. Quand un client clique "Commander" : 1. Le front envoie le slug du produit à `/api/checkout` 2. Le serveur fetch le produit depuis Sanity (prix, nom, image) 3. Le serveur crée une session Stripe Checkout avec `price_data` 4. Le client est redirigé vers Stripe 5. Après paiement : `/success?session_id=...` ### Endpoints API | Route | Méthode | Description | |-------|---------|-------------| | `/api/checkout` | POST | Crée une session Stripe Checkout | | `/api/session/:id` | GET | Vérifie le statut d'une session | | `/api/webhook` | POST | Reçoit les événements Stripe | | `/api/health` | GET | Health check | ### Configuration - Test : clés `sk_test_...` dans `.env` - Prod : clés `sk_live_...` dans `.env` sur le serveur - Webhook : `https://rebours.studio/api/webhook` --- ## Production ### Serveur : ordinarthur@10.10.0.13 ### Architecture prod ``` Internet -> Nginx (port 80) -> /var/www/html/rebours/dist/ (statiques) -> /api/* -> proxy -> Fastify :3000 ``` ### Variables d'environnement en prod ```env SANITY_PROJECT_ID=... SANITY_DATASET=production STRIPE_SECRET_KEY=sk_live_... STRIPE_WEBHOOK_SECRET=whsec_... DOMAIN=https://rebours.studio PORT=3000 ``` ### Déploiement ```bash npm run build scp -r dist/* ordinarthur@10.10.0.13:/tmp/rebours-dist/ ssh ordinarthur@10.10.0.13 "sudo cp -r /tmp/rebours-dist/* /var/www/html/rebours/dist/" ``` Si server.mjs a changé : ```bash scp server.mjs ordinarthur@10.10.0.13:/tmp/server.mjs ssh ordinarthur@10.10.0.13 "sudo cp /tmp/server.mjs /var/www/html/rebours/server.mjs && sudo systemctl restart rebours" ``` --- ## Routing | URL | Comportement | |-----|-------------| | `/` | Page principale Astro (SSG) | | `/collection/{slug}` | Page produit (SSG), auto-open panel via `window.__OPEN_PANEL__` | | `/success?session_id=...` | Page de confirmation Stripe | | `/robots.txt` | Généré au build | | `/sitemap.xml` | Généré au build depuis Sanity | --- ## Fichiers à ne jamais versionner - `.env` - `node_modules/` - `dist/` - `sanity/node_modules/`