PatoisSMEH/src/views/NewsArticle.vue

<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>