jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ux): markdown chatbots + header Jobs centré + cible archi indépendants

Browse Source 
- composables/useMarkdown.ts : renderer MD léger (bold/italic/listes/titres)
- ChatbotSheet.vue + trouver-du-taf.vue : v-html renderMd() sur messages bot
- assets/css/main.css : styles .md-content globaux pour tous les chatbots
- taff-header centré + phrase cible 'architectes indépendants, 70% de la profession'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-07 01:26:46 +02:00
parent 6525afd5f5
commit ec9178be08
4 changed files with 67 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pages/trouver-du-taf.vue
View File

@@ -6,9 +6,12 @@
<div class="taff-header-inner">
<h1 class="taff-title">Trouver du taf en archi</h1>
<p class="taff-subtitle">
Annuaire critique des plateformes de mise en relation archi ↔ particulier.
Évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
Cible : archi freelance indépendant en France.
Annuaire critique des plateformes de mise en relation archi ↔ particulier,
évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
</p>
<p class="taff-cible">
Cette carte s'adresse aux <strong>architectes indépendants</strong> —
70&nbsp;% de la profession et sa part la plus précaire économiquement.
</p>
<div class="taff-stats">
<span class="taff-stat" style="color: #3d5534;">
@@ -186,7 +189,8 @@
<!-- Messages de la conversation -->
<template v-for="(msg, i) in chatMessages" :key="i">
<div :class="['taff-msg', msg.role === 'user' ? 'taff-msg--user' : 'taff-msg--bot']">
<p>{{ msg.content }}</p>
<div v-if="msg.role === 'bot'" class="md-content" v-html="renderMd(msg.content)" />
<span v-else>{{ msg.content }}</span>
</div>
<!-- Plateformes recommandées -->
<div v-if="msg.role === 'bot' && msg.recommandations?.length" class="taff-chat-recos">
@@ -499,6 +503,8 @@ interface ChatMessage {
recommandations?: { id: string; nom: string; raison: string }[]
}
const { render: renderMd } = useMarkdown()
const chatOpen = ref(false)
const chatInput = ref('')
const chatLoading = ref(false)
@@ -562,11 +568,13 @@ const parsedDescription = computed(() => {
<style scoped>
.taff-page { max-width: 1280px; margin: 0 auto; padding-bottom: 3rem; }
.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); }
.taff-header-inner { max-width: 680px; }
.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); text-align: center; }
.taff-header-inner { max-width: 680px; margin: 0 auto; }
.taff-title { font-size: 1.875rem; font-weight: 800; color: var(--nav-text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 1rem; }
.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 0.625rem; }
.taff-cible { font-size: 0.875rem; color: var(--nav-text-muted); line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
.taff-cible strong { color: var(--nav-text); font-style: normal; }
.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.taff-stat { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; }
.taff-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }