Post about top Umami posts

src/index.html

@@ -28,15 +28,28 @@ layout: base.njk
 		</p>
 
 	</section>
-	<section class="stack-md">
-		<h2>Recent Posts</h2>
+	<div class="grid" data-grid-cols="2">
+		<section class="stack-md">
+			<h2>Recent Posts</h2>
 
-		<ul class="stack-2xs" role='list'>
-		{% for post in collections.posts | reverse | take(3) %}
-		<li><a href="{{ post.url }}">{{ post.data.title | safe }}</a> <time datetime="{{ post.date | dateToRfc3339 }}">{{ post.date | dateDisplay }}</time></li>
-		{% endfor %}
-		</ul>
+			<ul class="stack-2xs" role='list'>
+			{% for post in collections.posts | reverse | take(3) %}
+			<li><a href="{{ post.url }}">{{ post.data.title | safe }}</a> <time datetime="{{ post.date | dateToRfc3339 }}">{{ post.date | dateDisplay }}</time></li>
+			{% endfor %}
+			</ul>
 
-		<a href="/blog" class="block">View more posts</a>
-	</section>	
+			<a href="/blog" class="block">View more posts</a>
+		</section>
+		<section class="stack-md">
+			<h2>Popular posts</h2>
+
+			<ul class="stack-2xs" role='list'>
+			{% for post in postMetrics | take(3) | metricsToPosts(collections.posts) %}
+			<li><a href="{{ post.url }}">{{ post.data.title | safe }}</a> <time datetime="{{ post.date | dateToRfc3339 }}">{{ post.date | dateDisplay }}</time></li>
+			{% endfor %}
+			</ul>
+
+			<a href="/blog" class="block">View more posts</a>
+		</section>
+	</div>
 </main>