feat: PC6 journal unifie + n8n workflow agregateur (V1 MVP)
Composant Vue JournalList : - fetch PUBLIC_JOURNAL_URL (defaut data.trans-former.fr/journal.json) - ecoute event 'hashtag-filter-change' emis par ColJournal (PC2) - filtre par hashtag actif, tri desc respecte (n8n cote serveur) - fallback gracieux : loading / errored / empty / no-match Cabling : - ColJournal.astro importe et rend <JournalList client:visible /> - placeholder remplace par le composant Vue Workflow n8n (docs/n8n-workflow-journal-aggregate.json) : - Schedule trigger cron 0 3 * * * - Fetch Gitea Atom (jules.atom) + Behold AEP + Behold julesneny (skip si feed IDs absents) - Code Node normalisation 3 sources -> format JSON commun - Tri desc + cap top 100 - Write Binary File vers /home/node/.n8n/journal/journal.json (volume Docker partage) Sources V1 actives : - Gitea Atom (#stack) - active, 200 OK confirme - Behold @aep (#aep-politique) - conditionnel feed ID - Behold @julesneny (#peinture) - conditionnel feed ID Sources skipped (V1.5/V2) : - GitHub.com : username 'julesneny' n'existe pas (HTTP 404), pivot Gitea - Substack 'transformations' : pris par 'WoodHorse' (pas Jules), handle a confirmer - LinkedIn, Castopod, Blog : V2 Mock journal.json en public/data/ pour dev local (fallback si data.trans-former.fr indisponible). Setup VPS prepare (cf docs/PC6-JOURNAL-N8N-SETUP.md) : - Caddyfile bloc data.trans-former.fr ajoute en commentaire (active apres DNS) - Dossier /var/lib/docker/volumes/vps-kit_n8n_data/_data/journal/ cree - journal.json initial deploye - Caddy reload OK valide (config valide) - Workflow JSON copie sur VPS /tmp/n8n-workflow-journal-aggregate.json (import manuel UI) Checkpoint Jules requis : - Ajout DNS A 'data' -> 178.104.106.195 (OVH) - Decommenter bloc Caddy + reload - Import workflow n8n via UI (creds basic auth deprecies, login email user) - Run manuel + activation cron Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jules Neny
@@ -1,9 +1,168 @@
|
||||
<script setup lang="ts">
|
||||
// Placeholder journal list — PC6 lit public/data/journal.json
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
interface JournalItem {
|
||||
id: string
|
||||
platform: 'substack' | 'gitea' | 'github' | 'instagram' | 'castopod' | 'blog' | 'linkedin'
|
||||
hashtag: string
|
||||
date: string
|
||||
titre: string
|
||||
extrait: string
|
||||
url: string
|
||||
thumbnail: string | null
|
||||
}
|
||||
|
||||
interface JournalPayload {
|
||||
generatedAt: string
|
||||
items: JournalItem[]
|
||||
counts?: Record<string, number>
|
||||
}
|
||||
|
||||
const items = ref<JournalItem[]>([])
|
||||
const filters = ref<Record<string, boolean>>({})
|
||||
const loading = ref(true)
|
||||
const errored = ref(false)
|
||||
const empty = ref(false)
|
||||
|
||||
const JOURNAL_URL =
|
||||
(import.meta as unknown as { env: Record<string, string | undefined> }).env
|
||||
.PUBLIC_JOURNAL_URL || 'https://data.trans-former.fr/journal.json'
|
||||
|
||||
const STORAGE_KEY = 'tf-hashtag-filters'
|
||||
|
||||
const loadFilters = () => {
|
||||
try {
|
||||
filters.value = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')
|
||||
} catch {
|
||||
filters.value = {}
|
||||
}
|
||||
}
|
||||
|
||||
const onFilterChange = (e: Event) => {
|
||||
const ce = e as CustomEvent
|
||||
if (ce.detail && typeof ce.detail === 'object') {
|
||||
filters.value = { ...ce.detail }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadFilters()
|
||||
window.addEventListener('hashtag-filter-change', onFilterChange as EventListener)
|
||||
try {
|
||||
const res = await fetch(JOURNAL_URL, { cache: 'no-store' })
|
||||
if (!res.ok) {
|
||||
errored.value = true
|
||||
return
|
||||
}
|
||||
const data = (await res.json()) as JournalPayload
|
||||
items.value = Array.isArray(data.items) ? data.items : []
|
||||
if (items.value.length === 0) empty.value = true
|
||||
} catch (e) {
|
||||
errored.value = true
|
||||
console.error('JournalList fetch failed', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('hashtag-filter-change', onFilterChange as EventListener)
|
||||
})
|
||||
|
||||
const visibleItems = computed(() => {
|
||||
// Tous les filtres faux = aucun affiche ; tous true ou aucune cle = tout afficher
|
||||
const keys = Object.keys(filters.value)
|
||||
if (keys.length === 0) return items.value
|
||||
const activeKeys = keys.filter((k) => filters.value[k])
|
||||
// Si l'utilisateur a explicitement décoché tous les hashtags, on n'affiche rien
|
||||
if (activeKeys.length === 0 && keys.some((k) => filters.value[k] === false)) return []
|
||||
if (activeKeys.length === 0) return items.value
|
||||
return items.value.filter((it) => activeKeys.includes(it.hashtag))
|
||||
})
|
||||
|
||||
const formatDate = (iso: string) => {
|
||||
try {
|
||||
const d = new Date(iso)
|
||||
if (isNaN(d.getTime())) return ''
|
||||
return `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}`
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const platformLabel = (p: string) => {
|
||||
switch (p) {
|
||||
case 'gitea':
|
||||
case 'github':
|
||||
return 'code'
|
||||
case 'substack':
|
||||
return 'substack'
|
||||
case 'instagram':
|
||||
return 'insta'
|
||||
case 'castopod':
|
||||
return 'pod'
|
||||
case 'blog':
|
||||
return 'blog'
|
||||
case 'linkedin':
|
||||
return 'linkedin'
|
||||
default:
|
||||
return p
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex items-center justify-center text-sm text-neutral-400">
|
||||
Journal list placeholder (PC6)
|
||||
<div class="space-y-3">
|
||||
<p v-if="loading" class="text-neutral-400 italic text-xs">
|
||||
Chargement du journal...
|
||||
</p>
|
||||
<p v-else-if="errored" class="text-neutral-400 italic text-xs">
|
||||
Journal en cours d'agregation. Reviens dans quelques heures.
|
||||
</p>
|
||||
<p v-else-if="empty" class="text-neutral-400 italic text-xs">
|
||||
Aucun item agrege. Le cron nocturne tourne a 3h.
|
||||
</p>
|
||||
<p
|
||||
v-else-if="!visibleItems.length"
|
||||
class="text-neutral-400 italic text-xs"
|
||||
>
|
||||
Aucun item ; ajuste les filtres.
|
||||
</p>
|
||||
<article
|
||||
v-for="item in visibleItems"
|
||||
:key="item.id"
|
||||
class="border-b border-neutral-100 pb-3 last:border-b-0"
|
||||
>
|
||||
<a
|
||||
:href="item.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block group"
|
||||
>
|
||||
<div class="flex items-baseline gap-2 text-[11px] text-neutral-500 mb-1">
|
||||
<time>{{ formatDate(item.date) }}</time>
|
||||
<span class="font-mono text-neutral-700">{{ item.hashtag }}</span>
|
||||
<span class="text-neutral-400">{{ platformLabel(item.platform) }}</span>
|
||||
</div>
|
||||
<h4
|
||||
class="text-sm text-neutral-900 group-hover:text-neutral-600 leading-snug"
|
||||
>
|
||||
{{ item.titre }}
|
||||
</h4>
|
||||
<p
|
||||
v-if="item.extrait"
|
||||
class="text-xs text-neutral-500 mt-1 line-clamp-2"
|
||||
>
|
||||
{{ item.extrait }}
|
||||
</p>
|
||||
<img
|
||||
v-if="item.thumbnail"
|
||||
:src="item.thumbnail"
|
||||
:alt="item.titre"
|
||||
loading="lazy"
|
||||
class="mt-2 w-full max-h-32 object-cover rounded"
|
||||
/>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user