ElPoyo/PatoisSMEH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navigation and add news functionality with WordPress integration

Browse Source
This commit is contained in:
ElPoyo
2026-02-11 10:15:36 +01:00
parent 4e11fd9a06
commit b7f55e0707
7 changed files with 721 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
src/views/NewsArticle.vue Normal file
View File

@@ -0,0 +1,324 @@
<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="/actualites" class="hover:text-black transition-colors">
Actualités
</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="/actualites"
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
</router-link>
</div>
</div>
</article>
</div>
</template>
<script setup>
import { ref, onMounted } 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)
// 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.getNewsById(id)
// 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>