Aller au contenu principal

Amélioration du journal : dates

Guillaume Barbier

Temps de lecture : ~ 4 minutes

Exposition de la problématique

L'intégration des dates directement dans le titre n'est pas très pratique (impossible de leur appliquer du style ou de moduler leur format).

En plus, je me suis rendu compte que eleventy exposait automatiquement la date de création de tous les contenus, ce qui veut dire que la gestion de la date pourrait être automatisé. (Sans oublier de se laisser une possibilité de la surcharger : tous les articles et entrées de journal de bord ne seront pas forcément publiées le jour où le fichier de contenu a été créé.)

Première étape : dissocier date et titre

Cette étape est a priori simple mais fastidieuse : il faut repasser sur toutes mes entrées de journal pour supprimer la date que j'ai saisi dans le titre et, si c'est nécessaire, ajouter une propriété date dans le front matter.

Heureusement j'ai écris encore peu d'entrées donc cette tâche est assez rapide. Un seul fichier a été créé à une date différente de sa "publication" (nécessitant que je saisisse une date manuellement).

Maintenant, la propriété date que j'ai créé n'est pas la même que celle de la date de création du fichier, que eleventy expose avec page.date. Si je souhaite pouvoir définir à la main une date tout en profitant d'une date par défaut, il faut que j'indique à eleventy de basculer sur page.date quand date n'est pas défini.

Je ne souhaite pas avoir à saisir cette solution de repli à chaque appel de la date (avec le filtre default), j'ajoute donc une propriété dynamique dans _data/eleventyComputed.js (donc globalement) pour réassigner automatiquement une valeur à date :

  • Si la propriété est définie dans la page : c'est cette propriété qui est utilisée
  • Sinon, page.date est appliquée
export default {
  date: (data) => data.date || data.page.date
}

Deuxième étape : afficher les dates "en bon français"

Si je veux me servir des dates par défaut exposées par eleventy, il faut que je travaille avec l'objet Date[1] mais celui-ci n'est pas vraiment adapté à un affichage pour des lecteurs humains.

Pour corriger ça j'ai utilisé une bibliothèque très largement utilisée sur les projets eleventy[2] : Luxon. En me basant sur le blog starter officiel d'eleventy, j'ai créé un filtre readableDate à appliquer à chaque fois que j'affiche une date.

Note : Pour que les mois soit exprimés en français, j'ai du ajouter une fonction setLocale("fr") dans mon filtre (je crois que je pourrais la définir globalement, mais pour l'instant je me contente de l'appliquer là).

import { DateTime } from "luxon";

export default function(eleventyConfig) {
  eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
    return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).setLocale("fr").toFormat(format || "dd LLLL yyyy");
  });
}

Troisième étape : appliquer un peu de style sur mes dates et mes entrées de journal

Je peux maintenant placer mes dates comme je le souhaite dans la page journal et dans le détail de chaque entrée.

Dans la page journal, je décide d'intégrer la date dans l'en-tête de chaque entrée, pour qu'il remonte lorsqu'on parcours les titres de la page :

<h3 class="entry-title">
  <span class="date">Invalid DateTime</span>
  
</h3>

Une navigation par titre donnera donc :

  "Titre de niveau 1 Journal de bord"
  "Titre de niveau 2 Entrées du journal"
  "Titre de niveau 3 27 décembre 2025 Amélioration du journal : dates"
  "Titre de niveau 3 26 décembre 2025 Amélioration du journal : pagination"
  "Titre de niveau 3 23 décembre 2025 Lancer mon journal de bord"
  "Titre de niveau 3 22 décembre 2025 Initialisation du projet"

Pour le détail des entrées du journal, je souhaite garder la date en dehors du h1 de la page (ça tombe bien, avec mon système de template actuel, je ne peux pas toucher au h1 : il est intégré dans le template base.html dont hérite toutes mes autres pages.)

En revanche je me heurte rapidement à un écueil : je n'ai aucune classe pour identifier mes pages d'entrées fiablement. Il va falloir que je réfléchisse à un système pour marquer mes pages (sachant que le template log-entry.html n'as pas accès à la balise <body>, elle aussi définie dans le template base.html)

Affaire à suivre…

  1. Heureusement, lorsque que je défini des dates à la main, eleventy accepte les dates dans un format plus court, sans avoir à saisir heures, minutes et secondes (exemple : 2025-12-27), et se charge ensuite de le convertir en objet Date. ↩︎

  2. J'ai lu quelques critiques sur l'usage de Luxon pour des tâches simples, le projet installant une dépendance de 4MB largement sous-exploitée sur la plupart des projets. J'ai décidé que c'était un inconvénient acceptable pour me permettre de passer vite à la suite. ↩︎