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>
This commit is contained in:
Jules Neny
2026-07-07 17:05:41 +02:00
parent 7e7ddfbfbf
commit 11499a147c
11 changed files with 37 additions and 84 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -1,24 +1,23 @@
---
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_POSTS = [
'/images/instagram/post-1.jpg',
'/images/instagram/post-2.jpg',
'/images/instagram/post-3.jpg',
'/images/instagram/post-4.jpg',
'/images/instagram/post-5.jpg',
'/images/instagram/post-6.jpg',
'/images/instagram/post-7.jpg',
'/images/instagram/post-8.jpg',
'/images/instagram/post-9.jpg',
];
---
<div class="h-full overflow-y-auto">
<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"
accountUrl="https://www.instagram.com/julesneny/"
fallbackBio="Peinture, poesie, Corse ; archives visuelles personnelles"
posts={JULESNENY_POSTS}
/>
</div>

View File

@@ -1,52 +1,9 @@
<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;
account: string;
accountUrl: string;
fallbackBio?: string;
posts: string[];
}>();
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>
@@ -60,48 +17,45 @@ 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
:href="accountUrl"
target="_blank"
rel="noopener"
class="grid grid-cols-3 gap-0.5 p-1 group"
:aria-label="`Voir le compte Instagram ${account}`"
>
<a
v-for="post in posts"
:key="post.id"
:href="post.permalink"
target="_blank"
rel="noopener"
class="block aspect-square overflow-hidden group"
<span
v-for="(src, i) in posts"
:key="i"
class="block aspect-square overflow-hidden"
>
<img
:src="post.thumbnailUrl || post.mediaUrl"
:alt="post.caption?.slice(0, 80) || account"
:src="src"
alt=""
loading="lazy"
class="w-full h-full object-cover group-hover:scale-105 transition-transform"
/>
</a>
</div>
</span>
</a>
<div v-else class="p-4 text-sm text-neutral-600">
<p v-if="fallbackBio" class="mb-3">{{ fallbackBio }}</p>
<div class="flex gap-1.5 px-4 pb-3">
<a
:href="accountUrl"
target="_blank"
rel="noopener"
class="inline-block px-3 py-2 bg-neutral-900 text-white rounded-lg text-sm"
class="flex-1 text-center px-3 py-1.5 bg-neutral-900 text-white rounded-lg text-xs"
>
Voir sur Instagram &rarr;
Compte Insta
</a>
<span
class="flex-1 text-center px-3 py-1.5 bg-neutral-200 text-neutral-400 rounded-lg text-xs cursor-not-allowed"
aria-disabled="true"
title="Boutique — bientôt disponible"
>
Boutique
</span>
</div>
</section>
</template>