add datetime attributes to <time> elements (GoogleChrome#3630)

Currently dates are marked up using `<time>` but they lack `datetime` attributes. The HTML spec requires that the date value to be machine-readable; either the text content follows the valid date string (ISO-like patterns), or the element has the `datetime` attribute where the value is a valid date string. https://whatwg.org/html#the-time-element Co-authored-by: Matthias Rohmer <[email protected]>
FabusXpl · May 8, 2023 · e54112c · e54112c
1 parent 2b2baf3
commit e54112c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/site/_includes/partials/post-headline.njk b/site/_includes/partials/post-headline.njk
@@ -7,11 +7,15 @@
 {% if date %}
   <p class="type--caption color-secondary-text">
     {{ 'i18n.common.published_on' | i18n(locale) }}
-    <time>{{ helpers.formatDateLong(date, locale) }}</time>
+    <time datetime="{{ helpers.formatDateNumeric(date) }}">
+      {{ helpers.formatDateLong(date, locale) }}
+    </time>
     {% if updated %}
     <span>•</span>
     {{ 'i18n.common.updated_on' | i18n(locale) }}
-    <time>{{ helpers.formatDateLong(updated, locale) }}</time>
+    <time datetime="{{ helpers.formatDateNumeric(updated) }}">
+      {{ helpers.formatDateLong(updated, locale) }}
+    </time>
   {% endif %}
   </p>
 {% endif %}

diff --git a/site/_includes/partials/updated.njk b/site/_includes/partials/updated.njk
@@ -1,9 +1,9 @@
 <p class="color-secondary-text type--caption">
   {% if updated %}
-    {{ 'i18n.common.updated_on' | i18n(locale) }} <time>{{ helpers.formatDateLong(updated, locale) }}</time>
+    {{ 'i18n.common.updated_on' | i18n(locale) }} <time datetime="{{ helpers.formatDateNumeric(updated) }}">{{ helpers.formatDateLong(updated, locale) }}</time>
     <span>•</span>
   {% elif date %}
-    {{ 'i18n.common.updated_on' | i18n(locale) }} <time>{{ helpers.formatDateLong(date, locale) }}</time>
+    {{ 'i18n.common.published_on' | i18n(locale) }} <time datetime="{{ helpers.formatDateNumeric(date) }}">{{ helpers.formatDateLong(date, locale) }}</time>
     <span>•</span>
   {% endif %}
   <a href="{{ page.inputPath | githubLink }}">