325 lines
13 KiB
Markdown
325 lines
13 KiB
Markdown
# Session du 2026-05-29 / Mostuki Photo
|
|
|
|
Reprise apres /compact. Bug hooks BYAN ESM/CJS + utilisateur signalait modifs Directus invisibles cote Astro.
|
|
Session orientee : fix infra + pivot positionnement portfolio -> vitrine.
|
|
|
|
---
|
|
|
|
## 1. Hooks BYAN — ESM/CJS conflict
|
|
|
|
- Cause : `package.json` racine en `"type": "module"` (Astro) forcait les hooks `.js` en ESM
|
|
- Fix : `.claude/hooks/package.json` cree avec `{"type": "commonjs"}` -> scope local
|
|
- Settings global et project restaures en `.js` (pour ne pas casser `/Users/corentinjoguet/Teste`)
|
|
|
|
## 2. Modifs Directus invisibles cote Astro
|
|
|
|
- Diagnostic : DB intacte, mais container Astro resolvait `DIRECTUS_URL=localhost:8055` vers lui-meme -> SDK echouait -> fallback hardcode "Laurel & Vow"
|
|
- Fix : `docker-compose.yml` durci a `DIRECTUS_URL=http://directus:8055` (DNS Docker)
|
|
- Site_settings Mostuki/corentin.jog@gmail.com bien presents en DB, juste pas servis
|
|
|
|
## 3. Upload photos workflow
|
|
|
|
- Bug : champ cover affichait vide dans Directus admin malgre UUID en DB
|
|
- Cause : seed-directus.mjs avait cree le champ mais omis POST /relations -> pas de foreign key
|
|
- Fix : relation `series.cover -> directus_files.id` creee via API
|
|
- Memory feedback `directus-field-file-relation` sauvee pour futurs projets
|
|
|
|
## 4. Seed-directus.mjs corrige
|
|
|
|
3 patchs :
|
|
- `ensureRelation()` ajoute + appele apres creation du champ cover
|
|
- `setSingleton()` ne PATCH que les champs vides -> n'ecrase plus les modifs user
|
|
- `ensureM2MFiles()` pour gerer le gallery M2M proprement (collection junction + 2 relations + alias)
|
|
|
|
## 5. Page detail + Gallery M2M
|
|
|
|
- `/realisations/[id].astro` creee (hero cover + meta + grille gallery + CTA devis)
|
|
- SDK etendu : `getSerieById()`, `normalizeGallery()`, fields M2M
|
|
- Collection junction `series_files` + champ alias `gallery` crees via API
|
|
- Portfolio.astro : lien vers page detail depuis chaque carte
|
|
|
|
## 6. 4 series de test creees
|
|
|
|
1 par categorie (mariage / portrait / reportage / event) via API. Toutes routes 200.
|
|
|
|
## 7. Nav links casses hors home
|
|
|
|
- Header `#portfolio #tarifs #contact` (ancres) -> ne fonctionnait que sur la home
|
|
- Fix : routes absolues `/#realisations /tarifs /contact`
|
|
|
|
## 8. Page CONTACT avec formulaire
|
|
|
|
- Collection Directus `contact_requests` (11 champs : status, name, email, shoot_type, date_estim, lieu, budget, message, ip, ua, date_created)
|
|
- Endpoint `POST /api/contact` : validation server + honeypot `website` + storage Directus
|
|
- Page `/contact` brutalist avec form (loading/success/error states)
|
|
- Header CONTACT -> `/contact`
|
|
- TODO : notif email (provider a choisir : Resend / Nodemailer / Directus Flow)
|
|
|
|
## 9. Pivot vitrine (clarification user)
|
|
|
|
**Le site est une VITRINE pour vendre des prestations, PAS un portfolio artistique.** Memory user updated.
|
|
|
|
Changements applique :
|
|
- Rebrand UI : PORTFOLIO -> **REALISATIONS** partout (nav, sections, CTAs, routes `/realisations/[id]`)
|
|
- Collection DB `series` gardee (technique, invisible) pour ne pas casser code/scripts/relations
|
|
- Nouvelle section [04] **PROCESS** sur la home (Brief / Devis / Shoot / Livraison)
|
|
- Renumerotation [01]->[06]
|
|
- Wording vitrine PATCH dans Directus :
|
|
- `hero_stat` -> "REPONSE 48H · DEVIS GRATUIT · LIVRAISON 4 SEM."
|
|
- `hero_lede` -> ajout "DEVIS SOUS 48H" + "images qui tiennent 20 ans"
|
|
- `manifesto_paragraphs` P3 ajoute : livrables concrets (galerie privee, HD, droits, archives 7 ans)
|
|
|
|
---
|
|
|
|
## Etat final routes
|
|
|
|
| Route | Status |
|
|
|---|---|
|
|
| `/` | home 6 sections (STUDIO / MANIFESTE / REALISATIONS / PROCESS / TARIFS / CONTACT) |
|
|
| `/tarifs` | OK |
|
|
| `/contact` | form operationnel + storage Directus |
|
|
| `/realisations/{1-4}` | 4 series details |
|
|
| `/api/contact` | POST + validation + honeypot |
|
|
| `/api/files/{uuid}` | proxy assets Directus (token-authed) |
|
|
|
|
## Files touches
|
|
|
|
```
|
|
src/components/Header.astro # nav rebrand + routes absolues
|
|
src/components/Hero.astro # CTA REALISATIONS
|
|
src/components/Portfolio.astro # tag [03] REALISATIONS, lien /realisations/{id}
|
|
src/components/Pricing.astro # tag [05] (etait [04])
|
|
src/components/Contact.astro # tag [06] (etait [05])
|
|
src/components/Process.astro # NEW - 4 etapes brief/devis/shoot/livraison
|
|
src/pages/index.astro # import Process + insertion + renumerotation
|
|
src/pages/contact.astro # NEW - form brutalist
|
|
src/pages/api/contact.ts # NEW - endpoint POST
|
|
src/pages/realisations/[id].astro # NEW (moved from src/pages/series/[id].astro)
|
|
src/lib/directus.ts # +getSerieById, +normalizeGallery, gallery field
|
|
src/layouts/Layout.astro # description Cannes (etait Paris)
|
|
.claude/hooks/package.json # NEW {"type": "commonjs"}
|
|
docker-compose.yml # DIRECTUS_URL dur
|
|
scripts/seed-directus.mjs # ensureRelation, ensureM2MFiles, setSingleton non-ecrasant
|
|
SESSION.md # ce fichier
|
|
```
|
|
|
|
## Reste a faire (prochaine session)
|
|
|
|
- Remplir le champ `gallery` : drag photos sur chaque serie dans Directus admin
|
|
- Notif email du form contact (choix provider)
|
|
- Eventuel : temoignages clients, FAQ, trust signals, presse
|
|
- Mot de passe admin Directus a changer (actuel `changeme-please`)
|
|
|
|
---
|
|
|
|
# Session du 2026-05-26 / Mostuki Photo
|
|
|
|
Resume pour reprendre la prochaine fois sans devoir tout reconstruire de tete.
|
|
|
|
---
|
|
|
|
## 1. Etat du projet
|
|
|
|
**Studio** : Mostuki Photo (Corentin Joguet, Cannes / PACA)
|
|
**Email de contact** : corentin.jog@gmail.com
|
|
**Direction visuelle** : Brutalist consolide, accent violet `#5e2ca5`, photos teintees violet par defaut + couleur au hover, dark mode dispo, easter egg Konami.
|
|
|
|
**Catégories couvertes** : mariage / portrait-lifestyle / reportage-editorial / evenementiel.
|
|
|
|
---
|
|
|
|
## 2. Stack technique
|
|
|
|
| Composant | Version / role |
|
|
|-----------|----------------|
|
|
| Astro | v6 SSR avec adapter `@astrojs/node` |
|
|
| Directus | v11 (CMS headless) |
|
|
| Postgres | 16 (DB Directus) |
|
|
| `@directus/sdk` | client cote Astro |
|
|
| Auth Directus | token admin static dans `.env` (`DIRECTUS_TOKEN`) |
|
|
| Runtime Docker | Colima |
|
|
|
|
**Important** : utiliser `import.meta.env.X` (pas `process.env.X`) dans les fichiers Astro/lib pour que Vite charge les vars depuis `.env`.
|
|
|
|
---
|
|
|
|
## 3. Comment relancer la stack
|
|
|
|
```bash
|
|
cd /Users/corentinjoguet/Documents/site-photo
|
|
|
|
# 1. Demarrer Colima si pas deja running
|
|
colima status || colima start
|
|
|
|
# 2. Demarrer Postgres + Directus (Astro tourne en local pour HMR)
|
|
docker-compose up -d postgres directus
|
|
|
|
# 3. Lancer Astro en local
|
|
npm run dev
|
|
```
|
|
|
|
URLs :
|
|
- Astro : http://localhost:4321
|
|
- Directus admin : http://localhost:8055 (admin@laurelvow.fr / changeme-please)
|
|
- Test Brutalist statique : http://localhost:8081/brutalist.html (container `laurel-vow` nginx, lance manuellement avec `docker-compose -f _byan-output/skills-test/laurel-vow/docker-compose.yml up -d`)
|
|
|
|
---
|
|
|
|
## 4. Structure du code
|
|
|
|
```
|
|
site-photo/
|
|
astro.config.mjs SSR + node adapter
|
|
docker-compose.yml postgres + directus + astro (3 services)
|
|
Dockerfile.dev astro dev container
|
|
.env vars locales (DIRECTUS_TOKEN dedans, non commit)
|
|
.env.example template a partager
|
|
package.json npm scripts (dev, build, preview)
|
|
|
|
scripts/
|
|
seed-directus.mjs cree les 2 collections + permissions + defaults
|
|
create-admin-token.mjs genere et set le token admin static dans .env
|
|
|
|
src/
|
|
content.config.ts Astro v6 schema (legacy, ne sert plus puisque Directus)
|
|
|
|
layouts/Layout.astro head + body + boot div + script client
|
|
|
|
pages/
|
|
index.astro home, lit Directus.site_settings
|
|
tarifs.astro page tarifs detaillee (4 cats x 3 formules)
|
|
404.astro page erreur brutaliste
|
|
api/files/[id].ts proxy d'images Directus (utilise admin token)
|
|
|
|
components/
|
|
Header.astro logo + nav + theme toggle
|
|
Hero.astro bar + tag + display + lede + cta + stats
|
|
AsciiSep.astro separateur ASCII
|
|
Manifesto.astro manifeste 2 colonnes
|
|
Portfolio.astro lit Directus.series, fallback empty state
|
|
Pricing.astro 4 cards categorie cliquables -> /tarifs#slug
|
|
Contact.astro mailto avec subject auto
|
|
Ticker.astro bande defilante violette
|
|
Footer.astro footer + build-info + easter egg signpost
|
|
|
|
lib/
|
|
directus.ts client typescript + types + fallbacks
|
|
|
|
styles/
|
|
brutalist.css tokens light + dark + composants
|
|
|
|
scripts/
|
|
brutalist.client.js boot screen + dark mode + Konami code
|
|
|
|
public/
|
|
favicon.svg logo L violet
|
|
scripts/brutalist.client.js copie servie statique
|
|
|
|
_byan-output/skills-test/laurel-vow/ Tests Brutalist statiques (avant transposition Astro)
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Directus : collections existantes
|
|
|
|
### `site_settings` (singleton, prerempli)
|
|
|
|
Edite via UI : http://localhost:8055/admin/content/site_settings
|
|
|
|
Champs :
|
|
- `studio_name`, `city`, `region`, `country`, `coords`, `email`, `est_year`, `current_year`
|
|
- Hero : `hero_tag`, `hero_display_lines` (json array), `hero_italic_line`, `hero_lede`, `hero_stat`, `hero_year_prefix`, `hero_year_suffix`
|
|
- Manifesto : `manifesto_tag`, `manifesto_italic`, `manifesto_end`, `manifesto_paragraphs` (json array)
|
|
- Pricing : `pricing_categories` (json array de 4 cards)
|
|
- Contact : `contact_title`, `contact_body`, `contact_addr`
|
|
|
|
### `series` (collection, vide pour l'instant)
|
|
|
|
Edite via UI : http://localhost:8055/admin/content/series
|
|
|
|
Champs cles : `index`, `category`, `title`, `lieu`, `date_shoot`, `cover` (file image), `cover_alt`, `excerpt`, `published`.
|
|
|
|
Champs optionnels mariage : `couple`, `invites`, `formule`.
|
|
Champs optionnels autres : `client`, `duree`.
|
|
|
|
---
|
|
|
|
## 6. Decisions importantes prises pendant la session
|
|
|
|
### Skills design installees
|
|
`.claude/skills/` du projet contient :
|
|
- `impeccable` (plugin natif Apache 2.0) : critique / audit / polish / +20 commandes
|
|
- `byan-taste` (taste-skill v2 adapte BYAN, MIT) : generation frontend anti-slop
|
|
- `byan-taste-imagegen-web` : moodboards visuels
|
|
- `byan-brandkit` : planches d'identite de marque
|
|
|
|
Hook `fact-check-absolutes.js` etendu avec exemption pour ces 4 paths (sinon les "always/never" du contenu importe bloquent les Edits).
|
|
|
|
### Direction visuelle Brutalist consolidee
|
|
Refonte testee sur landing fictive `laurel-vow` (6 variantes : Editorial / Cinematic / Magazine / Mocha / Tokyo Night / Brutalist). Brutalist choisi puis polish :
|
|
- Accent violet `#5e2ca5` (apres pivot rouge -> violet)
|
|
- Photos teintees violet par defaut, couleur revelee au hover (inversion vs grayscale initial)
|
|
- Mono partout assume (JetBrains Mono)
|
|
- All-caps sur le body, hairlines epaisses, ASCII separators
|
|
- Easter egg Konami code = VHS mode
|
|
- Em-dash banni (impeccable rule), remplace par `/` ou middot
|
|
|
|
### Multi-categorie assume
|
|
Le site n'est pas un wedding-only. Quatre terrains, une methode. Premier client probable = mariage, mais le site se prepare aux 3 autres categories.
|
|
|
|
### Positionnement tarifaire milieu-haut
|
|
Apres benchmark prix region PACA (4 sources, [CLAIM L3]) :
|
|
- Mariage : 1 200 € (1/2j) / 2 200 € (j) / des 3 000 € (sur-mesure)
|
|
- Portrait : 400 € (1h) / 700 € (2h) / sur devis
|
|
- Reportage : 500 € (1/2j) / 900 € (j) / sur devis
|
|
- Evenementiel : 700 € (2h) / 1 100 € (1/2j) / 1 800 € (j)
|
|
|
|
Pas le bas de gamme (incoherent avec brand Brutalist), pas le haut de gamme (pas encore le track record).
|
|
|
|
---
|
|
|
|
## 7. Tasks pending
|
|
|
|
Pour reprise :
|
|
- **#3** Composant Gallery + Lightbox (visualiseur plein ecran par serie, navigation clavier)
|
|
- **#6** README projet avec instructions deploy
|
|
- **#14** Optionnel : activer permissions publiques Directus (Settings -> Access Policies -> Public). Pour l'instant on a contourne avec un admin token + proxy `/api/files/[id].ts`. Si tu veux deployer en prod sans exposer le token, faut config les permissions publiques sur `site_settings`, `series`, `directus_files`.
|
|
|
|
Tasks possibles a creer :
|
|
- Ajouter ta premiere serie portfolio dans Directus (upload cover + metadata)
|
|
- Brancher la page `/tarifs` sur une collection Directus `pricing_blocks` (actuellement hardcoded)
|
|
- Page About avec parcours + bio
|
|
- Form de contact reel (pas juste mailto) avec stockage Directus
|
|
- Setup deploy prod (Dockerfile multi-stage build + Traefik labels + DNS)
|
|
- Lighthouse audit + perf reelle
|
|
- Optimization images (sharp pipeline custom ou Directus transforms)
|
|
|
|
---
|
|
|
|
## 8. Memory persistente (pour les futures sessions Claude)
|
|
|
|
Trois fichiers crees dans `/Users/corentinjoguet/.claude/projects/-Users-corentinjoguet-Documents-site-photo/memory/` :
|
|
|
|
- `project_site_photo.md` : etat du projet, stack, dossier, decisions
|
|
- `design_skills_setup.md` : skills installees, pipeline, hook exemption
|
|
- `user_design_taste.md` : preference Brutalist contre-intuitive
|
|
|
|
Index dans `MEMORY.md` du meme dossier.
|
|
|
|
---
|
|
|
|
## 9. Pour reprendre vraiment vite
|
|
|
|
```bash
|
|
cd /Users/corentinjoguet/Documents/site-photo
|
|
colima status || colima start
|
|
docker-compose up -d postgres directus
|
|
npm run dev
|
|
```
|
|
|
|
Puis ouvre :
|
|
- http://localhost:4321 -> site
|
|
- http://localhost:8055 -> CMS Directus
|
|
- ce fichier (SESSION.md) -> contexte
|
|
|
|
Et dis a Claude : "lis SESSION.md pour reprendre Mostuki Photo".
|