From a9f17ff11f008ebe0337480744c7942e0b3ed250 Mon Sep 17 00:00:00 2001 From: sebvtl728 Date: Wed, 15 Jan 2025 09:50:46 +0100 Subject: [PATCH 1/2] interation opengraph --- frontend/src/api.js | 16 +- frontend/src/components/Pages/Post.jsx | 1 + frontend/src/components/Pages/PostPage.jsx | 39 + frontend/src/components/SEO.jsx | 64 +- frontend/src/main.jsx | 64 +- frontend/stats.html | 4949 +++++++++++++++++ .../hello-elementor-child/functions.php | 23 +- 7 files changed, 5105 insertions(+), 51 deletions(-) create mode 100644 frontend/src/components/Pages/PostPage.jsx create mode 100644 frontend/stats.html diff --git a/frontend/src/api.js b/frontend/src/api.js index 1d2303d..e0e5d53 100644 --- a/frontend/src/api.js +++ b/frontend/src/api.js @@ -1,8 +1,22 @@ import axios from 'axios'; +// Création de l'instance Axios const api = axios.create({ baseURL: 'https://preprod.octopusdesign.fr/api-octopus/server/wp-json', withCredentials: true, }); -export default api; \ No newline at end of file +// Méthode pour récupérer les données OpenGraph d'un article spécifique +export const fetchPostWithOG = async (postId) => { + try { + const response = await api.get(`/wp/v2/posts/${postId}`); + const { opengraph } = response.data; // Les métadonnées OpenGraph doivent être disponibles ici + return opengraph; + } catch (error) { + console.error('Erreur lors de la récupération des données OpenGraph :', error); + throw error; + } +}; + +// Exportation de l'instance Axios par défaut +export default api; diff --git a/frontend/src/components/Pages/Post.jsx b/frontend/src/components/Pages/Post.jsx index 1018613..a7db61f 100644 --- a/frontend/src/components/Pages/Post.jsx +++ b/frontend/src/components/Pages/Post.jsx @@ -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 + const Post = () => { const [posts, setPosts] = useState([]); diff --git a/frontend/src/components/Pages/PostPage.jsx b/frontend/src/components/Pages/PostPage.jsx new file mode 100644 index 0000000..7496b4a --- /dev/null +++ b/frontend/src/components/Pages/PostPage.jsx @@ -0,0 +1,39 @@ +import React, { useEffect, useState } from "react"; +import { Helmet } from "react-helmet-async"; +import { useParams } from "react-router-dom"; +import { fetchPostWithOG } from "../../api"; // Assure-toi que le chemin est correct + +const PostPage = () => { + const { id } = useParams(); + const [ogData, setOgData] = useState(null); + + useEffect(() => { + const getOgData = async () => { + try { + const data = await fetchPostWithOG(id); + setOgData(data); + } catch (error) { + console.error("Erreur lors de la récupération des métadonnées OpenGraph :", error); + } + }; + + getOgData(); + }, [id]); + + if (!ogData) return
Chargement...
; + + return ( +
+ + + + + +

{ogData.title}

+

{ogData.description}

+ {ogData.title} +
+ ); +}; + +export default PostPage; diff --git a/frontend/src/components/SEO.jsx b/frontend/src/components/SEO.jsx index 9ecd5be..af369d2 100644 --- a/frontend/src/components/SEO.jsx +++ b/frontend/src/components/SEO.jsx @@ -1,23 +1,53 @@ -import React from 'react'; -import { Helmet } from 'react-helmet-async'; +import React, { useEffect, useState } from "react"; +import { Helmet } from "react-helmet-async"; +import axios from "axios"; -const SEO = ({ title, description, canonicalUrl }) => { - return ( - - {/* Title et Description */} - {title || 'Titre par défaut'} - - {canonicalUrl && } +const SEO = ({ postId, defaultTitle, defaultDescription, defaultCanonicalUrl, defaultOgImage }) => { + const [metaData, setMetaData] = useState({ + title: defaultTitle || "Titre par défaut", + description: defaultDescription || "Description par défaut", + canonicalUrl: defaultCanonicalUrl || "", + ogTitle: "", + ogDescription: "", + ogImage: defaultOgImage || "https://votre-site.com/default-image.jpg", + }); - {/* Preconnect */} - - + useEffect(() => { + if (!postId) return; - {/* DNS Prefetch */} - - - - ); + const fetchMetaData = async () => { + try { + const response = await axios.get( + `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${postId}` + ); + + const ogData = response.data.rank_math_og || {}; + setMetaData((prev) => ({ + ...prev, + title: ogData.og_title || prev.title, + description: ogData.og_description || prev.description, + ogTitle: ogData.og_title || "", + ogDescription: ogData.og_description || "", + ogImage: ogData.og_image || prev.ogImage, + })); + } catch (error) { + console.error("Erreur lors de la récupération des données SEO :", error); + } + }; + + fetchMetaData(); + }, [postId]); + + return ( + + {metaData.title} + + {metaData.canonicalUrl && } + + + + + ); }; export default SEO; \ No newline at end of file diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index c2a0ad0..710cfad 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,36 +1,48 @@ -import React,{ lazy, Suspense } from "react"; +import React, { lazy, Suspense } from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { ThemeProvider } from "@mui/material/styles"; import theme from "./theme"; import { HelmetProvider } from "react-helmet-async"; -import SimpleReactLightbox from "simple-react-lightbox"; - +import SimpleReactLightbox from "simple-react-lightbox"; // Lazy loading des pages const Home = lazy(() => import('./components/pages/Home.jsx')); const About = lazy(() => import('./components/Pages/About')); const Contact = lazy(() => import('./components/Pages/Contact')); - -// import Home from "./components/Pages/Home.jsx"; -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'; - +const Post = lazy(() => import('./components/Pages/Post')); +const PostPage = lazy(() => import('./components/Pages/PostPage')); // Nouveau composant pour un post spécifique +const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche // Import des services import ServiceUn from "./components/Pages/ServiceUn.jsx"; import ServiceDeux from "./components/Pages/ServiceDeux.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 ( - - - + Chargement...}> + +
+ + } /> + } /> + } /> {/* Route dynamique pour un post spécifique */} + } /> + } /> + } /> {/* Route pour les recherches */} + {/* Routes pour les services */} + } /> + } /> + } /> + +