Add article information cards

templates/entry.html

@@ -33,6 +33,71 @@
     {% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
   </div>
 </article>
+{% elif this.parent._id == 'articles' %}
+{% set article_word_count = this.body|striptags|wordcount %}
+{% set article_reading_minutes = (article_word_count + 199) // 200 %}
+<article class="article-post-layout shell">
+  <header class="article-entry-header">
+    <p class="eyebrow">{{ this.kicker }}</p>
+    <h1>{{ this.title }}</h1>
+    <p class="dek">{{ this.summary }}</p>
+  </header>
+
+  <aside class="post-info article-info" aria-label="Article information">
+    <p class="post-info-title">Article information</p>
+    <dl>
+      {% if this.author %}
+      <div class="post-info-row">
+        <dt>Author</dt>
+        <dd>{{ this.author }}</dd>
+      </div>
+      {% endif %}
+      <div class="post-info-row">
+        <dt>Published</dt>
+        <dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
+      </div>
+      {% if this.updated %}
+      <div class="post-info-row">
+        <dt>Updated</dt>
+        <dd><time datetime="{{ this.updated }}">{{ this.updated|dateformat('long') }}</time></dd>
+      </div>
+      {% endif %}
+      <div class="post-info-row">
+        <dt>Reading time</dt>
+        <dd>{{ article_reading_minutes }} min</dd>
+      </div>
+      {% if this.tags %}
+      <div class="post-info-row">
+        <dt>Topics</dt>
+        <dd class="post-tags">
+          {% for tag in this.tags %}<span>{{ tag }}</span>{% endfor %}
+        </dd>
+      </div>
+      {% endif %}
+      {% if this.published_urls %}
+      <div class="post-info-row">
+        <dt>Published online</dt>
+        <dd>
+          <ul class="publication-links">
+            {% for published_url in this.published_urls %}
+            <li>
+              <a href="{{ published_url }}" title="{{ published_url }}" aria-label="Open published article at {{ published_url }}">
+                {% if published_url|length > 40 %}{{ published_url[:25] }}…{{ published_url[-14:] }}{% else %}{{ published_url }}{% endif %}
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+        </dd>
+      </div>
+      {% endif %}
+    </dl>
+  </aside>
+
+  <div class="article-entry-body prose">
+    {{ this.body }}
+    {% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
+  </div>
+</article>
 {% else %}
 <article>
   <header class="hero compact entry-hero">