diff --git a/app/Competences/[slug]/page.tsx b/app/Competences/[slug]/page.tsx index fd7616a..edfb42c 100644 --- a/app/Competences/[slug]/page.tsx +++ b/app/Competences/[slug]/page.tsx @@ -2,8 +2,10 @@ import { useParams } from "next/navigation"; import { useEffect, useState } from "react"; +import Image from "next/image"; import Link from "next/link"; import { getApiUrl } from "../../utils/getApiUrl"; +import { pickStrapiImage, type StrapiMediaLike } from "../../utils/strapiImage"; import VignetteCarousel from "../../components/VignetteCarousel"; import ContentSectionCompetencesContainer from "../../components/ContentSectionCompetencesContainer"; @@ -38,7 +40,7 @@ type Realisation = { description?: string; link?: string; order?: number; - picture?: Array<{ url?: string; name?: string }>; + picture?: Array; }; type Competence = { @@ -200,10 +202,17 @@ export default function CompetencePage() {
{realisations.map((realisation, idx) => { const pictures = realisation.picture ?? []; - const images = pictures.map((img) => ({ - url: img?.url ? `${apiUrl}${img.url}` : "/placeholder.jpg", - alt: img?.name || `Visuel de la réalisation ${realisation.name}`, - })); + const images = pictures + .map((img) => { + const picked = pickStrapiImage(apiUrl, img, "card"); + const url = picked?.src ?? (img?.url ? `${apiUrl}${img.url}` : null); + if (!url) return null; + return { + url, + alt: img?.name || `Visuel de la réalisation ${realisation.name}`, + }; + }) + .filter(Boolean); const firstImage = images[0]; // Comportement voulu : la vignette renvoie TOUJOURS vers la fiche @@ -226,11 +235,12 @@ export default function CompetencePage() { {images.length > 1 ? ( ) : firstImage ? ( - {firstImage.alt} ) : (
diff --git a/app/Competences/page.jsx b/app/Competences/page.jsx index 62759c6..0748ef9 100644 --- a/app/Competences/page.jsx +++ b/app/Competences/page.jsx @@ -2,7 +2,9 @@ import { useEffect, useState } from "react"; import Link from "next/link"; +import Image from "next/image"; import { getApiUrl } from "../utils/getApiUrl"; +import { pickStrapiImage } from "../utils/strapiImage"; import VignetteCarousel from "../components/VignetteCarousel"; import "../globals.css"; import "../assets/main.css"; @@ -108,10 +110,18 @@ export default function Page() {
{competences.map((competence, idx) => { const pictures = competence.picture ?? []; - const images = pictures.map((img) => ({ - url: img.url ? `${apiUrl}${img.url}` : "/placeholder.jpg", - alt: img.name || `Visuel de la compétence ${competence.name}`, - })); + const images = pictures + .map((img) => { + const picked = pickStrapiImage(apiUrl, img, "card"); + const url = + picked?.src ?? (img.url ? `${apiUrl}${img.url}` : null); + if (!url) return null; + return { + url, + alt: img.name || `Visuel de la compétence ${competence.name}`, + }; + }) + .filter(Boolean); const firstImage = images[0]; return ( @@ -124,11 +134,12 @@ export default function Page() { {images.length > 1 ? ( ) : firstImage ? ( - {firstImage.alt} ) : (
diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index 9106d1d..317c93a 100644 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -1,5 +1,6 @@ "use client"; +import Image from "next/image"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { Swiper, SwiperSlide } from "swiper/react"; @@ -77,13 +78,17 @@ export default function Carousel({ images, className }: CarouselProps) { } > {images.map((img, index) => ( - - + {img.alt} setSelectedImage(img.url)} - loading="lazy" /> ))} diff --git a/app/components/CarouselCompetences.tsx b/app/components/CarouselCompetences.tsx index 10bfc71..caac324 100644 --- a/app/components/CarouselCompetences.tsx +++ b/app/components/CarouselCompetences.tsx @@ -1,5 +1,6 @@ "use client"; +import Image from "next/image"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { Swiper, SwiperSlide } from "swiper/react"; @@ -65,13 +66,17 @@ export default function CarouselCompetences({ images, className }: CarouselProps } > {images.map((img, index) => ( - - + {img.alt} setSelectedImage(img.url)} - loading="lazy" /> ))} diff --git a/app/components/ContentSection.tsx b/app/components/ContentSection.tsx index a0a0e94..fe6efb5 100644 --- a/app/components/ContentSection.tsx +++ b/app/components/ContentSection.tsx @@ -4,17 +4,12 @@ import Link from "next/link"; import { useEffect, useState } from "react"; import { fetchData } from "../utils/fetchData"; import { getApiUrl } from "../utils/getApiUrl"; +import { pickStrapiImage, type StrapiMediaLike } from "../utils/strapiImage"; import Carousel from "./Carousel"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; -interface ImageData { - url: string; - formats?: { - large?: { - url: string; - }; - }; +interface ImageData extends StrapiMediaLike { name?: string; } @@ -157,10 +152,21 @@ export default function ContentSection({ const richText = data.Resum ?? data.resum ?? ""; const images = - picture?.map((img: ImageData) => ({ - url: `${apiUrl}${img.formats?.large?.url || img.url}`, - alt: img.name || `Visuel du projet ${name}`, - })) || []; + picture + ?.map((img: ImageData) => { + const picked = pickStrapiImage(apiUrl, img, "full"); + const url = + picked?.src ?? + (img.url || img.formats?.large?.url + ? `${apiUrl}${img.formats?.large?.url ?? img.url}` + : null); + if (!url) return null; + return { + url, + alt: img.name || `Visuel du projet ${name}`, + }; + }) + .filter((item): item is { url: string; alt: string } => item != null) || []; return (
diff --git a/app/components/ContentSectionCompetences.tsx b/app/components/ContentSectionCompetences.tsx index de527ba..fb482fe 100644 --- a/app/components/ContentSectionCompetences.tsx +++ b/app/components/ContentSectionCompetences.tsx @@ -3,16 +3,13 @@ import Link from "next/link"; import { useEffect, useRef, useState } from "react"; import { getApiUrl } from "../utils/getApiUrl"; +import { pickStrapiImage, type StrapiMediaLike } from "../utils/strapiImage"; import CarouselCompetences from "./CarouselCompetences"; import ReactMarkdown from "react-markdown"; import rehypeRaw from "rehype-raw"; import ModalGlossaire from "./ModalGlossaire"; -interface ImageData { - url: string; - formats?: { - large?: { url: string }; - }; +interface ImageData extends StrapiMediaLike { name?: string; } @@ -132,10 +129,21 @@ export default function ContentSectionCompetences({ const { name, content, picture } = competenceData; const images = - picture?.map((img) => ({ - url: `${apiUrl}${img.formats?.large?.url || img.url}`, - alt: img.name || `Visuel de la compétence ${name}`, - })) || []; + picture + ?.map((img: ImageData) => { + const picked = pickStrapiImage(apiUrl, img, "full"); + const url = + picked?.src ?? + (img.url || img.formats?.large?.url + ? `${apiUrl}${img.formats?.large?.url ?? img.url}` + : null); + if (!url) return null; + return { + url, + alt: img.name || `Visuel de la compétence ${name}`, + }; + }) + .filter((item): item is { url: string; alt: string } => item != null) || []; /** * Transforme le Markdown en injectant des spans `.glossary-keyword` / `.chatbot-keyword` diff --git a/app/components/ModalGlossaire.tsx b/app/components/ModalGlossaire.tsx index 70a1c45..b82c0cc 100644 --- a/app/components/ModalGlossaire.tsx +++ b/app/components/ModalGlossaire.tsx @@ -4,15 +4,10 @@ import { useEffect } from "react"; import { createPortal } from "react-dom"; import CarouselCompetences from "./CarouselCompetences"; import { getApiUrl } from "../utils/getApiUrl"; +import { pickStrapiImage, type StrapiMediaLike } from "../utils/strapiImage"; -interface ImageData { - url: string; +interface ImageData extends StrapiMediaLike { name?: string; - formats?: { - large?: { - url: string; - }; - }; } interface GlossaireMot { @@ -43,10 +38,21 @@ export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) { }, [onClose]); const images = - mot.images?.map((img) => ({ - url: `${apiUrl}${img.formats?.large?.url || img.url}`, - alt: img.name || "Illustration", - })) || []; + mot.images + ?.map((img: ImageData) => { + const picked = pickStrapiImage(apiUrl, img, "full"); + const url = + picked?.src ?? + (img.url || img.formats?.large?.url + ? `${apiUrl}${img.formats?.large?.url ?? img.url}` + : null); + if (!url) return null; + return { + url, + alt: img.name || "Illustration", + }; + }) + .filter((item): item is { url: string; alt: string } => item != null) || []; return createPortal(
{images.map((img, index) => ( - - + {img.alt} ))} diff --git a/app/layout.tsx b/app/layout.tsx index 9256b8a..15e4247 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -89,6 +89,12 @@ export default function RootLayout({ children }: { children: React.ReactNode }) href="https://fonts.gstatic.com" crossOrigin="" /> + {/* API Strapi (médias JSON + images) — origine alignée sur NEXT_PUBLIC_API_URL. */} + @@ -120,11 +127,14 @@ export default function HomePage() {
{imageUrl ? (
-
- + {`Portrait
diff --git a/app/portfolio/page.jsx b/app/portfolio/page.jsx index ff9a5e5..7807fad 100644 --- a/app/portfolio/page.jsx +++ b/app/portfolio/page.jsx @@ -2,7 +2,9 @@ import { useEffect, useState } from "react"; import Link from "next/link"; +import Image from "next/image"; import { getApiUrl } from "../utils/getApiUrl"; +import { pickStrapiImage } from "../utils/strapiImage"; import VignetteCarousel from "../components/VignetteCarousel"; import "../assets/main.css"; import "../globals.css"; @@ -113,10 +115,16 @@ export default function Page() {
{projects.map((project, idx) => { const pictures = project.picture ?? []; - const images = pictures.map((img) => ({ - url: `${apiUrl}${img.url}`, - alt: img.name || `Visuel du projet ${project.name}`, - })); + const images = pictures + .map((img) => { + const picked = pickStrapiImage(apiUrl, img, "card"); + if (!picked) return null; + return { + url: picked.src, + alt: img.name || `Visuel du projet ${project.name}`, + }; + }) + .filter(Boolean); const firstImage = images[0]; return ( @@ -129,11 +137,12 @@ export default function Page() { {images.length > 1 ? ( ) : firstImage ? ( - {firstImage.alt} ) : (
diff --git a/app/utils/strapiImage.ts b/app/utils/strapiImage.ts new file mode 100644 index 0000000..e97340b --- /dev/null +++ b/app/utils/strapiImage.ts @@ -0,0 +1,69 @@ +/** + * Sélection d'une variante Strapi (thumbnail / small / medium / large) pour + * limiter le poids transféré sans sacrifier la qualité affichée. + */ + +export type StrapiImagePreset = "card" | "thumbnail" | "hero" | "full"; + +export interface StrapiFormatEntry { + url?: string | null; + width?: number | null; + height?: number | null; +} + +export interface StrapiMediaLike { + url?: string | null; + width?: number | null; + height?: number | null; + formats?: { + thumbnail?: StrapiFormatEntry | null; + small?: StrapiFormatEntry | null; + medium?: StrapiFormatEntry | null; + large?: StrapiFormatEntry | null; + } | null; +} + +function absUrl(apiUrl: string, path: string | null | undefined): string | null { + if (path == null || path === "") return null; + if (path.startsWith("http://") || path.startsWith("https://")) return path; + return `${apiUrl.replace(/\/$/, "")}${path.startsWith("/") ? "" : "/"}${path}`; +} + +/** + * Choisit l’URL + dimensions d’une image média Strapi selon le contexte d’affichage. + * Retourne null si aucune URL exploitable. + */ +export function pickStrapiImage( + apiUrl: string, + media: StrapiMediaLike | null | undefined, + preset: StrapiImagePreset +): { src: string; width: number; height: number } | null { + if (!media?.url) return null; + + const f = media.formats; + let chosen: StrapiFormatEntry | undefined; + + switch (preset) { + case "thumbnail": + chosen = f?.thumbnail ?? f?.small ?? undefined; + break; + case "card": + chosen = f?.medium ?? f?.small ?? f?.thumbnail ?? undefined; + break; + case "hero": + case "full": + chosen = f?.large ?? f?.medium ?? f?.small ?? undefined; + break; + default: + chosen = f?.medium ?? f?.small; + } + + const relPath = chosen?.url ?? media.url; + const src = absUrl(apiUrl, relPath); + if (!src) return null; + + const width = Number(chosen?.width ?? media.width) || 800; + const height = Number(chosen?.height ?? media.height) || 600; + + return { src, width, height }; +} diff --git a/delete b/delete new file mode 100644 index 0000000..f377a9d --- /dev/null +++ b/delete @@ -0,0 +1 @@ +LiteLLMProxy diff --git a/docs-site-interne/02-frontend-next.md b/docs-site-interne/02-frontend-next.md index cc1c6db..6bd1f58 100644 --- a/docs-site-interne/02-frontend-next.md +++ b/docs-site-interne/02-frontend-next.md @@ -1,6 +1,6 @@ # Frontend Next.js -**Dernière mise à jour :** 2026-04-24 +**Dernière mise à jour :** 2026-04-28 ## Stack @@ -43,7 +43,9 @@ ## Configuration Next - `next.config.ts` : `rewrites` de `/api/:path*` vers `${API_URL}/api/:path*` où `API_URL` vient de `NEXT_PUBLIC_API_URL` ou défaut production. -- `images.domains` : `localhost`, `api.fernandgrascalvet.com`. +- **`next/image`** : `images.remotePatterns` vers les chemins **`/uploads/**`** de l’API Strapi (HTTPS prod + `localhost` / `127.0.0.1:1337` en dev) ; `formats` AVIF/WebP ; **`compress: false`** (compatibilité reverse proxy IIS — voir [`09-performances-images.md`](./09-performances-images.md) §4.1). +- **Médias Strapi** : utilitaire **`pickStrapiImage`** (`app/utils/strapiImage.ts`) pour préférer les variantes `medium` / `large` selon le contexte (liste, hero, galerie). +- Plan **Server Components** (données Strapi), non implémenté : [`10-plan-server-components.md`](./10-plan-server-components.md). ## Composants notables @@ -59,6 +61,7 @@ app/layout.tsx app/page.tsx app/utils/getApiUrl.ts +app/utils/strapiImage.ts app/utils/fetchData.ts app/api/contact/route.ts next.config.ts diff --git a/docs-site-interne/09-performances-images.md b/docs-site-interne/09-performances-images.md index cd7e628..d9c6c04 100644 --- a/docs-site-interne/09-performances-images.md +++ b/docs-site-interne/09-performances-images.md @@ -1,10 +1,11 @@ # Audit performances images & dev mode -**Dernière mise à jour :** 2026-04-28 -**Statut :** diagnostic — aucune modification du code n'est encore appliquée. +**Dernière mise à jour :** 2026-04-28 (révision compression IIS/Next + lien plan SC) +**Statut :** lots **A, B, C** et socle du lot **F** réalisés dans le code Next ; inventaire médias (Lot **D**) et autres lots **non** faits sauf mention. -> Document d'analyse à l'origine d'un futur lot de corrections. À mettre à jour -> au fur et à mesure que les actions sont réalisées (cocher les cases). +> Document hybridé : conserve l’audit historique (§2 inventaire médias inchangé +> tant qu’on n’a pas re-mesuré `cmsbackend/public/uploads/`). Les §3–4 reflètent +> l’implémentation actuelle après l’itération perf front. ## 1. Contexte du problème @@ -59,66 +60,63 @@ Strapi génère bien ces variantes — mais **dans le format de l'original**. Do un `.png` de 4 MB produit un `large_…png` de ~1 MB, alors qu'une version WebP serait à ~150-300 KB pour la même qualité perçue. -## 3. Comment les images sont consommées par Next +## 3. Comment les images sont consommées par Next (état courant) -### 3.1 Toujours `img.url` (l'original), jamais les variantes +### 3.1 Utilitaire `pickStrapiImage` (`app/utils/strapiImage.ts`) -`app/portfolio/page.jsx` (vignettes en grille) : +Toute lecture d’un média Strapi passant par le front doit préférer une **variante** +à l’original : -```132:137:app/portfolio/page.jsx - {firstImage.alt} -``` +| Preset | Usage typique | Ordre de préférence | +|--------|----------------|---------------------| +| `card` | Grilles liste portfolio / compétences / vignettes `realisation-ia` | `medium` → `small` → `thumbnail` → original | +| `hero` | Portrait hero home | `large` → `medium` → `small` → original | +| `full` | Galeries fiche projet, compétence, glossaire (carousel détail) | `large` → `medium` → `small` → original | -Même pattern dans : +Les pages et composants listés au §3.2 appellent cet utilitaire puis +construisent une URL absolue avec `getApiUrl()`. Si Strapi ne renvoie pas de +bloc `formats` (upload incomplet ou vieux contenu), on retombe sur +`formats.large ?? url` comme avant pour les zones **déjà** codées ainsi. -- `app/competences/page.jsx` (ligne ~127) -- `app/competences/[slug]/page.tsx` (ligne ~229) -- `app/components/Carousel.tsx` (ligne ~81 + lightbox 120) -- `app/components/CarouselCompetences.tsx` (ligne ~69 + lightbox 108) -- `app/components/VignetteCarousel.tsx` (ligne ~58) -- `app/page.tsx` (portrait hero, ligne 124) +### 3.2 `next/image` + `sizes` -**Aucun de ces composants ne lit `formats.thumbnail.url`, `formats.small.url`, -`formats.medium.url` ni `formats.large.url`** — Strapi a déjà fait le travail -de redimensionnement, on l'ignore. +**Import** `next/image` utilisé pour les flux suivants : -> **Constat n° 2 :** une carte de portfolio en grille charge un PNG ~3 MB -> alors qu'on l'affiche en 400×300 px. La variante `medium_` (~300 KB) ou -> `small_` (~120 KB) suffirait — gain immédiat de **~10× sur le poids -> transféré**, sans toucher aux fichiers stockés. +- **`app/page.tsx`** — portrait hero : `fill` dans un bloc dimensionné + + **`priority`** (LCP). +- **`app/portfolio/page.jsx`**, **`app/competences/page.jsx`**, + **`app/competences/[slug]/page.tsx`** — vignettes : `fill` + + `sizes` adaptatif. +- **`VignetteCarousel.tsx`**, **`Carousel.tsx`**, **`CarouselCompetences.tsx`** + — slides Swiper en `fill` avec `sizes` ; la **lightbox** reste une **``** + native (zoom plein cadre sans contraintes de dimensions Next). -### 3.2 `` natif partout — `next/image` jamais utilisé +**Non couvert dans ce lot** : `placeholder="blur"` avec `blurDataURL` dérivé +de `formats.thumbnail` (restait dans le périmètre « idéal » du lot F +historique). -`grep` confirme : **aucun `import Image from "next/image"`** dans tout `app/`. -Conséquence : +### 3.3 Configuration `next.config.ts` -- pas de `srcset`/`sizes` automatique (le navigateur télécharge la même image - en mobile qu'en desktop) ; -- pas de placeholder `blur` ; -- pas de conversion à la volée vers AVIF/WebP via le runtime image de Next ; -- aucune dimension donnée (`width`/`height`) → CLS (Cumulative Layout Shift) - potentiel pendant le chargement. +- **`images.remotePatterns`** vers `uploads/**` pour + **`https://api.fernandgrascalvet.com`**, **`http://localhost:1337`** et + **`http://127.0.0.1:1337`** (aligné sur `getApiUrl()` en dev). +- **`images.formats`** : `image/avif`, `image/webp`. +- Ancienne clé **`images.domains`** : retirée (dépréciée depuis Next 14). -`next.config.ts` autorise pourtant `localhost` et `api.fernandgrascalvet.com` -dans `images.domains` — la migration est donc partiellement amorcée mais -inutilisée : +Référence code : fichier `next.config.ts` à la racine du dépôt Next. -```24:26:next.config.ts - images: { - domains: ["localhost", "api.fernandgrascalvet.com"], - }, -``` +--- -Note : `domains` est **déprécié** depuis Next 14 ; il faudra basculer vers -`remotePatterns` au moment de la migration (et préciser -`formats: ['image/avif', 'image/webp']`). +### Ancien diagnostic (archivé pour mémoire) -### 3.3 Toutes les pages sont `"use client"` + `useEffect`-fetch +Avant cette itération, les listes chargeaient surtout **`img.url`** (original) +sans variantes Strapi ni `next/image`. Les métriques de l’inventaire §2 restent +utiles tant que les **originaux** côté disque sont lourds (PNG) : même avec des +variantes bien choisies, Strapi régénère souvent ces variantes **dans le même +format** que l’original — une conversion fichier (Lot **E**) reste pertinente +pour réduire le stockage total. + +### 3.4 Toutes les pages sont `"use client"` + `useEffect`-fetch `app/page.tsx`, `app/portfolio/page.jsx`, `app/competences/page.jsx`, `app/competences/[slug]/page.tsx` : toutes commencent par `"use client"` et @@ -135,26 +133,40 @@ font `fetch()` côté navigateur dans `useEffect`. Conséquences : > **Constat n° 3 :** migrer ces pages en **Server Components** (fetch dans le > composant async + `revalidate: 60`) résoudrait à la fois le ressenti de > lenteur **et** la latence images, puisque les `` seraient dans le HTML -> initial — le navigateur lance les requêtes images en parallèle du JS. +> initial — le navigateur lance les requêtes images en parallèle du JS. Plan détaillé : +> [`10-plan-server-components.md`](./10-plan-server-components.md). ## 4. Mode `dev` : impact réel L'utilisateur souhaite **rester en dev pour le moment** — c'est noté. Voici ce que ça coûte vraiment, du plus marquant au moins marquant. -### 4.1 Compression HTTP désactivée explicitement (Next) +### 4.1 Compression HTTP (Next) et reverse proxy IIS -```9:12:next.config.ts -const nextConfig = { - reactStrictMode: true, - compress: false, - trailingSlash: false, -``` +**Décision effective (diagnostic avril 2026, exposition HTTPS derrière IIS) :** **`compress: false`** +dans `next.config.ts` (état actuel du dépôt). -`compress: false` désactive **gzip/brotli** côté Next — y compris en -production. Pour du JSON Strapi de 50 KB ou un bundle JS de 500 KB, c'est un -facteur 4 à 8 sur le poids transféré. **À retirer ou passer à `true` même -en dev.** +- Un passage à **`compress: true`** a provoqué des **HTTP 500** côté + **navigateur** alors que Next loguait **`GET / 200`** : la réponse **gzip** + générée par Next n'était **pas** correctement gérée par la chaîne + **IIS + URL Rewrite + ARR** vers `http://localhost:3000` (buffer / en-têtes / + double traitement). +- La **compression dynamique IIS**, une fois son module installé, **n’a pas été + retenue** comme substitution fiable sur ce périmètre non plus tant que la combinaison + tunnel + Next n’a pas été retestée de façon isolée. + +> Tant que le site est exposé **derrière IIS de cette façon**, ne pas réactiver +> **`compress: true`** côté Next sans **test** sur **`https://fernandgrascalvet.com`**. +> Le léger surplus de transfert brut **localhost ⇄ IIS** est acceptable en dev/serveur. + +### 4.1b IIS — compression (référence) + +- **Compression statique** : peut rester active sur les sites IIS (fichiers + servis directement par IIS) ; hors scope du corps HTML proxifié vers Next. +- **Compression dynamique** : module séparé (rôle serveur Web) ; **ne remplace pas** + le problème **`Content-Encoding`** venant de Next si un jour on réactive gzip côté app. + +Le mode `next dev` reste sans minification agressive du JS (voir §4.2). ### 4.2 `next dev --turbopack` @@ -195,9 +207,11 @@ invalidant tout. **Voir `cmsbackend/config/middlewares.ts`** : ]; ``` -> **Constat n° 4 :** en dev, l'impact « gros » est `compress: false`. Le -> reste du dev mode est inconfortable au démarrage mais n'explique pas la -> lenteur image perçue. +> **Constat n° 4 (révisé encore) :** on garde **`compress: false`** côté Next +> pour éviter les **500 IIS** derrière reverse proxy ; le surplus de transfert HTML/JSON non gzip +> entre IIS et localhost est préféré à une page publique cassée. +> Le reste du mode `dev` reste plus lourd qu’une **build prod** (bundle JS, pas de data cache +> Next sur les pages entièrement client). ## 5. Autres pistes détectées en cours d'audit @@ -216,19 +230,19 @@ probablement morts** mais alourdissent : `git clone`, sauvegardes, indexation IDE, et potentiellement `next build` s'ils sont importés depuis un fichier encore référencé. À auditer (`grep` sur les imports) puis purger ou archiver. -### 5.2 Pas de `link rel="preload"` pour le portrait hero +### 5.2 Portrait hero et LCP -`app/page.tsx` (home) affiche un portrait via `` après fetch -client-side. Sur la home, c'est l'image principale au-dessus de la ligne de -flottaison ; un preload (ou un Server Component + `next/image priority`) -ferait gagner ~200-500 ms de TTI sur le LCP. +**Partiellement traité (2026-04-28) :** le portrait utilise **`next/image`** +avec **`priority`** dans `app/page.tsx` (pas de `rel=preload` séparé). Le fetch +home reste **client** (`useEffect`) — le gain LCP complet viendra surtout avec +le lot **G** (Server Components). -### 5.3 Pas de hint réseau vers `api.fernandgrascalvet.com` +### 5.3 Preconnect vers l’API Strapi -Aucun `` -dans `app/layout.tsx`. Le premier round-trip image en prod paye le DNS + -TLS handshake en série ; un preconnect le déclenche pendant le parsing -HTML. +**Fait (2026-04-28) :** `app/layout.tsx` injecte +`` +pour l’origine API (médias + JSON). En local, si `.env` pointe vers +`http://localhost:1337`, le preconnect cible ce host. ### 5.4 Wallpaper OK, alternatives mortes @@ -242,20 +256,16 @@ Tri par ratio gain / effort. À discuter avant exécution. ### Quick wins (≤ 1 h, gros gains) -- [ ] **Lot A — Lire les variantes Strapi côté Next.** - Modifier les 6 emplacements `` pour préférer - `img.formats?.medium?.url ?? img.formats?.small?.url ?? img.url`. - Ajouter une fonction utilitaire `pickStrapiImage(picture, "card" | "thumbnail" | "full")` - dans `app/utils/`. **Gain attendu :** ÷ 5 à ÷ 10 sur le poids des grilles - de portfolio/compétences. Aucune perte qualité (les variantes sont - dimensionnées par Strapi à partir des originaux). -- [ ] **Lot B — Activer la compression Next.** - Passer `compress: false` → `compress: true` dans `next.config.ts`. - **Gain attendu :** ÷ 4 sur le JSON Strapi et le HTML. -- [ ] **Lot C — `preconnect` API Strapi.** - Ajouter `` - dans `app/layout.tsx`. **Gain attendu :** ~150-300 ms sur le TTFB des - images en prod, négligeable en local. +- [x] **Lot A — Lire les variantes Strapi côté Next.** + Implémenté via **`pickStrapiImage`** (`app/utils/strapiImage.ts`) et branchements + listes + carousels + fiches (voir §3). **À re-mesurer** sur `/portfolio` et + `/competences` (Network → Img) après redémarrage des services. +- [ ] **Lot B — Compression Next (`compress`) — annulé dans cette forme.** + Tentative **`compress: true`** puis **rétablissement à `false`** : conflit avec + reverse proxy IIS (**500** public). Voir §4.1. +- [x] **Lot C — `preconnect` API Strapi.** + Lien dans `app/layout.tsx`, origine pilotée par **`NEXT_PUBLIC_API_URL`** + avec repli sur l’API de production. ### Lots moyens (1-3 h chacun) @@ -284,12 +294,10 @@ Tri par ratio gain / effort. À discuter avant exécution. **Réversibilité :** le script garde les originaux dans `extract/backup/` jusqu'à validation manuelle. -- [ ] **Lot F — Migration `` → `next/image`.** - Remplacer les 6 occurrences. Mettre à jour `next.config.ts` : - `domains` → `remotePatterns`, ajouter - `formats: ['image/avif', 'image/webp']`, définir `deviceSizes` cohérents - avec les breakpoints Tailwind. Ajouter `priority` au portrait hero, - `placeholder="blur"` (avec `blurDataURL` provenant de `formats.thumbnail`). +- [x] **Lot F — Migration `` → `next/image` (socle).** + Fait pour les flux principaux (listes, carousels, hero) + **`remotePatterns`** + + **`formats` AVIF/WebP**. **Non fait :** `deviceSizes` explicites (défaut + Next), **`placeholder="blur"`** — laissé en dette optionnelle. ### Lots structurels (½ journée +) @@ -298,6 +306,7 @@ Tri par ratio gain / effort. À discuter avant exécution. vers un sous-composant client uniquement pour l'interactivité (carousels, modal). Bénéfices : HTML initial complet, fetch caché serveur, pas de spinner au premier paint. Compatible avec Lot F (`next/image priority`). + **Plan rédigé :** [`10-plan-server-components.md`](./10-plan-server-components.md). - [ ] **Lot H — Plugin Strapi pour conversion WebP à l'upload.** Configurer `@strapi/provider-upload-local` (ou un plugin custom) pour @@ -322,18 +331,26 @@ Tri par ratio gain / effort. À discuter avant exécution. Stocker les captures dans `docs-site-interne/captures/perf/` avec le nom `-.webp`. -## 8. Ce que ce document **ne** fait pas (encore) +## 8. Suite / dettes -- Aucune ligne de code modifiée — c'est un audit. -- Le script `strapi_extraction/audit-images.js` (Lot D) reste à écrire. -- Les conversions WebP (Lot E) restent à faire. +- **Contenu Strapi** : harmonisation des médias et WebP côté CMS faite par l’auteur + — l’inventaire §2 n’a pas été **re-mesuré** ; relancer un passage sur + `cmsbackend/public/uploads/` si besoin de chiffres à jour. +- **Lot D** — script `strapi_extraction/audit-images.js` : **pas écrit**. +- **Lot E** — conversion + ré-upload : **hors code Next** ; voir pipeline + `strapi_extraction/media-sync` si utilisé pour le remplacement ciblé. +- **Lot G** — Server Components sur `/`, `/portfolio`, `/competences` : **à faire** + (voir [`10-plan-server-components.md`](./10-plan-server-components.md)). +- **Lots H / I** : inchangés (plugin Strapi upload, purge `app/assets/images/`). -À la prochaine itération : créer le script d'audit images en s'inspirant -de la structure de `strapi_extraction/extract-api-data.js` (même style de -log, même répertoire `extract/`, même résumé JSON final). +Prochaine amélioration doc utile : captures **avant/après** réseau dans +`docs-site-interne/captures/perf/` une fois les services redémarrés et le +parcours manuel validé. ## 9. Liens internes +- Migration Server Components (plan) : + [`10-plan-server-components.md`](./10-plan-server-components.md) - Pipeline d'extraction Strapi existant : [`06-strapi-extraction.md`](./06-strapi-extraction.md) - Architecture globale & ports : diff --git a/docs-site-interne/10-plan-server-components.md b/docs-site-interne/10-plan-server-components.md new file mode 100644 index 0000000..a6fe5f1 --- /dev/null +++ b/docs-site-interne/10-plan-server-components.md @@ -0,0 +1,116 @@ +# Plan — migration vers Server Components (données Strapi) + +**Dernière mise à jour :** 2026-04-28 +**Statut :** document de planification — **aucun changement de code appliqué** dans ce lot ; mise en œuvre quand vous le déciderez. + +**Prérequis lu :** vous restez en **`npm run dev`** (Turbopack) pour le moment ; ce document décrit aussi ce que donne **`next build` / `next start`** en complément. + +--- + +## 1. Objectif + +Réduire le pattern actuel : pages marquées **`"use client"`** qui appellent **`fetch()` dans `useEffect`** après hydration. + +Vers : **`async`** page (ou composant serveur parent) qui appelle **`fetch`** **côté serveur Next**, avec mise en **`cache`/revalidation** possible, puis rendu HTML **déjà rempli** de contenu texte + balises images. + +--- + +## 2. État actuel (référence doc + code) + +| Page / zone | Fichier | Pattern actuel | +|-------------|---------|----------------| +| Accueil | `app/page.tsx` | `"use client"` + `useEffect` → `getHomepageData()` | +| Liste portfolio | `app/portfolio/page.jsx` | idem → `/api/projects` | +| Liste compétences | `app/competences/page.jsx` | idem → `/api/competences` | +| Compétence (vignettes réalisations) | `app/competences/[slug]/page.tsx` | idem, fetchs multiples | + +Conséquences documentées dans [`09-performances-images.md`](./09-performances-images.md) §3.4 : premier paint sans données, pas de data cache Next sur ces flux, images découvertes tard. + +--- + +## 3. Ce que « Server Components » implique (concrètement) + +### 3.1 Principe + +- Un **Server Component** est un composant **sans** `"use client"` qui peut être **`async`** et utiliser **`await fetch(...)`** directement dans le corps du composant. +- Le rendu s’exécute **sur le serveur Node** (processus Next), **une fois par requête** (sauf cache), pas dans le navigateur. + +### 3.2 Ce qui reste **obligatoirement** en Client Components + +Tout ce qui utilise des **hooks** React hors contexte « serveur » limité : **`useState`**, **`useEffect`**, **`useRef`** pour le menu mobile, événements clavier (**Escape**), **Swiper**, **portal** pour modales, **localStorage**, etc. + +**Stratégie classique :** fichier page **sans** `"use client"` (serveur), qui **`await`** les données puis rend : + +```txt +<> + // peut être serveur + // sous-arbre `"use client"` uniquement où nécessaire + +``` + +Les **carousels** (`Carousel`, `VignetteCarousel`) restent très probablement en **clients** tant qu’ils dépendent de Swiper avec effets hydratés — on leur **passe en props** les URLs / textes déjà résolus côté serveur. + +### 3.3 **Layout root** (`app/layout.tsx`) + +Aujourd’hui : **`"use client"`** (+ menu burger, état drawer, etc.). **Option A :** garder le layout tel quel et ne migrer **que les pages feuilles** — Next autorise une page serveur même si le layout parent est client (limites : enfants peuvent être serveur sous certaines compositions ; selon Next 13–15 il faut vérifier qu’aucune contrainte n’« impose » tout client — en pratique souvent extraction **ServerLayout** léger OU **layouts par segment** `/portfolio/layout.tsx` serveur). **Option B (plus tard) :** scinder en **layout serveur** + **header/footer client** importés dynamiquement ou composants clients enfants. + +C’est le point le plus **structurant** ; il sera arbitré au moment de l’implémentation (lot par lot). + +### 3.4 Appels Strapi : URL + +- **Côté serveur Next**, **`getApiUrl()`** sans `window` utilise **`NEXT_PUBLIC_API_URL`** (ou défaut prod). Pour le dev **sur la même machine**, s’assurer que cette env pointe soit vers **`http://localhost:1337`**, soit vers l’URL publique **si** IIS/Strapi le servent aussi — sinon risque que le SSR appelle **`https://api.fernand…`** depuis le serveur sans route réseau correcte (**variable d’env par environnement** recommandée). +- Harmoniser avec **rewrites** existants **`/api/*` → Strapi** : possibilité d’utiliser **`fetch(new URL('/api/...', request.url ?? base))`** en SSR si vous préférez passer par Next (même origin). + +### 3.5 `fetch` et cache + +- **`fetch(url, { next: { revalidate: 60 } })`** : ISR-like, données rafraîchies au plus toutes les **60** secondes selon docs Next 15 (`cache` par défaut a évolué — à relire [`next` doc](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching) au moment du codage). +- Pour du **toujours frais en dev**, **`cache: 'no-store'`** peut rester le comportement désiré jusqu’à validation. + +### 3.6 Mode **`dev`** (Turbopack) + +- Les Server Components **fonctionnent** en `next dev` ; le **cache** `fetch` est **moins représentatif** de la prod qu’avec `next start`. +- Le **gain perçu** (HTML complet, moins de waterfall client) reste **visible** en dev sur le **réseau** / **Elements** (contenu dans le HTML source). + +--- + +## 4. Gains réels attendus + +| Dimension | Avant (client fetch) | Après (données en serveur) | +|-----------|----------------------|----------------------------| +| **Premier contenu** | Spinner / squelette jusqu’à fin de `fetch` + JSON parse côté client | Texte + structure + **images** (`next/image` avec `src` déjà dans le HTML) plus tôt | +| **Waterfall** | HTML minimal → chargement JS → `useEffect` → fetch → re-render | Un aller-retour serveur Strapi lors du SSR Next (possible parallélisation `Promise.all`) | +| **Cache Next** | Aucun data cache pour ces pages | Possibilité **revalidate** / tags plus tard | +| **SEO / réseaux lents** | Contenu peu présent sans exécuter JS | Contenu lisible avec HTML seul (**meilleur** pour indexation ; utile même si votre besoin SEO est modeste) | +| **Lighthouse LCP** | Portrait / hero souvent retardé par la chaîne client | Déjà dans le flux initial SSR (**souvent gain LCP** mesurable après stabilisation) + +**Limite honnête :** **`next dev`** conserve un JS **volumeux** (Turbopack, pas minifié comme prod). Le gain **bundle** sera **maximum** après **`next build` + `next start`** (ou équivalent). + +--- + +## 5. Ordre de migration proposé (par risque croissant) + +1. **`/portfolio`** (liste seule — une liste, pattern clair). +2. **`/competences`** (liste identique). +3. **`/`** (home — `getHomepageData` + retry ; extraire logique fetch dans `lib/` serveur). +4. **`/competences/[slug]`** (deux modes : vignettes réalisations vs redirect vers container compétences — attention aux branches). + +Ensuite : fiches détail **`ContentSection`** / **`fetchData`** peuvent suivre une feuille de route analogue (nombreuses pages déjà partiellement factorisées via `fetchData`). + +À chaque étape : **tests manuels** des routes, erreurs réseau Strapi, **images** encore correctes (**`pickStrapiImage`** inchangé côté props). + +--- + +## 6. Hors scope immédiat (rappels) + +- **Ne pas** renommer tous les fichiers **`.jsx`→`.tsx`** en même temps sans besoin ; migrer fichier par fichier. +- **Ne pas** activer **`compress: true`** côté Next tant que derrière **ARR/IIS** le tunnel reste incompatible (voir [`09-performances-images.md`](./09-performances-images.md) §4.6). +- **Évaluation `next build`** : à planifier après stabilisation SSR en dev ou sur une branche. + +--- + +## 7. Liens internes + +- Audit perf images & IIS : [`09-performances-images.md`](./09-performances-images.md) +- Front Next synthèse : [`02-frontend-next.md`](./02-frontend-next.md) +- Feuille de route : [`feuille-de-route.md`](./feuille-de-route.md) +- État actuel stack : [`etat-actuel.md`](./etat-actuel.md) diff --git a/docs-site-interne/etat-actuel.md b/docs-site-interne/etat-actuel.md index 19f3e40..77f4482 100644 --- a/docs-site-interne/etat-actuel.md +++ b/docs-site-interne/etat-actuel.md @@ -1,6 +1,6 @@ # État actuel du site -**Dernière mise à jour :** 2026-04-24 (doc compétences / realisation-ia + CONFIGURATION) +**Dernière mise à jour :** 2026-04-28 (perf images, compression IIS/Next, plan Server Components) ## Ce qui est en place @@ -13,6 +13,7 @@ - **Vault de connaissance `vault-grasbot/`** : ~46 notes Markdown, dont 2 fiches projet manuelles (GrasBot, site portfolio) et compétences IA/Web mises à jour (2026-04) — recharger l’API après déploiement si besoin : `POST /reload-vault` (aliases, answers, priority) — source de vérité du chatbot, régénéré depuis Strapi par `strapi_extraction/build-vault.py`. Inclut une note `bio-fernand` courte (priority 10) dédiée aux questions biographiques et un CV complet complémentaire. - **Observabilité Langfuse** : instance self-hosted `langfuse.fernandgrascalvet.com`, instrumentation Python (`llm-api/observability.py`) traçant chaque requête `/ask` (retrieval / prompt_build / ollama-chat) avec session/user IDs anonymes côté front. Mode no-op automatique si les clés sont absentes. Voir [`langfuse-observability.md`](./langfuse-observability.md). - **Scripts** d'extraction et de doc dans `strapi_extraction/`. +- **Performances images (front)** : utilitaire **`pickStrapiImage`**, variantes Strapi, **`next/image`** + `remotePatterns`, portrait **`priority`**, **`preconnect`** API dans `layout.tsx`. **`compress: false`** dans `next.config.ts` (obligatoire avec le reverse proxy IIS actuel — **`compress: true`** provoquait des **500** publics). Détail : [`09-performances-images.md`](./09-performances-images.md). Prochaine étape planifiée (sans implémentation engageant pour l’instant) : **Server Components** — [`10-plan-server-components.md`](./10-plan-server-components.md). - Documentation opérationnelle : [`CONFIGURATION_SITE.md`](../CONFIGURATION_SITE.md) à la racine du dépôt (incl. ordre des compétences et routes dédiées, renvoi vers [02-frontend-next.md](./02-frontend-next.md)). - **Captures d'écran** de référence (WebP) : [captures/](./captures/) — voir [INDEX.md](./captures/INDEX.md). - **Décision produit** : une **rubrique homelab / serveur** (souvent évoquée en « phase 3 ») n’est **pas retenue** — pas d’évolution planifiée sur ce thème ; le parcours public reste portfolio, compétences (dont IA + réalisations) et contact. diff --git a/docs-site-interne/feuille-de-route.md b/docs-site-interne/feuille-de-route.md index 716e187..fed328c 100644 --- a/docs-site-interne/feuille-de-route.md +++ b/docs-site-interne/feuille-de-route.md @@ -1,6 +1,6 @@ # Feuille de route -**Dernière mise à jour :** 2026-04-24 +**Dernière mise à jour :** 2026-04-28 Document vivant : ajuster les statuts et dates au fil du travail. @@ -11,7 +11,7 @@ Document vivant : ajuster les statuts et dates au fil du travail. | R1 | Moderniser l’UI (design system, cohérence typo/couleurs) | En cours | Direction "Digital Atelier" inspirée de `stitch_V1/` ; cadrage et plan dans [`REFONTE-VISUELLE.md`](./REFONTE-VISUELLE.md). Étapes 1-7 (tokens + garde-fou + migration typo globale + layout racine + home + listes portfolio/compétences + fiches détail & GrasBot) faites le 2026-04-22. Reste l'étape 8 (contact + footer éditorial). | | R2 | Homogénéiser TS vs JS dans `app/` | À faire | Migrer progressivement les `.jsx`/`.js` | | R3 | Centraliser config API (Strapi + LLM) via `.env` | À faire | Remplacer URLs en dur où pertinent | -| R4 | Revoir `layout.tsx` (server vs client, perf SEO) | À faire | Évaluer extraction header/footer | +| R4 | Revoir `layout.tsx` (server vs client, perf SEO) | À faire | Lié au plan [`10-plan-server-components.md`](./10-plan-server-components.md) — extraction header/footer client possible | | R5 | Chatbot GrasBot — retrieval local (Qwen3 + vault Obsidian) | v3 en place | Pipeline **graph + BM25** (`llm-api/search.py`), plus de RAG vectoriel ni de dépendance ChromaDB. Vault `vault-grasbot/` enrichi automatiquement (aliases/answers/priority). Lecture directe depuis `build-vault.py`, plus d'étape d'indexation. Doc : [`08-vault-obsidian-retrieval.md`](./08-vault-obsidian-retrieval.md). Reste : fix `clean-api-data.js` (homepages + glossaires), affichage sources côté front, badge `grounded`, historique conversationnel, streaming. | ## Moyen terme @@ -20,7 +20,7 @@ Document vivant : ajuster les statuts et dates au fil du travail. |----|--------|--------|--------| | M1 | Tests (e2e ou smoke sur routes critiques) | À faire | | | M2 | Accessibilité (navigation, contrastes, focus) | À faire | | -| M3 | Performance (images Next/Image, bundle) | À faire | | +| M3 | Performance (images Next/Image, bundle, SSR données) | En cours | Images + `pickStrapiImage` + preconnect : [`09-performances-images.md`](./09-performances-images.md). **`compress`** : maintenu à **`false`** (IIS). **Prochaine étape** : Server Components — plan [`10-plan-server-components.md`](./10-plan-server-components.md) (pas d’implémentation sans go utilisateur). | ## Long terme / idées @@ -59,3 +59,5 @@ Document vivant : ajuster les statuts et dates au fil du travail. | 2026-04-23 | **GrasBot — tuning pipeline LLM + anti-hallucinations**. Audit des premières traces Langfuse : questions biographiques hallucinées (âge erroné, statut inventé), réponses longues tronquées. Quatre ajustements : (1) `llm-api/search.py` · `generate()` — `num_ctx=8192` explicite (stoppe la troncature silencieuse du prompt par le défaut Ollama 2048/4096 quand plusieurs notes entières sont injectées), `num_predict` 512 → 1024 (réponses longues complètes), `think: false` top-level (désactive le *thinking mode* de qwen3 qui consommait du budget de sortie). (2) `llm-api/search.py` · `build_prompt()` — troncature conditionnelle des sources rank 2+ via `_truncate_body()` + nouvelles variables `SEARCH_SECONDARY_MAX_CHARS` (1500) / `SEARCH_SECONDARY_KEEP_RATIO` (0.8). Aucune source n'est supprimée, seules celles dont le score est < 0.8 × score(#1) ET dont le body dépasse 1500 chars sont résumées. Loggé dans `prompt_build.metadata.truncation`. (3) Vault — nouvelle note `vault-grasbot/30-Parcours/bio-fernand.md` courte et factuelle (priority 10, aliases biographiques courts), canonique pour les questions du type *« qui est Fernand »*. Renvoie vers le CV complet pour le détail. Correction incohérence d'âge dans le CV (46 → 47 ans dans la section Présentation) qui alimentait les hallucinations. (4) `SYSTEM_PROMPT` — nouveau bloc *Règles de fidélité aux sources* : priorité `type=parcours` pour questions bio, interdiction d'inventer des faits factuels, gestion explicite des contradictions, signalement des notes tronquées. **Bascule Langfuse v4 → v3 dans `requirements.txt`** (`langfuse>=3.0,<4`) : le SDK v4 a supprimé `start_as_current_span`, la v3 reste compatible avec l'instrumentation existante. Dépendances Python ajoutées : `langfuse`, `python-dotenv`. Secrets Langfuse déplacés de `.env.local` Next vers `llm-api/.env` (non committé). Doc mise à jour : [`langfuse-observability.md`](./langfuse-observability.md) (nouvelle section *Tuning du pipeline — 2026-04-23*), `CONFIGURATION_SITE.md` (endpoints `/health` + `/reload-vault`), `etat-actuel.md` (42 notes + mention Langfuse). | | 2026-04-22 | **GrasBot v3 — bascule RAG vectoriel → retrieval graph + BM25**. Essais d'installation Windows bloqués par `chroma-hnswlib` (compilation C++ requise) et freezes RDP à chaque chargement de `qwen3:8b` + `nomic-embed-text` simultanément. Arbitrage : pour un vault de 40 notes, la RAG vectorielle sur-dimensionne ; on exploite directement la structure Obsidian (frontmatter, wikilinks, MOCs). **Nouveau pipeline** dans `llm-api/search.py` (scoring multi-signaux : aliases / titre-slug / answers / domains / tags / BM25 ; expansion par graphe via `linked`/`related`/wikilinks ; tokenizer FR avec normalisations `c++` → `cpp`, split `-`/`_`). **Déterministe, traçable (champ `reasons` dans les sources), 50 ms de retrieval**. Scoring calibré sur 12 cas (IA, push-swap, LLMs pluriel, hors-sujet clafoutis → `(aucun)`, etc.). **Dépendances allégées** : fini `chromadb`, `chroma-hnswlib`, `nomic-embed-text`. `requirements.txt` = fastapi + uvicorn + requests + pyyaml uniquement. Fichiers supprimés : `llm-api/rag.py`, `llm-api/index_vault.py`, `chroma-index/` (marqué pour suppression, verrouillé par Cursor au moment du cleanup — sera supprimé au reboot). **Vault enrichi** : `build-vault.py` étendu pour générer automatiquement `aliases` (à partir du slug/titre + `DOMAIN_ALIASES`), `answers` (questions-types adaptées au type de note), `priority` (heuristique CV=10, MOCs=7, compétences=7, projets=5). Note CV curatée (`source: manual`) enrichie manuellement avec 12 aliases et 7 answers. Nouvelle `vault-grasbot/TAXONOMIE.md` qui documente le vocabulaire contrôlé. Réécriture de `vault-grasbot/50-Technique/grasbot-rag.md` → `grasbot-retrieval.md` (nouveau pipeline), + `architecture-site.md` + `vault-structure.md` + `MOC-Technique.md`. Nouveau endpoint `POST /reload-vault` pour recharger sans redémarrer uvicorn. Documentation interne refaite : [`04-api-llm-et-chatbot.md`](./04-api-llm-et-chatbot.md), [`06-strapi-extraction.md`](./06-strapi-extraction.md), nouveau [`08-vault-obsidian-retrieval.md`](./08-vault-obsidian-retrieval.md) (remplace `08-vault-obsidian-rag.md`). | | 2026-04-24 | **Doc + configuration** : routes `/competences/[slug]/[realisation]`, entité Strapi `realisation-ia`, tri `order` et comportement vignettes/richtext documentés dans `02-frontend-next.md`, `04-api-llm-et-chatbot.md` (parcours public), `etat-actuel.md` ; `CONFIGURATION_SITE.md` : section *Contenu : compétences, réalisations IA et ordre d’affichage*. Décision : **pas de « phase 3 » homelab** sur le site (consignée dans l’état actuel). | +| 2026-04-28 | **Perf images Next** : lots A/B/C + socle F documentés dans [`09-performances-images.md`](./09-performances-images.md) — `pickStrapiImage`, `next/image` (listes, carousels, hero), `remotePatterns`, preconnect API. Lot B (`compress: true`) **annulé** : conflit IIS reverse proxy (500). | +| 2026-04-28 | **Plan Server Components** : nouveau doc [`10-plan-server-components.md`](./10-plan-server-components.md) (périmètre, gains, ordre de migration, contraintes `dev` / layout). **Aucun code** modifié dans ce lot. | diff --git a/next.config.ts b/next.config.ts index 2f7339b..0194be8 100644 --- a/next.config.ts +++ b/next.config.ts @@ -22,7 +22,26 @@ const nextConfig = { }, images: { - domains: ["localhost", "api.fernandgrascalvet.com"], + formats: ["image/avif", "image/webp"], + remotePatterns: [ + { + protocol: "https", + hostname: "api.fernandgrascalvet.com", + pathname: "/uploads/**", + }, + { + protocol: "http", + hostname: "localhost", + port: "1337", + pathname: "/uploads/**", + }, + { + protocol: "http", + hostname: "127.0.0.1", + port: "1337", + pathname: "/uploads/**", + }, + ], }, }; diff --git a/web.config b/web.config index 5d69404..ed2688d 100644 --- a/web.config +++ b/web.config @@ -22,5 +22,6 @@ +