Ghost : Comment dynamiser la date de publication d'un article ?

Vous avez peut-être remarqué un souci d’affichage des dates de publication sur ce blog depuis la migration de mon site sur Cloudflare. Ce problème, apparu il y a quelques mois, était lié au système de mise en cache de Cloudflare, qui impactait le rafraîchissement des informations temporelles sur les articles.

Le décompte de publication de l'article était calculé par le serveur au lieu d'être systématiquement recalculé à chaque affichage de page Web. C'était un défaut du thème que j'utilise pour mon blog Geeek.org.

Le décompte était calculé par le serveur avec l'attribut "timeago" fourni par les Helpers Handlebars de Ghost.

<time datetime="{{date format="YYYY-MM-DD"}}"">{{date published_at timeago="true"}}</time>

Pourquoi les dates étaient-elles incorrectes ?

Cloudflare optimise les performances d’un site en conservant en cache l’intégralité des pages, réduisant ainsi la charge sur le serveur Web et assurant une meilleure gestion des pics de trafic. Cependant, cette mise en cache affectait les informations de publication, comme les messages de type "publié il y a x jours", qui ne se mettaient à jour que lorsque le cache expirait ou qu’un article était manuellement rafraîchi grâce à un script de purge Cloudflare.

Solution : un script "published-at" pour calculer dynamiquement les dates par le navigateur

Pour corriger ce problème, j’ai développé un script appelé "published-at". Ce script, conçu pour s’exécuter côté client, permet de calculer et afficher dynamiquement le temps écoulé depuis la publication de chaque article.

Fonctionnement du script "published-at"

Le script fonctionne en trois étapes principales :

1. Identification des éléments HTML : Il sélectionne tous les éléments <time> portant la classe CSS published-at.
2. Récupération des données : Pour chaque élément sélectionné, le script lit la valeur de l’attribut data-published-at, qui contient la date de publication exacte.
3. Calcul et affichage dynamique : En fonction de la date actuelle, il affiche le temps écoulé ("il y a x secondes/minutes/jours") de manière dynamique et en temps réel.

Grâce à ce fonctionnement, l’information temporelle affichée est toujours à jour, sans nécessiter une purge de cache.

Exemple de code pour le script "published-at"

Voici un exemple d’implémentation HTML avec le script "published-at" :

Avant exécution du script :

<time datetime="{{date format="YYYY-MM-DD"}}" class="published-at" data-published-at="{{date published_at format="YYYY-MM-DDTHH:mm:ss"}}"></time>

Après exécution par le navigateur :

<time datetime="2024-11-13" class="published-at" data-published-at="2024-11-13T23:10:12">il y a 20 minutes</time>

Le script remplace automatiquement le contenu de chaque élément <time> avec une date relative ("il y a x minutes") actualisée en continu par le navigateur.

Le script prend en compte la lange de l'utilisateur et supporte le Français, l'anglais, l'italien et l'espagnol.

Intégration du script dans votre site Ghost

Si vous utilisez un CMS comme Ghost, l’intégration du script "published-at" est simple :

1. Ajoutez la classe et l’attribut nécessaires : Modifiez votre thème Ghost pour ajouter la classe published-at et l’attribut data-published-at aux balises <time> indiquant les dates de publication.
2. Incorporez le script dans le thème : ajoutez le script directement dans les pages de votre thème pour qu'il se charge à chaque affichage d’un article.

Où trouver le script "published-at" et comment contribuer ?

Le code source est disponible sur GitHub sous licence MIT, ce qui vous permet de l'utiliser librement et de l’adapter à vos besoins.
N’hésitez pas à proposer des améliorations ou à partager vos retours d’expérience. Vous pouvez également poser vos questions et participer à la discussion sur le Discord Geeek.org.

---