Compare commits
1 Commits
feat/propo
...
feat/outil
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a1ae5af7d8 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -7,4 +7,3 @@ dist
|
|||||||
*.log
|
*.log
|
||||||
|
|
||||||
*.tmp.*
|
*.tmp.*
|
||||||
.firecrawl/
|
|
||||||
|
|||||||
29
app.vue
29
app.vue
@@ -22,19 +22,12 @@
|
|||||||
|
|
||||||
<!-- ── Onglets desktop (≥1024px) — remplace la barre de recherche ── -->
|
<!-- ── Onglets desktop (≥1024px) — remplace la barre de recherche ── -->
|
||||||
<nav class="hidden lg:flex flex-1 justify-center items-end gap-0 mx-6" aria-label="Navigation projets">
|
<nav class="hidden lg:flex flex-1 justify-center items-end gap-0 mx-6" aria-label="Navigation projets">
|
||||||
<NuxtLink
|
|
||||||
to="/outils"
|
|
||||||
class="nav-tab"
|
|
||||||
:class="{ 'nav-tab--active': route.path === '/outils' }"
|
|
||||||
>
|
|
||||||
Outils
|
|
||||||
</NuxtLink>
|
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/"
|
to="/"
|
||||||
class="nav-tab"
|
class="nav-tab"
|
||||||
:class="{ 'nav-tab--active': route.path === '/' }"
|
:class="{ 'nav-tab--active': route.path === '/' }"
|
||||||
>
|
>
|
||||||
Écosystème Entraide
|
Écosystème Entraide Architecture
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/agences"
|
to="/agences"
|
||||||
@@ -58,11 +51,12 @@
|
|||||||
Codev
|
Codev
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/media"
|
to="/rag"
|
||||||
class="nav-tab"
|
class="nav-tab"
|
||||||
:class="{ 'nav-tab--active': route.path.startsWith('/media') }"
|
:class="{ 'nav-tab--active': route.path === '/rag' }"
|
||||||
>
|
>
|
||||||
recherche-média
|
RAG
|
||||||
|
<span class="nav-tab-badge">en construction</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -114,9 +108,9 @@
|
|||||||
>
|
>
|
||||||
Signaler
|
Signaler
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<!-- Proposer une ressource (5 onglets) -->
|
<!-- Proposer une ressource -->
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/proposer"
|
to="/contribuer"
|
||||||
class="px-3 py-1.5 rounded-lg text-sm font-semibold transition-all hover:opacity-80 hidden sm:inline-flex items-center gap-1"
|
class="px-3 py-1.5 rounded-lg text-sm font-semibold transition-all hover:opacity-80 hidden sm:inline-flex items-center gap-1"
|
||||||
style="background: var(--nav-accent); color: var(--nav-text);"
|
style="background: var(--nav-accent); color: var(--nav-text);"
|
||||||
>
|
>
|
||||||
@@ -143,13 +137,13 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Mobile : proposer icône -->
|
<!-- Mobile : contribuer icône -->
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/proposer"
|
to="/contribuer"
|
||||||
class="sm:hidden p-2 rounded-lg"
|
class="sm:hidden p-2 rounded-lg"
|
||||||
style="background: var(--nav-accent); color: var(--nav-text);"
|
style="background: var(--nav-accent); color: var(--nav-text);"
|
||||||
title="Proposer une ressource"
|
title="Contribuer une fiche"
|
||||||
aria-label="Proposer"
|
aria-label="Contribuer"
|
||||||
>
|
>
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||||
@@ -178,7 +172,6 @@
|
|||||||
style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt); z-index: 9999;"
|
style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt); z-index: 9999;"
|
||||||
@click="hamburgerOpen = false"
|
@click="hamburgerOpen = false"
|
||||||
>
|
>
|
||||||
<NuxtLink to="/outils" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/outils' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Outils</NuxtLink>
|
|
||||||
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
|
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
|
||||||
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Réseaux AEP</NuxtLink>
|
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Réseaux AEP</NuxtLink>
|
||||||
<NuxtLink to="/trouver-du-taf" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/trouver-du-taf' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Jobs</NuxtLink>
|
<NuxtLink to="/trouver-du-taf" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/trouver-du-taf' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Jobs</NuxtLink>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
components/FicheAuteur.vue
Normal file
1
components/FicheAuteur.vue
Normal file
File diff suppressed because one or more lines are too long
1
components/FicheEcole.vue
Normal file
1
components/FicheEcole.vue
Normal file
File diff suppressed because one or more lines are too long
@@ -1,184 +0,0 @@
|
|||||||
<template>
|
|
||||||
<form @submit.prevent="submit" class="proposer-form" novalidate>
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.nom }">
|
|
||||||
<label for="eco-nom">Nom de l'organisation <span class="required">*</span></label>
|
|
||||||
<input id="eco-nom" v-model="form.nom" type="text" placeholder="Ex : UNSFA, Maison de l'Architecture..." autocomplete="organization" @blur="validateField('nom')" />
|
|
||||||
<span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.url }">
|
|
||||||
<label for="eco-url">Site web <span class="label-hint">(optionnel — recommandé pour l'enrichissement IA)</span></label>
|
|
||||||
<input id="eco-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
|
|
||||||
<span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.description_user }">
|
|
||||||
<label for="eco-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
|
|
||||||
<textarea id="eco-desc" v-model="form.description_user" rows="4" placeholder="Présente l'organisation en quelques mots : ses missions, son public, ce qu'elle apporte..." @blur="validateField('description_user')" />
|
|
||||||
<div class="field-meta">
|
|
||||||
<span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
|
|
||||||
<span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.echelle }">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Échelle <span class="required">*</span> <span class="label-hint">(une seule)</span></legend>
|
|
||||||
<div class="radio-group">
|
|
||||||
<label v-for="opt in ECHELLES" :key="opt" class="radio-label" :class="{ active: form.echelle === opt }">
|
|
||||||
<input type="radio" :value="opt" v-model="form.echelle" name="eco-echelle" @change="validateField('echelle')" />{{ opt }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<span v-if="errors.echelle" class="error-msg" role="alert">{{ errors.echelle }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.fonctions }">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Fonctions <span class="required">*</span> <span class="label-hint">(1 à 5 — l'ordre de clic = priorité)</span></legend>
|
|
||||||
<div class="checkbox-grid">
|
|
||||||
<label v-for="fn in FONCTIONS" :key="fn" class="checkbox-label" :class="{ active: form.fonctions.includes(fn), disabled: !form.fonctions.includes(fn) && form.fonctions.length >= 5 }">
|
|
||||||
<input type="checkbox" :value="fn" :checked="form.fonctions.includes(fn)" :disabled="!form.fonctions.includes(fn) && form.fonctions.length >= 5" @change="toggleFonction(fn)" />
|
|
||||||
<span class="fn-order" v-if="form.fonctions.includes(fn)">{{ form.fonctions.indexOf(fn) + 1 }}</span>{{ fn }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<span v-if="errors.fonctions" class="error-msg" role="alert">{{ errors.fonctions }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.territoire }">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Territoire <span class="required">*</span></legend>
|
|
||||||
<div class="radio-group">
|
|
||||||
<label v-for="t in TERRITOIRES" :key="t" class="radio-label" :class="{ active: form.territoire === t }">
|
|
||||||
<input type="radio" :value="t" v-model="form.territoire" name="eco-territoire" @change="validateField('territoire')" />{{ t }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<span v-if="errors.territoire" class="error-msg" role="alert">{{ errors.territoire }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.localisation_ville }">
|
|
||||||
<label for="eco-ville">Ville principale <span class="label-hint">(optionnel — pour la géolocalisation sur la carte)</span></label>
|
|
||||||
<input id="eco-ville" v-model="form.localisation_ville" type="text" placeholder="Ex : Paris, Lyon, Bordeaux..." />
|
|
||||||
<span v-if="errors.localisation_ville" class="error-msg" role="alert">{{ errors.localisation_ville }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
|
|
||||||
<label for="eco-email">Ton email <span class="label-hint">(optionnel — pour le suivi de modération)</span></label>
|
|
||||||
<input id="eco-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
|
|
||||||
<span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer la fiche →' }}</button>
|
|
||||||
</div>
|
|
||||||
<p class="form-note">Ta fiche sera examinée par l'équipe avant publication.</p>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
|
|
||||||
const ECHELLES = ['National', 'Régional', 'Local'] as const
|
|
||||||
const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte'] as const
|
|
||||||
const FONCTIONS = ['Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier', 'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale'] as const
|
|
||||||
|
|
||||||
const Schema = z.object({
|
|
||||||
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
|
||||||
url: z.string().url('URL invalide (commencer par https://)').optional().or(z.literal('')),
|
|
||||||
description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
|
|
||||||
echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Sélectionne une échelle' }) }),
|
|
||||||
fonctions: z.array(z.string()).min(1, 'Sélectionne au moins une fonction').max(5, 'Maximum 5 fonctions'),
|
|
||||||
territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Sélectionne un territoire' }) }),
|
|
||||||
localisation_ville: z.string().max(100).optional(),
|
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<{ success: [] }>()
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
nom: '', url: '', description_user: '', echelle: '' as string,
|
|
||||||
fonctions: [] as string[], territoire: '' as string,
|
|
||||||
localisation_ville: '', submitted_by_email: '',
|
|
||||||
})
|
|
||||||
const errors = reactive<Record<string, string>>({})
|
|
||||||
const submitting = ref(false)
|
|
||||||
const serverError = ref('')
|
|
||||||
|
|
||||||
function validateField(field: string) {
|
|
||||||
const partial = Schema.partial()
|
|
||||||
const result = partial.safeParse({ [field]: (form as any)[field] })
|
|
||||||
if (!result.success) {
|
|
||||||
const fieldErrors = result.error.flatten().fieldErrors
|
|
||||||
errors[field] = fieldErrors[field]?.[0] ?? ''
|
|
||||||
} else {
|
|
||||||
delete errors[field]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateAll(): boolean {
|
|
||||||
const result = Schema.safeParse(form)
|
|
||||||
if (!result.success) {
|
|
||||||
const flat = result.error.flatten().fieldErrors
|
|
||||||
Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
Object.keys(errors).forEach(k => delete errors[k])
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleFonction(fn: string) {
|
|
||||||
const idx = form.fonctions.indexOf(fn)
|
|
||||||
if (idx >= 0) form.fonctions.splice(idx, 1)
|
|
||||||
else if (form.fonctions.length < 5) form.fonctions.push(fn)
|
|
||||||
validateField('fonctions')
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submit() {
|
|
||||||
serverError.value = ''
|
|
||||||
if (!validateAll()) {
|
|
||||||
await nextTick()
|
|
||||||
const firstError = document.querySelector('.field-error')
|
|
||||||
firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
submitting.value = true
|
|
||||||
try {
|
|
||||||
await $fetch('/api/submit', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
submission_type: 'ecosysteme',
|
|
||||||
nom: form.nom,
|
|
||||||
url: form.url || undefined,
|
|
||||||
description_user: form.description_user,
|
|
||||||
echelle: form.echelle,
|
|
||||||
fonctions: form.fonctions,
|
|
||||||
territoire: form.territoire,
|
|
||||||
localisation_ville: form.localisation_ville || undefined,
|
|
||||||
submitted_by_email: form.submitted_by_email || undefined,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
emit('success')
|
|
||||||
} catch (e: any) {
|
|
||||||
const status = e?.status ?? e?.statusCode
|
|
||||||
if (status === 429) {
|
|
||||||
serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
|
|
||||||
} else if (status === 422 && e?.data) {
|
|
||||||
const fieldErrors = e.data
|
|
||||||
Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
|
|
||||||
serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
|
|
||||||
} else {
|
|
||||||
serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
submitting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import './form-styles.css';
|
|
||||||
</style>
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
<template>
|
|
||||||
<form @submit.prevent="submit" class="proposer-form" novalidate>
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.nom }">
|
|
||||||
<label for="job-nom">Nom de la plateforme / job board <span class="required">*</span></label>
|
|
||||||
<input id="job-nom" v-model="form.nom" type="text" placeholder="Ex : Houzz, Architoo, BOAMP..." @blur="validateField('nom')" />
|
|
||||||
<span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label for="job-type">Type de plateforme <span class="label-hint">(optionnel)</span></label>
|
|
||||||
<div class="radio-group">
|
|
||||||
<label v-for="t in TYPES" :key="t" class="radio-label" :class="{ active: form.type_plateforme === t }">
|
|
||||||
<input type="radio" :value="t" v-model="form.type_plateforme" name="job-type" />{{ LABELS[t] }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.url }">
|
|
||||||
<label for="job-url">Site web <span class="required">*</span></label>
|
|
||||||
<input id="job-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
|
|
||||||
<span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.description_user }">
|
|
||||||
<label for="job-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
|
|
||||||
<textarea id="job-desc" v-model="form.description_user" rows="4" placeholder="Décris la plateforme : qui la gère, quel type de missions, quel modèle économique..." @blur="validateField('description_user')" />
|
|
||||||
<div class="field-meta">
|
|
||||||
<span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
|
|
||||||
<span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
|
|
||||||
<label for="job-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
|
|
||||||
<input id="job-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
|
|
||||||
<span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer →' }}</button>
|
|
||||||
</div>
|
|
||||||
<p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
|
|
||||||
const TYPES = ['mise-en-relation', 'appel-offre-public', 'communaute-pro'] as const
|
|
||||||
const LABELS: Record<string, string> = { 'mise-en-relation': 'Mise en relation (B2C)', 'appel-offre-public': 'Appels d\'offres publics', 'communaute-pro': 'Communauté pro' }
|
|
||||||
|
|
||||||
const Schema = z.object({
|
|
||||||
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
|
||||||
url: z.string().url('URL invalide (commencer par https://)'),
|
|
||||||
description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
|
|
||||||
type_plateforme: z.string().optional(),
|
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<{ success: [] }>()
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
nom: '', url: '', description_user: '', type_plateforme: '', submitted_by_email: '',
|
|
||||||
})
|
|
||||||
const errors = reactive<Record<string, string>>({})
|
|
||||||
const submitting = ref(false)
|
|
||||||
const serverError = ref('')
|
|
||||||
|
|
||||||
function validateField(field: string) {
|
|
||||||
const partial = Schema.partial()
|
|
||||||
const result = partial.safeParse({ [field]: (form as any)[field] })
|
|
||||||
if (!result.success) {
|
|
||||||
const fieldErrors = result.error.flatten().fieldErrors
|
|
||||||
errors[field] = fieldErrors[field]?.[0] ?? ''
|
|
||||||
} else {
|
|
||||||
delete errors[field]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateAll(): boolean {
|
|
||||||
const result = Schema.safeParse(form)
|
|
||||||
if (!result.success) {
|
|
||||||
const flat = result.error.flatten().fieldErrors
|
|
||||||
Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
Object.keys(errors).forEach(k => delete errors[k])
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submit() {
|
|
||||||
serverError.value = ''
|
|
||||||
if (!validateAll()) {
|
|
||||||
await nextTick()
|
|
||||||
const firstError = document.querySelector('.field-error')
|
|
||||||
firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
submitting.value = true
|
|
||||||
try {
|
|
||||||
await $fetch('/api/submit', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
submission_type: 'job',
|
|
||||||
nom: form.nom,
|
|
||||||
url: form.url,
|
|
||||||
description_user: form.description_user,
|
|
||||||
type_plateforme: form.type_plateforme || undefined,
|
|
||||||
submitted_by_email: form.submitted_by_email || undefined,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
emit('success')
|
|
||||||
} catch (e: any) {
|
|
||||||
const status = e?.status ?? e?.statusCode
|
|
||||||
if (status === 429) {
|
|
||||||
serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
|
|
||||||
} else if (status === 422 && e?.data) {
|
|
||||||
const fieldErrors = e.data
|
|
||||||
Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
|
|
||||||
serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
|
|
||||||
} else {
|
|
||||||
serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
submitting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import './form-styles.css';
|
|
||||||
</style>
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
<template>
|
|
||||||
<form @submit.prevent="submit" class="proposer-form" novalidate>
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.nom }">
|
|
||||||
<label for="out-nom">Nom de l'outil <span class="required">*</span></label>
|
|
||||||
<input id="out-nom" v-model="form.nom" type="text" placeholder="Ex : Simulateur Autonomie, FreeCAD..." @blur="validateField('nom')" />
|
|
||||||
<span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label>Catégorie <span class="label-hint">(optionnelle)</span></label>
|
|
||||||
<div class="radio-group">
|
|
||||||
<label v-for="c in CATEGORIES" :key="c" class="radio-label" :class="{ active: form.categorie === c }">
|
|
||||||
<input type="radio" :value="c" v-model="form.categorie" name="out-categorie" />{{ LABELS[c] }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.url }">
|
|
||||||
<label for="out-url">Site web / lien <span class="label-hint">(optionnel — si pas de lien direct)</span></label>
|
|
||||||
<input id="out-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
|
|
||||||
<span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.description_user }">
|
|
||||||
<label for="out-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
|
|
||||||
<textarea id="out-desc" v-model="form.description_user" rows="4" placeholder="Décris l'outil : à quoi il sert, pour quel usage, ce qui le rend utile..." @blur="validateField('description_user')" />
|
|
||||||
<div class="field-meta">
|
|
||||||
<span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
|
|
||||||
<span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
|
|
||||||
<label for="out-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
|
|
||||||
<input id="out-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
|
|
||||||
<span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer →' }}</button>
|
|
||||||
</div>
|
|
||||||
<p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
|
|
||||||
const CATEGORIES = ['simulateur', 'logiciel', 'guide', 'autre'] as const
|
|
||||||
const LABELS: Record<string, string> = { simulateur: 'Simulateur', logiciel: 'Logiciel / app', guide: 'Guide / ressource', autre: 'Autre' }
|
|
||||||
|
|
||||||
const Schema = z.object({
|
|
||||||
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
|
||||||
url: z.string().url('URL invalide').optional().or(z.literal('')),
|
|
||||||
description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
|
|
||||||
categorie: z.string().optional(),
|
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<{ success: [] }>()
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
nom: '', url: '', description_user: '', categorie: '', submitted_by_email: '',
|
|
||||||
})
|
|
||||||
const errors = reactive<Record<string, string>>({})
|
|
||||||
const submitting = ref(false)
|
|
||||||
const serverError = ref('')
|
|
||||||
|
|
||||||
function validateField(field: string) {
|
|
||||||
const partial = Schema.partial()
|
|
||||||
const result = partial.safeParse({ [field]: (form as any)[field] })
|
|
||||||
if (!result.success) {
|
|
||||||
const fieldErrors = result.error.flatten().fieldErrors
|
|
||||||
errors[field] = fieldErrors[field]?.[0] ?? ''
|
|
||||||
} else {
|
|
||||||
delete errors[field]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateAll(): boolean {
|
|
||||||
const result = Schema.safeParse(form)
|
|
||||||
if (!result.success) {
|
|
||||||
const flat = result.error.flatten().fieldErrors
|
|
||||||
Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
Object.keys(errors).forEach(k => delete errors[k])
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submit() {
|
|
||||||
serverError.value = ''
|
|
||||||
if (!validateAll()) {
|
|
||||||
await nextTick()
|
|
||||||
const firstError = document.querySelector('.field-error')
|
|
||||||
firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
submitting.value = true
|
|
||||||
try {
|
|
||||||
await $fetch('/api/submit', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
submission_type: 'outil',
|
|
||||||
nom: form.nom,
|
|
||||||
url: form.url || undefined,
|
|
||||||
description_user: form.description_user,
|
|
||||||
categorie: form.categorie || undefined,
|
|
||||||
submitted_by_email: form.submitted_by_email || undefined,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
emit('success')
|
|
||||||
} catch (e: any) {
|
|
||||||
const status = e?.status ?? e?.statusCode
|
|
||||||
if (status === 429) {
|
|
||||||
serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
|
|
||||||
} else if (status === 422 && e?.data) {
|
|
||||||
const fieldErrors = e.data
|
|
||||||
Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
|
|
||||||
serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
|
|
||||||
} else {
|
|
||||||
serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
submitting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import './form-styles.css';
|
|
||||||
</style>
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
<template>
|
|
||||||
<form @submit.prevent="submit" class="proposer-form" novalidate>
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.titre }">
|
|
||||||
<label for="ref-titre">Titre du livre / document <span class="required">*</span></label>
|
|
||||||
<input id="ref-titre" v-model="form.titre" type="text" placeholder="Ex : Repenser l'architecture..." @blur="validateField('titre')" />
|
|
||||||
<span v-if="errors.titre" class="error-msg" role="alert">{{ errors.titre }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.auteur }">
|
|
||||||
<label for="ref-auteur">Auteur·ice(s) <span class="required">*</span></label>
|
|
||||||
<input id="ref-auteur" v-model="form.auteur" type="text" placeholder="Ex : Philippe Rahm, Doina Petrescu..." @blur="validateField('auteur')" />
|
|
||||||
<span v-if="errors.auteur" class="error-msg" role="alert">{{ errors.auteur }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.url }">
|
|
||||||
<label for="ref-url">Lien <span class="label-hint">(optionnel — éditeur, статье, PDF…)</span></label>
|
|
||||||
<input id="ref-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
|
|
||||||
<span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.description }">
|
|
||||||
<label for="ref-desc">Description de l'ouvrage <span class="required">*</span> <span class="label-hint">(50 à 1000 caractères)</span></label>
|
|
||||||
<textarea id="ref-desc" v-model="form.description" rows="4" placeholder="Présente l'ouvrage : thèse principale, approche, pourquoi c'est important..." @blur="validateField('description')" />
|
|
||||||
<div class="field-meta">
|
|
||||||
<span v-if="errors.description" class="error-msg" role="alert">{{ errors.description }}</span>
|
|
||||||
<span v-else class="char-count" :class="{ 'char-warn': form.description.length > 900 }">{{ form.description.length }}/1000</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label for="ref-pertinence">Pertinence pour le RAG <span class="label-hint">(optionnel — en quoi cette référence est utile ?)</span></label>
|
|
||||||
<textarea id="ref-pertinence" v-model="form.pertinence_rag" rows="2" placeholder="Ex : Excellente source sur l'architecture participative..." maxlength="500" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label for="ref-hashtags">Hashtags <span class="label-hint">(optionnel — séparés par des virgules)</span></label>
|
|
||||||
<input id="ref-hashtags" v-model="form.hashtags" type="text" placeholder="Ex : écologie, participation, matériaux bio..." />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
|
|
||||||
<label for="ref-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
|
|
||||||
<input id="ref-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
|
|
||||||
<span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer la référence →' }}</button>
|
|
||||||
</div>
|
|
||||||
<p class="form-note">Ta référence sera examinée avant d'être intégrée au fonds documentaire RAG.</p>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
|
|
||||||
const Schema = z.object({
|
|
||||||
titre: z.string().min(3, 'Minimum 3 caractères').max(200, 'Maximum 200 caractères').trim(),
|
|
||||||
auteur: z.string().min(2, 'Minimum 2 caractères').max(200, 'Maximum 200 caractères').trim(),
|
|
||||||
url: z.string().url('URL invalide').optional().or(z.literal('')),
|
|
||||||
description: z.string().min(50, 'Minimum 50 caractères').max(1000, 'Maximum 1000 caractères').trim(),
|
|
||||||
pertinence_rag: z.string().max(500).optional(),
|
|
||||||
hashtags: z.string().max(300).optional(),
|
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<{ success: [] }>()
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
titre: '', auteur: '', url: '', description: '',
|
|
||||||
pertinence_rag: '', hashtags: '', submitted_by_email: '',
|
|
||||||
})
|
|
||||||
const errors = reactive<Record<string, string>>({})
|
|
||||||
const submitting = ref(false)
|
|
||||||
const serverError = ref('')
|
|
||||||
|
|
||||||
function validateField(field: string) {
|
|
||||||
const partial = Schema.partial()
|
|
||||||
const result = partial.safeParse({ [field]: (form as any)[field] })
|
|
||||||
if (!result.success) {
|
|
||||||
const fieldErrors = result.error.flatten().fieldErrors
|
|
||||||
errors[field] = fieldErrors[field]?.[0] ?? ''
|
|
||||||
} else {
|
|
||||||
delete errors[field]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateAll(): boolean {
|
|
||||||
const result = Schema.safeParse(form)
|
|
||||||
if (!result.success) {
|
|
||||||
const flat = result.error.flatten().fieldErrors
|
|
||||||
Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
Object.keys(errors).forEach(k => delete errors[k])
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submit() {
|
|
||||||
serverError.value = ''
|
|
||||||
if (!validateAll()) {
|
|
||||||
await nextTick()
|
|
||||||
const firstError = document.querySelector('.field-error')
|
|
||||||
firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
submitting.value = true
|
|
||||||
try {
|
|
||||||
await $fetch('/api/submit/reference', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
titre: form.titre,
|
|
||||||
auteur: form.auteur,
|
|
||||||
url: form.url || undefined,
|
|
||||||
description: form.description,
|
|
||||||
pertinence_rag: form.pertinence_rag || undefined,
|
|
||||||
hashtags: form.hashtags || undefined,
|
|
||||||
submitted_by_email: form.submitted_by_email || undefined,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
emit('success')
|
|
||||||
} catch (e: any) {
|
|
||||||
const status = e?.status ?? e?.statusCode
|
|
||||||
if (status === 429) {
|
|
||||||
serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
|
|
||||||
} else if (status === 422 && e?.data) {
|
|
||||||
const fieldErrors = e.data
|
|
||||||
Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
|
|
||||||
serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
|
|
||||||
} else {
|
|
||||||
serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
submitting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import './form-styles.css';
|
|
||||||
</style>
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
<template>
|
|
||||||
<form @submit.prevent="submit" class="proposer-form" novalidate>
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.nom }">
|
|
||||||
<label for="res-nom">Nom du réseau / collectif / ressource <span class="required">*</span></label>
|
|
||||||
<input id="res-nom" v-model="form.nom" type="text" placeholder="Ex : Collectif des Arpenteurs, Archi'Résilience..." @blur="validateField('nom')" />
|
|
||||||
<span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.type_principal }">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Type <span class="label-hint">(optionnel)</span></legend>
|
|
||||||
<div class="radio-group">
|
|
||||||
<label v-for="t in TYPES" :key="t" class="radio-label" :class="{ active: form.type_principal === t }">
|
|
||||||
<input type="radio" :value="t" v-model="form.type_principal" name="res-type" />{{ LABELS[t] }}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.url }">
|
|
||||||
<label for="res-url">Site web <span class="label-hint">(optionnel)</span></label>
|
|
||||||
<input id="res-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
|
|
||||||
<span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.description_user }">
|
|
||||||
<label for="res-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
|
|
||||||
<textarea id="res-desc" v-model="form.description_user" rows="4" placeholder="Présente ce réseau/collectif : son objet, son échelle, ce qui le distingue..." @blur="validateField('description_user')" />
|
|
||||||
<div class="field-meta">
|
|
||||||
<span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
|
|
||||||
<span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label for="res-ville">Ville principale <span class="label-hint">(optionnel)</span></label>
|
|
||||||
<input id="res-ville" v-model="form.localisation_ville" type="text" placeholder="Ex : Paris, Lyon..." />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label for="res-projet-lien">Lien vers un projet / réalisation <span class="label-hint">(optionnel)</span></label>
|
|
||||||
<input id="res-projet-lien" v-model="form.projet_lien" type="url" placeholder="https://..." />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group">
|
|
||||||
<label for="res-projet-adresse">Adresse du projet <span class="label-hint">(optionnel)</span></label>
|
|
||||||
<input id="res-projet-adresse" v-model="form.projet_adresse" type="text" placeholder="Ex : 12 rue des Lilas, 75000 Paris" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
|
|
||||||
<label for="res-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
|
|
||||||
<input id="res-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
|
|
||||||
<span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer →' }}</button>
|
|
||||||
</div>
|
|
||||||
<p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
|
|
||||||
const TYPES = ['agence', 'collectif', 'reseau', 'asso', 'ressource'] as const
|
|
||||||
const LABELS: Record<string, string> = { agence: 'Agence', collectif: 'Collectif', reseau: 'Réseau', asso: 'Association', ressource: 'Ressource' }
|
|
||||||
|
|
||||||
const Schema = z.object({
|
|
||||||
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
|
||||||
type_principal: z.string().optional(),
|
|
||||||
url: z.string().url('URL invalide').optional().or(z.literal('')),
|
|
||||||
description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
|
|
||||||
localisation_ville: z.string().max(100).optional(),
|
|
||||||
projet_lien: z.string().url('URL invalide').optional().or(z.literal('')),
|
|
||||||
projet_adresse: z.string().max(200).optional(),
|
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<{ success: [] }>()
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
nom: '', type_principal: '', url: '', description_user: '',
|
|
||||||
localisation_ville: '', projet_lien: '', projet_adresse: '', submitted_by_email: '',
|
|
||||||
})
|
|
||||||
const errors = reactive<Record<string, string>>({})
|
|
||||||
const submitting = ref(false)
|
|
||||||
const serverError = ref('')
|
|
||||||
|
|
||||||
function validateField(field: string) {
|
|
||||||
const partial = Schema.partial()
|
|
||||||
const result = partial.safeParse({ [field]: (form as any)[field] })
|
|
||||||
if (!result.success) {
|
|
||||||
const fieldErrors = result.error.flatten().fieldErrors
|
|
||||||
errors[field] = fieldErrors[field]?.[0] ?? ''
|
|
||||||
} else {
|
|
||||||
delete errors[field]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateAll(): boolean {
|
|
||||||
const result = Schema.safeParse(form)
|
|
||||||
if (!result.success) {
|
|
||||||
const flat = result.error.flatten().fieldErrors
|
|
||||||
Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
Object.keys(errors).forEach(k => delete errors[k])
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submit() {
|
|
||||||
serverError.value = ''
|
|
||||||
if (!validateAll()) {
|
|
||||||
await nextTick()
|
|
||||||
const firstError = document.querySelector('.field-error')
|
|
||||||
firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
submitting.value = true
|
|
||||||
try {
|
|
||||||
await $fetch('/api/submit', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
submission_type: 'reseau',
|
|
||||||
nom: form.nom,
|
|
||||||
type_principal: form.type_principal || undefined,
|
|
||||||
url: form.url || undefined,
|
|
||||||
description_user: form.description_user,
|
|
||||||
localisation_ville: form.localisation_ville || undefined,
|
|
||||||
projet_lien: form.projet_lien || undefined,
|
|
||||||
projet_adresse: form.projet_adresse || undefined,
|
|
||||||
submitted_by_email: form.submitted_by_email || undefined,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
emit('success')
|
|
||||||
} catch (e: any) {
|
|
||||||
const status = e?.status ?? e?.statusCode
|
|
||||||
if (status === 429) {
|
|
||||||
serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
|
|
||||||
} else if (status === 422 && e?.data) {
|
|
||||||
const fieldErrors = e.data
|
|
||||||
Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
|
|
||||||
serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
|
|
||||||
} else {
|
|
||||||
serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
submitting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import './form-styles.css';
|
|
||||||
</style>
|
|
||||||
@@ -8,6 +8,16 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- PLACEHOLDER — DNS en attente
|
||||||
|
TODO: Décommenter iframe + supprimer placeholder une fois lightrag.trans-former.fr propagé.
|
||||||
|
DNS A record à créer sur OVH : lightrag → 178.104.106.195 TTL 300
|
||||||
|
-->
|
||||||
|
<div style="margin-top: 1.5rem; padding: 2rem; border: 2px dashed var(--nav-bg-alt, #ddd); border-radius: 8px; text-align: center; color: var(--nav-text-muted);">
|
||||||
|
<p style="font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem;">⏳ Backend en cours d'exposition publique — bientôt accessible.</p>
|
||||||
|
<p style="font-size: 0.85rem;">L'interface LightRAG sera disponible ici dès la mise en place du sous-domaine <code>lightrag.trans-former.fr</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
<iframe
|
<iframe
|
||||||
src="https://lightrag.trans-former.fr/"
|
src="https://lightrag.trans-former.fr/"
|
||||||
style="width: 100%; height: 70vh; border: 1px solid var(--nav-bg-alt, #ddd); border-radius: 8px; margin-top: 1.5rem;"
|
style="width: 100%; height: 70vh; border: 1px solid var(--nav-bg-alt, #ddd); border-radius: 8px; margin-top: 1.5rem;"
|
||||||
@@ -15,5 +25,6 @@
|
|||||||
sandbox="allow-same-origin allow-scripts"
|
sandbox="allow-same-origin allow-scripts"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,12 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="media-visuel">
|
<div class="media-visuel">
|
||||||
|
|
||||||
<!-- Conteneur principal : carte → toolbar → chatbot (ou bonpote/rag-backend) -->
|
<!-- Conteneur split / plein ecran -->
|
||||||
<div class="layout-container">
|
<div class="layout-container">
|
||||||
|
|
||||||
<!-- SLOT CARTE D3 (mode carte uniquement) -->
|
<!-- Slot carte D3 -->
|
||||||
<div
|
<div
|
||||||
v-if="contentView === 'carte'"
|
|
||||||
class="carte-slot"
|
class="carte-slot"
|
||||||
:class="[
|
:class="[
|
||||||
layoutMode === 'split' ? 'carte-split' : '',
|
layoutMode === 'split' ? 'carte-split' : '',
|
||||||
@@ -45,13 +44,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BARRE DE TOGGLE (entre carte et chatbot, toujours visible) -->
|
<!-- Barre de toggle -->
|
||||||
<div class="layout-toggle-bar shrink-0">
|
<div class="layout-toggle-bar shrink-0">
|
||||||
|
|
||||||
<!-- Gauche : contrôles layout (seulement en mode carte) -->
|
|
||||||
<template v-if="contentView === 'carte'">
|
|
||||||
<button
|
<button
|
||||||
@click="layoutMode = 'carte-full'"
|
@click="setLayoutMode('carte-full')"
|
||||||
:class="{ active: layoutMode === 'carte-full' }"
|
:class="{ active: layoutMode === 'carte-full' }"
|
||||||
class="toggle-btn"
|
class="toggle-btn"
|
||||||
title="Carte en plein ecran"
|
title="Carte en plein ecran"
|
||||||
@@ -64,7 +60,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="layoutMode !== 'split'"
|
v-if="layoutMode !== 'split'"
|
||||||
@click="layoutMode = 'split'"
|
@click="setLayoutMode('split')"
|
||||||
class="toggle-btn"
|
class="toggle-btn"
|
||||||
title="Vue partagee"
|
title="Vue partagee"
|
||||||
>
|
>
|
||||||
@@ -74,23 +70,36 @@
|
|||||||
Vue partagee
|
Vue partagee
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@click="layoutMode = 'chatbot-full'"
|
@click="setLayoutMode('chatbot-full')"
|
||||||
:class="{ active: layoutMode === 'chatbot-full' }"
|
:class="{ active: layoutMode === 'chatbot-full' }"
|
||||||
class="toggle-btn"
|
class="toggle-btn"
|
||||||
title="Chatbot plein ecran"
|
title="Chatbot en plein ecran"
|
||||||
>
|
>
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
</svg>
|
</svg>
|
||||||
Chatbot plein ecran
|
Chatbot plein ecran
|
||||||
</button>
|
</button>
|
||||||
</template>
|
<button
|
||||||
|
@click="setLayoutMode('bonpote')"
|
||||||
|
:class="{ active: layoutMode === 'bonpote' }"
|
||||||
|
class="toggle-btn"
|
||||||
|
title="A propos de la carte FRACAS Bonpote V2"
|
||||||
|
style="margin-left: auto;"
|
||||||
|
>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 8 12 12 14 14"/>
|
||||||
|
</svg>
|
||||||
|
Bonpote V2
|
||||||
|
</button>
|
||||||
|
|
||||||
<!-- Droite : contrôles contenu (toujours, indépendants du layoutMode) -->
|
<!-- Toggle PDF FRACAS -->
|
||||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
|
<label class="layer-toggle" title="Superposer la carte FRACAS Bonpote V2 en PDF">
|
||||||
<!-- Slider opacité PDF -->
|
<input type="checkbox" v-model="showFracasPdf" />
|
||||||
|
📄 Carte FRACAS (PDF)
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
v-if="showFracasPdf && contentView === 'carte'"
|
v-if="showFracasPdf"
|
||||||
type="range"
|
type="range"
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
@@ -98,56 +107,11 @@
|
|||||||
class="opacity-slider"
|
class="opacity-slider"
|
||||||
:title="`Opacité ${fracasOpacity}%`"
|
:title="`Opacité ${fracasOpacity}%`"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- CARTE PRINCIPALE -->
|
|
||||||
<button
|
|
||||||
@click="showCarte"
|
|
||||||
:class="{ active: contentView === 'carte' }"
|
|
||||||
class="toggle-btn"
|
|
||||||
title="Vue principale : carte D3 + chatbot"
|
|
||||||
>
|
|
||||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="12" r="2"/><path d="M12 2a10 10 0 0 0-7.07 17.07M12 2a10 10 0 0 1 7.07 17.07M3.34 7h17.32M3.34 17h17.32"/>
|
|
||||||
</svg>
|
|
||||||
CARTE PRINCIPALE
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Tickbox PDF + carte des pensées -->
|
|
||||||
<div class="carte-pensees-ctrl">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
v-model="showFracasPdf"
|
|
||||||
class="fracas-check"
|
|
||||||
title="Superposer la carte FRACAS en PDF"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
@click="contentView = 'bonpote'"
|
|
||||||
:class="{ active: contentView === 'bonpote' }"
|
|
||||||
class="toggle-btn carte-pensees-btn"
|
|
||||||
title="Carte des pensées écologiques — référence FRACAS Bonpote V2"
|
|
||||||
>
|
|
||||||
📗 carte des pensées écologiques
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- RAG backend -->
|
<!-- Poignee draggable (visible uniquement en mode split, pas sur mobile) -->
|
||||||
<button
|
|
||||||
@click="contentView = 'rag-backend'"
|
|
||||||
:class="{ active: contentView === 'rag-backend' }"
|
|
||||||
class="toggle-btn"
|
|
||||||
title="Interface LightRAG backend"
|
|
||||||
>
|
|
||||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
|
|
||||||
</svg>
|
|
||||||
RAG backend
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- POIGNEE DRAGGABLE (split uniquement) -->
|
|
||||||
<div
|
<div
|
||||||
v-if="contentView === 'carte' && layoutMode === 'split'"
|
v-if="layoutMode === 'split'"
|
||||||
class="split-handle"
|
class="split-handle"
|
||||||
@mousedown.prevent="onHandleMousedown"
|
@mousedown.prevent="onHandleMousedown"
|
||||||
title="Redimensionner"
|
title="Redimensionner"
|
||||||
@@ -155,9 +119,8 @@
|
|||||||
<span class="split-handle-grip"></span>
|
<span class="split-handle-grip"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SLOT CHATBOT (mode carte uniquement) -->
|
<!-- Slot chatbot inline -->
|
||||||
<div
|
<div
|
||||||
v-if="contentView === 'carte'"
|
|
||||||
class="chatbot-slot"
|
class="chatbot-slot"
|
||||||
:class="[
|
:class="[
|
||||||
layoutMode === 'split' ? 'chatbot-split' : '',
|
layoutMode === 'split' ? 'chatbot-split' : '',
|
||||||
@@ -171,9 +134,9 @@
|
|||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- VUE BONPOTE -->
|
<!-- Vue Bonpote V2 -->
|
||||||
<div
|
<div
|
||||||
v-if="contentView === 'bonpote'"
|
v-if="layoutMode === 'bonpote'"
|
||||||
class="flex-1 overflow-y-auto px-6 py-8"
|
class="flex-1 overflow-y-auto px-6 py-8"
|
||||||
style="max-width: 680px; margin: 0 auto;"
|
style="max-width: 680px; margin: 0 auto;"
|
||||||
>
|
>
|
||||||
@@ -202,7 +165,7 @@
|
|||||||
Telecharger le poster PDF (recto/verso)
|
Telecharger le poster PDF (recto/verso)
|
||||||
</a>
|
</a>
|
||||||
<button
|
<button
|
||||||
@click="showCarte"
|
@click="setLayoutMode('split')"
|
||||||
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity text-left"
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity text-left"
|
||||||
style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;">
|
style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
@@ -226,14 +189,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- VUE RAG BACKEND -->
|
|
||||||
<div
|
|
||||||
v-if="contentView === 'rag-backend'"
|
|
||||||
style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"
|
|
||||||
>
|
|
||||||
<MediaTabBackend />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Fiche auteur modal -->
|
<!-- Fiche auteur modal -->
|
||||||
@@ -309,11 +264,9 @@ interface LivreRag { slug: string; titre: string; annee: number; couches: string
|
|||||||
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
|
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
|
||||||
interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }
|
interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }
|
||||||
|
|
||||||
type LayoutMode = 'split' | 'carte-full' | 'chatbot-full'
|
type LayoutMode = 'split' | 'carte-full' | 'chatbot-full' | 'bonpote'
|
||||||
type ContentView = 'carte' | 'bonpote' | 'rag-backend'
|
|
||||||
|
|
||||||
const LAYOUT_KEY = 'media-layout-mode'
|
const STORAGE_KEY = 'media-layout-mode'
|
||||||
const CONTENT_KEY = 'media-content-view'
|
|
||||||
const SPLIT_RATIO_KEY = 'media-split-ratio'
|
const SPLIT_RATIO_KEY = 'media-split-ratio'
|
||||||
const DEFAULT_SPLIT_RATIO = 0.66
|
const DEFAULT_SPLIT_RATIO = 0.66
|
||||||
|
|
||||||
@@ -323,39 +276,32 @@ const ficheEcoleOpen = ref(false)
|
|||||||
const ficheEcoleId = ref<string | null>(null)
|
const ficheEcoleId = ref<string | null>(null)
|
||||||
const ragInfoOpen = ref(false)
|
const ragInfoOpen = ref(false)
|
||||||
const chatbotAuteur = ref<string | null>(null)
|
const chatbotAuteur = ref<string | null>(null)
|
||||||
|
|
||||||
const layoutMode = ref<LayoutMode>('split')
|
const layoutMode = ref<LayoutMode>('split')
|
||||||
const contentView = ref<ContentView>('carte')
|
|
||||||
const cartePenseesRef = ref<{ triggerResize: () => void } | null>(null)
|
const cartePenseesRef = ref<{ triggerResize: () => void } | null>(null)
|
||||||
|
|
||||||
|
// Toggle PDF FRACAS
|
||||||
const showFracasPdf = ref(false)
|
const showFracasPdf = ref(false)
|
||||||
const fracasOpacity = ref(60)
|
const fracasOpacity = ref(60)
|
||||||
|
|
||||||
const penseesData = ref<PenseesData | null>(null)
|
// Props injectées depuis le parent (penseesData)
|
||||||
|
const props = defineProps<{ penseesData: PenseesData | null }>()
|
||||||
|
|
||||||
|
// Ratio de la carte vs chatbot en mode split (0.2 a 0.8)
|
||||||
const splitRatio = ref(DEFAULT_SPLIT_RATIO)
|
const splitRatio = ref(DEFAULT_SPLIT_RATIO)
|
||||||
const carteFlexBasis = computed(() => `${splitRatio.value * 100}%`)
|
const carteFlexBasis = computed(() => `${splitRatio.value * 100}%`)
|
||||||
const chatbotFlexBasis = computed(() => `${(1 - splitRatio.value) * 100}%`)
|
const chatbotFlexBasis = computed(() => `${(1 - splitRatio.value) * 100}%`)
|
||||||
|
|
||||||
|
// Logique poignee draggable
|
||||||
let dragStartY = 0
|
let dragStartY = 0
|
||||||
let dragStartRatio = DEFAULT_SPLIT_RATIO
|
let dragStartRatio = DEFAULT_SPLIT_RATIO
|
||||||
let containerHeight = 0
|
let containerHeight = 0
|
||||||
|
|
||||||
function showCarte() {
|
|
||||||
contentView.value = 'carte'
|
|
||||||
layoutMode.value = 'split'
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
localStorage.setItem(CONTENT_KEY, 'carte')
|
|
||||||
localStorage.setItem(LAYOUT_KEY, 'split')
|
|
||||||
}
|
|
||||||
nextTick(() => cartePenseesRef.value?.triggerResize())
|
|
||||||
}
|
|
||||||
|
|
||||||
function onHandleMousedown(e: MouseEvent) {
|
function onHandleMousedown(e: MouseEvent) {
|
||||||
dragStartY = e.clientY
|
dragStartY = e.clientY
|
||||||
dragStartRatio = splitRatio.value
|
dragStartRatio = splitRatio.value
|
||||||
const container = (e.target as HTMLElement)?.closest('.layout-container') as HTMLElement | null
|
const container = (e.target as HTMLElement)?.closest('.layout-container') as HTMLElement | null
|
||||||
containerHeight = container ? container.clientHeight : window.innerHeight
|
containerHeight = container ? container.clientHeight : window.innerHeight
|
||||||
|
|
||||||
window.addEventListener('mousemove', onHandleMousemove)
|
window.addEventListener('mousemove', onHandleMousemove)
|
||||||
window.addEventListener('mouseup', onHandleMouseup)
|
window.addEventListener('mouseup', onHandleMouseup)
|
||||||
}
|
}
|
||||||
@@ -369,19 +315,17 @@ function onHandleMousemove(e: MouseEvent) {
|
|||||||
function onHandleMouseup() {
|
function onHandleMouseup() {
|
||||||
window.removeEventListener('mousemove', onHandleMousemove)
|
window.removeEventListener('mousemove', onHandleMousemove)
|
||||||
window.removeEventListener('mouseup', onHandleMouseup)
|
window.removeEventListener('mouseup', onHandleMouseup)
|
||||||
if (typeof window !== 'undefined') localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
|
||||||
|
}
|
||||||
cartePenseesRef.value?.triggerResize()
|
cartePenseesRef.value?.triggerResize()
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(() => {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const savedLayout = localStorage.getItem(LAYOUT_KEY) as LayoutMode | null
|
const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
|
||||||
if (savedLayout && (['split', 'carte-full', 'chatbot-full'] as string[]).includes(savedLayout)) {
|
if (saved && ['split', 'carte-full', 'chatbot-full', 'bonpote'].includes(saved)) {
|
||||||
layoutMode.value = savedLayout
|
layoutMode.value = saved
|
||||||
}
|
|
||||||
const savedContent = localStorage.getItem(CONTENT_KEY) as ContentView | null
|
|
||||||
if (savedContent && (['carte', 'bonpote', 'rag-backend'] as string[]).includes(savedContent)) {
|
|
||||||
contentView.value = savedContent
|
|
||||||
}
|
}
|
||||||
const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')
|
const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')
|
||||||
if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
|
if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
|
||||||
@@ -392,24 +336,26 @@ onMounted(async () => {
|
|||||||
localStorage.setItem('rag-fracas-info-seen', '1')
|
localStorage.setItem('rag-fracas-info-seen', '1')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
try {
|
|
||||||
penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json')
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Erreur chargement auteurs-pensees.json', e)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function setLayoutMode(mode: LayoutMode) {
|
||||||
|
layoutMode.value = mode
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.setItem(STORAGE_KEY, mode)
|
||||||
|
}
|
||||||
|
if (mode !== 'chatbot-full') {
|
||||||
|
setTimeout(() => {
|
||||||
|
cartePenseesRef.value?.triggerResize()
|
||||||
|
}, 350)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
watch(layoutMode, (v) => {
|
watch(layoutMode, (v) => {
|
||||||
if (typeof window !== 'undefined') localStorage.setItem(LAYOUT_KEY, v)
|
if (typeof window !== 'undefined') {
|
||||||
if (v === 'split' || v === 'carte-full') {
|
localStorage.setItem(STORAGE_KEY, v)
|
||||||
setTimeout(() => cartePenseesRef.value?.triggerResize(), 350)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(contentView, (v) => {
|
|
||||||
if (typeof window !== 'undefined') localStorage.setItem(CONTENT_KEY, v)
|
|
||||||
})
|
|
||||||
|
|
||||||
function onSelectAuteur(id: string) {
|
function onSelectAuteur(id: string) {
|
||||||
ficheAuteurId.value = id
|
ficheAuteurId.value = id
|
||||||
ficheOpen.value = true
|
ficheOpen.value = true
|
||||||
@@ -428,18 +374,18 @@ function onSelectAuteurFromEcole(auteurId: string) {
|
|||||||
|
|
||||||
function onInterrogerEcole(ecoleId: string) {
|
function onInterrogerEcole(ecoleId: string) {
|
||||||
ficheEcoleOpen.value = false
|
ficheEcoleOpen.value = false
|
||||||
const ecole = penseesData.value?.ecoles.find(e => e.id === ecoleId)
|
const ecole = props.penseesData?.ecoles.find(e => e.id === ecoleId)
|
||||||
chatbotAuteur.value = ecole?.label ?? null
|
chatbotAuteur.value = ecole?.label ?? null
|
||||||
if (contentView.value !== 'carte') showCarte()
|
if (layoutMode.value === 'carte-full') setLayoutMode('split')
|
||||||
else if (layoutMode.value === 'carte-full') layoutMode.value = 'split'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onInterrogerRag(auteurId: string) {
|
function onInterrogerRag(auteurId: string) {
|
||||||
ficheOpen.value = false
|
ficheOpen.value = false
|
||||||
const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
|
const auteur = props.penseesData?.auteurs.find(a => a.id === auteurId)
|
||||||
chatbotAuteur.value = auteur?.nom ?? null
|
chatbotAuteur.value = auteur?.nom ?? null
|
||||||
if (contentView.value !== 'carte') showCarte()
|
if (layoutMode.value === 'carte-full') {
|
||||||
else if (layoutMode.value === 'carte-full') layoutMode.value = 'split'
|
setLayoutMode('split')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -452,6 +398,7 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Conteneur des slots carte + toggle + chatbot */
|
||||||
.layout-container {
|
.layout-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -494,7 +441,7 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Barre de toggle (entre carte et chatbot) --- */
|
/* --- Barre de toggle --- */
|
||||||
.layout-toggle-bar {
|
.layout-toggle-bar {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -534,25 +481,26 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
border-color: var(--nav-primary);
|
border-color: var(--nav-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Contrôle fusionné carte des pensées --- */
|
/* --- Toggle layer PDF FRACAS --- */
|
||||||
.carte-pensees-ctrl {
|
.layer-toggle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0;
|
gap: 5px;
|
||||||
|
padding: 4px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
font-size: 0.75rem;
|
||||||
border: 1px solid rgba(180, 170, 160, 0.3);
|
font-weight: 500;
|
||||||
}
|
|
||||||
|
|
||||||
.fracas-check {
|
|
||||||
margin: 0 2px 0 7px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
accent-color: var(--nav-primary, #3b6ea5);
|
background: var(--nav-bg-alt);
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
user-select: none;
|
||||||
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carte-pensees-btn {
|
.layer-toggle input[type="checkbox"] {
|
||||||
border-radius: 0;
|
margin: 0;
|
||||||
border: none;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.opacity-slider {
|
.opacity-slider {
|
||||||
@@ -561,7 +509,7 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
accent-color: var(--nav-primary, #3b6ea5);
|
accent-color: var(--nav-primary, #3b6ea5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Poignee draggable --- */
|
/* --- Poignee draggable entre carte et chatbot --- */
|
||||||
.split-handle {
|
.split-handle {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
@@ -593,8 +541,11 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Masquer la poignee sur mobile (ratio fixe) */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.split-handle { display: none; }
|
.split-handle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Slot chatbot --- */
|
/* --- Slot chatbot --- */
|
||||||
@@ -606,8 +557,8 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chatbot-split {
|
.chatbot-split {
|
||||||
flex: 1 1 0;
|
flex: 0 0 34%;
|
||||||
min-height: 120px;
|
min-height: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -632,16 +583,19 @@ function onInterrogerRag(auteurId: string) {
|
|||||||
.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
|
.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
|
||||||
.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
|
.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
|
||||||
|
|
||||||
/* --- Mobile --- */
|
/* --- Responsive mobile (<768px) --- */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.carte-split {
|
.carte-split {
|
||||||
flex: 0 0 60vh;
|
flex: 0 0 60vh;
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbot-split {
|
.chatbot-split {
|
||||||
flex: 1 1 0;
|
flex: 0 0 calc(40vh - 38px);
|
||||||
min-height: 120px;
|
height: calc(40vh - 38px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toggle-btn span,
|
||||||
.toggle-btn {
|
.toggle-btn {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
|
|||||||
@@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<component
|
|
||||||
:is="url ? 'a' : 'div'"
|
|
||||||
v-bind="url ? { href: url, target: '_blank', rel: 'noopener noreferrer' } : {}"
|
|
||||||
class="outil-card"
|
|
||||||
:class="{ 'outil-card--link': !!url, 'outil-card--disabled': !url }"
|
|
||||||
>
|
|
||||||
<div class="outil-card__header">
|
|
||||||
<span class="outil-card__icon" aria-hidden="true">{{ icon }}</span>
|
|
||||||
<span :class="['outil-card__badge', `outil-card__badge--${tag}`]">{{ tagLabel }}</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="outil-card__titre">{{ titre }}</h3>
|
|
||||||
<p class="outil-card__desc">{{ description }}</p>
|
|
||||||
<span v-if="cta && url" class="outil-card__cta">{{ cta }}</span>
|
|
||||||
<span v-else-if="!url" class="outil-card__cta outil-card__cta--disabled">Bientôt disponible</span>
|
|
||||||
</component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps<{
|
|
||||||
icon?: string
|
|
||||||
titre: string
|
|
||||||
url?: string | null
|
|
||||||
description?: string
|
|
||||||
cta?: string
|
|
||||||
tag?: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const tagLabels: Record<string, string> = {
|
|
||||||
'outil-aep': 'Outil AEP',
|
|
||||||
'inspiration-externe': 'Inspiration',
|
|
||||||
'disponible': 'Disponible',
|
|
||||||
'recommande': 'Recommandé',
|
|
||||||
'a-venir': 'À venir',
|
|
||||||
}
|
|
||||||
|
|
||||||
const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag) : '')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.outil-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid var(--nav-bg-alt);
|
|
||||||
background: var(--nav-surface);
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--nav-text);
|
|
||||||
transition: box-shadow 0.15s, border-color 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card--link:hover {
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
||||||
border-color: var(--nav-primary-solid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card--disabled {
|
|
||||||
opacity: 0.65;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__icon {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__badge {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
padding: 2px 7px;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__badge--outil-aep {
|
|
||||||
background: #d1fae5;
|
|
||||||
color: #065f46;
|
|
||||||
}
|
|
||||||
.outil-card__badge--inspiration-externe {
|
|
||||||
background: #fef3c7;
|
|
||||||
color: #92400e;
|
|
||||||
}
|
|
||||||
.outil-card__badge--disponible {
|
|
||||||
background: #d1fae5;
|
|
||||||
color: #065f46;
|
|
||||||
}
|
|
||||||
.outil-card__badge--recommande {
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1e40af;
|
|
||||||
}
|
|
||||||
.outil-card__badge--a-venir {
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__titre {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-text);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__desc {
|
|
||||||
font-size: 0.82rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__cta {
|
|
||||||
font-size: 0.78rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-card__cta--disabled {
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode badge overrides */
|
|
||||||
:global(.dark) .outil-card__badge--outil-aep {
|
|
||||||
background: #064e3b;
|
|
||||||
color: #a7f3d0;
|
|
||||||
}
|
|
||||||
:global(.dark) .outil-card__badge--inspiration-externe {
|
|
||||||
background: #78350f;
|
|
||||||
color: #fde68a;
|
|
||||||
}
|
|
||||||
:global(.dark) .outil-card__badge--disponible {
|
|
||||||
background: #064e3b;
|
|
||||||
color: #a7f3d0;
|
|
||||||
}
|
|
||||||
:global(.dark) .outil-card__badge--recommande {
|
|
||||||
background: #1e3a5f;
|
|
||||||
color: #93c5fd;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
<template>
|
|
||||||
<component
|
|
||||||
:is="url ? 'a' : 'div'"
|
|
||||||
v-bind="url ? { href: url, target: '_blank', rel: 'noopener noreferrer' } : {}"
|
|
||||||
class="simu-feature"
|
|
||||||
:class="{ 'simu-feature--link': !!url }"
|
|
||||||
>
|
|
||||||
<div class="simu-feature__inner">
|
|
||||||
<div class="simu-feature__left">
|
|
||||||
<span class="simu-feature__icon" aria-hidden="true">{{ icon }}</span>
|
|
||||||
<div class="simu-feature__body">
|
|
||||||
<div class="simu-feature__header">
|
|
||||||
<h3 class="simu-feature__titre">{{ titre }}</h3>
|
|
||||||
<span v-if="tag" :class="['simu-feature__badge', `simu-feature__badge--${tag}`]">{{ tagLabel }}</span>
|
|
||||||
</div>
|
|
||||||
<p class="simu-feature__desc">{{ description }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span v-if="cta && url" class="simu-feature__cta">{{ cta }}</span>
|
|
||||||
</div>
|
|
||||||
</component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps<{
|
|
||||||
icon?: string
|
|
||||||
titre: string
|
|
||||||
url?: string | null
|
|
||||||
description?: string
|
|
||||||
cta?: string
|
|
||||||
tag?: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const tagLabels: Record<string, string> = {
|
|
||||||
'outil-aep': 'Outil AEP',
|
|
||||||
'inspiration-externe': 'Inspiration externe',
|
|
||||||
'disponible': 'Disponible',
|
|
||||||
'recommande': 'Recommandé',
|
|
||||||
'a-venir': 'À venir',
|
|
||||||
}
|
|
||||||
|
|
||||||
const tagLabel = computed(() => props.tag ? (tagLabels[props.tag] ?? props.tag) : '')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.simu-feature {
|
|
||||||
display: block;
|
|
||||||
padding: 1.5rem 1.75rem;
|
|
||||||
border-radius: 14px;
|
|
||||||
border: 1.5px solid var(--nav-bg-alt);
|
|
||||||
background: var(--nav-surface);
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--nav-text);
|
|
||||||
transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature--link:hover {
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
||||||
border-color: var(--nav-primary-solid);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 1.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__left {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__icon {
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__body {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__titre {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--nav-text);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__badge {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #d1fae5;
|
|
||||||
color: #065f46;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__badge--inspiration-externe {
|
|
||||||
background: #fef3c7;
|
|
||||||
color: #92400e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__desc {
|
|
||||||
font-size: 0.88rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature__cta {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.6rem 1.25rem;
|
|
||||||
background: var(--nav-primary-solid);
|
|
||||||
color: var(--nav-text-on-primary);
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-feature--link:hover .simu-feature__cta {
|
|
||||||
opacity: 0.88;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.dark) .simu-feature__badge {
|
|
||||||
background: #064e3b;
|
|
||||||
color: #a7f3d0;
|
|
||||||
}
|
|
||||||
:global(.dark) .simu-feature__badge--inspiration-externe {
|
|
||||||
background: #78350f;
|
|
||||||
color: #fde68a;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,201 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ul class="tree-ascii" :class="{ 'tree-ascii--root': depth === 0 }" :style="{ '--depth': depth }">
|
|
||||||
<li
|
|
||||||
v-for="(node, i) in tree.children"
|
|
||||||
:key="i"
|
|
||||||
class="tree-ascii__node"
|
|
||||||
>
|
|
||||||
<!-- Nœud avec enfants : bouton toggle -->
|
|
||||||
<template v-if="node.children && node.children.length">
|
|
||||||
<button
|
|
||||||
class="tree-ascii__branch"
|
|
||||||
:aria-expanded="!!open[i]"
|
|
||||||
@click="toggle(i)"
|
|
||||||
>
|
|
||||||
<span class="tree-ascii__chevron" aria-hidden="true">{{ open[i] ? '▼' : '▶' }}</span>
|
|
||||||
<span class="tree-ascii__label">{{ node.name }}</span>
|
|
||||||
<span class="tree-ascii__count">({{ node.children.length }})</span>
|
|
||||||
</button>
|
|
||||||
<TreeASCII
|
|
||||||
v-if="open[i]"
|
|
||||||
:tree="node"
|
|
||||||
:depth="depth + 1"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- Feuille avec URL : lien cliquable -->
|
|
||||||
<template v-else-if="node.url">
|
|
||||||
<a
|
|
||||||
:href="node.url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="tree-ascii__leaf tree-ascii__leaf--link"
|
|
||||||
>
|
|
||||||
<span class="tree-ascii__prefix" aria-hidden="true">└─</span>
|
|
||||||
<span class="tree-ascii__label">{{ node.name }}</span>
|
|
||||||
<span v-if="node.desc" class="tree-ascii__desc"> — {{ node.desc }}</span>
|
|
||||||
<svg class="tree-ascii__ext" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
|
||||||
<polyline points="15 3 21 3 21 9"/>
|
|
||||||
<line x1="10" y1="14" x2="21" y2="3"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- Feuille sans URL -->
|
|
||||||
<template v-else>
|
|
||||||
<span class="tree-ascii__leaf">
|
|
||||||
<span class="tree-ascii__prefix" aria-hidden="true">└─</span>
|
|
||||||
<span class="tree-ascii__label">{{ node.name }}</span>
|
|
||||||
<span v-if="node.desc" class="tree-ascii__desc"> — {{ node.desc }}</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
export interface TreeNode {
|
|
||||||
name: string
|
|
||||||
url?: string
|
|
||||||
desc?: string
|
|
||||||
children?: TreeNode[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TreeData {
|
|
||||||
name?: string
|
|
||||||
children?: TreeNode[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
|
||||||
tree: TreeData
|
|
||||||
depth?: number
|
|
||||||
}>(), {
|
|
||||||
depth: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
// Toutes les branches fermées par défaut
|
|
||||||
const open = ref<Record<number, boolean>>({})
|
|
||||||
|
|
||||||
function toggle(i: number) {
|
|
||||||
open.value[i] = !open.value[i]
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.tree-ascii {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
padding-left: calc(var(--depth, 0) * 1.25rem + 0.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii--root {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__node {
|
|
||||||
margin: 2px 0;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bouton branche (nœud avec enfants) */
|
|
||||||
.tree-ascii__branch {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.35rem;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--nav-text);
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: background 0.1s, color 0.1s;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__branch:hover {
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__chevron {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
width: 12px;
|
|
||||||
text-align: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__count {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Feuille */
|
|
||||||
.tree-ascii__leaf {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 0.25rem;
|
|
||||||
padding: 1px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__leaf--link {
|
|
||||||
color: var(--nav-text);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.1s, color 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__leaf--link:hover {
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__prefix {
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
opacity: 0.5;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__label {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__leaf--link .tree-ascii__label {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__desc {
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
font-size: 0.78rem;
|
|
||||||
font-style: italic;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 60ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-ascii__ext {
|
|
||||||
opacity: 0.4;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-left: 2px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.tree-ascii__desc {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,240 +0,0 @@
|
|||||||
.proposer-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group label,
|
|
||||||
.field-group legend {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-text);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group fieldset {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.required { color: #c0392b; }
|
|
||||||
|
|
||||||
.label-hint {
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
margin-left: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group input[type="text"],
|
|
||||||
.field-group input[type="url"],
|
|
||||||
.field-group input[type="email"],
|
|
||||||
.field-group textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.625rem 0.875rem;
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--nav-text);
|
|
||||||
background: var(--nav-surface);
|
|
||||||
font-family: inherit;
|
|
||||||
transition: border-color 0.15s, box-shadow 0.15s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group input:focus,
|
|
||||||
.field-group textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--nav-primary-solid);
|
|
||||||
box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-group textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-error input,
|
|
||||||
.field-error textarea {
|
|
||||||
border-color: #c0392b !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-msg {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #c0392b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-meta {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-count {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.char-warn {
|
|
||||||
color: #e67e22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-group {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-label {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.375rem;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--nav-text);
|
|
||||||
background: var(--nav-surface);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-label input[type="radio"] {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-label:hover {
|
|
||||||
border-color: var(--nav-primary-solid);
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-label.active {
|
|
||||||
background: var(--nav-primary);
|
|
||||||
border-color: transparent;
|
|
||||||
color: var(--nav-text-on-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
.checkbox-grid { grid-template-columns: 1fr; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.375rem;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--nav-text);
|
|
||||||
background: var(--nav-surface);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label input[type="checkbox"] {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label:hover:not(.disabled) {
|
|
||||||
border-color: var(--nav-primary-solid);
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label.active {
|
|
||||||
background: var(--nav-primary);
|
|
||||||
border-color: transparent;
|
|
||||||
color: var(--nav-text-on-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label.disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fn-order {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background: var(--nav-accent);
|
|
||||||
color: var(--nav-text);
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 700;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.server-error {
|
|
||||||
padding: 0.875rem 1rem;
|
|
||||||
background: #fdf0ee;
|
|
||||||
border: 1px solid #e74c3c;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #c0392b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
background: var(--nav-primary);
|
|
||||||
color: var(--nav-text-on-primary);
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: background 0.15s, opacity 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover:not(:disabled) {
|
|
||||||
background: rgba(26, 34, 56, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-note {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.form-actions { flex-direction: column-reverse; }
|
|
||||||
.btn-primary { width: 100%; justify-content: center; }
|
|
||||||
}
|
|
||||||
@@ -23,8 +23,6 @@ export default defineNuxtConfig({
|
|||||||
codevPassword: 'merci', // NUXT_CODEV_PASSWORD - défaut "merci", overridable
|
codevPassword: 'merci', // NUXT_CODEV_PASSWORD - défaut "merci", overridable
|
||||||
codevBaseId: '', // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
|
codevBaseId: '', // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
|
||||||
codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
|
codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
|
||||||
ragPeUrl: process.env.RAG_PE_URL || 'http://localhost:9621',
|
|
||||||
referencesTableId: process.env.REFERENCES_TABLE_ID || process.env.NUXT_REFERENCES_TABLE_ID || '',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Leaflet ne fonctionne pas en SSR — forcer le rendu côté client
|
// Leaflet ne fonctionne pas en SSR — forcer le rendu côté client
|
||||||
|
|||||||
@@ -190,38 +190,12 @@
|
|||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ══════════════════════════════════════════════════════════
|
|
||||||
SECTION 8 - API publique
|
|
||||||
══════════════════════════════════════════════════════════ -->
|
|
||||||
<section class="section section-opensource">
|
|
||||||
<h2>API publique</h2>
|
|
||||||
<p class="section-text">
|
|
||||||
Les données de ce site internet sont publiques, toutes consultables via API directe, pour que des agents IA, des développeurs, ou d'autres sites puissent interroger la base sans passer par l'interface graphique.
|
|
||||||
</p>
|
|
||||||
<p class="section-text">
|
|
||||||
<strong>Données accessibles :</strong> organisations d'entraide, pratiques d'architecture d'écologie politique (graphe complet + projets), plateformes d'emploi, RAG et ses auteurs, et toutes autres données à venir.
|
|
||||||
</p>
|
|
||||||
<div class="api-copy-box">
|
|
||||||
<code class="api-url">https://api.trans-former.fr</code>
|
|
||||||
<button class="btn-copy" @click="copyApiUrl">{{ copied ? 'Copié !' : 'Copier' }}</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
useHead({ title: 'À propos - AEP' })
|
useHead({ title: 'À propos - AEP' })
|
||||||
|
|
||||||
const copied = ref(false)
|
|
||||||
function copyApiUrl() {
|
|
||||||
navigator.clipboard.writeText('https://api.trans-former.fr')
|
|
||||||
copied.value = true
|
|
||||||
setTimeout(() => { copied.value = false }, 2000)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -538,44 +512,6 @@ function copyApiUrl() {
|
|||||||
background: var(--nav-bg-alt);
|
background: var(--nav-bg-alt);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── API copy box ────────────────────────────────────────────────────────────── */
|
|
||||||
|
|
||||||
.api-copy-box {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
background: var(--nav-surface);
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-url {
|
|
||||||
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
user-select: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-copy {
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.15);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--nav-text);
|
|
||||||
transition: background 0.15s;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-copy:hover {
|
|
||||||
background: var(--nav-primary-solid);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Responsive général ──────────────────────────────────────────────────────── */
|
/* ── Responsive général ──────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
|||||||
@@ -1,7 +1,795 @@
|
|||||||
<template>
|
<template>
|
||||||
<div />
|
<div class="contribuer-page">
|
||||||
|
<div class="contribuer-inner">
|
||||||
|
<!-- Retour -->
|
||||||
|
<NuxtLink to="/" class="back-link">
|
||||||
|
← Retour à la carte
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
|
<!-- En-tête -->
|
||||||
|
<div class="contribuer-header">
|
||||||
|
<h1>Proposer une ressource</h1>
|
||||||
|
<p class="contribuer-subtitle">
|
||||||
|
Tu connais une organisation utile aux architectes qui n'est pas encore référencée ?
|
||||||
|
Soumets-la ici — une IA enrichira la fiche et on validera sous 7 jours.
|
||||||
|
</p>
|
||||||
|
<p class="contribuer-hint">
|
||||||
|
Si tu n'as pas le temps de tout remplir, laisse-nous juste le lien — on extraira les infos du site.
|
||||||
|
Mais une description de toi, c'est toujours plus vivant et plus précis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message succès -->
|
||||||
|
<div v-if="success" class="success-block" role="status" aria-live="polite">
|
||||||
|
<div class="success-icon">✓</div>
|
||||||
|
<h2>Merci !</h2>
|
||||||
|
<p>Ta fiche est en cours de traitement.</p>
|
||||||
|
<p class="success-detail">
|
||||||
|
Une IA va scraper le site et enrichir la description.
|
||||||
|
Jules (et bientôt une équipe de modération) valide sous 7 jours.
|
||||||
|
</p>
|
||||||
|
<button type="button" class="btn-secondary" @click="reset">
|
||||||
|
Proposer une autre fiche
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Formulaire -->
|
||||||
|
<form v-else @submit.prevent="submit" class="contribuer-form" novalidate>
|
||||||
|
|
||||||
|
<!-- Nom -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.nom }">
|
||||||
|
<label for="nom">Nom de l'organisation <span class="required">*</span></label>
|
||||||
|
<input
|
||||||
|
id="nom"
|
||||||
|
v-model="form.nom"
|
||||||
|
type="text"
|
||||||
|
placeholder="Ex : UNSFA, Maison de l'Architecture..."
|
||||||
|
autocomplete="organization"
|
||||||
|
@blur="validateField('nom')"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.url }">
|
||||||
|
<label for="url">
|
||||||
|
Site web
|
||||||
|
<span class="label-hint">(optionnel — recommandé pour l'enrichissement IA)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="url"
|
||||||
|
v-model="form.url"
|
||||||
|
type="url"
|
||||||
|
placeholder="https://..."
|
||||||
|
@blur="validateField('url')"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.description_user }">
|
||||||
|
<label for="description_user">
|
||||||
|
Description courte <span class="required">*</span>
|
||||||
|
<span class="label-hint">(50 à 500 caractères)</span>
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="description_user"
|
||||||
|
v-model="form.description_user"
|
||||||
|
rows="4"
|
||||||
|
placeholder="Présente l'organisation en quelques mots : ses missions, son public, ce qu'elle apporte..."
|
||||||
|
@blur="validateField('description_user')"
|
||||||
|
/>
|
||||||
|
<div class="field-meta">
|
||||||
|
<span v-if="errors.description_user" class="error-msg" role="alert">
|
||||||
|
{{ errors.description_user }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">
|
||||||
|
{{ form.description_user.length }}/500
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Échelle -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.echelle }">
|
||||||
|
<fieldset>
|
||||||
|
<legend>
|
||||||
|
Échelle <span class="required">*</span>
|
||||||
|
<span class="label-hint">(une seule)</span>
|
||||||
|
</legend>
|
||||||
|
<div class="radio-group">
|
||||||
|
<label
|
||||||
|
v-for="opt in ECHELLES"
|
||||||
|
:key="opt"
|
||||||
|
class="radio-label"
|
||||||
|
:class="{ active: form.echelle === opt }"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
:value="opt"
|
||||||
|
v-model="form.echelle"
|
||||||
|
name="echelle"
|
||||||
|
@change="validateField('echelle')"
|
||||||
|
/>
|
||||||
|
{{ opt }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<span v-if="errors.echelle" class="error-msg" role="alert">{{ errors.echelle }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fonctions -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.fonctions }">
|
||||||
|
<fieldset>
|
||||||
|
<legend>
|
||||||
|
Fonctions <span class="required">*</span>
|
||||||
|
<span class="label-hint">(1 à 5 — l'ordre de clic = priorité)</span>
|
||||||
|
</legend>
|
||||||
|
<div class="checkbox-grid">
|
||||||
|
<label
|
||||||
|
v-for="fn in FONCTIONS"
|
||||||
|
:key="fn"
|
||||||
|
class="checkbox-label"
|
||||||
|
:class="{
|
||||||
|
active: form.fonctions.includes(fn),
|
||||||
|
disabled: !form.fonctions.includes(fn) && form.fonctions.length >= 5,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:value="fn"
|
||||||
|
:checked="form.fonctions.includes(fn)"
|
||||||
|
:disabled="!form.fonctions.includes(fn) && form.fonctions.length >= 5"
|
||||||
|
@change="toggleFonction(fn)"
|
||||||
|
/>
|
||||||
|
<span class="fn-order" v-if="form.fonctions.includes(fn)">
|
||||||
|
{{ form.fonctions.indexOf(fn) + 1 }}
|
||||||
|
</span>
|
||||||
|
{{ fn }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<span v-if="errors.fonctions" class="error-msg" role="alert">{{ errors.fonctions }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Territoire -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.territoire }">
|
||||||
|
<fieldset>
|
||||||
|
<legend>
|
||||||
|
Territoire <span class="required">*</span>
|
||||||
|
</legend>
|
||||||
|
<div class="radio-group">
|
||||||
|
<label
|
||||||
|
v-for="t in TERRITOIRES"
|
||||||
|
:key="t"
|
||||||
|
class="radio-label"
|
||||||
|
:class="{ active: form.territoire === t }"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
:value="t"
|
||||||
|
v-model="form.territoire"
|
||||||
|
name="territoire"
|
||||||
|
@change="validateField('territoire')"
|
||||||
|
/>
|
||||||
|
{{ t }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<span v-if="errors.territoire" class="error-msg" role="alert">{{ errors.territoire }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ville -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.localisation_ville }">
|
||||||
|
<label for="localisation_ville">
|
||||||
|
Ville principale
|
||||||
|
<span class="label-hint">(optionnel — pour la géolocalisation sur la carte)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="localisation_ville"
|
||||||
|
v-model="form.localisation_ville"
|
||||||
|
type="text"
|
||||||
|
placeholder="Ex : Paris, Lyon, Bordeaux..."
|
||||||
|
/>
|
||||||
|
<span v-if="errors.localisation_ville" class="error-msg" role="alert">
|
||||||
|
{{ errors.localisation_ville }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Email -->
|
||||||
|
<div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
|
||||||
|
<label for="submitted_by_email">
|
||||||
|
Ton email
|
||||||
|
<span class="label-hint">(optionnel — pour le suivi de modération)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="submitted_by_email"
|
||||||
|
v-model="form.submitted_by_email"
|
||||||
|
type="email"
|
||||||
|
placeholder="ton@email.fr"
|
||||||
|
autocomplete="email"
|
||||||
|
@blur="validateField('submitted_by_email')"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.submitted_by_email" class="error-msg" role="alert">
|
||||||
|
{{ errors.submitted_by_email }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Erreur globale -->
|
||||||
|
<div v-if="serverError" class="server-error" role="alert">
|
||||||
|
<strong>Erreur :</strong> {{ serverError }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<NuxtLink to="/" class="btn-secondary">Annuler</NuxtLink>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn-primary"
|
||||||
|
:disabled="submitting"
|
||||||
|
>
|
||||||
|
{{ submitting ? 'Envoi en cours...' : 'Proposer la fiche →' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="form-note">
|
||||||
|
Ta fiche sera examinée par l'équipe avant publication.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
navigateTo('/proposer', { redirectCode: 301 })
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
// ── Constantes ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const ECHELLES = ['National', 'Régional', 'Local'] as const
|
||||||
|
const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte'] as const
|
||||||
|
const FONCTIONS = [
|
||||||
|
'Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier',
|
||||||
|
'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale',
|
||||||
|
] as const
|
||||||
|
|
||||||
|
// ── Schéma Zod (côté client — miroir du serveur) ──────────────────────────────
|
||||||
|
|
||||||
|
const SubmitSchema = z.object({
|
||||||
|
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
||||||
|
url: z.string().url('URL invalide (commencer par https://)').optional().or(z.literal('')),
|
||||||
|
description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
|
||||||
|
echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Sélectionne une échelle' }) }),
|
||||||
|
fonctions: z.array(z.string()).min(1, 'Sélectionne au moins une fonction').max(5, 'Maximum 5 fonctions'),
|
||||||
|
territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Sélectionne un territoire' }) }),
|
||||||
|
localisation_ville: z.string().max(100).optional(),
|
||||||
|
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
|
||||||
|
})
|
||||||
|
|
||||||
|
// ── État du formulaire ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
nom: '',
|
||||||
|
url: '',
|
||||||
|
description_user: '',
|
||||||
|
echelle: '' as typeof ECHELLES[number] | '',
|
||||||
|
fonctions: [] as string[],
|
||||||
|
territoire: '' as typeof TERRITOIRES[number] | '',
|
||||||
|
localisation_ville: '',
|
||||||
|
submitted_by_email: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const errors = reactive<Record<string, string>>({})
|
||||||
|
const submitting = ref(false)
|
||||||
|
const success = ref(false)
|
||||||
|
const serverError = ref('')
|
||||||
|
const trackingUrl = ref<string | null>(null)
|
||||||
|
|
||||||
|
// ── Validation champ par champ ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function validateField(field: string) {
|
||||||
|
const partial = SubmitSchema.partial()
|
||||||
|
const result = partial.safeParse({ [field]: (form as any)[field] })
|
||||||
|
if (!result.success) {
|
||||||
|
const fieldErrors = result.error.flatten().fieldErrors
|
||||||
|
errors[field] = fieldErrors[field]?.[0] ?? ''
|
||||||
|
} else {
|
||||||
|
delete errors[field]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateAll(): boolean {
|
||||||
|
const result = SubmitSchema.safeParse(form)
|
||||||
|
if (!result.success) {
|
||||||
|
const flat = result.error.flatten().fieldErrors
|
||||||
|
Object.assign(errors, Object.fromEntries(
|
||||||
|
Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])
|
||||||
|
))
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
Object.keys(errors).forEach(k => delete errors[k])
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Gestion fonctions (ordre de clic = priorité) ──────────────────────────────
|
||||||
|
|
||||||
|
function toggleFonction(fn: string) {
|
||||||
|
const idx = form.fonctions.indexOf(fn)
|
||||||
|
if (idx >= 0) {
|
||||||
|
form.fonctions.splice(idx, 1)
|
||||||
|
} else if (form.fonctions.length < 5) {
|
||||||
|
form.fonctions.push(fn)
|
||||||
|
}
|
||||||
|
validateField('fonctions')
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Soumission ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
serverError.value = ''
|
||||||
|
|
||||||
|
if (!validateAll()) {
|
||||||
|
// Scroll vers la première erreur
|
||||||
|
await nextTick()
|
||||||
|
const firstError = document.querySelector('.field-error')
|
||||||
|
firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
submitting.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result: any = await $fetch('/api/submit', {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
nom: form.nom,
|
||||||
|
url: form.url || undefined,
|
||||||
|
description_user: form.description_user,
|
||||||
|
echelle: form.echelle,
|
||||||
|
fonctions: form.fonctions,
|
||||||
|
territoire: form.territoire,
|
||||||
|
localisation_ville: form.localisation_ville || undefined,
|
||||||
|
submitted_by_email: form.submitted_by_email || undefined,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
trackingUrl.value = result.trackingUrl ?? null
|
||||||
|
success.value = true
|
||||||
|
} catch (e: any) {
|
||||||
|
const status = e?.status ?? e?.statusCode
|
||||||
|
if (status === 429) {
|
||||||
|
serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
|
||||||
|
} else if (status === 422 && e?.data) {
|
||||||
|
// Erreurs Zod serveur → mapper sur le formulaire
|
||||||
|
const fieldErrors = e.data
|
||||||
|
Object.entries(fieldErrors).forEach(([k, v]) => {
|
||||||
|
errors[k] = Array.isArray(v) ? v[0] : String(v)
|
||||||
|
})
|
||||||
|
serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
|
||||||
|
} else {
|
||||||
|
serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
submitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
Object.assign(form, {
|
||||||
|
nom: '', url: '', description_user: '', echelle: '',
|
||||||
|
fonctions: [], territoire: '', localisation_ville: '', submitted_by_email: '',
|
||||||
|
})
|
||||||
|
Object.keys(errors).forEach(k => delete errors[k])
|
||||||
|
success.value = false
|
||||||
|
serverError.value = ''
|
||||||
|
trackingUrl.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Meta ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
useHead({ title: 'Proposer une ressource — AEP' })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ── Layout ─────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.contribuer-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg);
|
||||||
|
padding: 1.5rem 1rem 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contribuer-inner {
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Retour ──────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--nav-primary-solid);
|
||||||
|
opacity: 0.7;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── En-tête ─────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.contribuer-header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contribuer-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text);
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contribuer-subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contribuer-hint {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
opacity: 0.75;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Succès ──────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.success-block {
|
||||||
|
background: var(--nav-surface);
|
||||||
|
border: 1px solid rgba(26, 34, 56, 0.15);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: rgba(26, 34, 56, 0.1);
|
||||||
|
color: var(--nav-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-block h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text);
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-block p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-detail {
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-tracking {
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
margin-top: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracking-link {
|
||||||
|
color: var(--nav-primary-solid);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Formulaire ──────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.contribuer-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Champ générique ─────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.field-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group label,
|
||||||
|
.field-group legend {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--nav-text);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group fieldset {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-hint {
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group input[type="text"],
|
||||||
|
.field-group input[type="url"],
|
||||||
|
.field-group input[type="email"],
|
||||||
|
.field-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
border: 1px solid rgba(26, 34, 56, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text);
|
||||||
|
background: var(--nav-surface);
|
||||||
|
font-family: inherit;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group input:focus,
|
||||||
|
.field-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nav-primary-solid);
|
||||||
|
box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Erreur champ */
|
||||||
|
|
||||||
|
.field-error input,
|
||||||
|
.field-error textarea {
|
||||||
|
border-color: #c0392b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-count {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-warn {
|
||||||
|
color: #e67e22;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Radio (Échelle + Territoire) ────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-label {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
border: 1px solid rgba(26, 34, 56, 0.2);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--nav-text);
|
||||||
|
background: var(--nav-surface);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-label input[type="radio"] {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-label:hover {
|
||||||
|
border-color: var(--nav-primary-solid);
|
||||||
|
background: var(--nav-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-label.active {
|
||||||
|
background: var(--nav-primary);
|
||||||
|
border-color: transparent;
|
||||||
|
color: var(--nav-text-on-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Checkboxes (Fonctions) ──────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.checkbox-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.checkbox-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
border: 1px solid rgba(26, 34, 56, 0.2);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--nav-text);
|
||||||
|
background: var(--nav-surface);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label input[type="checkbox"] {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label:hover:not(.disabled) {
|
||||||
|
border-color: var(--nav-primary-solid);
|
||||||
|
background: var(--nav-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label.active {
|
||||||
|
background: var(--nav-primary);
|
||||||
|
border-color: transparent;
|
||||||
|
color: var(--nav-text-on-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label.disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fn-order {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: var(--nav-accent);
|
||||||
|
color: var(--nav-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Erreur serveur ──────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.server-error {
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
background: #fdf0ee;
|
||||||
|
border: 1px solid #e74c3c;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Actions ──────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background: var(--nav-primary);
|
||||||
|
color: var(--nav-text-on-primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background 0.15s, opacity 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: rgba(26, 34, 56, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
border: 1px solid rgba(26, 34, 56, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: border-color 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
border-color: var(--nav-primary-solid);
|
||||||
|
color: var(--nav-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-note {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--nav-text-muted);
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Responsive ──────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.contribuer-page {
|
||||||
|
padding: 1rem 0.75rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -5,17 +5,24 @@
|
|||||||
:class="['subtab-btn', { active: tab === 'visuel' }]"
|
:class="['subtab-btn', { active: tab === 'visuel' }]"
|
||||||
@click="tab = 'visuel'"
|
@click="tab = 'visuel'"
|
||||||
>
|
>
|
||||||
📚 bibliothèque des pensées écologiques
|
🌳 RAG visuel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="['subtab-btn', { active: tab === 'backend' }]"
|
||||||
|
@click="tab = 'backend'"
|
||||||
|
>
|
||||||
|
⚙ LightRAG backend
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
:class="['subtab-btn', { active: tab === 'projets' }]"
|
:class="['subtab-btn', { active: tab === 'projets' }]"
|
||||||
@click="tab = 'projets'"
|
@click="tab = 'projets'"
|
||||||
>
|
>
|
||||||
📐 Projets
|
📚 Projets
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<MediaTabVisuel v-if="tab === 'visuel'" />
|
<MediaTabVisuel v-if="tab === 'visuel'" />
|
||||||
|
<MediaTabBackend v-else-if="tab === 'backend'" />
|
||||||
<MediaTabProjets v-else-if="tab === 'projets'" />
|
<MediaTabProjets v-else-if="tab === 'projets'" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -24,9 +31,9 @@
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
const tab = ref<'visuel' | 'projets'>(
|
const tab = ref<'visuel' | 'backend' | 'projets'>(
|
||||||
(['visuel', 'projets'].includes(route.query.tab as string)
|
(['visuel', 'backend', 'projets'].includes(route.query.tab as string)
|
||||||
? route.query.tab as 'visuel' | 'projets'
|
? route.query.tab as 'visuel' | 'backend' | 'projets'
|
||||||
: 'visuel')
|
: 'visuel')
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
533
pages/outils.vue
533
pages/outils.vue
@@ -1,533 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="outils-page">
|
|
||||||
|
|
||||||
<!-- ══════════════════════ EN-TÊTE PAGE ══════════════════════ -->
|
|
||||||
<header class="outils-header">
|
|
||||||
<div class="outils-header__inner">
|
|
||||||
<div class="outils-header__icon-wrap" aria-hidden="true">
|
|
||||||
<img src="/icons/outils-wrench.svg" alt="" class="outils-header__icon" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 class="outils-header__title">Outils</h1>
|
|
||||||
<p class="outils-header__intro">
|
|
||||||
En tant qu'architecte, on jongle avec une multitude d'outils — simulation, dessin,
|
|
||||||
calcul, recherche, partage. Les mutualiser, se conseiller dessus, savoir lequel
|
|
||||||
utiliser quand : c'est une forme d'entraide concrète. Voici ceux que je propose
|
|
||||||
dans un premier temps. Chacun peut contribuer pour enrichir cette boîte à outils
|
|
||||||
commune.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="outils-main">
|
|
||||||
|
|
||||||
<!-- ══════════════ SECTION 1 — Simulateurs métier ══════════════ -->
|
|
||||||
<section class="outils-section outils-section--simulateurs" aria-labelledby="sec-simulateurs">
|
|
||||||
<h2 id="sec-simulateurs" class="outils-section__title">
|
|
||||||
<span aria-hidden="true">🧮</span> Simulateurs métier
|
|
||||||
</h2>
|
|
||||||
<p class="outils-section__subtitle">Créés par AEP — outils de calcul situés.</p>
|
|
||||||
|
|
||||||
<div class="simu-grid">
|
|
||||||
<SimulateurFeature
|
|
||||||
v-for="s in outils?.simulateurs"
|
|
||||||
:key="s.id"
|
|
||||||
:icon="s.icon"
|
|
||||||
:titre="s.titre"
|
|
||||||
:url="s.url"
|
|
||||||
:description="s.description"
|
|
||||||
:cta="s.cta"
|
|
||||||
:tag="s.tag"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Inspirations -->
|
|
||||||
<div v-if="outils?.simulateurs_inspirations?.length" class="simu-inspirations">
|
|
||||||
<p class="simu-inspirations__label">Inspiration externe</p>
|
|
||||||
<div class="outil-cards-grid">
|
|
||||||
<OutilCard
|
|
||||||
v-for="s in outils.simulateurs_inspirations"
|
|
||||||
:key="s.id"
|
|
||||||
:icon="s.icon"
|
|
||||||
:titre="s.titre"
|
|
||||||
:url="s.url"
|
|
||||||
:description="s.description"
|
|
||||||
:tag="s.tag"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ══════════════ SECTION 2 — Open source recommandés ══════════════ -->
|
|
||||||
<section class="outils-section outils-section--opensource" aria-labelledby="sec-opensource">
|
|
||||||
<h2 id="sec-opensource" class="outils-section__title">
|
|
||||||
<span aria-hidden="true">🔧</span> Outils tech open source
|
|
||||||
</h2>
|
|
||||||
<p class="outils-section__subtitle">Quelques recommandations directes. Le cœur de l'onglet, c'est la section FMHY plus bas.</p>
|
|
||||||
|
|
||||||
<div class="outil-cards-grid">
|
|
||||||
<OutilCard
|
|
||||||
v-for="outil in outils?.opensource"
|
|
||||||
:key="outil.id"
|
|
||||||
:icon="outil.icon"
|
|
||||||
:titre="outil.titre"
|
|
||||||
:url="outil.url"
|
|
||||||
:description="outil.description"
|
|
||||||
:tag="outil.tag"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ══════════════ SECTION 3 — Bifurcation ══════════════ -->
|
|
||||||
<section class="outils-section" aria-labelledby="sec-bifurcation">
|
|
||||||
<h2 id="sec-bifurcation" class="outils-section__title">
|
|
||||||
<span aria-hidden="true">🌿</span> Bifurcation post-études d'archi
|
|
||||||
</h2>
|
|
||||||
<p class="outils-section__desc">
|
|
||||||
{{ outils?.bifurcation?.intro }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- 3.1 Vidéos OFQA -->
|
|
||||||
<div class="bifurcation-block">
|
|
||||||
<h3 class="bifurcation-block__title">Série vidéo OFQA / ENSA-PB</h3>
|
|
||||||
<ul class="ofqa-list">
|
|
||||||
<li
|
|
||||||
v-for="ep in outils?.bifurcation?.videos_ofqa"
|
|
||||||
:key="ep.ep"
|
|
||||||
class="ofqa-list__item"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="ep.url ? 'a' : 'span'"
|
|
||||||
v-bind="ep.url ? { href: ep.url, target: '_blank', rel: 'noopener noreferrer' } : {}"
|
|
||||||
class="ofqa-list__link"
|
|
||||||
:class="{ 'ofqa-list__link--disabled': !ep.url }"
|
|
||||||
>
|
|
||||||
<span class="ofqa-list__ep">EP/{{ ep.ep }}</span>
|
|
||||||
<span class="ofqa-list__titre">{{ ep.titre }}</span>
|
|
||||||
<span class="ofqa-list__personnes">— {{ ep.personnes }}</span>
|
|
||||||
<span v-if="ep.note" class="ofqa-list__note">({{ ep.note }})</span>
|
|
||||||
</component>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 3.2 Coalition -->
|
|
||||||
<div v-if="outils?.bifurcation?.coalition_ensa_pb" class="bifurcation-block bifurcation-block--coalition">
|
|
||||||
<h3 class="bifurcation-block__title">{{ outils.bifurcation.coalition_ensa_pb.titre }}</h3>
|
|
||||||
<p class="bifurcation-block__desc">{{ outils.bifurcation.coalition_ensa_pb.description }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 3.3 Ressources externes -->
|
|
||||||
<div v-if="outils?.bifurcation?.ressources_externes?.length" class="bifurcation-block">
|
|
||||||
<h3 class="bifurcation-block__title">Ressources externes</h3>
|
|
||||||
<div class="outil-cards-grid">
|
|
||||||
<OutilCard
|
|
||||||
v-for="r in outils.bifurcation.ressources_externes"
|
|
||||||
:key="r.id"
|
|
||||||
:icon="r.icon"
|
|
||||||
:titre="r.titre"
|
|
||||||
:url="r.url"
|
|
||||||
:description="r.description"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ══════════════ SECTION 4 — FMHY (cœur de la page) ══════════════ -->
|
|
||||||
<section class="outils-section outils-section--fmhy" aria-labelledby="sec-fmhy">
|
|
||||||
<h2 id="sec-fmhy" class="outils-section__title">
|
|
||||||
<span aria-hidden="true">🌳</span> Bibliothèque de ressources libres
|
|
||||||
</h2>
|
|
||||||
<p class="outils-section__desc">
|
|
||||||
Le vrai trésor de l'onglet Outils. FMHY (Free Media Heck Yeah) est la plus grosse
|
|
||||||
base communautaire d'outils, services et ressources libres/gratuits du web. J'en ai
|
|
||||||
curé ~50 entrées pertinentes pour un architecte : IA, lecture, dev, vie privée,
|
|
||||||
formation, médias. Clique sur les branches pour explorer.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="fmhy-tree-wrap">
|
|
||||||
<div v-if="fmhyPending" class="fmhy-loading" aria-label="Chargement…">
|
|
||||||
<span>Chargement…</span>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="fmhyError" class="fmhy-error">
|
|
||||||
Impossible de charger les ressources. <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer">Explorer fmhy.net →</a>
|
|
||||||
</div>
|
|
||||||
<TreeASCII v-else-if="fmhyData" :tree="fmhyData" :depth="0" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fmhy-footer">
|
|
||||||
<a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer" class="fmhy-footer__link">
|
|
||||||
Explorer tout l'arbre → fmhy.net
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ══════════════ SECTION 5 — Placeholder login ══════════════ -->
|
|
||||||
<section class="outils-section outils-section--placeholder" aria-labelledby="sec-logiciels">
|
|
||||||
<div class="placeholder-block">
|
|
||||||
<span class="placeholder-block__badge">Bientôt — nécessite un compte</span>
|
|
||||||
<h2 id="sec-logiciels" class="placeholder-block__title">{{ outils?.section_5_placeholder?.titre }}</h2>
|
|
||||||
<p class="placeholder-block__desc">{{ outils?.section_5_placeholder?.description }}</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ══════════════ FOOTER CONTRIBUTION ══════════════ -->
|
|
||||||
<footer class="outils-footer">
|
|
||||||
<p class="outils-footer__text">
|
|
||||||
{{ outils?.footer_contribution }}
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
// Chargement des données
|
|
||||||
const { data: outils } = await useFetch('/data/outils.json')
|
|
||||||
const { data: fmhyData, pending: fmhyPending, error: fmhyError } = await useFetch('/data/fmhy-curated.json')
|
|
||||||
|
|
||||||
useSeoMeta({
|
|
||||||
title: 'Outils — AEP',
|
|
||||||
description: 'Outils partagés entre architectes : simulateurs, open source, ressources libres FMHY, bifurcation post-études.'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* ── Layout global ──────────────────────────────────────────── */
|
|
||||||
.outils-page {
|
|
||||||
max-width: 860px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem 1.5rem 4rem;
|
|
||||||
color: var(--nav-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Header ─────────────────────────────────────────────────── */
|
|
||||||
.outils-header {
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__icon-wrap {
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__icon {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__title {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
color: var(--nav-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__intro {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
line-height: 1.65;
|
|
||||||
margin: 0;
|
|
||||||
max-width: 70ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Sections ───────────────────────────────────────────────── */
|
|
||||||
.outils-main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-section__title {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
color: var(--nav-text);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
border-bottom: 1.5px solid var(--nav-bg-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-section__subtitle {
|
|
||||||
font-size: 0.82rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: -0.5rem 0 0;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-section__desc {
|
|
||||||
font-size: 0.88rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
line-height: 1.65;
|
|
||||||
margin: 0;
|
|
||||||
max-width: 72ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Simulateurs ────────────────────────────────────────────── */
|
|
||||||
.outils-section--simulateurs {
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-inspirations {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.simu-inspirations__label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Cards grid ─────────────────────────────────────────────── */
|
|
||||||
.outil-cards-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Section FMHY ───────────────────────────────────────────── */
|
|
||||||
.outils-section--fmhy {
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 1.75rem;
|
|
||||||
gap: 1.25rem;
|
|
||||||
margin: 0 -0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-tree-wrap {
|
|
||||||
background: var(--nav-surface);
|
|
||||||
border: 1px solid var(--nav-bg-alt);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 1.25rem 1.5rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-loading,
|
|
||||||
.fmhy-error {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-error a {
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-footer {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-footer__link {
|
|
||||||
font-size: 0.82rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-footer__link:hover {
|
|
||||||
opacity: 0.75;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Bifurcation ────────────────────────────────────────────── */
|
|
||||||
.bifurcation-block {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bifurcation-block__title {
|
|
||||||
font-size: 0.92rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-text);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bifurcation-block__desc {
|
|
||||||
font-size: 0.84rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bifurcation-block--coalition {
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0.875rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Liste OFQA ─────────────────────────────────────────────── */
|
|
||||||
.ofqa-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__item {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: baseline;
|
|
||||||
gap: 0.4rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 3px 6px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 0.84rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--nav-text);
|
|
||||||
transition: background 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__link:not(.ofqa-list__link--disabled):hover {
|
|
||||||
background: var(--nav-bg-alt);
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__link--disabled {
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__ep {
|
|
||||||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
flex-shrink: 0;
|
|
||||||
min-width: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__titre {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__personnes {
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
font-size: 0.82rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ofqa-list__note {
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
font-size: 0.78rem;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Section 5 placeholder ──────────────────────────────────── */
|
|
||||||
.outils-section--placeholder {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-block {
|
|
||||||
border: 1.5px dashed var(--nav-bg-alt);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1.25rem 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-block__badge {
|
|
||||||
font-size: 0.68rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-block__title {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--nav-text);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder-block__desc {
|
|
||||||
font-size: 0.84rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Footer ─────────────────────────────────────────────────── */
|
|
||||||
.outils-footer {
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-top: 1px solid var(--nav-bg-alt);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-footer__text {
|
|
||||||
font-size: 0.84rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Mobile ─────────────────────────────────────────────────── */
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.outils-page {
|
|
||||||
padding: 1.25rem 1rem 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__inner {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-header__title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outil-cards-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outils-section--fmhy {
|
|
||||||
padding: 1.25rem 1rem;
|
|
||||||
margin: 0 -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fmhy-tree-wrap {
|
|
||||||
padding: 0.875rem 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="proposer-page">
|
|
||||||
<div class="proposer-inner">
|
|
||||||
<NuxtLink to="/" class="back-link">← Retour à la carte</NuxtLink>
|
|
||||||
|
|
||||||
<div class="proposer-header">
|
|
||||||
<h1>Proposer une ressource</h1>
|
|
||||||
<p class="proposer-subtitle">
|
|
||||||
Tu connais quelque chose d'utile qui n'est pas encore référencé sur AEP ?
|
|
||||||
Choisis la catégorie ci-dessous et soumets-le — on valide sous 7 jours.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="success" class="success-block" role="status" aria-live="polite">
|
|
||||||
<div class="success-icon">✓</div>
|
|
||||||
<h2>Merci !</h2>
|
|
||||||
<p>Ta proposition est en attente de modération.</p>
|
|
||||||
<p class="success-detail">Jules valide manuellement chaque entrée avant publication.</p>
|
|
||||||
<button type="button" class="btn-secondary" @click="reset">Proposer autre chose</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<div class="tabs-bar">
|
|
||||||
<button
|
|
||||||
v-for="tab in TABS"
|
|
||||||
:key="tab.id"
|
|
||||||
type="button"
|
|
||||||
class="tab-btn"
|
|
||||||
:class="{ 'tab-btn--active': activeTab === tab.id }"
|
|
||||||
@click="activeTab = tab.id"
|
|
||||||
>{{ tab.label }}</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-content">
|
|
||||||
<FormEcosysteme v-if="activeTab === 'ecosysteme'" @success="onSuccess" />
|
|
||||||
<FormReseau v-else-if="activeTab === 'reseau'" @success="onSuccess" />
|
|
||||||
<FormJobs v-else-if="activeTab === 'jobs'" @success="onSuccess" />
|
|
||||||
<FormOutils v-else-if="activeTab === 'outils'" @success="onSuccess" />
|
|
||||||
<FormReferences v-else-if="activeTab === 'references'" @success="onSuccess" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
const TABS = [
|
|
||||||
{ id: 'ecosysteme', label: 'Écosystème / Entraide' },
|
|
||||||
{ id: 'reseau', label: 'Réseau AEP' },
|
|
||||||
{ id: 'jobs', label: 'Jobs' },
|
|
||||||
{ id: 'outils', label: 'Outils' },
|
|
||||||
{ id: 'references', label: 'Références RAG' },
|
|
||||||
] as const
|
|
||||||
|
|
||||||
const activeTab = ref<string>('ecosysteme')
|
|
||||||
const success = ref(false)
|
|
||||||
|
|
||||||
function onSuccess() {
|
|
||||||
success.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
success.value = false
|
|
||||||
activeTab.value = 'ecosysteme'
|
|
||||||
}
|
|
||||||
|
|
||||||
useHead({ title: 'Proposer une ressource — AEP' })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.proposer-page {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: var(--nav-bg);
|
|
||||||
padding: 1.5rem 1rem 4rem;
|
|
||||||
}
|
|
||||||
.proposer-inner {
|
|
||||||
max-width: 680px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.back-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--nav-primary-solid);
|
|
||||||
opacity: 0.7;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
.back-link:hover { opacity: 1; }
|
|
||||||
.proposer-header { margin-bottom: 1.5rem; }
|
|
||||||
.proposer-header h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--nav-text);
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
}
|
|
||||||
.proposer-subtitle {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.25rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border-bottom: 1px solid var(--nav-bg-alt);
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
.tab-btn {
|
|
||||||
padding: 0.5rem 0.9rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: color 0.15s, border-color 0.15s;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.tab-btn:hover { color: var(--nav-text); }
|
|
||||||
.tab-btn--active {
|
|
||||||
color: var(--nav-text);
|
|
||||||
border-bottom-color: var(--nav-primary-solid);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.tab-content {
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-block {
|
|
||||||
background: var(--nav-surface);
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.15);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.success-icon {
|
|
||||||
width: 48px; height: 48px;
|
|
||||||
background: rgba(26, 34, 56, 0.1);
|
|
||||||
color: var(--nav-text);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 auto 1rem;
|
|
||||||
}
|
|
||||||
.success-block h2 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--nav-text);
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
}
|
|
||||||
.success-block p {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.success-detail { font-size: 0.85rem !important; }
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 0.75rem 1.25rem;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--nav-text-muted);
|
|
||||||
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
transition: border-color 0.15s, color 0.15s;
|
|
||||||
}
|
|
||||||
.btn-secondary:hover {
|
|
||||||
border-color: var(--nav-primary-solid);
|
|
||||||
color: var(--nav-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.proposer-page { padding: 1rem 0.75rem 3rem; }
|
|
||||||
.tabs-bar { overflow-x: auto; flex-wrap: nowrap; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,3 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col items-center justify-center h-full gap-6" style="background: var(--nav-bg);">
|
||||||
|
<div class="text-center max-w-md px-6">
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5"
|
||||||
|
style="background: var(--nav-bg-alt);"
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted);">
|
||||||
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||||
|
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
||||||
|
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-2xl font-bold mb-3" style="color: var(--nav-text);">RAG — Retrieval Augmented Generation</h1>
|
||||||
|
<p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text-muted);">
|
||||||
|
Une base de connaissances interrogeable par IA — textes, rapports, manifestes et ressources documentaires sur l'architecture d'écologie politique.
|
||||||
|
</p>
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-widest mb-6" style="color: var(--nav-text-muted); opacity: 0.6;">
|
||||||
|
Bientôt disponible
|
||||||
|
</p>
|
||||||
|
<NuxtLink
|
||||||
|
to="/"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:opacity-80"
|
||||||
|
style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
|
||||||
|
>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
||||||
|
<line x1="19" y1="12" x2="5" y2="12"/>
|
||||||
|
<polyline points="12 19 5 12 12 5"/>
|
||||||
|
</svg>
|
||||||
|
Retour à l'écosystème
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
navigateTo('/media', { redirectCode: 301 })
|
useHead({ title: 'RAG — AEP (bientôt disponible)' })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Binary file not shown.
@@ -1,102 +1,99 @@
|
|||||||
{
|
{
|
||||||
"name": "FMHY — Sélection Architecte",
|
"tree": {
|
||||||
"description": "~50 ressources curées depuis FMHY (Free Media Heck Yeah) — pertinentes pour un architecte, un praticien de la transition, un créateur solo.",
|
"name": "FMHY — Sélection AEP",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"name": "IA & Outils cognitifs",
|
"name": "IA & LLM",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "ChatGPT (OpenAI)", "url": "https://chat.openai.com/", "desc": "LLM généraliste, référence." },
|
{ "name": "DeepSeek", "url": "https://chat.deepseek.com/", "desc": "DeepSeek V3.2 — modèle libre puissant, sans limite, compte requis" },
|
||||||
{ "name": "Claude (Anthropic)", "url": "https://claude.ai/", "desc": "Excellent pour rédaction longue et analyse de documents." },
|
{ "name": "Mistral Chat", "url": "https://chat.mistral.ai/", "desc": "Mistral Large 3, natif français, sans limite" },
|
||||||
{ "name": "Mistral Le Chat", "url": "https://chat.mistral.ai/", "desc": "LLM français, souverain, gratuit." },
|
{ "name": "Google AI Studio", "url": "https://aistudio.google.com/app/prompts/new_chat", "desc": "Gemini 3.1 Pro + API gratuite, idéal pour expérimenter" },
|
||||||
{ "name": "Perplexity", "url": "https://www.perplexity.ai/", "desc": "Moteur de recherche IA avec sources citées." },
|
{ "name": "Kimi", "url": "https://www.kimi.com/", "desc": "Kimi K2.6 Thinking — raisonnement avancé, login requis" },
|
||||||
{ "name": "Hugging Face", "url": "https://huggingface.co/", "desc": "Hub de modèles open source. Indispensable." },
|
{ "name": "NVIDIA NIM", "url": "https://build.nvidia.com/models", "desc": "Multi-modèles libres (Kimi, Qwen, GLM) sans compte" },
|
||||||
{ "name": "LM Studio", "url": "https://lmstudio.ai/", "desc": "Faire tourner des LLM localement, sans cloud." }
|
{ "name": "NotebookLM", "url": "https://notebooklm.google.com/", "desc": "Chatbot sur tes propres documents, prise de notes augmentée" },
|
||||||
|
{ "name": "Ollama", "url": "https://ollama.com/", "desc": "Héberger des modèles IA localement, toutes plateformes" },
|
||||||
|
{ "name": "Open WebUI", "url": "https://openwebui.com/", "desc": "Interface web pour LLMs locaux (Ollama), self-hostable" },
|
||||||
|
{ "name": "LM Studio", "url": "https://lmstudio.ai/", "desc": "Appli desktop pour modèles IA locaux, sans cloud" },
|
||||||
|
{ "name": "Perplexity", "url": "https://www.perplexity.ai/", "desc": "Moteur de recherche IA avec sources citées" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Lecture & Documentation",
|
"name": "Recherche & articles",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "Anna's Archive", "url": "https://annas-archive.org/", "desc": "Bibliothèque shadow la plus complète du web. Livres, articles, thèses." },
|
{ "name": "SciSpace", "url": "https://scispace.com/", "desc": "Chatbot sur publications scientifiques, explications simplifiées" },
|
||||||
{ "name": "Sci-Hub", "url": "https://sci-hub.se/", "desc": "Accès libre aux articles scientifiques payants." },
|
{ "name": "Alphaxiv", "url": "https://www.alphaxiv.org/", "desc": "Chatbot sur les papiers de recherche arxiv" },
|
||||||
{ "name": "Library Genesis", "url": "https://libgen.is/", "desc": "Livres techniques et académiques en PDF." },
|
{ "name": "Unpaywall", "url": "https://unpaywall.org/", "desc": "Accès libre aux articles académiques — extension navigateur" },
|
||||||
{ "name": "Z-Library", "url": "https://z-lib.id/", "desc": "Bibliothèque numérique massive, interface soignée." },
|
{ "name": "Bypass Paywalls Clean", "url": "https://gitflic.ru/project/magnolia1234/bpc_uploads", "desc": "Extension pour bypasser les paywalls d'articles de presse" },
|
||||||
{ "name": "OpenLibrary (Internet Archive)", "url": "https://openlibrary.org/", "desc": "Prêt numérique gratuit, millions de livres." },
|
{ "name": "Freedium", "url": "https://freedium-mirror.cfd/", "desc": "Accéder aux articles Medium sans abonnement" }
|
||||||
{ "name": "Calibre", "url": "https://calibre-ebook.com/", "desc": "Gestion de bibliothèque numérique, convertisseur de formats." }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Dessin & Modélisation",
|
"name": "Livres & archives",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "FreeCAD", "url": "https://www.freecad.org/", "desc": "Modélisation 3D open source, paramétrique. Alternative à Rhino pour usage simple." },
|
{ "name": "Anna's Archive", "url": "https://annas-archive.gl/", "desc": "Meta-search des bibliothèques libres (Z-Lib, LibGen, Sci-Hub)" },
|
||||||
{ "name": "Blender", "url": "https://www.blender.org/", "desc": "3D, rendu, animation. La référence open source." },
|
{ "name": "Z-Library", "url": "https://z-lib.gd/", "desc": "Bibliothèque de livres/articles, téléchargement direct" },
|
||||||
{ "name": "Inkscape", "url": "https://inkscape.org/", "desc": "Dessin vectoriel. Alternative à Illustrator." },
|
{ "name": "Library Genesis", "url": "https://libgen.li/", "desc": "Livres techniques, universitaires, comics en accès libre" },
|
||||||
{ "name": "GIMP", "url": "https://www.gimp.org/", "desc": "Retouche photo. Alternative à Photoshop." },
|
{ "name": "Internet Archive", "url": "https://archive.org/details/texts", "desc": "Livres, magazines, archives historiques numérisés" },
|
||||||
{ "name": "Krita", "url": "https://krita.org/", "desc": "Dessin digital et croquis. Excellent pour les concepts." },
|
{ "name": "Project Gutenberg", "url": "https://www.gutenberg.org/", "desc": "Classiques du domaine public, 70k+ livres" },
|
||||||
{ "name": "LibreOffice Draw", "url": "https://www.libreoffice.org/", "desc": "Diagrammes, plans rapides, sans suite Adobe." }
|
{ "name": "Open Library", "url": "https://openlibrary.org/", "desc": "Bibliothèque libre, emprunt numérique de livres" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Productivité & Texte",
|
"name": "Cours & formation",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "Obsidian", "url": "https://obsidian.md/", "desc": "PKM / prise de notes en Markdown. Gratuit pour usage personnel." },
|
{ "name": "MIT OpenCourseWare", "url": "https://ocw.mit.edu/", "desc": "Cours MIT en accès libre — toutes disciplines, niveau universitaire" },
|
||||||
{ "name": "Logseq", "url": "https://logseq.com/", "desc": "PKM open source, graphe de connaissances." },
|
{ "name": "Khan Academy", "url": "https://www.khanacademy.org/", "desc": "Cours gratuits et interactifs, toutes matières, du lycée au supérieur" },
|
||||||
{ "name": "Zotero", "url": "https://www.zotero.org/", "desc": "Gestionnaire de références bibliographiques. Indispensable pour la recherche." },
|
{ "name": "edX", "url": "https://www.edx.org/", "desc": "MOOCs certifiants des meilleures universités mondiales" },
|
||||||
{ "name": "Marktext", "url": "https://github.com/marktext/marktext", "desc": "Éditeur Markdown WYSIWYG, open source." },
|
{ "name": "Learn Anything", "url": "https://learn-anything.xyz/", "desc": "Moteur de recherche de parcours d'apprentissage structurés" },
|
||||||
{ "name": "Typst", "url": "https://typst.app/", "desc": "Alternative moderne à LaTeX pour la mise en page de documents." },
|
{ "name": "OpenCulture", "url": "https://www.openculture.com/", "desc": "Cours, films, livres audio en accès libre, liens curatés" },
|
||||||
{ "name": "Pandoc", "url": "https://pandoc.org/", "desc": "Conversion universelle entre formats de documents (MD, DOCX, PDF, HTML...)." }
|
{ "name": "Appropedia", "url": "https://www.appropedia.org/", "desc": "Wiki de la durabilité, technologies appropriées, habitat écologique" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Dev & Infrastructure",
|
"name": "Outils dev & infra",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "VS Code", "url": "https://code.visualstudio.com/", "desc": "Éditeur de code. La référence, gratuit." },
|
{ "name": "Free for Developers", "url": "https://free-for.dev/", "desc": "Index exhaustif des outils gratuits pour développeurs" },
|
||||||
{ "name": "Coolify", "url": "https://coolify.io/", "desc": "Self-hosting simplifié. Alternative à Heroku/Vercel sur son propre VPS." },
|
{ "name": "DevDocs", "url": "https://devdocs.io/", "desc": "Documentation développeur unifiée, consultable hors ligne" },
|
||||||
{ "name": "Hetzner Cloud", "url": "https://www.hetzner.com/cloud/", "desc": "VPS européen, tarifs très bas, data centers Allemagne." },
|
{ "name": "N8N", "url": "https://n8n.io/", "desc": "Automatisation de workflows open source, self-hostable" },
|
||||||
{ "name": "Caddy", "url": "https://caddyserver.com/", "desc": "Serveur web avec HTTPS automatique. Plus simple que Nginx." },
|
{ "name": "NocoDB", "url": "https://github.com/nocodb/nocodb", "desc": "Base de données no-code open source, alternative Airtable" },
|
||||||
{ "name": "n8n", "url": "https://n8n.io/", "desc": "Automatisation open source (comme Zapier mais self-hostable)." },
|
{ "name": "Crontab Guru", "url": "https://crontab.guru/", "desc": "Éditeur de tâches cron avec explication lisible" },
|
||||||
{ "name": "Gitea", "url": "https://gitea.io/", "desc": "Hébergement Git self-hosted. Alternative à GitHub." }
|
{ "name": "Dokploy", "url": "https://github.com/dokploy/dokploy", "desc": "Déploiement d'apps auto-hébergé, alternative Coolify/Heroku" },
|
||||||
|
{ "name": "Open Source Guides", "url": "https://opensource.guide/", "desc": "Guides pour contribuer et gérer des projets open source" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Vie privée & Sécurité",
|
"name": "Texte & documents",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "Bitwarden", "url": "https://bitwarden.com/", "desc": "Gestionnaire de mots de passe open source. Self-hostable." },
|
{ "name": "DeepL", "url": "https://www.deepl.com/translator", "desc": "Traduction IA, meilleure qualité disponible en FR/EN/DE" },
|
||||||
{ "name": "ProtonMail", "url": "https://proton.me/mail", "desc": "Email chiffré, hébergement Suisse." },
|
{ "name": "Paperless-ngx", "url": "https://docs.paperless-ngx.com/", "desc": "Gestion documentaire self-hosted avec OCR et indexation" },
|
||||||
{ "name": "Signal", "url": "https://signal.org/", "desc": "Messagerie chiffrée E2E. La référence." },
|
{ "name": "Whisper (OpenAI)", "url": "https://github.com/openai/whisper", "desc": "Transcription audio open source, multi-langues, qualité professionnelle" },
|
||||||
{ "name": "uBlock Origin", "url": "https://ublockorigin.com/", "desc": "Bloqueur de publicités et trackers, le plus efficace." },
|
{ "name": "GitHub Gists", "url": "https://gist.github.com/", "desc": "Partage de snippets code / notes, versionné, dans l'écosystème git" },
|
||||||
{ "name": "Mullvad VPN", "url": "https://mullvad.net/", "desc": "VPN respectueux de la vie privée, sans compte email requis." },
|
{ "name": "PrivateBin", "url": "https://privatebin.net/", "desc": "Pastebin chiffré zero-knowledge, self-hostable" },
|
||||||
{ "name": "Privacy Guides", "url": "https://www.privacyguides.org/", "desc": "Recommandations d'outils respectueux de la vie privée, par thème." }
|
{ "name": "LibreTranslate", "url": "https://libretranslate.com/", "desc": "Traducteur FOSS, self-hostable, sans tracking" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Formation & Apprentissage",
|
"name": "Vie privée & sécurité",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "MIT OpenCourseWare", "url": "https://ocw.mit.edu/", "desc": "Cours du MIT en libre accès, toutes disciplines." },
|
{ "name": "uBlock Origin", "url": "https://github.com/gorhill/uBlock", "desc": "Bloqueur de publicités et trackers — le plus efficace du marché" },
|
||||||
{ "name": "Khan Academy", "url": "https://www.khanacademy.org/", "desc": "Maths, sciences, programmation — gratuit, pédagogie excellente." },
|
{ "name": "Bitwarden", "url": "https://bitwarden.com/", "desc": "Gestionnaire de mots de passe open source, cloud ou self-hosted" },
|
||||||
{ "name": "YouTube (canaux techniques)", "url": "https://www.youtube.com/", "desc": "Channals : The Coding Train, Fireship, 3Blue1Brown, etc." },
|
{ "name": "KeePassXC", "url": "https://keepassxc.org/", "desc": "Gestionnaire de mots de passe local, base chiffrée, sans cloud" },
|
||||||
{ "name": "freeCodeCamp", "url": "https://www.freecodecamp.org/", "desc": "Apprendre le développement web de zéro, gratuit et certifiant." },
|
{ "name": "Pi-Hole", "url": "https://pi-hole.net/", "desc": "Bloqueur de pub DNS pour tout le réseau domestique, self-hosted" },
|
||||||
{ "name": "Coursera (audit gratuit)", "url": "https://www.coursera.org/", "desc": "Cours universitaires, audit gratuit disponible sur la plupart." }
|
{ "name": "SponsorBlock", "url": "https://sponsor.ajay.app/", "desc": "Extension pour skipper les segments sponsorisés sur YouTube" },
|
||||||
|
{ "name": "AdGuard Home", "url": "https://adguard.com/en/adguard-home/overview.html", "desc": "Alternative Pi-Hole, DNS adblocking self-hosted pour tout le réseau" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Médias & Audio",
|
"name": "Documentaires & médias",
|
||||||
"children": [
|
"children": [
|
||||||
{ "name": "Audacity", "url": "https://www.audacityteam.org/", "desc": "Enregistrement et édition audio. Référence open source." },
|
{ "name": "Films For Action", "url": "https://www.filmsforaction.org/", "desc": "Films documentaires engagés, alternatives sociales et écologiques" },
|
||||||
{ "name": "yt-dlp", "url": "https://github.com/yt-dlp/yt-dlp", "desc": "Télécharger des vidéos/audio depuis YouTube et 1000+ sites." },
|
{ "name": "ARTE (replay)", "url": "https://www.arte.tv/", "desc": "Documentaires et programmes culturels FR/DE, replay gratuit" },
|
||||||
{ "name": "VLC", "url": "https://www.videolan.org/vlc/", "desc": "Lecteur multimédia universel." },
|
{ "name": "Documentary+", "url": "https://www.docplus.com/", "desc": "Plateforme de documentaires en streaming gratuit" },
|
||||||
{ "name": "Kdenlive", "url": "https://kdenlive.org/", "desc": "Montage vidéo open source, non linéaire." },
|
{ "name": "TED Talks", "url": "https://www.ted.com/", "desc": "Conférences inspirantes sur science, société, design, architecture" }
|
||||||
{ "name": "OBS Studio", "url": "https://obsproject.com/", "desc": "Enregistrement et streaming vidéo. La référence gratuite." }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Divers Utiles",
|
|
||||||
"children": [
|
|
||||||
{ "name": "Nextcloud", "url": "https://nextcloud.com/", "desc": "Cloud personnel self-hosted. Alternative à Google Drive/Dropbox." },
|
|
||||||
{ "name": "Joplin", "url": "https://joplinapp.org/", "desc": "Notes chiffrées, sync Nextcloud, open source." },
|
|
||||||
{ "name": "draw.io / diagrams.net", "url": "https://app.diagrams.net/", "desc": "Diagrammes et schémas, gratuit, pas de compte requis." },
|
|
||||||
{ "name": "Excalidraw", "url": "https://excalidraw.com/", "desc": "Tableau blanc collaboratif, style hand-drawn, open source." },
|
|
||||||
{ "name": "Fmhy.net (complet)", "url": "https://fmhy.net/", "desc": "L'arbre complet. Des milliers de ressources organisées par thème." }
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"source": "fmhy.net (sélection AEP 2026-05-22)",
|
||||||
|
"total_entries": 50
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,90 +0,0 @@
|
|||||||
{
|
|
||||||
"simulateurs": [
|
|
||||||
{
|
|
||||||
"id": "autonomie",
|
|
||||||
"icon": "🟢",
|
|
||||||
"titre": "Simulateur Autonomie",
|
|
||||||
"url": "https://calculs.trans-former.fr/autonomie/",
|
|
||||||
"description": "Évaluer le degré d'autonomie d'une famille à un site donné selon les ressources locales (eau, énergie, alimentation).",
|
|
||||||
"cta": "Lancer le simulateur →",
|
|
||||||
"tag": "outil-aep"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"simulateurs_inspirations": [
|
|
||||||
{
|
|
||||||
"id": "florquin-prix-m2",
|
|
||||||
"icon": "💡",
|
|
||||||
"titre": "Estimation prix au m² — Florquin Studio",
|
|
||||||
"url": "https://offre.florquinstudio.com/",
|
|
||||||
"description": "Une agence parisienne qui a construit un système d'estimation au m² assez fin. Pas dans nos outils, mais inspirant pour qui veut industrialiser son chiffrage.",
|
|
||||||
"tag": "inspiration-externe"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"opensource": [
|
|
||||||
{
|
|
||||||
"id": "dictee-universelle-groq",
|
|
||||||
"icon": "🎤",
|
|
||||||
"titre": "Dictée universelle Groq",
|
|
||||||
"url": "https://github.com/Jayjay-nene/dictee-universelle-groq",
|
|
||||||
"description": "Appuie sur une touche, parle, le texte apparaît au curseur avec ponctuation et majuscules auto. Transcription Whisper Groq < 1s. Marche dans toutes les applis Windows. Outil par Jayjay-nene.",
|
|
||||||
"tag": "recommande"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "atis-voice",
|
|
||||||
"icon": "🎙",
|
|
||||||
"titre": "Atis Voice (text-to-speech)",
|
|
||||||
"url": null,
|
|
||||||
"description": "Pipeline TTS pour transformer un texte en audio.",
|
|
||||||
"tag": "disponible"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "install-vps",
|
|
||||||
"icon": "🖥",
|
|
||||||
"titre": "Install VPS open source",
|
|
||||||
"url": null,
|
|
||||||
"description": "Setup pas-à-pas pour monter son propre VPS (Hetzner, Coolify, Caddy, Postgres…) en mode reproductible.",
|
|
||||||
"tag": "a-venir"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "skills-claude-code",
|
|
||||||
"icon": "⚙",
|
|
||||||
"titre": "Skills Claude Code",
|
|
||||||
"url": null,
|
|
||||||
"description": "Skills custom pour booster sa pratique avec un agent IA.",
|
|
||||||
"tag": "a-venir"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"bifurcation": {
|
|
||||||
"intro": "Beaucoup de jeunes diplômés en archi cherchent des chemins alternatifs. Cette section rassemble des témoignages, expériences, et ressources sur ce que c'est que de bifurquer.",
|
|
||||||
"videos_ofqa": [
|
|
||||||
{ "ep": "01", "titre": "Architectes indépendants", "personnes": "Jules Nény & Imane Fatmi", "url": "https://youtu.be/aMreB5KdNhY" },
|
|
||||||
{ "ep": "02", "titre": "Artiste & Maçon", "personnes": "Romane Dutour & Maël Canal", "url": "https://youtu.be/9gpjokx2ndI" },
|
|
||||||
{ "ep": "03", "titre": "Social & BTP", "personnes": "Célia Berdy & Esilda Perrot", "url": null, "note": "vidéo perdue, doc PDF seulement" },
|
|
||||||
{ "ep": "04", "titre": "Menuisier & Paysagiste", "personnes": "Adel Mohamedi & Julie Bowie", "url": "https://youtu.be/yKaRQhA3Z6g" },
|
|
||||||
{ "ep": "05", "titre": "Éco-construction", "personnes": "Edouard Vermès", "url": "https://youtu.be/97bDg1BjeuQ" },
|
|
||||||
{ "ep": "06", "titre": "Musicien & Urbaniste", "personnes": "Ruben Madar & Antoine Troccaz", "url": "https://drive.google.com/drive/folders/14g8YBn5bZAy8aIkHzQlOTrTtnWOaqRO3" },
|
|
||||||
{ "ep": "07", "titre": "AMO & Réemploi", "personnes": "Domitille Chaigne & Clémence Bondon", "url": "https://drive.google.com/file/d/1Q9Za81CElszmMn5n8dBsG0pJkiWmB32c/view" },
|
|
||||||
{ "ep": "08", "titre": "Gouvernance école", "personnes": "Solenn Guével", "url": "https://drive.google.com/drive/folders/1UaLsSyQcJydkXyV71klrY1tv9KgAh-mG" },
|
|
||||||
{ "ep": "bonus", "titre": "PFE — invitation à faire collectif", "personnes": "Jules Nény & Imane Fatmi", "url": "https://youtu.be/4qTEIC2Lmqw" }
|
|
||||||
],
|
|
||||||
"coalition_ensa_pb": {
|
|
||||||
"titre": "Coalition inter-asso ENSA-PB — victoire salle des enseignants",
|
|
||||||
"description": "Une coalition d'associations étudiantes a obtenu l'usage de la salle des enseignants pour des temps de travail collectif."
|
|
||||||
},
|
|
||||||
"ressources_externes": [
|
|
||||||
{
|
|
||||||
"id": "drop-the-kutch",
|
|
||||||
"icon": "🎧",
|
|
||||||
"titre": "Podcast Drop the Kutch — Sâm Afchar",
|
|
||||||
"url": "https://podcasts-francais.fr/podcast/drop-the-kutsch",
|
|
||||||
"description": "Témoignages de bifurcations post études d'archi. Super taf."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"section_5_placeholder": {
|
|
||||||
"titre": "[V2 — Login] Logiciels pro",
|
|
||||||
"description": "Logiciels lourds (Adobe, AutoCAD…) — accès mutualisé. Disponible après création de compte AEP.",
|
|
||||||
"status": "bientot-login"
|
|
||||||
},
|
|
||||||
"footer_contribution": "Tu utilises un outil qui mérite d'être ici ? Écris-moi : contact@trans-former.fr"
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
# Icons Credits
|
|
||||||
|
|
||||||
## outils-wrench.svg
|
|
||||||
|
|
||||||
**Source :** Heroicons — `wrench-screwdriver` icon
|
|
||||||
**Licence :** MIT
|
|
||||||
**URL :** https://heroicons.com/
|
|
||||||
**Note :** Fallback Heroicons utilisé car l'API Noun Project a retourné 403 Forbidden au moment du build (2026-05-22). L'icône `wrench-screwdriver` de Heroicons (MIT) est une clé à molette + tournevis, style line art minimaliste, compatible avec l'identité visuelle AEP.
|
|
||||||
|
|
||||||
Si tu veux substituer par une icône Noun Project, utilise l'endpoint :
|
|
||||||
`GET https://api.thenounproject.com/v2/icon?query=wrench&limit=20`
|
|
||||||
avec les credentials OAuth 1.0a stockées dans `_System/API-credentials.md`.
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l5.654-4.654m5.598-2.337 3.07-3.293a2.25 2.25 0 0 0-3.182-3.182l-3.293 3.07M6.75 12.75l-2.25.75.75-2.25 2.25-.75-.75 2.25Z" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 493 B |
@@ -1,162 +0,0 @@
|
|||||||
/**
|
|
||||||
* POST /api/chatbot-pensees
|
|
||||||
* Chatbot RAG Pensées Écologiques — corpus FRACAS Bonpote
|
|
||||||
* Appelle LightRAG PE (localhost:9621) avec contexte auteur optionnel.
|
|
||||||
*/
|
|
||||||
import { readFileSync } from 'node:fs'
|
|
||||||
import { join } from 'node:path'
|
|
||||||
import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
|
|
||||||
|
|
||||||
const SYSTEM_PREFACE_PENSEES = `Tu es un agent du RAG Pensées Écologiques, infrastructure militante du collectif trans-former.fr.
|
|
||||||
Tu réponds en t'appuyant STRICTEMENT sur le corpus ingéré (auteurs FRACAS Bonpote : écosocialisme, éco-anarchisme, écoféminismes, écologies décoloniales, technocritique, pensées du vivant, décroissance...).
|
|
||||||
|
|
||||||
Règles :
|
|
||||||
- Cite les sources (auteur, livre) à chaque assertion importante.
|
|
||||||
- Si la question dépasse le corpus, dis-le clairement. Pas d'hallucination.
|
|
||||||
- Ton politique direct, pas de neutralité fade.
|
|
||||||
- Réponse en français, dense, sans délayage.
|
|
||||||
- Distingue les positions selon les écoles quand elles divergent.`
|
|
||||||
|
|
||||||
const SYSTEM_PREFACE_PROJETS = `Tu es un agent du RAG Projets de Jules Nény (architecte, collectif trans-former.fr).
|
|
||||||
Tu réponds STRICTEMENT à partir des documents projet (fichiers butte-pinson__*.md et autres projets archi de Jules).
|
|
||||||
N'utilise PAS le corpus FRACAS Pensées Écologiques pour répondre, sauf si l'usager te le demande explicitement.
|
|
||||||
|
|
||||||
Règles :
|
|
||||||
- Cite les sources (nom de projet, document) à chaque assertion importante.
|
|
||||||
- Si la question dépasse le corpus projet, dis-le clairement. Pas d'hallucination.
|
|
||||||
- Ton praticien réflexif : 1ère personne quand pertinent, narration située.
|
|
||||||
- Réponse en français, dense, sans délayage.`
|
|
||||||
|
|
||||||
const SYSTEM_PREFACE_BOTH = `Tu es un agent du RAG croisé Pensées x Projets de Jules Nény (architecte militant, collectif trans-former.fr).
|
|
||||||
CENTRE TA RÉPONSE sur les documents PROJETS (fichiers butte-pinson__*.md et autres projets archi).
|
|
||||||
Mobilise le corpus FRACAS Pensées (autres fichiers) UNIQUEMENT pour éclairer théoriquement les partis pris des projets, jamais l'inverse.
|
|
||||||
|
|
||||||
Pondération attendue : ~70% ancrage projet concret, ~30% éclairage théorique FRACAS.
|
|
||||||
|
|
||||||
Règles :
|
|
||||||
- Cite les sources (auteur ou nom de projet, document) à chaque assertion.
|
|
||||||
- Si un thème n'est pas couvert par les projets, dis-le clairement avant d'éventuellement étendre au corpus Pensées.
|
|
||||||
- Pas d'hallucination, pas d'extrapolation hors corpus.
|
|
||||||
- Ton praticien militant : direct, pas neutre, ancré dans la pratique architecturale.
|
|
||||||
- Réponse en français, dense, sans délayage.`
|
|
||||||
|
|
||||||
function buildPrefaceAuteur(nomAuteur: string, slug: string): string {
|
|
||||||
return `Tu réponds EXCLUSIVEMENT depuis les livres de ${nomAuteur} présents dans le RAG (fichiers commençant par "${slug}__").
|
|
||||||
Si la question sort du périmètre de cet auteur, indique-le et propose de l'aborder sans le hashtag pour interroger la carte entière. Reste fidèle au style et à la pensée de ${nomAuteur}. Cite toujours le livre.
|
|
||||||
|
|
||||||
Règles :
|
|
||||||
- Cite les sources (titre du livre) à chaque assertion.
|
|
||||||
- Pas d'hallucination. Si l'info n'est pas dans le corpus de cet auteur, dis-le.
|
|
||||||
- N'introduis JAMAIS d'autres auteurs sauf si ${nomAuteur} les commente explicitement.
|
|
||||||
- Ton politique direct, pas de neutralité fade.
|
|
||||||
- Réponse en français, dense, sans délayage.`
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AuteurIngere { id: string; nom: string; ingere: boolean }
|
|
||||||
|
|
||||||
let auteursIngeresCache: AuteurIngere[] | null = null
|
|
||||||
|
|
||||||
function loadAuteursIngeres(): AuteurIngere[] {
|
|
||||||
if (auteursIngeresCache) return auteursIngeresCache
|
|
||||||
try {
|
|
||||||
const jsonPath = join(process.cwd(), 'public', 'data', 'auteurs-pensees.json')
|
|
||||||
const raw = readFileSync(jsonPath, 'utf-8')
|
|
||||||
const data = JSON.parse(raw)
|
|
||||||
const list = (data.auteurs ?? [])
|
|
||||||
.filter((a: any) => a.ingere === true)
|
|
||||||
.map((a: any) => ({ id: String(a.id), nom: String(a.nom), ingere: true }))
|
|
||||||
auteursIngeresCache = list
|
|
||||||
return list
|
|
||||||
} catch {
|
|
||||||
auteursIngeresCache = []
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
const config = useRuntimeConfig()
|
|
||||||
|
|
||||||
const ip = getHeader(event, 'x-forwarded-for')?.split(',')[0].trim()
|
|
||||||
|| event.node.req.socket?.remoteAddress
|
|
||||||
|| '0.0.0.0'
|
|
||||||
const allowed = checkRateLimitJson(ip, 'chatbot-pensees', 20)
|
|
||||||
if (!allowed) throw createError({ statusCode: 429, message: 'Limite de 20 questions par jour atteinte.' })
|
|
||||||
|
|
||||||
const body = await readBody(event)
|
|
||||||
if (!body?.query || body.query.trim().length < 3 || body.query.trim().length > 500) {
|
|
||||||
throw createError({ statusCode: 400, message: 'Query invalide (3-500 caractères).' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const query: string = body.query.trim()
|
|
||||||
const mode: string = body.mode || 'hybrid'
|
|
||||||
const corpus: string = body.corpus || 'both'
|
|
||||||
const ragUrl: string = (config.ragPeUrl as string) || 'http://localhost:9621'
|
|
||||||
const auteurSlug: string | null = body.auteur_slug?.trim().toLowerCase() || null
|
|
||||||
|
|
||||||
let nomAuteurMatch: string | null = null
|
|
||||||
if (auteurSlug) {
|
|
||||||
const ingeres = loadAuteursIngeres()
|
|
||||||
const auteur = ingeres.find(a => a.id === auteurSlug)
|
|
||||||
nomAuteurMatch = auteur?.nom ?? null
|
|
||||||
}
|
|
||||||
|
|
||||||
let systemPreface: string
|
|
||||||
if (auteurSlug && nomAuteurMatch) {
|
|
||||||
systemPreface = buildPrefaceAuteur(nomAuteurMatch, auteurSlug)
|
|
||||||
} else if (corpus === 'pensees') {
|
|
||||||
systemPreface = SYSTEM_PREFACE_PENSEES
|
|
||||||
} else if (corpus === 'projets') {
|
|
||||||
systemPreface = SYSTEM_PREFACE_PROJETS
|
|
||||||
} else {
|
|
||||||
systemPreface = SYSTEM_PREFACE_BOTH
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await $fetch(`${ragUrl}/health`, { timeout: 5000 })
|
|
||||||
} catch {
|
|
||||||
throw createError({ statusCode: 503, message: 'RAG indisponible pour l\'instant — réessaie dans quelques minutes.' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const ragQuery = `${systemPreface}\n\nQuestion : ${query}`
|
|
||||||
const ragBody: Record<string, any> = { query: ragQuery, mode }
|
|
||||||
if (auteurSlug && nomAuteurMatch) {
|
|
||||||
ragBody.hl_keywords = [nomAuteurMatch, auteurSlug]
|
|
||||||
ragBody.ll_keywords = [auteurSlug]
|
|
||||||
}
|
|
||||||
|
|
||||||
let ragResponse: any
|
|
||||||
try {
|
|
||||||
ragResponse = await $fetch(`${ragUrl}/query`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: ragBody,
|
|
||||||
timeout: 90000,
|
|
||||||
})
|
|
||||||
} catch (e: any) {
|
|
||||||
const status = e?.response?.status
|
|
||||||
if (status === 429) throw createError({ statusCode: 429, message: 'RAG saturé — réessaie dans quelques instants.' })
|
|
||||||
throw createError({ statusCode: 504, message: 'RAG en cours de processing — réessaie dans quelques secondes.' })
|
|
||||||
}
|
|
||||||
|
|
||||||
let chunksOnTarget = 0
|
|
||||||
let chunksOffTarget = 0
|
|
||||||
if (auteurSlug && nomAuteurMatch && Array.isArray(ragResponse.references)) {
|
|
||||||
const slugPrefix = `${auteurSlug}__`
|
|
||||||
for (const ref of ragResponse.references) {
|
|
||||||
const fp = (ref.file_path ?? '').toLowerCase()
|
|
||||||
if (!fp) continue
|
|
||||||
if (fp.startsWith(slugPrefix)) chunksOnTarget++
|
|
||||||
else chunksOffTarget++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
response: ragResponse.response ?? '',
|
|
||||||
mode,
|
|
||||||
corpus,
|
|
||||||
auteur: auteurSlug && nomAuteurMatch ? { slug: auteurSlug, nom: nomAuteurMatch } : null,
|
|
||||||
auteur_unmatched: auteurSlug && !nomAuteurMatch ? auteurSlug : null,
|
|
||||||
auteur_chunks: auteurSlug && nomAuteurMatch ? { on_target: chunksOnTarget, off_target: chunksOffTarget } : null,
|
|
||||||
filter: { couche: body.filter_couche ?? null, ecole: body.filter_ecole ?? null },
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* POST /api/submit
|
* POST /api/submit
|
||||||
*
|
*
|
||||||
* Soumission multi-type (ecosysteme / reseau / job / outil).
|
* Soumission d'une nouvelle organisation par un utilisateur.
|
||||||
* - Validation Zod côté serveur (champs communs + par type)
|
* - Validation Zod côté serveur
|
||||||
* - Rate limit Redis : 3 soumissions / IP / jour
|
* - Rate limit Redis : 3 soumissions / IP / jour
|
||||||
* - Géocodage Nominatim (optionnel — fallback silencieux)
|
* - Géocodage Nominatim (optionnel — fallback silencieux)
|
||||||
* - INSERT NocoDB : moderation_status=pending, ai_processed=false
|
* - INSERT NocoDB : moderation_status=pending, ai_processed=false
|
||||||
@@ -15,49 +15,62 @@
|
|||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import { checkRateLimit } from '~/server/utils/rateLimit'
|
import { checkRateLimit } from '~/server/utils/rateLimit'
|
||||||
|
|
||||||
const SUBMISSION_TYPES = ['ecosysteme', 'reseau', 'job', 'outil'] as const
|
// ── Schéma Zod ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
const FONCTIONS = [
|
const FONCTIONS = [
|
||||||
'Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier',
|
'Juridique',
|
||||||
'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale',
|
'Technique',
|
||||||
|
'Économique',
|
||||||
|
'Administratif',
|
||||||
|
'Chantier',
|
||||||
|
'Comptabilité',
|
||||||
|
'Développement',
|
||||||
|
'Formation',
|
||||||
|
'Gestion d\'agence',
|
||||||
|
'Santé mentale',
|
||||||
] as const
|
] as const
|
||||||
|
|
||||||
const ECHELLES = ['National', 'Régional', 'Local'] as const
|
const ECHELLES = ['National', 'Régional', 'Local'] as const
|
||||||
|
|
||||||
const TERRITOIRES = [
|
const TERRITOIRES = [
|
||||||
'Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte',
|
'Métropole',
|
||||||
|
'Guadeloupe',
|
||||||
|
'Martinique',
|
||||||
|
'Guyane',
|
||||||
|
'La Réunion',
|
||||||
|
'Mayotte',
|
||||||
] as const
|
] as const
|
||||||
|
|
||||||
const TYPES_PRINCIPAUX = ['agence', 'collectif', 'reseau', 'asso', 'ressource'] as const
|
|
||||||
|
|
||||||
const TYPES_PLATEFORME = ['mise-en-relation', 'appel-offre-public', 'communaute-pro'] as const
|
|
||||||
|
|
||||||
const CATEGORIES_OUTIL = ['simulateur', 'logiciel', 'guide', 'autre'] as const
|
|
||||||
|
|
||||||
export const SubmitSchema = z.object({
|
export const SubmitSchema = z.object({
|
||||||
// Champs communs
|
|
||||||
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
|
||||||
url: z.string().url('URL invalide').optional().or(z.literal('')).transform(v => v || undefined),
|
url: z
|
||||||
description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
|
.string()
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')).transform(v => v || undefined),
|
.url('URL invalide')
|
||||||
submission_type: z.enum(SUBMISSION_TYPES, { errorMap: () => ({ message: 'Type de soumission invalide' }) }),
|
.optional()
|
||||||
|
.or(z.literal(''))
|
||||||
// Champs écosystème
|
.transform((v) => v || undefined),
|
||||||
echelle: z.enum(ECHELLES).optional(),
|
description_user: z
|
||||||
fonctions: z.array(z.enum(FONCTIONS)).min(1).max(5).optional(),
|
.string()
|
||||||
territoire: z.enum(TERRITOIRES).optional(),
|
.min(50, 'Minimum 50 caractères')
|
||||||
localisation_ville: z.string().max(100).optional().transform(v => v?.trim() || undefined),
|
.max(500, 'Maximum 500 caractères')
|
||||||
|
.trim(),
|
||||||
// Champs réseau
|
echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Échelle invalide' }) }),
|
||||||
type_principal: z.enum(TYPES_PRINCIPAUX).optional(),
|
fonctions: z
|
||||||
projet_lien: z.string().url('URL invalide').optional().or(z.literal('')),
|
.array(z.enum(FONCTIONS))
|
||||||
projet_adresse: z.string().max(200).optional().transform(v => v?.trim() || undefined),
|
.min(1, 'Sélectionne au moins une fonction')
|
||||||
|
.max(5, 'Maximum 5 fonctions'),
|
||||||
// Champs job
|
territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Territoire invalide' }) }),
|
||||||
type_plateforme: z.enum(TYPES_PLATEFORME).optional(),
|
localisation_ville: z
|
||||||
|
.string()
|
||||||
// Champs outil
|
.max(100)
|
||||||
categorie: z.enum(CATEGORIES_OUTIL).optional(),
|
.optional()
|
||||||
|
.transform((v) => v?.trim() || undefined),
|
||||||
|
submitted_by_email: z
|
||||||
|
.string()
|
||||||
|
.email('Email invalide')
|
||||||
|
.optional()
|
||||||
|
.or(z.literal(''))
|
||||||
|
.transform((v) => v || undefined),
|
||||||
})
|
})
|
||||||
|
|
||||||
export type SubmitInput = z.infer<typeof SubmitSchema>
|
export type SubmitInput = z.infer<typeof SubmitSchema>
|
||||||
@@ -135,36 +148,22 @@ export default defineEventHandler(async (event) => {
|
|||||||
const nocoBaseId = config.nocodbBase
|
const nocoBaseId = config.nocodbBase
|
||||||
|
|
||||||
const payload: Record<string, unknown> = {
|
const payload: Record<string, unknown> = {
|
||||||
submission_type: data.submission_type,
|
|
||||||
nom: data.nom,
|
nom: data.nom,
|
||||||
url: data.url || null,
|
url: data.url || null,
|
||||||
description_user: data.description_user,
|
description_user: data.description_user,
|
||||||
|
echelle: data.echelle,
|
||||||
|
tags_fonction: data.fonctions.join(','),
|
||||||
|
territoire: data.territoire,
|
||||||
|
localisation_ville: data.localisation_ville || null,
|
||||||
submitted_by_email: data.submitted_by_email || null,
|
submitted_by_email: data.submitted_by_email || null,
|
||||||
moderation_status: 'pending',
|
moderation_status: 'pending',
|
||||||
|
scrape_status: data.url ? 'pending' : 'no_link',
|
||||||
ai_processed: false,
|
ai_processed: false,
|
||||||
submitted_at: new Date().toISOString(),
|
submitted_at: new Date().toISOString(),
|
||||||
latitude,
|
latitude,
|
||||||
longitude,
|
longitude,
|
||||||
}
|
}
|
||||||
|
|
||||||
// Champs spécifiques selon le type
|
|
||||||
if (data.submission_type === 'ecosysteme') {
|
|
||||||
payload.echelle = data.echelle
|
|
||||||
payload.tags_fonction = data.fonctions?.join(',')
|
|
||||||
payload.territoire = data.territoire
|
|
||||||
payload.localisation_ville = data.localisation_ville || null
|
|
||||||
payload.scrape_status = data.url ? 'pending' : 'no_link'
|
|
||||||
} else if (data.submission_type === 'reseau') {
|
|
||||||
payload.type_principal = data.type_principal
|
|
||||||
payload.projet_lien = data.projet_lien || null
|
|
||||||
payload.projet_adresse = data.projet_adresse || null
|
|
||||||
payload.localisation_ville = data.localisation_ville || null
|
|
||||||
} else if (data.submission_type === 'job') {
|
|
||||||
payload.type_plateforme = data.type_plateforme
|
|
||||||
} else if (data.submission_type === 'outil') {
|
|
||||||
payload.categorie = data.categorie
|
|
||||||
}
|
|
||||||
|
|
||||||
// NocoDB v1 endpoint
|
// NocoDB v1 endpoint
|
||||||
const insertUrl = `${nocodbUrl}/api/v1/db/data/noco/${nocoBaseId}/${orgTableId}`
|
const insertUrl = `${nocodbUrl}/api/v1/db/data/noco/${nocoBaseId}/${orgTableId}`
|
||||||
|
|
||||||
|
|||||||
@@ -1,74 +0,0 @@
|
|||||||
import { z } from 'zod'
|
|
||||||
import { checkRateLimit } from '~/server/utils/rateLimit'
|
|
||||||
|
|
||||||
const ReferenceSchema = z.object({
|
|
||||||
titre: z.string().min(3, 'Minimum 3 caractères').max(200, 'Maximum 200 caractères').trim(),
|
|
||||||
auteur: z.string().min(2, 'Minimum 2 caractères').max(200, 'Maximum 200 caractères').trim(),
|
|
||||||
url: z.string().url('URL invalide').optional().or(z.literal('')).transform(v => v || undefined),
|
|
||||||
description: z.string().min(50, 'Minimum 50 caractères').max(1000, 'Maximum 1000 caractères').trim(),
|
|
||||||
pertinence_rag: z.string().max(500, 'Maximum 500 caractères').optional().transform(v => v?.trim() || undefined),
|
|
||||||
hashtags: z.string().max(300, 'Maximum 300 caractères').optional().transform(v => v?.trim() || undefined),
|
|
||||||
submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')).transform(v => v || undefined),
|
|
||||||
})
|
|
||||||
|
|
||||||
export type ReferenceInput = z.infer<typeof ReferenceSchema>
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
const ip = getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() || event.node.req.socket?.remoteAddress || '0.0.0.0'
|
|
||||||
|
|
||||||
const allowed = await checkRateLimit(ip, 'submit-reference', 3)
|
|
||||||
if (!allowed) {
|
|
||||||
throw createError({ statusCode: 429, statusMessage: 'Trop de soumissions. Réessaie demain.' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const body = await readBody(event)
|
|
||||||
const parsed = ReferenceSchema.safeParse(body)
|
|
||||||
|
|
||||||
if (!parsed.success) {
|
|
||||||
throw createError({
|
|
||||||
statusCode: 422,
|
|
||||||
statusMessage: 'Validation échouée',
|
|
||||||
data: parsed.error.flatten().fieldErrors,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = parsed.data
|
|
||||||
|
|
||||||
const payload: Record<string, unknown> = {
|
|
||||||
titre: data.titre,
|
|
||||||
auteur: data.auteur,
|
|
||||||
url: data.url || null,
|
|
||||||
description: data.description,
|
|
||||||
pertinence_rag: data.pertinence_rag || null,
|
|
||||||
hashtags: data.hashtags ? data.hashtags.split(',').map(h => h.trim()).filter(Boolean).join(',') : null,
|
|
||||||
submitted_by_email: data.submitted_by_email || null,
|
|
||||||
moderation_status: 'pending',
|
|
||||||
submitted_at: new Date().toISOString(),
|
|
||||||
}
|
|
||||||
|
|
||||||
const config = useRuntimeConfig()
|
|
||||||
const insertUrl = `${config.nocodbUrl}/api/v1/db/data/noco/${config.nocodbBase}/${config.referencesTableId}`
|
|
||||||
|
|
||||||
let insertedRecord: any
|
|
||||||
try {
|
|
||||||
insertedRecord = await $fetch(insertUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'xc-token': config.nocodbToken,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
} catch (e: any) {
|
|
||||||
console.error('[reference] Erreur NocoDB insert:', e?.message ?? e)
|
|
||||||
throw createError({ statusCode: 502, statusMessage: 'Erreur serveur — réessaie dans quelques instants.' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const referenceId = insertedRecord?.Id ?? insertedRecord?.id ?? null
|
|
||||||
|
|
||||||
return {
|
|
||||||
status: 201,
|
|
||||||
referenceId,
|
|
||||||
message: 'Ta référence est en attente de modération.',
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { readFileSync } from 'node:fs'
|
|
||||||
import { join } from 'node:path'
|
|
||||||
|
|
||||||
export default defineEventHandler((event) => {
|
|
||||||
const path = join(process.cwd(), 'public', 'data', 'auteurs-pensees.json')
|
|
||||||
const raw = readFileSync(path, 'utf-8')
|
|
||||||
setResponseHeader(event, 'content-type', 'application/json; charset=utf-8')
|
|
||||||
setResponseHeader(event, 'cache-control', 'public, max-age=300')
|
|
||||||
return raw
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user