diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..15ce499 --- /dev/null +++ b/.env.example @@ -0,0 +1,6 @@ +# Behold.so feed IDs (voir docs/BEHOLD-SETUP.md) +# 1) Inscris-toi sur https://behold.so/dashboard +# 2) Connecte les 2 comptes Insta (@aep.politique + @julesneny) +# 3) Recupere les feed IDs et copie ce fichier vers .env.local puis remplis ci-dessous +PUBLIC_BEHOLD_AEP= +PUBLIC_BEHOLD_JULESNENY= diff --git a/docs/BEHOLD-SETUP.md b/docs/BEHOLD-SETUP.md new file mode 100644 index 0000000..4c06985 --- /dev/null +++ b/docs/BEHOLD-SETUP.md @@ -0,0 +1,49 @@ +# Setup Behold pour embeds Insta + +Page cerveau col D (`ColInsta.astro`) consomme 2 feeds Insta via [Behold.so](https://behold.so) (gratuit, 2 feeds, sync 1h, sans login user). + +## Etapes + +1. Creer compte sur https://behold.so (gratuit jusqu'a 2 feeds) +2. Connecter `@aep.politique` (Login Instagram via Facebook Business) +3. Connecter `@julesneny` (idem) +4. Recuperer les 2 feed IDs depuis le dashboard Behold +5. Copier `.env.example` vers `.env.local` (a la racine du repo) +6. Remplir `.env.local` : + + ```bash + PUBLIC_BEHOLD_AEP=xxxxxxxxxxxx + PUBLIC_BEHOLD_JULESNENY=yyyyyyyyyyyy + ``` + +7. Relancer `npm run dev` ou rebuild + redeploy (PC8) + +## Comportement par defaut + +Sans feed IDs valides (placeholder), le composant `InstaFeed.vue` affiche un fallback gracieux : +- Titre du compte (lien direct vers Instagram) +- Bio courte +- Bouton "Voir sur Instagram" + +C'est OK pour un V1 visuel "complet". UX degradee mais pas casse. + +## Ressources techniques + +- API Behold : `https://feeds.behold.so/{feedId}` -> JSON array de posts +- Sync : 1h (Behold rafraichit depuis Insta automatiquement) +- CDN : images servies depuis Behold (pas de hot-link Insta direct) + +## CSP (PC8 deploy) + +Si une CSP est ajoutee au deploy Caddy, prevoir : + +``` +connect-src 'self' https://feeds.behold.so; +img-src 'self' data: https://feeds.behold.so https://*.cdninstagram.com; +``` + +## Alternatives si Behold ne convient pas + +- **EmbedSocial** (~$8/mois) : https://embedsocial.com +- **Scrape n8n nocturne** (V1.5) : Insta Graph API via compte Business + Page Facebook ; coherent avec PC6 journal-aggregate +- **Posts manuels oEmbed** (V2) : Jules selectionne 6-10 URLs, oEmbed post-by-post diff --git a/src/components/astro/ColInsta.astro b/src/components/astro/ColInsta.astro index 5215577..93560e4 100644 --- a/src/components/astro/ColInsta.astro +++ b/src/components/astro/ColInsta.astro @@ -1,12 +1,24 @@ --- -// Placeholder Insta : 2 carrousels @aep + @julesneny — PC5 oEmbed +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'; --- -
-

Insta

-
-

@aep carrousel — PC5

-
-
-

@julesneny carrousel — PC5

-
-
+
+ + + +
diff --git a/src/components/vue/InstaFeed.vue b/src/components/vue/InstaFeed.vue new file mode 100644 index 0000000..4e3ccbe --- /dev/null +++ b/src/components/vue/InstaFeed.vue @@ -0,0 +1,107 @@ + + +