[POC] Update date des articles

.eleventy.js

@@ -72,6 +72,24 @@ module.exports = function (eleventyConfig) {
         return new Intl.DateTimeFormat(locale, options).format(date)
     })
 
+    eleventyConfig.addShortcode('localizedUpdateDate', function (updateDate = null, locale = null) {
+        if (date === null) {
+            throw new Error('[localizedUpdateDate]: no date provided')
+        }
+
+        if (locale === null) {
+            throw new Error('[localizedUpdateDate]: no locale provided')
+        }
+
+        const options = {
+            day: '2-digit',
+            month: 'long',
+            year: 'numeric'
+        }
+
+        return new Intl.DateTimeFormat(locale, options).format(updateDate)
+    })
+
     /**
      * @see https://stackoverflow.com/questions/6393943/convert-javascript-string-in-dot-notation-into-an-object-reference#answer-6394168
      */

src/_includes/components/ui.njk

@@ -50,6 +50,9 @@
         {% if post.date %}
           <time class="text-muted" datetime="{{ post.date.toISOString() }}">{% localizedDate post.date, locale %}</time>
         {% endif %}
+        {% if post.updateDate %}
+          <time class="text-muted" datetime="{{ post.updateDate.toISOString() }}">{% localizedDate post.updateDate, locale %}</time>
+        {% endif %}
         {% if post.data.abstract %}
           <p class="my-2">{{ post.data.abstract }}</p>
         {% endif %}
@@ -85,6 +88,9 @@
       {% if displayDate == true and post.date %}
         <time class="text-muted" datetime="{{ post.date.toISOString() }}">{% localizedDate post.date, locale  %}</time>
       {% endif %}
+      {% if displayDate == true and post.updateDate %}
+        <time class="text-muted" datetime="{{ post.updateDate.toISOString() }}">{% localizedDate post.updateDate, locale %}</time>
+      {% endif %}
       {% if post.data.abstract %}
         <p class="my-2">{{ post.data.abstract }}</p>
       {% endif %}

src/_includes/templates/default.njk

@@ -24,7 +24,7 @@
         {% endif %}
         <main id="main-content" class="col-md-{{ mainContentColumn }}" role="main">
           {% if titleBeforeTag %}
-            <h1>{{ title }}</h1>  
+            <h1>{{ title }}</h1>
             {% if tags %}
               <span class="visually-hidden" id="filters_label">
                 {{'tags.list' | translate}}
@@ -36,8 +36,11 @@
               {% endfor -%}
               </ul>
             {% endif %}
-            <time class="text-muted" datetime="{{ page.date.toISOString() }}">{% localizedDate page.date, locale  %}</time>
-          {% endif %}  
+            <time class="text-muted" datetime="{{ page.date.toISOString() }}">{% localizedDate page.date, locale %}</time>
+            {% if updateDate %}
+              <time class="text-muted" datetime="{{ page.updateDate.toISOString() }}">{% localizedUpdateDate page.updateDate, locale %}</time>
+            {% endif %}
+          {% endif %}
           <div class="mt-4">
           {{ content | safe }}
           </div>

src/fr/articles/html5-et-aria.md

@@ -3,6 +3,7 @@ title: "HTML5 & ARIA"
 abstract: "Introduction HTML 5 et ARIA"
 titleBeforeTag: true
 date: "2016-09-16"
+updateDate: "2025-01-10"
 tags:
   - web
   - beginner