Auto-adjust publish and update timestamps via JS

static/scripts/relativetime.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Array.from(document.getElementsByClassName("relative-timestamp")).forEach(
+  function (timestamp) {
+    timestamp.innerText = new Intl.DateTimeFormat(undefined, {
+      dateStyle: "long",
+      timeStyle: "short",
+    }).format(new Date(timestamp.dateTime));
+  }
+);

templates/page.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %} {% block metadata %}
 
 <meta name="description" content="{{ page.description }}" />
+<script defer src="/scripts/relativetime.js"></script>
 
 {% endblock %} {% block content %}
 <h2>{{ page.title }}</h2>
@@ -8,7 +9,7 @@
   {% if page.date and page.date is defined %}
   <p>
     <span class="article-metadata-label">First published</span>:
-    <time datetime="{{page.date}}"
+    <time class="relative-timestamp" datetime="{{page.date}}"
       >{{ page.date | date(format="%F %R (%Z)", timezone="Europe/Berlin")
       }}</time
     >
@@ -16,7 +17,7 @@
   {% endif %} {% if page.updated and page.updated != page.date %}
   <p>
     <span class="article-metadata-label">Last updated on</span>:
-    <time datetime="{{page.updated}}"
+    <time class="relative-timestamp" datetime="{{page.updated}}"
       >{{ page.updated | date(format="%F %R (%Z)", timezone="Europe/Berlin")
       }}</time
     >