feat(media): add MediaImage wrapper to handle public/private image rendering

- add `MediaImage.client.js` component that routes to `next/image` for public media and native `<img>` for private media to prevent CDN cache leaking private content
- replace direct `<img>` usage in `MediaGrid` and `MediaPage` with `MediaImage`
- document `MediaImage` usage and rationale in `src/features/media/README.md`
- update `docs/dev/ARCHITECTURE.md` to reference the `MediaImage` wrapper convention
This commit is contained in:
2026-04-26 19:18:35 -04:00
parent 90e172f571
commit 8e37eb53ff
5 changed files with 102 additions and 11 deletions
+3 -1
View File
@@ -33,4 +33,6 @@ Ces modules existent pour éviter la duplication. Avant d'écrire du code utilit
**API** — Utiliser `src/core/api` pour l'API admin et publique. Définir les routes avec `defineApiRoutes()` (valide la config au démarrage). L'authentification est déclarée dans la définition de route (`auth: 'public' | 'user' | 'admin'`) — ne jamais la vérifier manuellement dans un handler. Retourner `apiSuccess()` / `apiError()` dans tous les handlers. Voir `src/core/api/README.md` pour le détail.
**Médias** — Pour gérer les fichiers attachés au contenu publié (images, PDFs, vidéos), utiliser `src/features/media`. Activable via `ZEN_MEDIA=true`. Expose `uploadMedia`/`deleteMedia`/`attachMedia`/`detachMedia` côté serveur et un composant `MediaPicker` réutilisable côté client. Voir `src/features/media/README.md`. Distinct d'un futur module `files` (style Drive/Dropbox) — ne pas confondre les deux usages.
**Médias** — Pour gérer les fichiers attachés au contenu publié (images, PDFs, vidéos), utiliser `src/features/media`. Activable via `ZEN_MEDIA=true`. Expose `uploadMedia`/`deleteMedia`/`attachMedia`/`detachMedia` côté serveur et un composant `MediaPicker` réutilisable côté client. Voir `src/features/media/README.md`. Distinct d'un futur module `files` (style Drive/Dropbox) — ne pas confondre les deux usages.
Pour **afficher** une image média, utiliser le wrapper `MediaImage` du module (pas `<img>` direct, pas `next/image` direct). Il route les médias publics via `next/image` (srcset AVIF/WebP, lazy) et garde un `<img>` natif pour les médias privés — `/_next/image` cache la réponse optimisée par URL et fuiterait l'image privée à tous les visiteurs après le premier hit.