Add WordPress integration as Headless CMS and enhance navigation with dynamic categories

src/components/AudioPlayer.vue

@@ -128,7 +128,7 @@ export default {
     const isPlaying = ref(false)
     const currentTime = ref(0)
     const duration = ref(0)
-    const volume = ref(70)
+    const volume = ref(100)
     const playbackRate = ref(1)
 
     const hasAudio = computed(() => !!props.audioSrc)

src/components/NavigationBar.vue

@@ -35,18 +35,36 @@
               <span>Textes</span>
             </div>
           </router-link>
-          <router-link
+          <template v-if="!useDropdown">
-            to="/au-hasard"
+            <router-link
-            class="nav-link"
+              v-for="category in dynamicCategories"
-            :class="{ 'active': $route.name === 'Random' }"
+              :key="category.id"
-          >
+              :to="getCategoryLink(category)"
-            <div class="flex items-center space-x-2">
+              class="nav-link"
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              :class="{ 'active': isCategoryActive(category) }"
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+            >
-              </svg>
+              <span>{{ category.name }}</span>
-              <span>Au Hasard</span>
+            </router-link>
+          </template>
+          <div v-else class="relative group">
+            <button
+              class="nav-link"
+              :class="{ 'active': isBlogActive }"
+              type="button"
+            >
+              Blog
+            </button>
+            <div class="absolute left-0 mt-2 w-56 bg-white border border-gray-200 rounded-lg shadow-lg py-2 hidden group-hover:block">
+              <router-link
+                v-for="category in categories"
+                :key="category.id"
+                :to="getCategoryLink(category)"
+                class="dropdown-link"
+              >
+                {{ category.name }}
+              </router-link>
             </div>
-          </router-link>
+          </div>
 
           <!-- Barre de recherche -->
           <div class="relative">
@@ -83,7 +101,17 @@
         <div class="flex flex-col space-y-4">
           <router-link to="/" class="nav-link-mobile">Accueil</router-link>
           <router-link to="/textes" class="nav-link-mobile">Textes</router-link>
-          <router-link to="/au-hasard" class="nav-link-mobile">Au Hasard</router-link>
+          <div v-if="categories.length" class="pt-2 border-t border-gray-200">
+            <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Blog</div>
+            <router-link
+              v-for="category in categories"
+              :key="category.id"
+              :to="getCategoryLink(category)"
+              class="nav-link-mobile"
+            >
+              {{ category.name }}
+            </router-link>
+          </div>
           <div class="pt-2">
             <input
               v-model="searchQuery"
@@ -100,15 +128,19 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
+import { wordpressService } from '../services/wordpressService.js'
 
 export default {
   name: 'NavigationBar',
   setup() {
     const router = useRouter()
+    const route = useRoute()
     const searchQuery = ref('')
     const mobileMenuOpen = ref(false)
+    const categories = ref([])
+    const categoriesLoading = ref(false)
 
     const performSearch = () => {
       if (searchQuery.value.trim()) {
@@ -120,9 +152,55 @@ export default {
       }
     }
 
+    const loadCategories = async () => {
+      categoriesLoading.value = true
+      try {
+        categories.value = await wordpressService.getCategories()
+      } catch (error) {
+        console.error('Erreur lors du chargement des catégories:', error)
+      } finally {
+        categoriesLoading.value = false
+      }
+    }
+
+    const dynamicCategories = computed(() => {
+      return categories.value.slice(0, 4)
+    })
+
+    const useDropdown = computed(() => {
+      return categories.value.length > 4
+    })
+
+    const getCategoryLink = (category) => {
+      return category.slug === 'actualites' ? '/actualites' : `/blog/${category.slug}`
+    }
+
+    const isCategoryActive = (category) => {
+      if (category.slug === 'actualites') {
+        return route.name === 'News' || route.name === 'NewsArticle'
+      }
+
+      return route.name === 'BlogCategory' && route.params.slug === category.slug
+    }
+
+    const isBlogActive = computed(() => {
+      return route.name === 'News' || route.name === 'BlogCategory' || route.name === 'NewsArticle'
+    })
+
+    onMounted(() => {
+      loadCategories()
+    })
+
     return {
       searchQuery,
       mobileMenuOpen,
+      categories,
+      categoriesLoading,
+      dynamicCategories,
+      useDropdown,
+      isBlogActive,
+      getCategoryLink,
+      isCategoryActive,
       performSearch
     }
   }
@@ -131,7 +209,9 @@ export default {
 
 <style scoped>
 .nav-link {
-  @apply font-medium transition-colors duration-200 pb-1;
+  font-weight: 500;
+  transition: color 0.2s;
+  padding-bottom: 0.25rem;
   color: #6b7280;
 }
 
@@ -140,15 +220,31 @@ export default {
 }
 
 .nav-link.active {
-  @apply text-black border-b-2 border-black;
+  color: black;
+  border-bottom: 2px solid black;
 }
 
 .nav-link-mobile {
-  @apply font-medium transition-colors duration-200 py-2;
+  font-weight: 500;
+  transition: color 0.2s;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   color: #6b7280;
 }
 
 .nav-link-mobile:hover {
   color: black;
 }
+
+.dropdown-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #374151;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.dropdown-link:hover {
+  color: black;
+  background-color: #f9fafb;
+}
 </style>

src/router/index.js

@@ -2,6 +2,8 @@
 import Home from '../views/Home.vue'
 import Texts from '../views/Texts.vue'
 import TextReader from '../views/TextReader.vue'
+import News from '../views/News.vue'
+import NewsArticle from '../views/NewsArticle.vue'
 import { textService } from '../services/textService.js'
 
 const routes = [
@@ -22,17 +24,20 @@ const routes = [
     props: true
   },
   {
-    path: '/au-hasard',
+    path: '/actualites',
-    name: 'Random',
+    name: 'News',
-    beforeEnter: async (to, from, next) => {
+    component: News
-      try {
+  },
-        const randomText = await textService.getRandomText()
+  {
-        next(`/texte/${randomText.id}`)
+    path: '/blog/:slug',
-      } catch (error) {
+    name: 'BlogCategory',
-        console.error('Erreur lors de la redirection vers un texte aléatoire:', error)
+    component: News
-        next('/textes')
+  },
-      }
+  {
-    }
+    path: '/actualite/:id',
+    name: 'NewsArticle',
+    component: NewsArticle,
+    props: true
   }
 ]
 

src/services/textService.js

@@ -2,7 +2,7 @@
  * Service pour communiquer avec l'API backend des textes
  */
 
-const API_BASE_URL = import.meta.env.VITE_TEXTS_API_URL || 'http://localhost:3000/api'
+const API_BASE_URL = import.meta.env.VITE_TEXTS_API_URL || 'https://patois.lagaudiere.uk/api' || 'http://localhost:3000/api'
 
 export class TextService {
     constructor() {

src/services/wordpressService.js

@@ -0,0 +1,181 @@
+const API_BASE_URL = 'https://admin-afpl.federation-ouest-francoprovencal.fr/wp-json/wp/v2'
+const ACTUALITES_CATEGORY_ID = 3
+
+/**
+ * Service pour interagir avec l'API WordPress (Headless CMS)
+ */
+export const wordpressService = {
+  /**
+   * Récupère les catégories principales (parent = 0)
+   * @returns {Promise<Array>} - Liste des catégories
+   */
+  async getCategories() {
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/categories?per_page=100&parent=0&hide_empty=true&orderby=name&order=asc`
+      )
+
+      if (!response.ok) {
+        throw new Error(`Erreur HTTP: ${response.status}`)
+      }
+
+      const categories = await response.json()
+      return categories
+        .filter(category => category.slug !== 'uncategorized' && category.name.toLowerCase() !== 'uncategorized')
+        .map(category => this.formatCategory(category))
+    } catch (error) {
+      console.error('Erreur lors de la récupération des catégories:', error)
+      throw error
+    }
+  },
+
+  /**
+   * Récupère une catégorie par son slug
+   * @param {string} slug - Slug de la catégorie
+   * @returns {Promise<Object|null>} - Catégorie formatée ou null
+   */
+  async getCategoryBySlug(slug) {
+    try {
+      const response = await fetch(`${API_BASE_URL}/categories?slug=${slug}`)
+
+      if (!response.ok) {
+        throw new Error(`Erreur HTTP: ${response.status}`)
+      }
+
+      const categories = await response.json()
+      if (!categories.length) {
+        return null
+      }
+
+      return this.formatCategory(categories[0])
+    } catch (error) {
+      console.error(`Erreur lors de la récupération de la catégorie ${slug}:`, error)
+      throw error
+    }
+  },
+
+  /**
+   * Récupère tous les posts de la catégorie "actualites"
+   * @param {number} perPage - Nombre de posts par page (défaut: 10)
+   * @param {number} page - Numéro de page (défaut: 1)
+   * @returns {Promise<Object>} - { posts: Array, totalPages: number, total: number }
+   */
+  async getNews(perPage = 10, page = 1) {
+    return this.getPostsByCategory(ACTUALITES_CATEGORY_ID, perPage, page)
+  },
+
+  /**
+   * Récupère les posts d'une catégorie
+   * @param {number} categoryId - ID de la catégorie
+   * @param {number} perPage - Nombre de posts par page (défaut: 10)
+   * @param {number} page - Numéro de page (défaut: 1)
+   * @returns {Promise<Object>} - { posts: Array, totalPages: number, total: number }
+   */
+  async getPostsByCategory(categoryId, perPage = 10, page = 1) {
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/posts?categories=${categoryId}&per_page=${perPage}&page=${page}&_embed`
+      )
+
+      if (!response.ok) {
+        throw new Error(`Erreur HTTP: ${response.status}`)
+      }
+
+      const posts = await response.json()
+      const totalPages = parseInt(response.headers.get('X-WP-TotalPages') || '1')
+      const total = parseInt(response.headers.get('X-WP-Total') || '0')
+
+      return {
+        posts: posts.map(post => this.formatPost(post)),
+        totalPages,
+        total
+      }
+    } catch (error) {
+      console.error('Erreur lors de la récupération des posts:', error)
+      throw error
+    }
+  },
+
+  /**
+   * Récupère un post spécifique par son ID
+   * @param {number} id - ID du post
+   * @returns {Promise<Object>} - Post formaté
+   */
+  async getNewsById(id) {
+    return this.getPostById(id)
+  },
+
+  /**
+   * Récupère un post spécifique par son ID
+   * @param {number} id - ID du post
+   * @returns {Promise<Object>} - Post formaté
+   */
+  async getPostById(id) {
+    try {
+      const response = await fetch(`${API_BASE_URL}/posts/${id}?_embed`)
+
+      if (!response.ok) {
+        throw new Error(`Erreur HTTP: ${response.status}`)
+      }
+
+      const post = await response.json()
+      return this.formatPost(post)
+    } catch (error) {
+      console.error(`Erreur lors de la récupération du post ${id}:`, error)
+      throw error
+    }
+  },
+
+  /**
+   * Formate une catégorie WordPress
+   * @param {Object} category - Catégorie brute de l'API WordPress
+   * @returns {Object} - Catégorie formatée
+   */
+  formatCategory(category) {
+    return {
+      id: category.id,
+      name: category.name,
+      slug: category.slug,
+      description: category.description,
+      count: category.count,
+      parent: category.parent
+    }
+  },
+
+  /**
+   * Formate un post WordPress pour l'utilisation dans l'application
+   * @param {Object} post - Post brut de l'API WordPress
+   * @returns {Object} - Post formaté
+   */
+  formatPost(post) {
+    return {
+      id: post.id,
+      title: post.title.rendered,
+      content: post.content.rendered,
+      excerpt: post.excerpt.rendered,
+      date: post.date,
+      modified: post.modified,
+      slug: post.slug,
+      link: post.link,
+      author: post._embedded?.author?.[0]?.name || 'Auteur inconnu',
+      featuredImage: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || null,
+      featuredImageAlt: post._embedded?.['wp:featuredmedia']?.[0]?.alt_text || '',
+      categories: post._embedded?.['wp:term']?.[0]?.map(cat => cat.name) || [],
+      tags: post._embedded?.['wp:term']?.[1]?.map(tag => tag.name) || []
+    }
+  },
+
+  /**
+   * Formate une date pour l'affichage
+   * @param {string} dateString - Date au format ISO
+   * @returns {string} - Date formatée en français
+   */
+  formatDate(dateString) {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('fr-FR', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  }
+}

src/style.css

@@ -2,6 +2,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 @theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  
+  /* Ajouter les couleurs personnalisées si nécessaire */
   --color-gray-custom: #6b7280;
   --color-gray-custom-light: #9ca3af;
 }
@@ -9,25 +12,50 @@
 @layer base {
   body {
     font-family: 'Inter', sans-serif;
-    @apply bg-white text-black leading-relaxed;
+    background-color: white;
+    color: black;
+    line-height: 1.625;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-colors duration-200 font-medium;
+    background-color: black;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 9999px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+  }
+
+  .btn-primary:hover {
+    background-color: #1f2937;
   }
 
   .btn-secondary {
-    @apply border-2 border-black text-black px-6 py-3 rounded-full hover:bg-black hover:text-white transition-all duration-200 font-medium;
+    border: 2px solid black;
+    color: black;
+    padding: 0.75rem 1.5rem;
+    border-radius: 9999px;
+    font-weight: 500;
+    transition: all 0.2s;
+  }
+
+  .btn-secondary:hover {
+    background-color: black;
+    color: white;
   }
 
   .text-patois {
-    @apply font-medium text-lg leading-relaxed;
+    font-weight: 500;
+    font-size: 1.125rem;
+    line-height: 1.625;
   }
 
   .text-french {
-    @apply font-normal text-lg leading-relaxed;
+    font-weight: 400;
+    font-size: 1.125rem;
+    line-height: 1.625;
     color: var(--color-gray-custom);
   }
 }

src/views/Home.vue

@@ -15,9 +15,6 @@
           <router-link to="/textes" class="btn-primary">
             Explorer les textes
           </router-link>
-          <router-link to="/au-hasard" class="btn-secondary">
-            Texte au hasard
-          </router-link>
         </div>
       </div>
     </section>

src/views/News.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="min-h-screen bg-white py-8">
+    <div class="max-w-6xl mx-auto px-4">
+      <!-- En-tête -->
+      <div class="mb-8">
+        <h1 class="text-4xl font-bold text-black mb-4">
+          {{ categoryTitle }}
+        </h1>
+        <p class="text-gray-600">
+          {{ categoryDescription }}
+        </p>
+      </div>
+
+      <!-- Chargement -->
+      <div v-if="loading" class="flex justify-center items-center py-20">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-black"></div>
+      </div>
+
+      <!-- Erreur -->
+      <div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+        <p class="text-red-600 mb-2">{{ error }}</p>
+        <button 
+          @click="loadNews" 
+          class="text-sm text-red-700 hover:text-red-900 underline"
+        >
+          Réessayer
+        </button>
+      </div>
+
+      <!-- Liste des articles -->
+      <div v-else-if="newsList.length > 0" class="space-y-6">
+        <article
+          v-for="news in newsList"
+          :key="news.id"
+          class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
+          @click="goToNews(news.id)"
+        >
+          <div class="md:flex">
+            <!-- Image à la une -->
+            <div v-if="news.featuredImage" class="md:w-1/3">
+              <img
+                :src="news.featuredImage"
+                :alt="news.featuredImageAlt || news.title"
+                class="w-full h-64 md:h-full object-cover"
+              />
+            </div>
+
+            <!-- Contenu -->
+            <div class="p-6 md:w-2/3">
+              <!-- Date et auteur -->
+              <div class="flex items-center text-sm text-gray-500 mb-3">
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <span>{{ formatDate(news.date) }}</span>
+                <span class="mx-2">•</span>
+                <span>{{ news.author }}</span>
+              </div>
+
+              <!-- Titre -->
+              <h2 class="text-2xl font-bold text-black mb-3 hover:text-gray-700 transition-colors">
+                {{ news.title }}
+              </h2>
+
+              <!-- Extrait -->
+              <div 
+                class="text-gray-600 mb-4 line-clamp-3"
+                v-html="news.excerpt"
+              ></div>
+
+              <!-- Catégories/Tags -->
+              <div v-if="news.tags.length > 0" class="flex flex-wrap gap-2">
+                <span
+                  v-for="tag in news.tags.slice(0, 3)"
+                  :key="tag"
+                  class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+
+              <!-- Lien "Lire la suite" -->
+              <div class="mt-4">
+                <span class="text-black font-medium hover:underline inline-flex items-center">
+                  Lire la suite
+                  <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <!-- Pagination -->
+        <div v-if="totalPages > 1" class="flex justify-center items-center space-x-4 mt-8">
+          <button
+            @click="goToPage(currentPage - 1)"
+            :disabled="currentPage === 1"
+            :class="[
+              'px-4 py-2 rounded-lg font-medium transition-colors',
+              currentPage === 1
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-white border border-gray-300 text-black hover:bg-gray-50'
+            ]"
+          >
+            Précédent
+          </button>
+
+          <div class="flex items-center space-x-2">
+            <button
+              v-for="page in visiblePages"
+              :key="page"
+              @click="goToPage(page)"
+              :class="[
+                'w-10 h-10 rounded-lg font-medium transition-colors',
+                page === currentPage
+                  ? 'bg-black text-white'
+                  : 'bg-white border border-gray-300 text-black hover:bg-gray-50'
+              ]"
+            >
+              {{ page }}
+            </button>
+          </div>
+
+          <button
+            @click="goToPage(currentPage + 1)"
+            :disabled="currentPage === totalPages"
+            :class="[
+              'px-4 py-2 rounded-lg font-medium transition-colors',
+              currentPage === totalPages
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : 'bg-white border border-gray-300 text-black hover:bg-gray-50'
+            ]"
+          >
+            Suivant
+          </button>
+        </div>
+      </div>
+
+      <!-- Aucun article -->
+      <div v-else class="text-center py-20">
+        <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+        </svg>
+        <p class="text-gray-600 text-lg">Aucun article disponible pour le moment</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { wordpressService } from '../services/wordpressService.js'
+
+const router = useRouter()
+const route = useRoute()
+
+const newsList = ref([])
+const loading = ref(true)
+const error = ref(null)
+const currentPage = ref(1)
+const totalPages = ref(1)
+const total = ref(0)
+const perPage = 10
+const category = ref(null)
+
+const categorySlug = computed(() => {
+  return route.params.slug || 'actualites'
+})
+
+const categoryTitle = computed(() => {
+  return category.value?.name || 'Actualités'
+})
+
+const categoryDescription = computed(() => {
+  return category.value?.description || 'Découvrez les derniers articles de cette catégorie'
+})
+
+// Charger la catégorie
+const loadCategory = async () => {
+  category.value = await wordpressService.getCategoryBySlug(categorySlug.value)
+  if (!category.value) {
+    throw new Error('Catégorie introuvable')
+  }
+}
+
+// Charger les articles
+const loadNews = async () => {
+  loading.value = true
+  error.value = null
+  
+  try {
+    if (!category.value) {
+      await loadCategory()
+    }
+
+    const result = await wordpressService.getPostsByCategory(
+      category.value.id,
+      perPage,
+      currentPage.value
+    )
+    newsList.value = result.posts
+    totalPages.value = result.totalPages
+    total.value = result.total
+  } catch (err) {
+    error.value = 'Impossible de charger les articles. Veuillez réessayer plus tard.'
+    console.error('Erreur lors du chargement des articles:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Navigation vers une actualité
+const goToNews = (id) => {
+  router.push({
+    name: 'NewsArticle',
+    params: { id },
+    query: { category: category.value?.slug || categorySlug.value }
+  })
+}
+
+// Navigation entre les pages
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+// Pages visibles pour la pagination
+const visiblePages = computed(() => {
+  const pages = []
+  const maxVisible = 5
+  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
+  let end = Math.min(totalPages.value, start + maxVisible - 1)
+  
+  if (end - start + 1 < maxVisible) {
+    start = Math.max(1, end - maxVisible + 1)
+  }
+  
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+  
+  return pages
+})
+
+// Formater la date
+const formatDate = (dateString) => {
+  return wordpressService.formatDate(dateString)
+}
+
+// Charger au montage
+onMounted(() => {
+  loadNews()
+})
+
+// Recharger lors du changement de page
+watch(currentPage, () => {
+  loadNews()
+})
+
+// Recharger lors du changement de catégorie
+watch(categorySlug, () => {
+  category.value = null
+  currentPage.value = 1
+  loadNews()
+})
+</script>
+
+<style scoped>
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Nettoyer le HTML de l'extrait */
+:deep(.line-clamp-3 p) {
+  display: inline;
+}
+</style>

src/views/NewsArticle.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="min-h-screen bg-white">
+    <!-- Chargement -->
+    <div v-if="loading" class="flex justify-center items-center py-20">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-black"></div>
+    </div>
+
+    <!-- Erreur -->
+    <div v-else-if="error" class="max-w-4xl mx-auto px-4 py-20">
+      <div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+        <p class="text-red-600 mb-4">{{ error }}</p>
+        <div class="flex justify-center space-x-4">
+          <button 
+            @click="loadArticle" 
+            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+          >
+            Réessayer
+          </button>
+          <router-link 
+            to="/actualites" 
+            class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
+          >
+            Retour aux actualités
+          </router-link>
+        </div>
+      </div>
+    </div>
+
+    <!-- Article -->
+    <article v-else-if="article" class="pb-16">
+      <!-- Image à la une -->
+      <div v-if="article.featuredImage" class="w-full h-96 overflow-hidden">
+        <img
+          :src="article.featuredImage"
+          :alt="article.featuredImageAlt || article.title"
+          class="w-full h-full object-cover"
+        />
+      </div>
+
+      <!-- Contenu principal -->
+      <div class="max-w-4xl mx-auto px-4">
+        <!-- Fil d'Ariane -->
+        <nav class="py-6 text-sm">
+          <ol class="flex items-center space-x-2 text-gray-600">
+            <li>
+              <router-link to="/" class="hover:text-black transition-colors">
+                Accueil
+              </router-link>
+            </li>
+            <li>
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li>
+              <router-link :to="categoryLink" class="hover:text-black transition-colors">
+                {{ categoryTitle }}
+              </router-link>
+            </li>
+            <li>
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="text-black font-medium truncate">
+              {{ article.title }}
+            </li>
+          </ol>
+        </nav>
+
+        <!-- En-tête de l'article -->
+        <header class="mb-8">
+          <!-- Catégories -->
+          <div v-if="article.categories.length > 0" class="flex flex-wrap gap-2 mb-4">
+            <span
+              v-for="category in article.categories"
+              :key="category"
+              class="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
+            >
+              {{ category }}
+            </span>
+          </div>
+
+          <!-- Titre -->
+          <h1 class="text-4xl md:text-5xl font-bold text-black mb-6">
+            {{ article.title }}
+          </h1>
+
+          <!-- Métadonnées -->
+          <div class="flex flex-wrap items-center gap-4 text-gray-600">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
+              <span>{{ article.author }}</span>
+            </div>
+            <span>•</span>
+            <div class="flex items-center">
+              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              <span>{{ formatDate(article.date) }}</span>
+            </div>
+            <span v-if="article.modified !== article.date">•</span>
+            <div v-if="article.modified !== article.date" class="flex items-center text-sm">
+              <span>Mis à jour le {{ formatDate(article.modified) }}</span>
+            </div>
+          </div>
+        </header>
+
+        <!-- Contenu de l'article -->
+        <div 
+          class="prose prose-lg max-w-none article-content"
+          v-html="article.content"
+        ></div>
+
+        <!-- Tags -->
+        <div v-if="article.tags.length > 0" class="mt-12 pt-8 border-t border-gray-200">
+          <h3 class="text-sm font-semibold text-gray-700 mb-3">Mots-clés :</h3>
+          <div class="flex flex-wrap gap-2">
+            <span
+              v-for="tag in article.tags"
+              :key="tag"
+              class="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
+            >
+              #{{ tag }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Navigation -->
+        <div class="mt-12 pt-8 border-t border-gray-200">
+          <router-link 
+            :to="categoryLink" 
+            class="inline-flex items-center text-black hover:text-gray-700 font-medium transition-colors"
+          >
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+            Retour aux articles
+          </router-link>
+        </div>
+      </div>
+    </article>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { wordpressService } from '../services/wordpressService.js'
+
+const route = useRoute()
+
+const article = ref(null)
+const loading = ref(true)
+const error = ref(null)
+const category = ref(null)
+
+const categorySlug = computed(() => {
+  return route.query.category || 'actualites'
+})
+
+const categoryTitle = computed(() => {
+  return category.value?.name || 'Actualités'
+})
+
+const categoryLink = computed(() => {
+  return categorySlug.value === 'actualites'
+    ? '/actualites'
+    : `/blog/${categorySlug.value}`
+})
+
+// Charger l'article
+const loadArticle = async () => {
+  loading.value = true
+  error.value = null
+  
+  try {
+    const id = parseInt(route.params.id)
+    if (isNaN(id)) {
+      throw new Error('ID d\'article invalide')
+    }
+    
+    article.value = await wordpressService.getPostById(id)
+
+    category.value = await wordpressService.getCategoryBySlug(categorySlug.value)
+    
+    // Mettre à jour le titre de la page
+    if (article.value) {
+      document.title = `${article.value.title} - Patois Franco-Provençal`
+    }
+  } catch (err) {
+    error.value = 'Impossible de charger cet article. Il n\'existe peut-être pas ou n\'est plus disponible.'
+    console.error('Erreur lors du chargement de l\'article:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Formater la date
+const formatDate = (dateString) => {
+  return wordpressService.formatDate(dateString)
+}
+
+// Charger au montage
+onMounted(() => {
+  loadArticle()
+})
+</script>
+
+<style scoped>
+/* Styles pour le contenu de l'article WordPress */
+.article-content {
+  color: #1f2937;
+  line-height: 1.625;
+}
+
+.article-content :deep(h1),
+.article-content :deep(h2),
+.article-content :deep(h3),
+.article-content :deep(h4),
+.article-content :deep(h5),
+.article-content :deep(h6) {
+  font-weight: 700;
+  color: black;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.article-content :deep(h1) { font-size: 1.875rem; }
+.article-content :deep(h2) { font-size: 1.5rem; }
+.article-content :deep(h3) { font-size: 1.25rem; }
+.article-content :deep(h4) { font-size: 1.125rem; }
+
+.article-content :deep(p) {
+  margin-bottom: 1rem;
+}
+
+.article-content :deep(a) {
+  color: black;
+  font-weight: 500;
+  text-decoration: underline;
+  transition: color 0.2s;
+}
+
+.article-content :deep(a:hover) {
+  color: #374151;
+}
+
+.article-content :deep(ul),
+.article-content :deep(ol) {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.article-content :deep(ul) {
+  list-style-type: disc;
+}
+
+.article-content :deep(ol) {
+  list-style-type: decimal;
+}
+
+.article-content :deep(li) {
+  margin-bottom: 0.5rem;
+}
+
+.article-content :deep(blockquote) {
+  border-left: 4px solid #d1d5db;
+  padding-left: 1rem;
+  font-style: italic;
+  margin: 1.5rem 0;
+  color: #4b5563;
+}
+
+.article-content :deep(img) {
+  border-radius: 0.5rem;
+  margin: 1.5rem 0;
+  max-width: 100%;
+  height: auto;
+}
+
+.article-content :deep(figure) {
+  margin: 1.5rem 0;
+}
+
+.article-content :deep(figcaption) {
+  font-size: 0.875rem;
+  color: #4b5563;
+  text-align: center;
+  margin-top: 0.5rem;
+}
+
+.article-content :deep(pre) {
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+.article-content :deep(code) {
+  background-color: #f3f4f6;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.article-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+}
+
+.article-content :deep(th),
+.article-content :deep(td) {
+  border: 1px solid #d1d5db;
+  padding: 0.75rem 1rem;
+}
+
+.article-content :deep(th) {
+  background-color: #f9fafb;
+  font-weight: 600;
+}
+
+.article-content :deep(hr) {
+  margin: 2rem 0;
+  border-color: #e5e7eb;
+}
+
+.article-content :deep(strong),
+.article-content :deep(b) {
+  font-weight: 600;
+}
+
+.article-content :deep(em),
+.article-content :deep(i) {
+  font-style: italic;
+}
+</style>