wip(pont): pont Tailwind 4 câblé + pont-test.astro + carte-o.json (session défrichage 17/08, mis à l'abri le 22/09)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
fix(insta): feed remplit toute la hauteur de colonne, Boutique collée en bas
2026-09-22 14:05:12 +02:00 · 2026-07-07 17:55:43 +02:00 · 2026-07-07 17:53:26 +02:00 · 2026-07-07 17:49:44 +02:00 · 2026-07-07 17:45:13 +02:00 · 2026-07-07 17:05:41 +02:00
20 changed files with 92 additions and 93 deletions
@@ -13,6 +13,7 @@
        "@astrojs/vue": "^6.0.1",
        "@fontsource-variable/roboto-condensed": "^5.2.8",
        "@tailwindcss/vite": "^4.2.4",
+        "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
        "@types/d3": "^7.4.3",
        "astro": "^6.3.1",
        "d3": "^7.9.0",
@@ -2366,6 +2367,11 @@
        "vite": "^5.2.0 || ^6 || ^7 || ^8"
      }
    },
+    "node_modules/@transformer/ui": {
+      "version": "0.1.0",
+      "resolved": "git+https://git.trans-former.fr/jules/design-system.git#b7f4f21b7c41258d976a878a8a3c2d4ce45a2ede",
+      "license": "UNLICENSED"
+    },
    "node_modules/@types/d3": {
      "version": "7.4.3",
      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -20,6 +20,7 @@
    "@astrojs/vue": "^6.0.1",
    "@fontsource-variable/roboto-condensed": "^5.2.8",
    "@tailwindcss/vite": "^4.2.4",
+    "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
    "@types/d3": "^7.4.3",
    "astro": "^6.3.1",
    "d3": "^7.9.0",
@@ -1,6 +1,6 @@
 {
  "version": "1.1",
-  "generatedAt": "2026-05-12T09:28:20.972Z",
+  "generatedAt": "2026-08-17T11:48:54.594Z",
  "nodes": [
    {
      "id": "contrat-social-medecine-corps-social",
@@ -1,24 +1,18 @@
 ---
 import InstaFeed from '../vue/InstaFeed.vue';

-// Feed IDs Behold a remplir apres inscription Behold (voir docs/BEHOLD-SETUP.md)
-const FEED_AEP = import.meta.env.PUBLIC_BEHOLD_AEP || 'PLACEHOLDER_AEP';
-const FEED_JULESNENY = import.meta.env.PUBLIC_BEHOLD_JULESNENY || 'PLACEHOLDER_JULESNENY';
+const JULESNENY_FEED = Array.from(
+  { length: 13 },
+  (_, i) => `/images/instagram/feed/feed-${String(i + 1).padStart(2, '0')}.jpg`
+);
 ---
-<div class="h-full overflow-y-auto">
+<div class="h-full overflow-hidden">
  <InstaFeed
    client:visible
-    feedId={FEED_AEP}
-    account="@aep.politique"
-    accountUrl="https://www.instagram.com/aep.politique/"
-    fallbackBio="Carrousels manifeste AEP ; pensee politique eco-architecture"
-  />
-
-  <InstaFeed
-    client:visible
-    feedId={FEED_JULESNENY}
-    account="@julesneny"
+    account="Jules Neny"
    accountUrl="https://www.instagram.com/julesneny/"
-    fallbackBio="Peinture, poesie, Corse ; archives visuelles personnelles"
+    secondAccount="AEP"
+    secondAccountUrl="https://www.instagram.com/aep.politique/"
+    feedImages={JULESNENY_FEED}
  />
 </div>
@@ -1,57 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-
-interface BeholdPost {
-  id: string;
-  permalink: string;
-  mediaUrl: string;
-  thumbnailUrl?: string;
-  caption?: string;
-  mediaType: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
-  timestamp: string;
-}
-
-const props = defineProps<{
-  feedId: string;
+defineProps<{
  account: string;
  accountUrl: string;
-  fallbackBio?: string;
+  secondAccount: string;
+  secondAccountUrl: string;
+  feedImages: string[]; // ordonné du plus récent (haut) au plus ancien (bas)
 }>();
-
-const posts = ref<BeholdPost[]>([]);
-const loading = ref(true);
-const error = ref<string | null>(null);
-
-const isPlaceholder = (id: string) => !id || id.startsWith('PLACEHOLDER_');
-
-onMounted(async () => {
-  if (isPlaceholder(props.feedId)) {
-    loading.value = false;
-    error.value = 'no-feed-id';
-    return;
-  }
-  try {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 5000);
-    const res = await fetch(`https://feeds.behold.so/${props.feedId}`, {
-      signal: controller.signal,
-    });
-    clearTimeout(timeoutId);
-    if (!res.ok) throw new Error(`Behold returned ${res.status}`);
-    const data = await res.json();
-    const items: BeholdPost[] = Array.isArray(data) ? data : (data.posts ?? []);
-    posts.value = items.slice(0, 6);
-  } catch (e) {
-    error.value = (e as Error).message || 'fetch-error';
-  } finally {
-    loading.value = false;
-  }
-});
 </script>

 <template>
-  <section class="border-b border-neutral-200 last:border-b-0">
-    <header class="px-4 py-3 flex items-center justify-between">
+  <section class="h-full flex flex-col border-b border-neutral-200 last:border-b-0">
+    <header class="shrink-0 px-4 py-2 flex items-center justify-between gap-3">
      <a
        :href="accountUrl"
        target="_blank"
@@ -60,48 +19,62 @@ onMounted(async () => {
      >
        {{ account }}
      </a>
-      <span v-if="loading" class="text-xs text-neutral-400">...</span>
-    </header>
-
-    <div v-if="loading" class="grid grid-cols-2 gap-1 p-1">
-      <div
-        v-for="i in 4"
-        :key="i"
-        class="aspect-square bg-neutral-100 animate-pulse"
-      />
-    </div>
-
-    <div
-      v-else-if="posts.length"
-      class="grid grid-cols-2 gap-1 p-1"
-    >
      <a
-        v-for="post in posts"
-        :key="post.id"
-        :href="post.permalink"
+        :href="secondAccountUrl"
        target="_blank"
        rel="noopener"
-        class="block aspect-square overflow-hidden group"
+        class="font-medium text-sm text-neutral-500 hover:underline hover:text-neutral-800"
      >
-        <img
-          :src="post.thumbnailUrl || post.mediaUrl"
-          :alt="post.caption?.slice(0, 80) || account"
-          loading="lazy"
-          class="w-full h-full object-cover group-hover:scale-105 transition-transform"
-        />
+        {{ secondAccount }}
      </a>
-    </div>
+    </header>

-    <div v-else class="p-4 text-sm text-neutral-600">
-      <p v-if="fallbackBio" class="mb-3">{{ fallbackBio }}</p>
+    <div class="insta-feed-scroll flex-1 min-h-0">
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
-        class="inline-block px-3 py-2 bg-neutral-900 text-white rounded-lg text-sm"
+        :aria-label="`Voir le compte Instagram ${account}`"
      >
-        Voir sur Instagram &rarr;
+        <img
+          v-for="(src, i) in feedImages"
+          :key="i"
+          :src="src"
+          alt=""
+          loading="lazy"
+          class="block w-full feed-img"
+        />
      </a>
    </div>
+
+    <div class="shrink-0 px-2 py-1">
+      <span
+        class="block text-center px-3 py-1 bg-neutral-200 text-neutral-400 rounded text-xs cursor-not-allowed"
+        aria-disabled="true"
+        title="Boutique — bientôt disponible"
+      >
+        Boutique
+      </span>
+    </div>
  </section>
 </template>
+
+<style scoped>
+.insta-feed-scroll {
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.insta-feed-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.insta-feed-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+.insta-feed-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.feed-img + .feed-img {
+  margin-top: 2px;
+}
+</style>
@@ -0,0 +1,20 @@
+---
+// Page TEMPORAIRE de test du pont Tailwind 4 (@transformer/ui) — P3 §1.
+// Sert a verifier que le pont compile les utilitaires et que les tokens
+// se resolvent en vraies valeurs. A supprimer apres validation.
+export const prerender = true;
+---
+<!doctype html>
+<html lang="fr">
+  <head><meta charset="utf-8" /><title>pont-test</title></head>
+  <body class="bg-bg text-text">
+    <div class="bg-surface text-text-muted border-border">surface / muted / border</div>
+    <div class="bg-primary text-on-primary">primary / on-primary</div>
+    <div class="bg-accent text-on-accent">accent / on-accent</div>
+    <div class="text-link hover:text-link-hover">lien</div>
+    <div class="bg-success bg-warning bg-danger">etats</div>
+    <div class="font-(family-name:--font-heading) rounded-(--radius-md) shadow-(--shadow-md) ease-(--ease-out)">
+      syntaxe var arbitraire (namespaces non mappes)
+    </div>
+  </body>
+</html>
@@ -1,4 +1,9 @@
@import "tailwindcss";
+/* Pont design system (P3 §1) : tokens + mappings @theme Tailwind 4.
+   Pas de reset.css ni theme/*.css tant que la palette racine n'est pas tranchee —
+   le bridge seul ne change aucun rendu (il ne definit que des variables). */
+@import "@transformer/ui/tokens.css";
+@import "@transformer/ui/tailwind.css";

 /* Typographie monospace - labels editoriaux (V1.1-G.1) */
 .font-mono-editorial,
Author	SHA1	Message	Date
Jules NenyandClaude Fable 5.1	6a01db1833	wip(pont): pont Tailwind 4 câblé + pont-test.astro + carte-o.json (session défrichage 17/08, mis à l'abri le 22/09) Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>	2026-09-22 14:05:12 +02:00
Jules NenyandClaude Sonnet 5	f642160d4b	fix(insta): feed remplit toute la hauteur de colonne, Boutique collée en bas La zone de scroll avait une max-height fixe (420px) alors que la colonne fait toute la hauteur de la page -> gros bandeau blanc entre le feed et le footer. Passe en flex-col (header shrink-0, feed flex-1 scrollable, Boutique shrink-0 collée en bas), le feed occupe maintenant tout l'espace disponible. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:55:43 +02:00
Jules NenyandClaude Sonnet 5	d58911a7e8	feat(insta): simplifie - 2 comptes en header, Boutique seule en bas Retire les 3 onglets (trop petits, moches). Header : "Jules Neny" (compte actif, lien direct) + "AEP" (lien direct vers @aep.politique, pas encore de feed dédié). Bande du bas : uniquement "Boutique" (placeholder désactivé). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:53:26 +02:00
Jules NenyandClaude Sonnet 5	5a4a8fbc2b	feat(insta): 3 onglets (artistique/boutique/politique) + bande réduite Réduit le padding de la bande d'actions (py-3->py-1, gap serré) pour coller au feed. Ajoute un 3e onglet "Compte Insta politique" en placeholder désactivé, à côté de "Boutique", en prévision d'une navigation à onglets entre les comptes @julesneny (artistique, actif) et @aep.politique (à venir). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:49:44 +02:00
Jules NenyandClaude Sonnet 5	aa819600f5	feat(insta): remplace la grille 3x3 par un feed scrollable (13 captures) Empile les 13 captures d'écran du feed réel (IMG_5439..5451, plus récent en haut, plus ancien en bas) dans une colonne overflow-y:auto avec scrollbar fine, pour permettre de naviguer dans le feed sans quitter le site. Petit gap 2px entre chaque capture (façon séparation Instagram). Dédoublonnage pixel des zones de chevauchement tenté (corrélation de luminance par ligne) mais abandonné : signal pas assez discriminant sur ce contenu (fonds crème uniformes). Chevauchement naturel accepté. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:45:13 +02:00
Jules NenyandClaude Sonnet 5	11499a147c	feat(insta): remplace Behold (jamais configuré) par galerie statique @julesneny ColInsta n'affichait que le fallback bio depuis PC5 (feed IDs Behold jamais renseignés, login Facebook Business trop lourd). Retire le bloc @aep.politique (jugé insatisfaisant) et remplace InstaFeed par une galerie 3x3 statique de 9 vignettes réelles (croppées depuis le dernier screenshot du feed), avec boutons Compte Insta + Boutique (placeholder désactivé, en attente d'URL). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:05:41 +02:00