Almost done - add replies, webmentions, finish rendering posts from wordpress

src/_includes/base.njk

@@ -9,7 +9,13 @@
 		<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />
 		{% endif %}
 		<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
+
+		<link rel="webmention" href="https://lewisdale.dev/wp-json/webmention/1.0/endpoint" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="generator" content="eleventy" />
+
+		<meta name="author" content="{{ metadata.author.name }}" />
+		<meta name="description" content="{{ description }}" />
 	</head>
 	<body>
 		<header class="wrapper-lg row space-between">
@@ -20,7 +26,6 @@
 					<li><a href="/">Home</a></li>
 					<li><a href="/now">Now</a></li>
 					<li><a href="/blog">Blog</a></li>
-					<li><a href="/about">About me</a></li>
 				</ul>
 			</nav>
 		</header>

src/_includes/post.njk

@@ -3,6 +3,7 @@ layout: base.njk
 includePrism: true
 eleventyComputed:
     title: "{{ post.title.rendered | safe }}"
+    description: "{{ post.yoast_head_json.description }}"
 ---
 <main class="wrapper-md stack-lg">
     <article class="stack-md">
@@ -10,9 +11,64 @@ eleventyComputed:
         {{ content | safe }}
     </article>
 
-    <div class="h-card">
+    <section class="stack-sm">
+        <h2>Responses</h2>
+        
+        {% if post.comments.like | length %}
+        <div class="stack-xs">
+            <h3 class="block w-full">Likes</h3>
+
+            <div class="row overlaps">
+            {% for like in post.comments.like %}
+                <a href="{{ like.author.url }}">
+                    <img src="{{ like.author.avatars["96"] }}" alt="{{ like.author.name }}" class="circle" />
+                </a>
+            {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+        {% if post.comments.repost | length %}
+        <div class="stack-xs">
+            <h3 class="block w-full">Reposts</h3>
+
+            <div class="row overlaps">
+            {% for like in post.comments.repost %}
+                <a href="{{ like.author.url }}">
+                    <img src="{{ like.author.avatars["96"] }}" alt="{{ like.author.name }}" class="circle" />
+                </a>
+            {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+
+        {% if post.comments.reply | length %}
+        <div class="stack-xs">
+            <h3 class="block w-full">Replies</h3>
+
+            <ol>
+                {% for reply in post.comments.reply %}
+
+                <li class="row items-center">
+                    <a href="{{ like.author.url }}">
+                        <img src="{{ reply.author.avatars["96"] }}" alt="{{ reply.author.name }}" class="max-w-[4rem] box" />
+                    </a>
+                    <div class="stack-2xs">
+                        {% set date = reply.date | parseDate %}
+                        <h4>{{ reply.author.name }} <span class="font-normal">on</span> {{ date | dateDisplay }} <span class="font-normal">at</span> {{ date | timeDisplay }}</h4>
+                        <a href="{{ reply.canonical }}">Original comment</a>
+                        <p>{{ reply.content | safe }}</p>
+                    </div>
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
+        {% endif %}
+
+    </section>
+    <section class="h-card">
         <h2>About Lewis</h2>
         
         {% image metadata.author.avatar, "My face", "u-photo box circle", "150px", [150] %}
-    </div>
+    </section>
+
 </main>