Fusion de int-OG dans main
This commit is contained in:
sebvtl728
@@ -5,6 +5,18 @@
|
|||||||
<title>bureau d’études Maîtrise d’oeuvre</title>
|
<title>bureau d’études Maîtrise d’oeuvre</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<!-- ✅ Ajout Open Graph statique -->
|
||||||
|
<meta property="og:title" content="Titre par défaut - Bureau d’études">
|
||||||
|
<meta property="og:description" content="Bienvenue sur notre bureau d’études en Maîtrise d’œuvre.">
|
||||||
|
<meta property="og:image" content="https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://ton-site.com">
|
||||||
|
|
||||||
|
<!-- ✅ Twitter Cards -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Titre par défaut - Bureau d’études">
|
||||||
|
<meta name="twitter:description" content="Bienvenue sur notre bureau d’études en Maîtrise d’œuvre.">
|
||||||
|
<meta name="twitter:image" content="https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif">
|
||||||
<link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script">
|
<link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
|
// Création de l'instance Axios
|
||||||
const api = axios.create({
|
const api = axios.create({
|
||||||
baseURL: 'https://preprod.octopusdesign.fr/api-octopus/server/wp-json',
|
baseURL: 'https://preprod.octopusdesign.fr/api-octopus/server/wp-json',
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Exportation de l'instance Axios par défaut
|
||||||
export default api;
|
export default api;
|
||||||
@@ -5,107 +5,33 @@ import api from "../../api";
|
|||||||
import ModernSpinner from "../SpinnerModerne";
|
import ModernSpinner from "../SpinnerModerne";
|
||||||
import Expertises from "../Expertises";
|
import Expertises from "../Expertises";
|
||||||
import ConstructSection from "../ConstructSection";
|
import ConstructSection from "../ConstructSection";
|
||||||
import {
|
import { Box, Grid, Typography, Button, Card, CardContent } from "@mui/material";
|
||||||
Box,
|
|
||||||
Grid,
|
|
||||||
Typography,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
} from "@mui/material";
|
|
||||||
import Logo from "../../assets/logo-in3-mobil.svg";
|
import Logo from "../../assets/logo-in3-mobil.svg";
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
const [backgroundImage, setBackgroundImage] = useState(null);
|
const [pageData, setPageData] = useState(null);
|
||||||
const [useGradient, setUseGradient] = useState(false);
|
const [heroImage, setHeroImage] = useState(null);
|
||||||
const [heroTitle, setHeroTitle] = useState("Titre par défaut");
|
|
||||||
const [heroTitleColor, setHeroTitleColor] = useState("#ffffff");
|
|
||||||
const [heroText, setHeroText] = useState("Texte par défaut");
|
|
||||||
const [heroTextColor, setHeroTextColor] = useState("#ffffff");
|
|
||||||
const [metaTitle, setMetaTitle] = useState("Titre par défaut");
|
|
||||||
const [metaDescription, setMetaDescription] = useState(
|
|
||||||
"Description par défaut."
|
|
||||||
);
|
|
||||||
|
|
||||||
//optionally
|
|
||||||
const [canonicalUrl, setCanonicalUrl] = useState(null);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
//Construction
|
|
||||||
const [constructTitle, setConstructTitle] = useState("Construisons vos projets");
|
|
||||||
const [constructSubtitle, setConstructSubtitle] = useState("ensemble");
|
|
||||||
const [constructSector, setConstructSector] = useState("Industriel | Tertiaire | Privée");
|
|
||||||
const [constructText, setConstructText] = useState("IN3, bureau d'études Ingénierie et Maîtrise d’œuvre, est implanté depuis 20 ans sur Le Mans. Nous étudions vos projets en structure, gros œuvre, électricité courants forts et faibles, et fluides, tout corps d'état.");
|
|
||||||
const [constructNoteText, setConstructNoteText] = useState("À votre écoute, nous travaillons avec et pour vous dans le but de satisfaire vos besoins tant sur le plan architectural que technique, méthodologique et/ou économique.");
|
|
||||||
const [missionTitle, setMissionTitle] = useState("Nos missions principales");
|
|
||||||
const [missionItems, setMissionItems] = useState([
|
|
||||||
{ label: "Diagnostics | Sécurité", top: "20%", left: "50%" },
|
|
||||||
{ label: "Études techniques", top: "50%", left: "30%" },
|
|
||||||
{ label: "Bureau d'études | Maîtrise d’œuvre", top: "70%", left: "60%" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// ACF Expertise
|
|
||||||
const [expertiseTitle, setExpertiseTitle] = useState(
|
|
||||||
"Titre Pourquoi Nous Choisir ?"
|
|
||||||
);
|
|
||||||
const [expertise1Title, setExpertise1Title] = useState("Titre Expertise 1");
|
|
||||||
const [expertise1Text, setExpertise1Text] = useState("Text Expertise 1");
|
|
||||||
const [expertise2Title, setExpertise2Title] = useState("Titre Expertise 2");
|
|
||||||
const [expertise2Text, setExpertise2Text] = useState("Text Expertise 2");
|
|
||||||
const [expertise3Title, setExpertise3Title] = useState("Titre Expertise 3");
|
|
||||||
const [expertise3Text, setExpertise3Text] = useState("Text Expertise 3");
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchPageData = async () => {
|
const fetchPageData = async () => {
|
||||||
try {
|
try {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
const response = await api.get(
|
const response = await api.get("wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description");
|
||||||
"wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description"
|
const pageContent = response.data;
|
||||||
);
|
setPageData(pageContent);
|
||||||
const { acf, rank_math_title, rank_math_description } = response.data;
|
|
||||||
|
|
||||||
// Métadonnées SEO
|
// Vérification et récupération de l'image Hero depuis l'API media de WordPress
|
||||||
setMetaTitle(rank_math_title || "Titre par défaut");
|
const heroImageId = pageContent.acf?.img_hero;
|
||||||
setMetaDescription(rank_math_description || "Description par défaut.");
|
if (heroImageId) {
|
||||||
|
const mediaResponse = await api.get(`wp/v2/media/${heroImageId}`);
|
||||||
// Récupération de l'URL canonique
|
setHeroImage(mediaResponse.data.source_url);
|
||||||
setCanonicalUrl(acf?.canonical_url || window.location.href);
|
|
||||||
|
|
||||||
// Données Hero
|
|
||||||
setUseGradient(acf?.enable_gradient ?? false);
|
|
||||||
setHeroTitle(acf?.hero_title || "Titre principal");
|
|
||||||
setHeroTitleColor(acf?.hero_title_color || "#ffffff");
|
|
||||||
setHeroText(acf?.hero_text || "Texte par défaut");
|
|
||||||
setHeroTextColor(acf?.hero_text_color || "#ffffff");
|
|
||||||
|
|
||||||
// Image de fond
|
|
||||||
if (acf?.img_hero) {
|
|
||||||
const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
|
|
||||||
setBackgroundImage(mediaResponse.data.source_url);
|
|
||||||
} else {
|
} else {
|
||||||
setBackgroundImage(null);
|
setHeroImage(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Section Construction
|
|
||||||
setConstructTitle(acf?.gdc_construct.construct_title || "Construisons vos projets");
|
|
||||||
setConstructSubtitle(acf?.gdc_construct.construct_subtitle || "ensemble");
|
|
||||||
setConstructText(acf?.gdc_construct.construct_text || "Texte par défaut");
|
|
||||||
setConstructSector(acf?.gdc_construct.construct_sector || "Secteurs");
|
|
||||||
setConstructNoteText(acf?.gdc_construct.construct_note || "Note société");
|
|
||||||
setMissionTitle(acf?.mission_title || "Nos missions principales");
|
|
||||||
setMissionItems(acf?.mission_items || []);
|
|
||||||
|
|
||||||
// Récupération du titre de la deuxième section Expertise
|
|
||||||
setExpertiseTitle(acf?.titre_expertise || "Pourquoi Nous Choisir ?");
|
|
||||||
setExpertise1Title(acf?.gdc_expert.titre_expertise_1 || "Expertise 1");
|
|
||||||
setExpertise1Text(acf?.gdc_expert.text_expertise_1 || "Text Expertise 1");
|
|
||||||
setExpertise2Title(acf?.gdc_expert.titre_expertise_2 || "Expertise 2");
|
|
||||||
setExpertise2Text(acf?.gdc_expert.text_expertise_2 || "Text Expertise 2");
|
|
||||||
setExpertise3Title(acf?.gdc_expert.titre_expertise_3 || "Expertise 3");
|
|
||||||
setExpertise3Text(acf?.gdc_expert.text_expertise_3 || "Text Expertise 3");
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Erreur lors de la récupération des données :", error);
|
console.error("Erreur lors de la récupération des données :", error);
|
||||||
setError("Impossible de charger les données. Veuillez réessayer.");
|
setError("Impossible de charger les données. Veuillez réessayer.");
|
||||||
@@ -129,106 +55,82 @@ const Home = () => {
|
|||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<div style={{ textAlign: "center", padding: "50px" }}>
|
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||||
<img
|
<img src={Logo} alt="Logo" style={{ height: "200px", width: "auto" }} />
|
||||||
src={Logo}
|
|
||||||
alt="Logo"
|
|
||||||
style={{
|
|
||||||
height: "200px",
|
|
||||||
width: "auto",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<p style={{ color: "red" }}>{error}</p>
|
<p style={{ color: "red" }}>{error}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { acf, rank_math_title, rank_math_description } = pageData || {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* SEO */}
|
{/* SEO */}
|
||||||
<SEO title={metaTitle} description={metaDescription} canonicalUrl={canonicalUrl}/>
|
<SEO
|
||||||
|
postId={13} // ID WordPress valide
|
||||||
|
defaultTitle={rank_math_title || "Accueil - Mon Site"}
|
||||||
|
defaultDescription={rank_math_description || "Bienvenue sur notre site !"}
|
||||||
|
defaultCanonicalUrl={acf?.canonical_url || window.location.href}
|
||||||
|
defaultOgImage={heroImage || "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Section Héros */}
|
{/* Section Héros */}
|
||||||
<Hero
|
<Hero
|
||||||
backgroundImage={backgroundImage}
|
backgroundImage={heroImage}
|
||||||
useGradient={useGradient}
|
useGradient={acf?.enable_gradient ?? false}
|
||||||
title={heroTitle}
|
title={acf?.hero_title || "Titre principal"}
|
||||||
titleColor={heroTitleColor}
|
titleColor={acf?.hero_title_color || "#ffffff"}
|
||||||
text={heroText}
|
text={acf?.hero_text || "Texte par défaut"}
|
||||||
textColor={heroTextColor}
|
textColor={acf?.hero_text_color || "#ffffff"}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Section Construisons */}
|
{/* Section Construisons */}
|
||||||
<ConstructSection
|
<ConstructSection
|
||||||
constructTitle={constructTitle}
|
constructTitle={acf?.gdc_construct?.construct_title || "Construisons vos projets"}
|
||||||
constructSubtitle={constructSubtitle}
|
constructSubtitle={acf?.gdc_construct?.construct_subtitle || "ensemble"}
|
||||||
constructNoteText={constructNoteText}
|
constructText={acf?.gdc_construct?.construct_text || "Texte par défaut"}
|
||||||
constructText={constructText}
|
constructSector={acf?.gdc_construct?.construct_sector || "Secteurs"}
|
||||||
constructSector={constructSector}
|
constructNoteText={acf?.gdc_construct?.construct_note || "Note société"}
|
||||||
missionTitle={missionTitle}
|
missionTitle={acf?.mission_title || "Nos missions principales"}
|
||||||
missionItems={missionItems}
|
missionItems={acf?.mission_items || []}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Section Expertises */}
|
||||||
<Expertises
|
<Expertises
|
||||||
expertiseTitle={expertiseTitle}
|
expertiseTitle={acf?.titre_expertise || "Pourquoi Nous Choisir ?"}
|
||||||
expertise1Title={expertise1Title}
|
expertise1Title={acf?.gdc_expert?.titre_expertise_1 || "Expertise 1"}
|
||||||
expertise1Text={expertise1Text}
|
expertise1Text={acf?.gdc_expert?.text_expertise_1 || "Text Expertise 1"}
|
||||||
expertise2Title={expertise2Title}
|
expertise2Title={acf?.gdc_expert?.titre_expertise_2 || "Expertise 2"}
|
||||||
expertise2Text={expertise2Text}
|
expertise2Text={acf?.gdc_expert?.text_expertise_2 || "Text Expertise 2"}
|
||||||
expertise3Title={expertise3Title}
|
expertise3Title={acf?.gdc_expert?.titre_expertise_3 || "Expertise 3"}
|
||||||
expertise3Text={expertise3Text}
|
expertise3Text={acf?.gdc_expert?.text_expertise_3 || "Text Expertise 3"}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Section Désir : Témoignages */}
|
{/* Section Témoignages */}
|
||||||
<Box sx={{ py: 6, px: 4 }}>
|
<Box sx={{ py: 6, px: 4 }}>
|
||||||
<Typography
|
<Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
|
||||||
variant="h2"
|
|
||||||
sx={{
|
|
||||||
fontWeight: "bold",
|
|
||||||
mb: 2,
|
|
||||||
textAlign: "center",
|
|
||||||
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Ce que disent nos clients
|
Ce que disent nos clients
|
||||||
</Typography>
|
</Typography>
|
||||||
<Grid container spacing={4}>
|
<Grid container spacing={4}>
|
||||||
<Grid item xs={12} md={6}>
|
<Grid item xs={12} md={6}>
|
||||||
<Card
|
<Card sx={{ boxShadow: 3, padding: 2, backgroundColor: "#f9f9f9" }}>
|
||||||
sx={{
|
|
||||||
boxShadow: 3,
|
|
||||||
padding: 2,
|
|
||||||
backgroundColor: "#f9f9f9",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
||||||
"Un service exceptionnel, une équipe formidable !"
|
"Un service exceptionnel, une équipe formidable !"
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
|
||||||
variant="body2"
|
|
||||||
sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
|
|
||||||
>
|
|
||||||
- Client 1
|
- Client 1
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} md={6}>
|
<Grid item xs={12} md={6}>
|
||||||
<Card
|
<Card sx={{ boxShadow: 3, padding: 2, backgroundColor: "#f9f9f9" }}>
|
||||||
sx={{
|
|
||||||
boxShadow: 3,
|
|
||||||
padding: 2,
|
|
||||||
backgroundColor: "#f9f9f9",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
|
||||||
"Des résultats impressionnants pour notre projet."
|
"Des résultats impressionnants pour notre projet."
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
|
||||||
variant="body2"
|
|
||||||
sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
|
|
||||||
>
|
|
||||||
- Client 2
|
- Client 2
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@@ -239,12 +141,7 @@ const Home = () => {
|
|||||||
|
|
||||||
{/* Section Action */}
|
{/* Section Action */}
|
||||||
<Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
|
<Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
|
||||||
<Typography
|
<Typography variant="h2" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
|
||||||
variant="h2"
|
|
||||||
align="center"
|
|
||||||
gutterBottom
|
|
||||||
sx={{ fontWeight: "bold", mb: 4 }}
|
|
||||||
>
|
|
||||||
Prêt à Commencer ?
|
Prêt à Commencer ?
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box textAlign="center">
|
<Box textAlign="center">
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Grid, Card, CardContent, CardMedia, Typography, Box } from '@mui/materi
|
|||||||
import api from '../../api'; // Adaptez le chemin vers l'instance Axios
|
import api from '../../api'; // Adaptez le chemin vers l'instance Axios
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const Post = () => {
|
const Post = () => {
|
||||||
const [posts, setPosts] = useState([]);
|
const [posts, setPosts] = useState([]);
|
||||||
|
|
||||||
|
|||||||
@@ -1,23 +1,73 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState } from "react";
|
||||||
import { Helmet } from 'react-helmet-async';
|
import { Helmet } from "react-helmet-async";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
const SEO = ({ title, description, canonicalUrl }) => {
|
const SEO = ({
|
||||||
return (
|
postId,
|
||||||
<Helmet>
|
defaultTitle = "Titre par défaut",
|
||||||
{/* Title et Description */}
|
defaultDescription = "Description par défaut",
|
||||||
<title>{title || 'Titre par défaut'}</title>
|
defaultCanonicalUrl = "",
|
||||||
<meta name="description" content={description || 'Description par défaut.'} />
|
defaultOgImage = "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"
|
||||||
{canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
|
}) => {
|
||||||
|
|
||||||
{/* Preconnect */}
|
const [metaData, setMetaData] = useState({
|
||||||
<link rel="preconnect" href="https://octopusdesign.fr" />
|
title: defaultTitle,
|
||||||
<link rel="preconnect" href="https://preprod.octopusdesign.fr" />
|
description: defaultDescription,
|
||||||
|
canonicalUrl: defaultCanonicalUrl,
|
||||||
|
ogTitle: defaultTitle,
|
||||||
|
ogDescription: defaultDescription,
|
||||||
|
ogImage: defaultOgImage,
|
||||||
|
});
|
||||||
|
|
||||||
{/* DNS Prefetch */}
|
useEffect(() => {
|
||||||
<link rel="dns-prefetch" href="https://octopusdesign.fr" />
|
if (!postId) return;
|
||||||
<link rel="dns-prefetch" href="https://preprod.octopusdesign.fr" />
|
|
||||||
</Helmet>
|
const fetchMetaData = async () => {
|
||||||
);
|
try {
|
||||||
|
const { data } = await axios.get(
|
||||||
|
`https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${postId}`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data && data.rank_math_og) {
|
||||||
|
setMetaData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
title: data.rank_math_og.og_title || prev.title,
|
||||||
|
description: data.rank_math_og.og_description || prev.description,
|
||||||
|
ogTitle: data.rank_math_og.og_title || prev.title,
|
||||||
|
ogDescription: data.rank_math_og.og_description || prev.description,
|
||||||
|
ogImage: data.rank_math_og.og_image || prev.ogImage,
|
||||||
|
canonicalUrl: data.acf?.canonical_url || window.location.href
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("⚠️ Erreur lors de la récupération des métadonnées SEO :", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchMetaData();
|
||||||
|
}, [postId]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Helmet>
|
||||||
|
{/* SEO standard */}
|
||||||
|
<title>{metaData.title}</title>
|
||||||
|
<meta name="description" content={metaData.description} />
|
||||||
|
{metaData.canonicalUrl && <link rel="canonical" href={metaData.canonicalUrl} />}
|
||||||
|
|
||||||
|
{/* Open Graph (Facebook, LinkedIn) */}
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content={metaData.ogTitle} />
|
||||||
|
<meta property="og:description" content={metaData.ogDescription} />
|
||||||
|
<meta property="og:image" content={metaData.ogImage} />
|
||||||
|
<meta property="og:url" content={metaData.canonicalUrl} />
|
||||||
|
|
||||||
|
{/* Twitter Cards */}
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content={metaData.ogTitle} />
|
||||||
|
<meta name="twitter:description" content={metaData.ogDescription} />
|
||||||
|
<meta name="twitter:image" content={metaData.ogImage} />
|
||||||
|
</Helmet>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SEO;
|
export default SEO;
|
||||||
+29
-31
@@ -1,36 +1,46 @@
|
|||||||
import React,{ lazy, Suspense } from "react";
|
import React, { lazy, Suspense } from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||||
import { ThemeProvider } from "@mui/material/styles";
|
import { ThemeProvider } from "@mui/material/styles";
|
||||||
import theme from "./theme";
|
import theme from "./theme";
|
||||||
import { HelmetProvider } from "react-helmet-async";
|
import { HelmetProvider } from "react-helmet-async";
|
||||||
import SimpleReactLightbox from "simple-react-lightbox";
|
import SimpleReactLightbox from "simple-react-lightbox";
|
||||||
|
|
||||||
|
|
||||||
// Lazy loading des pages
|
// Lazy loading des pages
|
||||||
const Home = lazy(() => import('./components/pages/Home.jsx'));
|
const Home = lazy(() => import('./components/pages/Home.jsx'));
|
||||||
const About = lazy(() => import('./components/Pages/About'));
|
const About = lazy(() => import('./components/Pages/About'));
|
||||||
const Contact = lazy(() => import('./components/Pages/Contact'));
|
const Contact = lazy(() => import('./components/Pages/Contact'));
|
||||||
|
const Post = lazy(() => import('./components/Pages/Post'));
|
||||||
// import Home from "./components/Pages/Home.jsx";
|
const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
|
||||||
import Post from "./components/Pages/Post";
|
|
||||||
// import About from "./components/Pages/About";
|
|
||||||
// import Contact from "./components/Pages/Contact";
|
|
||||||
import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
|
|
||||||
import Header from "./components/Header";
|
|
||||||
import Footer from './components/Footer';
|
|
||||||
|
|
||||||
|
|
||||||
// Import des services
|
// Import des services
|
||||||
import ServiceUn from "./components/Pages/ServiceUn.jsx";
|
import ServiceUn from "./components/Pages/ServiceUn.jsx";
|
||||||
import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
|
import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
|
||||||
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
|
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
|
||||||
|
|
||||||
function App() {
|
// Import des composants globaux
|
||||||
|
import Header from "./components/Header";
|
||||||
|
import Footer from './components/Footer';
|
||||||
|
|
||||||
|
function YourApp() {
|
||||||
return (
|
return (
|
||||||
<SimpleReactLightbox>
|
<Suspense fallback={<div>Chargement...</div>}>
|
||||||
<YourApp />
|
<Router>
|
||||||
</SimpleReactLightbox>
|
<Header />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/posts" element={<Post />} />
|
||||||
|
<Route path="/about" element={<About />} />
|
||||||
|
<Route path="/contact" element={<Contact />} />
|
||||||
|
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
|
||||||
|
{/* Routes pour les services */}
|
||||||
|
<Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
|
||||||
|
<Route path="/services/formation-ia" element={<ServiceDeux />} />
|
||||||
|
<Route path="/services/formation-video" element={<ServiceTrois />} />
|
||||||
|
</Routes>
|
||||||
|
<Footer />
|
||||||
|
</Router>
|
||||||
|
</Suspense>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -38,21 +48,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
|
|||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<HelmetProvider>
|
<HelmetProvider>
|
||||||
<Router>
|
<SimpleReactLightbox>
|
||||||
<Header />
|
<YourApp />
|
||||||
<Routes>
|
</SimpleReactLightbox>
|
||||||
<Route path="/" element={<Home />} />
|
|
||||||
<Route path="/posts" element={<Post />} />
|
|
||||||
<Route path="/about" element={<About />} />
|
|
||||||
<Route path="/contact" element={<Contact />} />
|
|
||||||
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
|
|
||||||
{/* Routes pour les services */}
|
|
||||||
<Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
|
|
||||||
<Route path="/services/formation-ia" element={<ServiceDeux />} />
|
|
||||||
<Route path="/services/formation-video" element={<ServiceTrois />} />
|
|
||||||
</Routes>
|
|
||||||
<Footer />
|
|
||||||
</Router>
|
|
||||||
</HelmetProvider>
|
</HelmetProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
|
|||||||
Generated
+78
@@ -0,0 +1,78 @@
|
|||||||
|
{
|
||||||
|
"name": "Octopus-React-Wp",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"react-helmet-async": "^2.0.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/invariant": {
|
||||||
|
"version": "2.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||||
|
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"loose-envify": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/js-tokens": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/loose-envify": {
|
||||||
|
"version": "1.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||||
|
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"loose-envify": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react": {
|
||||||
|
"version": "18.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||||
|
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"loose-envify": "^1.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-fast-compare": {
|
||||||
|
"version": "3.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||||
|
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/react-helmet-async": {
|
||||||
|
"version": "2.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
|
||||||
|
"integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"invariant": "^2.2.4",
|
||||||
|
"react-fast-compare": "^3.2.2",
|
||||||
|
"shallowequal": "^1.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.6.0 || ^17.0.0 || ^18.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/shallowequal": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"react-helmet-async": "^2.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -162,3 +162,24 @@ register_rest_field(
|
|||||||
'schema' => null,
|
'schema' => null,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
function ajouter_opengraph_meta_api($data, $post, $context) {
|
||||||
|
if ($context !== 'view' || !$post) {
|
||||||
|
return $data;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Récupérer les métadonnées de Rank Math
|
||||||
|
$og_title = get_post_meta($post->ID, 'rank_math_title', true);
|
||||||
|
$og_description = get_post_meta($post->ID, 'rank_math_description', true);
|
||||||
|
$og_image = get_post_meta($post->ID, 'rank_math_facebook_image', true);
|
||||||
|
|
||||||
|
// Ajouter les métadonnées au champ API
|
||||||
|
$data->data['opengraph'] = [
|
||||||
|
'title' => $og_title ?: $post->post_title,
|
||||||
|
'description' => $og_description ?: wp_trim_words($post->post_content, 20),
|
||||||
|
'image' => $og_image ? wp_get_attachment_url($og_image) : null,
|
||||||
|
];
|
||||||
|
|
||||||
|
return $data;
|
||||||
|
}
|
||||||
|
add_filter('rest_prepare_post', 'ajouter_opengraph_meta_api', 10, 3);
|
||||||
Reference in New Issue
Block a user