utiliser la dernière photo provenant de pixelfed comme image opengraph
09.09.26 · dernière modification : 09.09.26
#eleventy #open graph #javascript
Open Graph est un microformat qui fait officiel de protocole pour indiquer quelques informations affichées quand une page d'un site est partagée sur un autre site, plus spécifiquement un réseau social comme Mastodon ou un réseau publicitaire comme Facebook ou Twitter.
Cela demande d'avoir accès au code source de l'entête HTML du site, ce qu'il y a dans la balise <head />, pour y ajouter quatre balises <meta /> pour le titre, l'url, le type de contenu et une image pour faire jolie.
Ce site ne fournissait qu'une partie des informations. Il manquait une image par indécision de savoir laquelle et si éventuellement il fallait faire un peu de graphisme.
En attendant, j'avais dans l'idée d'utiliser les photos postées sur mon compte pixelfed, la version fedivers d'Instagram.
Pour faire cela bien, je voulais aussi prendre le temps d'utiliser un système de cache afin de ne pas surcharger inutilement l'instance qui héberge gracieusement mes quelques clichés.
Eleventy propose tout cela.
11ty/eleventy-fetch me permet de récupérer la liste de mes photos sous la forme d'un flux json et 11ty/eleventy-img fait la même chose avec la première photo indiquée dans le flux.
Simple as that.
Pour les détails, le code source est dans ce commit sur codeberg.
Il est un tout petit plus compliqué que nécessaire.
Les fichiers _11ty/opengraph.js et data/opengraph.js pourraient être réunis.
👋Envie de me contacter pour bavarder de cette page, vous pouvez m'envoyer un message direct sur mastodon à l'adresse @tk@social.apreslanu.it. Je vous partagerai mon adresse email à partir de là.
📣Pour être tenu·e au courant des derniers changements le plus simple est d'ajouter le fil feed.xml regroupant tous les contenus dernièrement modifiés.
🕵️Pour signaler une erreur ou autre errance technique, il faudra passer par le système de ticket de codeberg.
📜Pour voir, l'historique des modifications de cette page, cela se passe aussi sur codeberg.