Display datetimes / duration in a nicer format

pyproject.toml

@@ -28,6 +28,7 @@ dependencies = [
     "asyncpg>=0.29.0",
     "annoy>=1.17.3",
     "numpy>=1.26.4",
+    "babel>=2.15.0",
 ]
 readme = "README.md"
 requires-python = ">= 3.11"

requirements-dev.lock

@@ -47,6 +47,8 @@ attrs==23.2.0
     # via cattrs
     # via de-quoi-parle-le-monde
     # via requests-cache
+babel==2.15.0
+    # via de-quoi-parle-le-monde
 beautifulsoup4==4.12.3
     # via de-quoi-parle-le-monde
 boto3==1.34.69

requirements.lock

@@ -47,6 +47,8 @@ attrs==23.2.0
     # via cattrs
     # via de-quoi-parle-le-monde
     # via requests-cache
+babel==2.15.0
+    # via de-quoi-parle-le-monde
 beautifulsoup4==4.12.3
     # via de-quoi-parle-le-monde
 boto3==1.34.69

src/de_quoi_parle_le_monde/web.py

@@ -1,16 +1,37 @@
+from datetime import timedelta
 from fastapi import FastAPI, Request, Depends
 from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
+from babel.dates import format_datetime, format_timedelta
+from babel import Locale
 
 from de_quoi_parle_le_monde.medias import media_collection
 from de_quoi_parle_le_monde.storage import Storage
 from de_quoi_parle_le_monde.similarity_index import SimilaritySearch
 
 
+def add_date_processing(_any):
+    def absolute_datetime(dt):
+        return format_datetime(dt, format="EEEE d MMMM @ HH:mm", locale=Locale("fr", "FR"))
+
+    def duration(reference, target):
+        delta = target - reference
+        kwargs = dict(granularity='hour', locale=Locale("fr", "FR"))
+        if delta > timedelta(0):
+            return f"{format_timedelta(delta, **kwargs)} après"
+        else:
+            return f"{format_timedelta(delta, **kwargs)} avant"
+
+    return {
+        "absolute_datetime": absolute_datetime,
+        "duration": duration
+    }
+
+
 app = FastAPI()
 app.mount("/static", StaticFiles(directory="static"), name="static")
-templates = Jinja2Templates(directory="templates")
+templates = Jinja2Templates(directory="templates", context_processors=[add_date_processing])
 
 
 async def get_db():

templates/site_main_article_detail.html

@@ -23,6 +23,7 @@
         </div>
         <div class="focused">
             <a href="{{ focused['url_article'] }}"><h2>{{ focused["title"] }} <img src="{{ url_for('static', path='/external-link.svg') }}" height="30px"></h2></a>
+            <time datetime="{{ focused['timestamp_virtual'] }}">{{ absolute_datetime(focused["timestamp_virtual"]) }}</time>
             <div class="similar">
                 <h3>Articles similaires</h3>
                 <ul>
@@ -36,12 +37,16 @@
         </div>
         {% if after %}
             <div class="after">
-                {{ article(after) }} @ {{ after["timestamp_virtual"] }}
+                {{ article(after) }}
+                <time class="absolute" datetime="{{ after['timestamp_virtual'] }}">{{ absolute_datetime(after["timestamp_virtual"]) }}</time>
+                (<time class="relative">{{ duration(focused["timestamp_virtual"], after["timestamp_virtual"]) }}</time>)
             </div>
         {% endif %}
         {% if before %}
             <div class="before">
-                {{ article(before) }} @ {{ before["timestamp_virtual"] }}
+                {{ article(before) }}
+                <time datetime="{{ before['timestamp_virtual'] }}">{{ absolute_datetime(before["timestamp_virtual"]) }}</time>
+                (<time class="relative">{{ duration(focused["timestamp_virtual"], before["timestamp_virtual"]) }}</time>)
             </div>
         {% endif %}
         <div class="down">