feat(v12-o): Carte O logos plateforme via Brandfetch CDN (visible zoom>1.5x)

Champ optionnel domain dans YAML carte-o-source : propage vers JSON et
permet d'afficher un logo plateforme en bas-droite de chaque node (cercle
blanc 18px + image clippee circulaire 14px) quand le zoom depasse 1.5x.

V1.2-O par defaut : substack.com sur les 15 thematiques essais. Centre +
projet TMIP gardent leur fill brut (encre / ocre). Toggle visibilite via
callback zoom (opacity 0/1 sur .logo-overlay).

A flagger : CDN Brandfetch retourne 403 en curl server-side avec le client
ID fourni. A revalider en browser (origin trans-former.fr) — le CDN peut
exiger un Origin header autorise. Si bloque, fallback prevu en V1.3
(proxy local ou logos packages dans /public/logos/).

Files:
- public/data/carte-o-source.yaml : +15 champs domain
- scripts/build-carte-o.js : propagation domain -> JSON
- src/components/vue/CarteO.vue : CarteNode.domain + logoUrl helper
  + logo-overlay (circle + image clip-path) + toggle visibilite zoom
- public/data/carte-o.json : regenere (15/17 nodes ont domain)
This commit is contained in:
Jules Neny
2026-05-11 18:48:15 +02:00
parent e613fc1ca3
commit a1d6271b65
4 changed files with 92 additions and 18 deletions

View File

@@ -19,8 +19,15 @@ interface CarteNode {
slug?: string
theme?: string
path?: string
domain?: string // V1.2-O : domaine plateforme source (logo Brandfetch CDN)
}
// V1.2-O : logos plateforme via Brandfetch CDN (visible zoom > 1.5x seulement)
const BRANDFETCH_CLIENT_ID = '4ae58bd85c8140eab0cee72f40656120'
const LOGO_ZOOM_THRESHOLD = 1.5
const logoUrl = (domain: string) =>
`https://cdn.brandfetch.io/${domain}/w/64/h/64?c=${BRANDFETCH_CLIENT_ID}`
interface CarteEdge {
source: string | CarteNode
target: string | CarteNode
@@ -187,6 +194,11 @@ function initSvg() {
.scaleExtent([0.3, 4])
.on('zoom', (event) => {
gZoom!.attr('transform', event.transform.toString())
// V1.2-O : toggle visibilite logos plateforme selon le niveau de zoom
// (evite la surcharge visuelle au niveau d'ensemble, montre detail au drill-down)
const scale = event.transform.k
gZoom!.selectAll('.logo-overlay')
.style('opacity', scale > LOGO_ZOOM_THRESHOLD ? 1 : 0)
})
svgRoot.call(zoomBehavior as any)
@@ -290,6 +302,32 @@ function render() {
}
})
// V1.2-O : Logo plateforme (visible zoom > 1.5x seulement)
// Cercle blanc 14px en bas-droite du node (offset +60% x/+60% y du radius)
// Image clip-path circle pour avatar style. Hidden par defaut (opacity 0).
const nodeGroupsWithLogo = nodeGroups.filter(d => !!d.domain)
const logoOverlay = nodeGroupsWithLogo.append('g')
.attr('class', 'logo-overlay')
.style('opacity', 0)
.attr('pointer-events', 'none')
logoOverlay.append('circle')
.attr('cx', d => getRadius(d) * 0.6)
.attr('cy', d => getRadius(d) * 0.6)
.attr('r', 9)
.attr('fill', '#FFFFFF')
.attr('stroke', '#0F172A')
.attr('stroke-width', 0.5)
logoOverlay.append('image')
.attr('href', d => logoUrl(d.domain!))
.attr('x', d => getRadius(d) * 0.6 - 7)
.attr('y', d => getRadius(d) * 0.6 - 7)
.attr('width', 14)
.attr('height', 14)
.attr('clip-path', d => `circle(7px at ${getRadius(d) * 0.6}px ${getRadius(d) * 0.6}px)`)
// Tooltip <title>
nodeGroups.append('title')
.text(d => `${d.label}\n[${d.family}]\n${truncate(d.resume || d.intention || '', 200)}`)