# 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".