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>
BIN
public/images/instagram/post-1.jpg
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
public/images/instagram/post-2.jpg
Normal file
|
After Width: | Height: | Size: 90 KiB |
BIN
public/images/instagram/post-3.jpg
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
public/images/instagram/post-4.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
public/images/instagram/post-5.jpg
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
public/images/instagram/post-6.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
public/images/instagram/post-7.jpg
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
public/images/instagram/post-8.jpg
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/images/instagram/post-9.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
@@ -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>
|
||||
|
||||
@@ -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 →
|
||||
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>
|
||||
|
||||