fix: connect Sanity CMS data to live site with revalidation

- Disable Sanity CDN cache so published changes appear immediately - Add revalidate=60 to page so Next.js refreshes data every 60s - Wire AboutMe component to use siteSettings from Sanity (name, bio, photo, address, map coordinates) https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
2026-02-15 18:35:06 +00:00
parent 6840d2eebf
commit 45f5cc0e9e
3 changed files with 69 additions and 30 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,10 +6,16 @@ import AboutMe from "@/components/marketing/AboutMe";
 import FAQ from "@/components/marketing/FAQ";
 import Contact from "@/components/marketing/Contact";
 import Footer from "@/components/marketing/Footer";
-import { getPortfolio } from "@/lib/sanity/queries";
+import { getPortfolio, getSiteSettings } from "@/lib/sanity/queries";
+
+// Revalider les données Sanity toutes les 60 secondes
+export const revalidate = 60;

 export default async function LandingPage() {
-  const portfolioItems = await getPortfolio();
+  const [portfolioItems, siteSettings] = await Promise.all([
+    getPortfolio(),
+    getSiteSettings(),
+  ]);

  return (
    <main id="main-content" className="min-h-screen">
@@ -26,7 +32,7 @@ export default async function LandingPage() {
      <Portfolio items={portfolioItems} />

      {/* Qui suis-je - Ancrage Local */}
-      <AboutMe />
+      <AboutMe settings={siteSettings} />

      {/* FAQ */}
      <FAQ />
--- a/components/marketing/AboutMe.tsx
+++ b/components/marketing/AboutMe.tsx
@@ -1,4 +1,19 @@
-export default function AboutMe() {
+import Image from "next/image";
+import { urlFor } from "@/lib/sanity/client";
+import type { SiteSettings } from "@/lib/sanity/queries";
+
+interface AboutMeProps {
+  settings?: SiteSettings | null;
+}
+
+export default function AboutMe({ settings }: AboutMeProps) {
+  const name = settings?.ownerName || "Enguerrand";
+  const bio = settings?.ownerBio;
+  const address = settings?.address || "Flines-lez-Raches, Nord (59)";
+  const lat = settings?.lat || 50.4267;
+  const lng = settings?.lng || 3.2372;
+  const photoUrl = settings?.ownerPhoto ? urlFor(settings.ownerPhoto)?.width(400).height(480).url() : null;
+
  return (
    <section id="qui-suis-je" className="py-16 md:py-24 bg-bg" aria-label="Qui suis-je">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -18,39 +33,57 @@ export default function AboutMe() {
          <div className="flex justify-center">
            <div className="relative">
              <div className="w-64 h-72 sm:w-72 sm:h-80 bg-bg-muted border-2 border-border rounded-2xl flex items-center justify-center overflow-hidden">
-                <div className="text-center p-6">
-                  <div className="w-20 h-20 bg-navy/10 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <svg className="w-10 h-10 text-navy/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                    </svg>
+                {photoUrl ? (
+                  <Image
+                    src={photoUrl}
+                    alt={`Photo de ${name}`}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 640px) 256px, 288px"
+                  />
+                ) : (
+                  <div className="text-center p-6">
+                    <div className="w-20 h-20 bg-navy/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                      <svg className="w-10 h-10 text-navy/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                      </svg>
+                    </div>
+                    <p className="text-text-muted text-sm">Votre photo ici</p>
+                    <p className="text-text-muted text-xs mt-1">(configurable via Sanity)</p>
                  </div>
-                  <p className="text-text-muted text-sm">Votre photo ici</p>
-                  <p className="text-text-muted text-xs mt-1">(configurable via Sanity)</p>
-                </div>
+                )}
              </div>
              <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-orange text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
-                Bas&eacute; &agrave; Flines-lez-Raches
+                Basé à {address.split(",")[0]}
              </div>
            </div>
          </div>

          {/* Right - Text */}
          <div>
-            <p className="text-text text-base sm:text-lg leading-relaxed mb-4">
-              Je suis <strong className="text-navy">Enguerrand</strong>, sp&eacute;cialis&eacute; dans la
-              visibilit&eacute; locale et la construction de{" "}
-              <strong className="text-navy">syst&egrave;mes de confiance en ligne</strong>{" "}
-              pour les TPE/PME du Nord.
-            </p>
-            <p className="text-text-light text-base leading-relaxed mb-4">
-              Je ne suis pas un call center parisien. Je connais la r&eacute;alit&eacute; de vos
-              chantiers &agrave; Douai, Orchies ou Valenciennes. Je sais que vous n&rsquo;avez pas
-              le temps de g&eacute;rer &ldquo;un truc internet&rdquo; et que vous voulez des r&eacute;sultats
-              concrets : des appels de <strong>vrais</strong> clients.
-            </p>
+            {bio ? (
+              <p className="text-text text-base sm:text-lg leading-relaxed mb-4">
+                {bio}
+              </p>
+            ) : (
+              <>
+                <p className="text-text text-base sm:text-lg leading-relaxed mb-4">
+                  Je suis <strong className="text-navy">{name}</strong>, spécialisé dans la
+                  visibilité locale et la construction de{" "}
+                  <strong className="text-navy">systèmes de confiance en ligne</strong>{" "}
+                  pour les TPE/PME du Nord.
+                </p>
+                <p className="text-text-light text-base leading-relaxed mb-4">
+                  Je ne suis pas un call center parisien. Je connais la réalité de vos
+                  chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n&rsquo;avez pas
+                  le temps de gérer &ldquo;un truc internet&rdquo; et que vous voulez des résultats
+                  concrets : des appels de <strong>vrais</strong> clients.
+                </p>
+              </>
+            )}
            <p className="text-text-light text-base leading-relaxed mb-6">
              Mon approche : je vous construis un <strong className="text-navy">dossier de confiance</strong>{" "}
-              (Google + site + preuves) qui transforme votre bouche-&agrave;-oreille en syst&egrave;me
+              (Google + site + preuves) qui transforme votre bouche-à-oreille en système
              permanent. Pas de jargon, pas de blabla &mdash; du concret.
            </p>

@@ -61,7 +94,7 @@ export default function AboutMe() {
              </div>
              <div className="bg-bg-white border border-border rounded-xl p-4 text-center">
                <p className="text-2xl font-bold text-navy">24h</p>
-                <p className="text-text-muted text-xs mt-1">D&eacute;lai de r&eacute;ponse</p>
+                <p className="text-text-muted text-xs mt-1">Délai de réponse</p>
              </div>
            </div>
          </div>
@@ -78,9 +111,9 @@ export default function AboutMe() {
          </div>
          <div className="relative h-48 sm:h-64">
            <iframe
-              src="https://www.openstreetmap.org/export/embed.html?bbox=2.8%2C50.25%2C3.7%2C50.55&amp;layer=mapnik&amp;marker=50.4267%2C3.2372"
+              src={`https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.45}%2C${lat - 0.18}%2C${lng + 0.45}%2C${lat + 0.12}&layer=mapnik&marker=${lat}%2C${lng}`}
              className="absolute inset-0 w-full h-full border-0"
-              title="Carte de localisation - Flines-lez-Raches"
+              title={`Carte de localisation - ${address.split(",")[0]}`}
              loading="lazy"
            />
          </div>
--- a/lib/sanity/client.ts
+++ b/lib/sanity/client.ts
@@ -9,7 +9,7 @@ export const sanityClient: SanityClient | null = projectId
      projectId,
      dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
      apiVersion: "2024-01-01",
-      useCdn: true,
+      useCdn: false,
    })
  : null;