rebours/CLAUDE.md

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 (SSR)	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)

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
FASTIFY_PORT=3000        # Port Fastify API (prod)
ASTRO_PORT=4321          # Port Astro SSR (prod)

Lancer le projet

pnpm install
pnpm dev

Cela lance en parallèle (via concurrently) :

• astro dev sur http://localhost:4321
• node --watch server.mjs (mode dev)

Le proxy Vite dans astro.config.mjs redirige /api/* vers le serveur Fastify.

Sanity Studio

cd sanity
npm install
npx sanity dev

Accessible sur http://localhost:3333

Build

pnpm build
# Génère ./dist/ (serveur Astro SSR + assets client)

---

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 → visible immédiatement sur le site (SSR, pas de rebuild nécessaire)

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 (SSR)

Internet -> Nginx (port 80) -> /           -> proxy -> Astro SSR :4321
                             -> /_astro/*   -> fichiers statiques (dist/client/)
                             -> /api/*      -> proxy -> Fastify :3000

Services systemd

Service	Port	Rôle
rebours-ssr	4321	Astro SSR (pages dynamiques)
rebours	3000	Fastify API (Stripe, checkout)

Variables d'environnement en prod

SANITY_PROJECT_ID=...
SANITY_DATASET=production
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
DOMAIN=https://rebours.studio
FASTIFY_PORT=3000
ASTRO_PORT=4321

Déploiement

pnpm build
scp -r dist/* ordinarthur@10.10.0.13:/tmp/rebours-dist/
ssh ordinarthur@10.10.0.13 "sudo rm -rf /var/www/html/rebours/dist && sudo mkdir -p /var/www/html/rebours/dist && sudo cp -r /tmp/rebours-dist/* /var/www/html/rebours/dist/ && sudo chown -R ordinarthur:ordinarthur /var/www/html/rebours/dist && sudo systemctl restart rebours-ssr"

Si server.mjs a changé :

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 (SSR, données Sanity live)
/collection/{slug}	Page produit (SSR), 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/