Add author block and publish dates

config/filters/dates.js

@@ -1,18 +1,20 @@
 module.exports = function(eleventyConfig) {
-    eleventyConfig.addFilter('parseDate', dateString => new Date(dateString));
-    
-    eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {
-        "dateStyle": "short"
-    }));
+  eleventyConfig.addFilter('parseDate', dateString => new Date(dateString));
 
-    eleventyConfig.addFilter('dateTimeDisplay', date => new Date(date).toLocaleString('en-GB', {
-        'dateStyle': 'short',
-        'timeStyle': 'short',
-    }));
+  eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {
+    "dateStyle": "short"
+  }));
 
-    eleventyConfig.addFilter('timeDisplay', date => new Date(date).toLocaleTimeString('en-GB', {
-        'hour': '2-digit',
-        'minute': 'numeric',
-        'hour12': true
-    }));
-}
+  eleventyConfig.addFilter('dateTimeDisplay', date => new Date(date).toLocaleString('en-GB', {
+    'dateStyle': 'short',
+    'timeStyle': 'short',
+  }));
+
+  eleventyConfig.addFilter('timeDisplay', date => new Date(date).toLocaleTimeString('en-GB', {
+    'hour': '2-digit',
+    'minute': 'numeric',
+    'hour12': true
+  }));
+
+  eleventyConfig.addFilter('rfc3339', date => new Date(date).toISOString());
+}

src/_includes/post.njk

@@ -7,7 +7,8 @@ eleventyComputed:
 ---
 <main class="wrapper-md stack-lg">
     <article class="stack-md h-entry">
-        <h1 class="p-name"><a href="{{ post.url }}">{{ title | safe }}</a></h1>
+        <h1 class="p-name"><a href="{{ post.url }}" class="u-url">{{ title | safe }}</a></h1>
+        <p class="published">Published: <time class="dt-published" datetime="{{ post.date | rfc3339 }}">{{ post.date | dateDisplay }}</time></p>
         {{ post.excerpt.rendered | safe }}
         <div class="e-content stack-md">
         {{ content | safe }}
@@ -17,13 +18,20 @@ eleventyComputed:
             <h2>Tags:</h2>
             <ul role="list">
                 {% for tag in post.tags %}
-                    <li><a href="/post/tag/{{ tag.slug }}" rel="tag">#{{ tag.name }}</a></li>
+                    <li><a class="p-category" href="/post/tag/{{ tag.slug }}" rel="tag">#{{ tag.name }}</a></li>
                 {% endfor %}
             </ul>
         </section>
         {% endif %}
     </article>
 
+    <section class="p-author h-card" data-section="author">
+      <h2>About the author</h2>
+      {% image metadata.author.avatar, "My face", "box circle u-photo", "(max-width: 500px) 50px, 100px", [50, 100] %}
+
+      <p class="p-note">I'm <a href="https://{{metadata.site.domain}}" class="u-url p-name">Lewis Dale</a>, a software engineer and web developer based in the UK. I write about writing software, silly projects, and cycling. A lot of cycling. Too much, maybe.</p>
+    </section>
+
     <section class="stack-sm" data-section="responses">
         <h2>Responses</h2>
         
@@ -78,4 +86,4 @@ eleventyComputed:
 
     </section>
 
-</main>
+</main>

src/blog/index.html

@@ -12,7 +12,7 @@ pagination:
         {% for item in pagination.items %}
         <li class="stack-xs">
             <h2><a href="/post/{{ item.slug }}">{{ item.title.rendered | safe }}</a></h2>
-            <time class="block" datetime="{{ item.date }}">{{ item.date | parseDate | dateDisplay }}</time>
+            <time class="block" datetime="{{ item.date | rfc3339 }}">{{ item.date | dateDisplay }}</time>
             {{ item.excerpt.rendered | safe }}
             <a href="/post/{{ item.slug }}" class="inline-block">Read more</a>
         </li>
@@ -26,4 +26,4 @@ pagination:
             <a href="{{ pagination.href.previous }}">Newer</a>
         {% endif %}
     </nav>
-</main>
+</main>

src/blog/tag.html

@@ -17,10 +17,10 @@ eleventyComputed:
     {% for item in tag.posts %}
     <li class="stack-xs">
         <h2><a href="/post/{{ item.slug }}">{{ item.title.rendered | safe }}</a></h2>
-        <time datetime="{{ post.date }}" class="block">{{ item.date | parseDate | dateDisplay }}</time>
+        <time datetime="{{ item.date | rfc3339 }}" class="block">{{ item.date | dateDisplay }}</time>
         {{ item.excerpt.rendered | safe }}
         <a href="/post/{{ item.slug }}" class="inline-block">Read more</a>
     </li>
     {% endfor %}
 </ol>
-</main>
+</main>

src/css/exceptions/article.css

@@ -1,4 +1,12 @@
 article {
+  .published {
+    color: var(--color-subtle);
+    display: inline-block;
+    font-size: var(--text-size-s);
+    font-style: italic;
+    font-weight: 300;
+  }
+
 	img {
 		margin-inline-start: auto;
 		margin-inline-end: auto;
@@ -18,4 +26,28 @@ article {
 	.p-summary {
 		display: none;
 	}
-}
+}
+
+section[data-section="author"] {
+  display: flex;
+  gap: var(--space-size-m);
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  h2 {
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  p {
+      flex-basis: 0;
+      flex-grow: 999;
+      min-inline-size: 70%;
+  }
+
+  picture {
+    flex-basis: 7rem;
+    flex-grow: 1;
+  }
+}

src/sitemap.njk

@@ -28,7 +28,7 @@ permalink: /sitemap.xml
     {% for post in posts %}
     <url>
         <loc>https://{{ metadata.site.domain }}/post/{{ post.slug }}/</loc>
-        <lastmod>{{ post.date }}Z</lastmod>
+        <lastmod>{{ post.date | rfc3339 }}</lastmod>
     </url>
     {% endfor %}
-</urlset>
+</urlset>