Better formatting for webmention replies

layouts/partials/webmentions.html

@@ -5,21 +5,36 @@
     {{ $likes := index (index .Site.Data.webmentions $urlized) "like-of" }}
     {{ $replys := index (index .Site.Data.webmentions $urlized) "in-reply-to" }}
     {{ $reposts := index (index .Site.Data.webmentions $urlized) "repost-of"}}
+    {{ if $likes }}
     <h4>Likes</h4>
     {{ range $i, $like := $likes }}
     <a href="{{$like.url}}"><img src="{{ $like.author.photo}}" alt="{{ $like.author.name }}" class="profile photo"></a>
-    {{end}}
+    {{ end }}
+    {{ end }}
 
+    {{ if $reposts }}
     <h4>Reposts</h4>
     {{ range $i, $repost := $reposts }}
     <a href="{{$repost.url}}"><img src="{{ $repost.author.photo}}" alt="{{ $repost.author.name }}"
             class="profile photo"></a>
-    {{end}}
+    {{ end }}
+    {{ end }}
 
+    {{ if $replys }}
     <h4>Comments and Replies</h4>
     {{ range $i, $reply := $replys }}
+    <div class="webmention reply">
         <a href="{{$reply.url}}"><img src="{{ $reply.author.photo}}" alt="{{ $reply.author.name }}"
                 class="profile photo"></a>
+        <dl class="webmention reply">
+            <dt>Comment by {{ $reply.author.name }} on
+                {{ (time $reply.published).Local | dateFormat "Mon Jan 2, 2006" }}</dt>
+            <dd>
+                {{ $reply.content.text | replaceRE "\\n" "<br><br>" | safeHTML | truncate 512 }}
+            </dd>
+        </dl>
+    </div>
+    {{ end }}
     {{ end }}
 </div>
 {{ end }}

static/css/layout.css

@@ -5,6 +5,11 @@
   flex-wrap: wrap;
 }
 
+div.webmention.reply {
+  display: flex;
+  flex-direction: row;
+}
+
 div.author-card-content {
   flex-grow: 1;
 }

static/css/style.css

@@ -46,3 +46,8 @@ p.built-with {
   font-size: 0.8em;
   margin: 0;
 }
+
+img.profile.photo {
+  max-width: 60px;
+  padding: 0.5em;
+}