Add article information cards

assets/static/style.css

@@ -65,7 +65,8 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
 .button-link { display: inline-block; margin-top: 20px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
 
-.blog-post-layout {
+.blog-post-layout,
+.article-post-layout {
   display: grid;
   grid-template-columns: minmax(0, 640px) minmax(230px, 280px);
   grid-template-areas:
@@ -75,10 +76,14 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   align-items: start;
   padding-block: 68px 90px;
 }
-.blog-entry-header { grid-area: header; }
-.blog-entry-header h1 { font-style: normal; }
-.blog-entry-header .dek { margin-bottom: 0; }
-.blog-entry-body { grid-area: body; width: 100%; }
+.blog-entry-header,
+.article-entry-header { grid-area: header; }
+.blog-entry-header h1,
+.article-entry-header h1 { font-style: normal; }
+.blog-entry-header .dek,
+.article-entry-header .dek { margin-bottom: 0; }
+.blog-entry-body,
+.article-entry-body { grid-area: body; width: 100%; }
 .post-info {
   grid-area: info;
   border: 1px solid var(--rule);
@@ -112,6 +117,17 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   letter-spacing: .08em;
   text-transform: uppercase;
 }
+.article-info .post-info-title { color: var(--teal); }
+.publication-links { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
+.publication-links a {
+  display: block;
+  color: var(--teal);
+  font: 500 10px/1.5 var(--mono);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+}
+.publication-links a:hover,
+.publication-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
 
 .site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 9px; }
 .footer-inner { min-height: 105px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
@@ -127,7 +143,8 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   .hero, .hero.compact { padding-block: 44px; }
   h1 { font-size: 30px; }
   .card-grid { grid-template-columns: 1fr; }
-  .blog-post-layout {
+  .blog-post-layout,
+  .article-post-layout {
     grid-template-columns: 1fr;
     grid-template-areas:
       "header"

models/entry.ini

@@ -10,6 +10,10 @@ type = string
 label = Date
 type = date
 
+[fields.updated]
+label = Updated
+type = date
+
 [fields.author]
 label = Author
 type = string
@@ -35,3 +39,8 @@ type = markdown
 [fields.external_url]
 label = External URL
 type = url
+
+[fields.published_urls]
+label = Published URLs
+type = strings
+description = Add one complete URL per line.

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">