68 lines
2.8 KiB
Vue
68 lines
2.8 KiB
Vue
<template>
|
|
<div class="media-tab-projets" style="padding: 1.5rem; overflow-y: auto;">
|
|
<div style="max-width: 70ch; margin-bottom: 1.5rem;">
|
|
<h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">PFE engagés</h2>
|
|
<p style="font-size: 0.9rem; line-height: 1.6; color: var(--nav-text);">
|
|
Mutualiser le savoir. Voici les PFE engagés publiés en ligne dont nous avons connaissance.
|
|
Partage-nous le lien de ton travail si tu veux participer à cette initiative.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="projets-grid">
|
|
<article v-for="p in projets" :key="p.id" class="projet-card">
|
|
<img v-if="p.thumb" :src="p.thumb" :alt="p.titre" class="projet-thumb" loading="lazy" />
|
|
<div v-else class="projet-thumb projet-thumb--placeholder">📐</div>
|
|
|
|
<h3 style="font-weight: 600; font-size: 0.95rem; margin: 0.5rem 0 0.25rem; color: var(--nav-text);">{{ p.titre }}</h3>
|
|
<p style="font-size: 0.8rem; color: var(--nav-text-muted); margin-bottom: 0.5rem;">
|
|
{{ (p.auteurs || []).filter((a: string) => a !== 'Inconnu').join(', ') }}
|
|
<template v-if="p.ecole && p.ecole !== 'Inconnu'"> · {{ p.ecole }}</template>
|
|
<template v-if="p.annee && p.annee !== 'Inconnu'"> · {{ p.annee }}</template>
|
|
</p>
|
|
<p style="font-size: 0.875rem; line-height: 1.5; color: var(--nav-text); flex: 1; margin-bottom: 0.75rem;">{{ p.description }}</p>
|
|
|
|
<a v-if="p.url" :href="p.url" target="_blank" rel="noopener" style="color: var(--nav-primary-solid, #3b6ea5); font-weight: 600; font-size: 0.875rem; text-decoration: none;">
|
|
Découvrir →
|
|
</a>
|
|
<span v-if="p.link_status === 'broken'" style="color: #e67e22; font-size: 0.8rem; display: block; margin-top: 0.25rem;">⚠ Lien d'origine cassé</span>
|
|
</article>
|
|
</div>
|
|
|
|
<p style="margin-top: 2rem; font-size: 0.875rem; color: var(--nav-text-muted);">
|
|
Tu as un PFE engagé à partager ? <a href="mailto:contact@trans-former.fr" style="color: var(--nav-primary-solid);">Écris-moi</a>.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: pfeData } = await useFetch<{ projets: any[] }>('/data/pfe-engages.json')
|
|
const projets = computed(() => pfeData.value?.projets ?? [])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.projets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
.projet-card {
|
|
border: 1px solid var(--nav-bg-alt, #eee);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--nav-surface);
|
|
}
|
|
.projet-thumb {
|
|
width: 100%;
|
|
height: 140px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
background: var(--nav-bg-alt, #f5f5f5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
}
|
|
</style>
|