diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/app/components/Nav.jsx b/app/components/Nav.jsx
new file mode 100644
index 0000000..f33aa04
--- /dev/null
+++ b/app/components/Nav.jsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+export default function Nav() {
+ return (
+
+
+ Deligraph
+
+
+
+ -
+ Portfolio
+
+ -
+ Projets Clients Side
+
+ -
+ Projets Server Side
+
+ -
+ Contact
+
+
+
+ {posts.map((post) => (
+
+
+ {post.title.rendered}
+
+
+ {post.content.rendered}
+
+
+ ))}
+
+
Chargement des posts...
+
+ {posts.map((post) => (
+
+
+ {post.title.rendered}
+
+
+ {post.content.rendered}
+
+
+ ))}
+
+ {posts.map((post) => {
+ return (
+
+
+ {post.featuredImageUrl && (
+
+
+
+ )}
+
+
+ {post.title.rendered}
+
+
+
+
+ );
+ })}
+
+
+ {" "}
+ Deligraph
+
+
+
+ -
+ Projets Clients Side
+
+ -
+ Projets Server Side
+
+ -
+ Contact
+
+
+
prooooojets
+
+ );
+}
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..3e3ad80 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,42 @@
@import "tailwindcss";
:root {
- --background: #ffffff;
- --foreground: #171717;
+ --background: #ffffff;
+ --foreground: #171717;
}
@theme inline {
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --font-sans: var(--font-geist-sans);
- --font-mono: var(--font-geist-mono);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-geist-sans);
+ --font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
+ :root {
+ --background: #0a0a0a;
+ --foreground: #ededed;
+ }
}
body {
- background: var(--background);
- color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
+ background: var(--background);
+ color: var(--foreground);
+ font-family: Arial, Helvetica, sans-serif;
+
+ &:has(main[data-theme="dark"]) {
+ background: var(--background);
+ color: var(--foreground);
+ font-family: Arial, Helvetica, sans-serif;
+ }
+ &:has(main[data-theme="light"]) {
+ --background: white;
+ --foreground: #000;
+
+ background: var(--background);
+ color: var(--foreground);
+ font-family: Arial, Helvetica, sans-serif;
+ }
+ background: white;
+ color: #000;
}
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..df8a0e5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,55 @@
+"use client";
+import Link from "next/link";
+import { useState, useEffect } from "react";
import Image from "next/image";
export default function Home() {
- return (
-
-
-
-
-
- To get started, edit the page.tsx file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
-
-
+
+ Deligraph
+
+
+
+ -
+ Projets Clients Side
+
+ -
+ Projets Server Side
+
+ -
+ Contact
+
+
+
+
Projets
+
+
+ );
+}
diff --git a/app/projects-server-side/page.jsx b/app/projects-server-side/page.jsx
new file mode 100644
index 0000000..f7fa55d
--- /dev/null
+++ b/app/projects-server-side/page.jsx
@@ -0,0 +1,13 @@
+import Link from "next/link";
+import PostGridServerSide from "../components/PostGridServerSide";
+import Nav from "../components/Nav";
+
+export default function Projects() {
+ return (
+
+
+ Projets
+
+
+ );
+}
diff --git a/app/projects/[slug]/page.jsx b/app/projects/[slug]/page.jsx
new file mode 100644
index 0000000..fc3745d
--- /dev/null
+++ b/app/projects/[slug]/page.jsx
@@ -0,0 +1,74 @@
+import { notFound } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+import Nav from "../../components/Nav";
+import { fetchPortfolioPostBySlug, fetchMedia } from "../../utils/useWordpress";
+
+export default async function ProjectDetail({ params }) {
+ const { slug } = params;
+
+ if (!slug) {
+ notFound();
+ }
+
+ let post = null;
+ let featuredImageUrl = null;
+
+ try {
+ // Récupérer le post par son slug
+ post = await fetchPortfolioPostBySlug(slug, {
+ next: { revalidate: 3600 }, // Revalide toutes les heures
+ });
+
+ if (!post) {
+ notFound();
+ }
+
+ // Récupérer l'image featured si elle existe
+ if (post.featured_media) {
+ featuredImageUrl = await fetchMedia(post.featured_media, {
+ next: { revalidate: 3600 },
+ });
+ }
+ } catch (error) {
+ console.error("Erreur lors de la récupération du projet:", error);
+ notFound();
+ }
+
+ return (
+
+
+
+
+ ← Retour aux projets
+
+
+ {featuredImageUrl && (
+
+
+
+ )}
+
+
+ {post.title?.rendered || "Sans titre"}
+
+
+
+
+
+ );
+}
diff --git a/app/projects/not-found.jsx b/app/projects/not-found.jsx
new file mode 100644
index 0000000..eab033e
--- /dev/null
+++ b/app/projects/not-found.jsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+export default function NotFound() {
+ return (
+
+
+
+ 404 - Projet non trouvé
+
+
+ Le projet que vous recherchez n'existe pas ou a été supprimé.
+
+
+ Retour aux projets
+
+
Portfolio
+
+
+ );
+}
diff --git a/app/utils/useWordpress.js b/app/utils/useWordpress.js
new file mode 100644
index 0000000..6b8b3f7
--- /dev/null
+++ b/app/utils/useWordpress.js
@@ -0,0 +1,281 @@
+/**
+ * Fonctions utilitaires pour récupérer des données depuis WordPress REST API
+ * Compatible avec Next.js (client et serveur)
+ */
+
+const WORDPRESS_API_BASE = "https://deligraph.com/wp-json/wp/v2";
+const PORTFOLIO_ENDPOINT = `${WORDPRESS_API_BASE}/portfolio`;
+
+/**
+ * Construit une URL avec des paramètres de requête
+ * @param {string} baseUrl - URL de base
+ * @param {Object} params - Paramètres de requête
+ * @returns {string} URL complète avec paramètres
+ */
+function buildUrl(baseUrl, params = {}) {
+ const url = new URL(baseUrl);
+ Object.keys(params).forEach((key) => {
+ if (params[key] !== undefined && params[key] !== null) {
+ url.searchParams.append(key, params[key]);
+ }
+ });
+ return url.toString();
+}
+
+/**
+ * Récupère les informations d'un média WordPress par son ID
+ * @param {number} mediaId - ID du média WordPress
+ * @param {Object} fetchOptions - Options supplémentaires pour fetch
+ * @returns {Promise} URL de l'image ou null si non trouvé
+ */
+export async function fetchMedia(mediaId, fetchOptions = {}) {
+ if (!mediaId) {
+ return null;
+ }
+
+ const url = `${WORDPRESS_API_BASE}/media/${mediaId}`;
+
+ try {
+ const response = await fetch(url, {
+ ...fetchOptions,
+ });
+
+ if (!response.ok) {
+ if (response.status === 404) {
+ return null;
+ }
+ throw new Error(`Erreur HTTP: ${response.status} - ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ // Retourner l'URL source de l'image
+ return data.source_url || null;
+ } catch (error) {
+ console.error(`Erreur lors de la récupération du média ID "${mediaId}":`, error);
+ return null; // Retourner null au lieu de throw pour éviter de casser le rendu
+ }
+}
+
+/**
+ * Récupère les posts de type portfolio depuis WordPress
+ * @param {Object} options - Options de récupération
+ * @param {number} options.perPage - Nombre de posts par page (défaut: 10)
+ * @param {number} options.page - Numéro de page (défaut: 1)
+ * @param {string} options.search - Terme de recherche
+ * @param {number} options.categories - ID de catégorie
+ * @param {string} options.order - Ordre de tri (asc/desc, défaut: desc)
+ * @param {string} options.orderby - Champ de tri (date, title, etc., défaut: date)
+ * @param {Object} options.fetchOptions - Options supplémentaires pour fetch (utile pour revalidate côté serveur)
+ * @returns {Promise} Tableau de posts portfolio
+ */
+export async function fetchPortfolioPosts(options = {}) {
+ const {
+ perPage = 10,
+ page = 1,
+ search,
+ categories,
+ order = "desc",
+ orderby = "date",
+ fetchOptions = {},
+ } = options;
+
+ const params = {
+ per_page: perPage,
+ page: page,
+ order: order,
+ orderby: orderby,
+ };
+
+ if (search) {
+ params.search = search;
+ }
+
+ if (categories) {
+ params.categories = categories;
+ }
+
+ const url = buildUrl(PORTFOLIO_ENDPOINT, params);
+
+ try {
+ const response = await fetch(url, {
+ ...fetchOptions,
+ });
+
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP: ${response.status} - ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ // Récupérer les images de couverture pour chaque post en parallèle
+ const postsWithImages = await Promise.all(
+ data.map(async (post) => {
+ if (post.featured_media) {
+ try {
+ const mediaUrl = await fetchMedia(post.featured_media, fetchOptions);
+ return { ...post, featuredImageUrl: mediaUrl };
+ } catch (error) {
+ console.error(`Erreur lors de la récupération de l'image pour le post ${post.id}:`, error);
+ return { ...post, featuredImageUrl: null };
+ }
+ }
+ return { ...post, featuredImageUrl: null };
+ }),
+ );
+
+ return {
+ posts: postsWithImages,
+ totalPages: parseInt(response.headers.get("X-WP-TotalPages") || "1", 10),
+ total: parseInt(response.headers.get("X-WP-Total") || "0", 10),
+ };
+ } catch (error) {
+ console.error("Erreur lors de la récupération des posts portfolio:", error);
+ throw error;
+ }
+}
+
+/**
+ * Récupère un post portfolio spécifique par son slug
+ * @param {string} slug - Slug du post
+ * @param {Object} fetchOptions - Options supplémentaires pour fetch
+ * @returns {Promise} Post portfolio ou null si non trouvé
+ */
+export async function fetchPortfolioPostBySlug(slug, fetchOptions = {}) {
+ if (!slug) {
+ throw new Error("Le slug est requis");
+ }
+
+ const url = buildUrl(PORTFOLIO_ENDPOINT, { slug });
+ console.log("URL de recherche:", url);
+
+ try {
+ const response = await fetch(url, {
+ ...fetchOptions,
+ });
+
+ console.log("Statut de la réponse:", response.status, response.statusText);
+
+ if (!response.ok) {
+ if (response.status === 404) {
+ console.log("Aucun post trouvé avec le paramètre slug, tentative avec fallback...");
+ // Fallback: récupérer tous les posts et filtrer par slug
+ return await fetchPortfolioPostBySlugFallback(slug, fetchOptions);
+ }
+ throw new Error(`Erreur HTTP: ${response.status} - ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ console.log(
+ "Données reçues:",
+ Array.isArray(data) ? `${data.length} résultat(s)` : "Format inattendu",
+ data,
+ );
+
+ // L'API WordPress retourne un tableau même pour un seul résultat
+ if (Array.isArray(data)) {
+ if (data.length > 0) {
+ return data[0];
+ }
+ // Si le tableau est vide, essayer le fallback
+ console.log("Tableau vide, tentative avec fallback...");
+ return await fetchPortfolioPostBySlugFallback(slug, fetchOptions);
+ }
+
+ // Si ce n'est pas un tableau, retourner directement (cas où l'API retourne un objet unique)
+ return data;
+ } catch (error) {
+ console.error(`Erreur lors de la récupération du post portfolio "${slug}":`, error);
+ // En cas d'erreur, essayer le fallback
+ try {
+ return await fetchPortfolioPostBySlugFallback(slug, fetchOptions);
+ } catch {
+ throw error; // Relancer l'erreur originale
+ }
+ }
+}
+
+/**
+ * Fallback: récupère tous les posts et filtre par slug
+ * @param {string} slug - Slug du post
+ * @param {Object} fetchOptions - Options supplémentaires pour fetch
+ * @returns {Promise} Post portfolio ou null si non trouvé
+ */
+async function fetchPortfolioPostBySlugFallback(slug, fetchOptions = {}) {
+ console.log("Utilisation du fallback pour le slug:", slug);
+ try {
+ const allPosts = await fetchAllPortfolioPosts({ fetchOptions });
+ const post = allPosts.find((p) => p.slug === slug);
+
+ if (post) {
+ console.log("Post trouvé via fallback");
+ return post;
+ }
+
+ console.log("Aucun post trouvé avec le slug:", slug);
+ return null;
+ } catch (error) {
+ console.error("Erreur dans le fallback:", error);
+ throw error;
+ }
+}
+
+/**
+ * Récupère un post portfolio par son ID
+ * @param {number} id - ID du post
+ * @param {Object} fetchOptions - Options supplémentaires pour fetch
+ * @returns {Promise} Post portfolio ou null si non trouvé
+ */
+export async function fetchPortfolioPostById(id, fetchOptions = {}) {
+ if (!id) {
+ throw new Error("L'ID est requis");
+ }
+
+ const url = `${PORTFOLIO_ENDPOINT}/${id}`;
+
+ try {
+ const response = await fetch(url, {
+ ...fetchOptions,
+ });
+
+ if (!response.ok) {
+ if (response.status === 404) {
+ return null;
+ }
+ throw new Error(`Erreur HTTP: ${response.status} - ${response.statusText}`);
+ }
+
+ return await response.json();
+ } catch (error) {
+ console.error(`Erreur lors de la récupération du post portfolio ID "${id}":`, error);
+ throw error;
+ }
+}
+
+/**
+ * Récupère tous les posts portfolio (sans pagination)
+ * @param {Object} options - Options de récupération (mêmes que fetchPortfolioPosts)
+ * @returns {Promise} Tableau de tous les posts portfolio
+ */
+export async function fetchAllPortfolioPosts(options = {}) {
+ const allPosts = [];
+ let page = 1;
+ let hasMore = true;
+
+ while (hasMore) {
+ const result = await fetchPortfolioPosts({
+ ...options,
+ page,
+ perPage: 100, // Maximum recommandé par WordPress REST API
+ });
+
+ allPosts.push(...result.posts);
+
+ if (page >= result.totalPages) {
+ hasMore = false;
+ } else {
+ page++;
+ }
+ }
+
+ return allPosts;
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
old mode 100644
new mode 100755
diff --git a/next.config.ts b/next.config.ts
old mode 100644
new mode 100755
index e9ffa30..e272b20
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,25 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
- /* config options here */
+ // Configuration pour l'export statique
+ output: "export",
+
+ images: {
+
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "deligraph.com",
+ pathname: "/wp-content/**",
+ },
+ ],
+ // Pour l'export statique, désactiver l'optimisation d'images Next.js
+ // ou utiliser unloader externe
+ unoptimized: true,
+ },
+
+ // Désactiver les fonctionnalités qui ne fonctionnent pas en mode statique
+ trailingSlash: true, // Optionnel : ajoute un slash à la fin des URLs
};
export default nextConfig;
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index 9a925b5..a9bb505
--- a/package.json
+++ b/package.json
@@ -24,4 +24,4 @@
"typescript": "^5"
},
"packageManager": "pnpm@10.22.0+sha512.bf049efe995b28f527fd2b41ae0474ce29186f7edcb3bf545087bd61fbbebb2bf75362d1307fda09c2d288e1e499787ac12d4fcb617a974718a6051f2eee741c"
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
old mode 100644
new mode 100755
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
old mode 100644
new mode 100755
diff --git a/postcss.config.mjs b/postcss.config.mjs
old mode 100644
new mode 100755
diff --git a/public/icon-switch.svg b/public/icon-switch.svg
new file mode 100644
index 0000000..7033783
--- /dev/null
+++ b/public/icon-switch.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
old mode 100644
new mode 100755