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

src/views/NewsArticle.vue

@@ -53,8 +53,8 @@
               </svg>
             </li>
             <li>
-              <router-link to="/actualites" class="hover:text-black transition-colors">
-                Actualités
+              <router-link :to="categoryLink" class="hover:text-black transition-colors">
+                {{ categoryTitle }}
               </router-link>
             </li>
             <li>
@@ -131,13 +131,13 @@
         <!-- Navigation -->
         <div class="mt-12 pt-8 border-t border-gray-200">
           <router-link 
-            to="/actualites" 
+            :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 actualités
+            Retour aux articles
           </router-link>
         </div>
       </div>
@@ -146,7 +146,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { wordpressService } from '../services/wordpressService.js'
 
@@ -155,6 +155,21 @@ 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 () => {
@@ -167,7 +182,9 @@ const loadArticle = async () => {
       throw new Error('ID d\'article invalide')
     }
     
-    article.value = await wordpressService.getNewsById(id)
+    article.value = await wordpressService.getPostById(id)
+
+    category.value = await wordpressService.getCategoryBySlug(categorySlug.value)
     
     // Mettre à jour le titre de la page
     if (article.value) {