Add HTML <time> elements for dates across templates

templates/blogmark.html

@@ -15,7 +15,7 @@
 {% include "_draft_warning.html" %}
 <p><strong><a href="{{ blogmark.link_url }}">{{ blogmark.link_title }}</a></strong>{% if blogmark.via_url %} (<a href="{{ blogmark.via_url }}" title="{{ blogmark.via_title }}">via</a>){% endif %}{% if not blogmark.via_url and not blogmark.link_title|ends_with_punctuation %}.{% endif %} {% if not blogmark.use_markdown %}{{ blogmark.commentary|typography|linebreaks|strip_wrapping_p }}{% else %}{{ blogmark.body|strip_wrapping_p }}{% endif %}</p>
 
-<div class="entryFooter">Posted <a href="/{{ blogmark.created|date:"Y/M/j/" }}">{{ blogmark.created|date:"jS F Y" }}</a> at {{ blogmark.created|date:"f A"|lower }}</div>
+<div class="entryFooter">Posted <time datetime="{{ blogmark.created|date:"c" }}"><a href="/{{ blogmark.created|date:"Y/M/j/" }}">{{ blogmark.created|date:"jS F Y" }}</a> at {{ blogmark.created|date:"f A"|lower }}</time></div>
 {% endblock %}
 
 {% block secondary %}

templates/entry.html

@@ -14,7 +14,7 @@
 {% block item_content %}
 <div data-permalink-context="{{ entry.get_absolute_url }}">
 <h2>{{ entry.title|typography }}</h2>
-<p class="mobile-date">{{ entry.created|date:"jS F Y" }}</p>
+<p class="mobile-date"><time datetime="{{ entry.created|date:"c" }}">{{ entry.created|date:"jS F Y" }}</time></p>
 
 {% include "_draft_warning.html" %}
 
@@ -26,23 +26,23 @@ <h2>{{ entry.title|typography }}</h2>
 </div>
 {% endif %}
 </div>
-<div class="entryFooter">Posted <a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a> at {{ entry.created|date:"f A"|lower }} &middot; Follow me on <a href="https://fedi.simonwillison.net/@simon">Mastodon</a>, <a href="https://bsky.app/profile/simonwillison.net">Bluesky</a>, <a href="https://twitter.com/simonw">Twitter</a> or <a href="https://simonwillison.net/about/#subscribe">subscribe to my newsletter</a></div>
+<div class="entryFooter">Posted <time datetime="{{ entry.created|date:"c" }}"><a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a> at {{ entry.created|date:"f A"|lower }}</time> &middot; Follow me on <a href="https://fedi.simonwillison.net/@simon">Mastodon</a>, <a href="https://bsky.app/profile/simonwillison.net">Bluesky</a>, <a href="https://twitter.com/simonw">Twitter</a> or <a href="https://simonwillison.net/about/#subscribe">subscribe to my newsletter</a></div>
 {% endblock %}
 
 {% block recent_articles_header %}More recent articles{% endblock %}
 
 {% block secondary %}
 <div class="metabox">
-<p class="this-is">This is <strong>{{ entry.title|typography }}</strong> by Simon Willison, posted on <a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a>.</p>
+<p class="this-is">This is <strong>{{ entry.title|typography }}</strong> by Simon Willison, posted on <time datetime="{{ entry.created|date:"c" }}"><a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a></time>.</p>
 {% if entry.series %}{% with entry.series_info as series_info %}
 <div class="series-info">
   <p>Part of series <strong><a href="/series/{{ entry.series.slug }}/">{{ entry.series.title }}</a></strong></p>
   <ol start="{{ series_info.start }}">
     {% for other in series_info.entries %}
       {% if other.pk == entry.pk %}
-        <li><strong>{{ other }}</strong></a> - {{ other.created }} </li>
+        <li><strong>{{ other }}</strong></a> - <time datetime="{{ other.created|date:"c" }}">{{ other.created }}</time></li>
       {% else %}
-        <li><a href="{{ other.get_absolute_url }}">{{ other }}</a> - {{ other.created }} </li>
+        <li><a href="{{ other.get_absolute_url }}">{{ other }}</a> - <time datetime="{{ other.created|date:"c" }}">{{ other.created }}</time></li>
       {% endif %}
     {% endfor %}
     {% if series_info.has_next %}<li style="list-style-type: none;"><a href="/series/{{ entry.series.slug }}/">&#8230; more</a></li>{% endif %}

templates/includes/blog_mixed_list.html

@@ -1,13 +1,13 @@
 {% load entry_tags %}{% load humanize %}
 {% for item in items %}
 {% if year_headers %}{% ifchanged item.obj.created.year %}<h3 class="blog-mixed-list-year">{{ item.obj.created.year }}</h3>{% endifchanged %}{% endif %}
-{% if day_headers %}{% ifchanged item.obj.created.date %}<h3 class="blog-mixed-list-year">{% if day_links %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created.date }}</a>{% else %}{{ item.obj.created.date }}{% endif %}</h3>{% endifchanged %}{% endif %}
+{% if day_headers %}{% ifchanged item.obj.created.date %}<h3 class="blog-mixed-list-year">{% if day_links %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}"><time datetime="{{ item.obj.created|date:"c" }}">{{ item.obj.created.date }}</time></a>{% else %}<time datetime="{{ item.obj.created|date:"c" }}">{{ item.obj.created.date }}</time>{% endif %}</h3>{% endifchanged %}{% endif %}
 {% if item.type == "photoset" %}
 <div class="photoset segment">
   <a class="primary" href="{{ item.obj.get_absolute_url }}"><img class="primary" src="{{ item.obj.primary.url_s }}" alt="{{ item.obj.primary.title }}" width="75" height="75"></a>
   <h4><a href="{{ item.obj.get_absolute_url }}">{{ item.obj.title }}</a>, a photoset</h4>
   {% if item.obj.description %}<p>{{ item.obj.description }}</p>{% endif %}
-  <p class="meta">{{ item.obj.primary.created|date:"f A"|lower }} / {{ item.obj.photos.count }} photo{{ item.obj.photos.count|pluralize }}{% if item.obj.has_map %} / <a href="{{ item.obj.get_absolute_url }}map/">map</a>{% endif %}</p>
+  <p class="meta"><time datetime="{{ item.obj.created|date:"c" }}">{{ item.obj.primary.created|date:"f A"|lower }}</time> / {{ item.obj.photos.count }} photo{{ item.obj.photos.count|pluralize }}{% if item.obj.has_map %} / <a href="{{ item.obj.get_absolute_url }}map/">map</a>{% endif %}</p>
   <br style="clear: both">
 </div>
 {% endif %}
@@ -34,8 +34,10 @@ <h3><a href="{{ item.obj.get_absolute_url }}" rel="bookmark">{{ item.obj.title|t
   <p><strong><a href="{{ item.obj.link_url }}">{{ item.obj.link_title|typography }}</a></strong>{% if item.obj.via_url %}
     (<a href="{{ item.obj.via_url }}" title="{{ item.obj.via_title|typography }}">via</a>){% endif %}{% if not item.obj.via_url and not item.obj.link_title|ends_with_punctuation %}.{% endif %}
     {% if not item.obj.use_markdown %}{{ item.obj.commentary|typography|linebreaks|strip_wrapping_p }}{% else %}{{ item.obj.body|strip_wrapping_p }}{% endif %}</p>
-    <p class="date-and-tags"><a href="{{ item.obj.get_absolute_url }}" rel="bookmark">#</a> {% if showdate %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>,
-    {% endif %}<a href="{{ item.obj.get_absolute_url }}">{{ item.obj.created|date:"f A"|lower }}</a>
+    <p class="date-and-tags"><a href="{{ item.obj.get_absolute_url }}" rel="bookmark">#</a> <time datetime="{{ item.obj.created|date:"c" }}">
+      {% if showdate %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>,
+      {% endif %}<a href="{{ item.obj.get_absolute_url }}">{{ item.obj.created|date:"f A"|lower }}</a>
+    </time>
     {% if all_tags %} / {% for tag in all_tags %}{{ tag.get_link }}{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}</p>
 </div>
 {% endif %}
@@ -45,8 +47,10 @@ <h3><a href="{{ item.obj.get_absolute_url }}" rel="bookmark">{{ item.obj.title|t
   <p class="cite">&mdash; {% if item.obj.source_url %}<a href="{{ item.obj.source_url }}">{{ item.obj.source }}</a>{% else %}{{ item.obj.source }}{% endif %}{% if item.obj.context %}, <span class="context">{{ item.obj.context_rendered }}{% endif %}</span></p>
   <p class="date-and-tags">
     <a href="{{ item.obj.get_absolute_url }}" rel="bookmark">#</a>
-    {% if showdate %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>,
-    {% endif %}<a href="{{ item.obj.get_absolute_url }}">{{ item.obj.created|date:"f A"|lower }}</a>
+    <time datetime="{{ item.obj.created|date:"c" }}">
+      {% if showdate %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>,
+      {% endif %}<a href="{{ item.obj.get_absolute_url }}">{{ item.obj.created|date:"f A"|lower }}</a>
+    </time>
     {% if all_tags %} / {% for tag in all_tags %}{{ tag.get_link }}{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
   </p>
 </div>
@@ -56,8 +60,10 @@ <h3><a href="{{ item.obj.get_absolute_url }}" rel="bookmark">{{ item.obj.title|t
   {{ item.obj.body_rendered }}
   <p class="date-and-tags">
     <a href="{{ item.obj.get_absolute_url }}" rel="bookmark">#</a>
-    {% if showdate %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>,
-    {% endif %}<a href="{{ item.obj.get_absolute_url }}">{{ item.obj.created|date:"f A"|lower }}</a>
+    <time datetime="{{ item.obj.created|date:"c" }}">
+      {% if showdate %}<a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>,
+      {% endif %}<a href="{{ item.obj.get_absolute_url }}">{{ item.obj.created|date:"f A"|lower }}</a>
+    </time>
     {% if all_tags %} / {% for tag in all_tags %}{{ tag.get_link }}{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
   </p>
 </div>

templates/includes/entry_footer.html

@@ -1 +1 @@
-<a href="{{ entry.get_absolute_url }}" title="Permalink for &quot;{{ entry.title }}&quot;">{{ entry.created|date:"f A"|lower }}</a>{% if showdate %} / <a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a>{% endif %}{% if entry.tags.count %} / {% for tag in entry.tags.all %}{{ tag.get_link }}{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
+<a href="{{ entry.get_absolute_url }}" title="Permalink for &quot;{{ entry.title }}&quot;"><time datetime="{{ entry.created|date:"c" }}">{{ entry.created|date:"f A"|lower }}</a>{% if showdate %} / <a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a>{% endif %}</time>{% if entry.tags.count %} / {% for tag in entry.tags.all %}{{ tag.get_link }}{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}

templates/item_base.html

@@ -32,7 +32,7 @@
 <h2>{% block recent_articles_header %}Recent articles{% endblock %}</h2>
 <ul class="bullets">
   {% for article in recent_articles %}{% if article != item %}
-    <li><a href="{{ article.get_absolute_url }}">{{ article }}</a> - {{ article.created|date:"jS F Y" }}</li>
+    <li><a href="{{ article.get_absolute_url }}">{{ article }}</a> - <time datetime="{{ article.created|date:"c" }}">{{ article.created|date:"jS F Y" }}</time></li>
   {% endif %}{% endfor %}
 </ul>
 </div>

templates/note.html

@@ -1,8 +1,8 @@
 {% extends "item_base.html" %}
 
-{% block title %}{% if note.title %}{{ note.title }}{% else %}Note on {{ note.created|date:"jS F Y" }}{% endif %}{% endblock %}
+{% block title %}{% if note.title %}{{ note.title }}{% else %}Note on <time datetime="{{ note.created|date:"c" }}">{{ note.created|date:"jS F Y" }}</time>{% endif %}{% endblock %}
 
-{% block card_title %}Note on {{ note.created|date:"jS F Y" }}{% endblock %}
+{% block card_title %}Note on <time datetime="{{ note.created|date:"c" }}">{{ note.created|date:"jS F Y" }}</time>{% endblock %}
 {% block card_description %}{{ note.body|truncatewords:30 }}{% endblock %}
 
 {% load entry_tags %}
@@ -12,7 +12,7 @@
 {{ note.body_rendered }}
 </div>
 
-<div class="entryFooter">Posted <a href="/{{ note.created|date:"Y/M/j/" }}">{{ note.created|date:"jS F Y" }}</a> at {{ note.created|date:"f A"|lower }}</div>
+<div class="entryFooter">Posted <time datetime="{{ note.created|date:"c" }}"><a href="/{{ note.created|date:"Y/M/j/" }}">{{ note.created|date:"jS F Y" }}</a> at {{ note.created|date:"f A"|lower }}</time></div>
 {% endblock %}
 
 {% block secondary %}

templates/quotation.html

@@ -13,7 +13,7 @@
 <p class="cite">&mdash; {% if quotation.source_url %}<a href="{{ quotation.source_url }}">{{ quotation.source }}</a>{% else %}{{ quotation.source }}{% endif %}{% if quotation.context %}, <span class="context">{{ quotation.context_rendered }}</span>{% endif %}</p>
 </div>
 
-<div class="entryFooter">Posted <a href="/{{ quotation.created|date:"Y/M/j/" }}">{{ quotation.created|date:"jS F Y" }}</a> at {{ quotation.created|date:"f A"|lower }}</div>
+<div class="entryFooter">Posted <time datetime="{{ quotation.created|date:"c" }}"><a href="/{{ quotation.created|date:"Y/M/j/" }}">{{ quotation.created|date:"jS F Y" }}</a> at {{ quotation.created|date:"f A"|lower }}</time></div>
 {% endblock %}
 
 {% block secondary %}

templates/wide.html

@@ -18,7 +18,7 @@ <h2>{{ entry.title|typography }}</h2>
 {{ entry.body|xhtml|resize_images_to_fit_width:"450"|typography|xhtml2html }}
 
 <div class="entryFooter">
-    Posted <a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a> at {{ entry.created|date:"f A"|lower }}
+    Posted <time datetime="{{ entry.created|date:"c" }}"><a href="/{{ entry.created|date:"Y/M/j/" }}">{{ entry.created|date:"jS F Y" }}</a> at {{ entry.created|date:"f A"|lower }}</time>
     {% if entry.tags.count %}
     &middot; Tagged {% for tag in entry.tags.all %}{{ tag.get_reltag }}{% if not forloop.last %}, {% endif %}{% endfor %}
     {% endif %}    &middot; Follow me <a href="https://fedi.simonwillison.net/@simon">on Mastodon</a> or <a href="https://twitter.com/simonw">on Twitter</a>