feat: popular posts

src/_includes/forms/search.liquid

@@ -1,26 +0,0 @@
-<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
-<style>
-  :root {
-    --pagefind-ui-font: InterVariable, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --pagefind-ui-primary: #374151;
-    --pagefind-ui-text: #374151;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --pagefind-ui-primary: #e5e7eb;
-      --pagefind-ui-text: #e5e7eb;
-      --pagefind-ui-background: #152028;
-      --pagefind-ui-border: #152028;
-      --pagefind-ui-tag: #152028;
-    }
-  }
-</style>
-<div id="search" class="search"></div>
-<script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>
-<script>
-  if (plausible) {
-    document.querySelector('#search').addEventListener('focusout', (e) => {
-      plausible('Search', { props: { query: e.target.value }})
-    })
-  }
-</script>

src/_includes/popular-posts.liquid

@@ -0,0 +1,16 @@
+{% assign posts = collections.posts | getPopularPosts: analytics %}
+<div class="not-prose">
+  <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
+    {% heroicon "outline" "fire" "Popular" "height=28" %}
+    <div class="ml-1">Popular posts</div>
+  </h2>
+  <ul class="list-inside list-disc pl-5 md:pl-10">
+    {% for post in posts %}
+      <li class="mt-1.5 mb-2">
+        <a href="{{post.url}}" title="{{ post.data.title | escape}}">
+          {{ post.data.title }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>

src/_includes/post.liquid

@@ -14,3 +14,4 @@ layout: main
 {% include "post-tags.liquid" %}
 {% include "webmentions.liquid" %}
 {% include "author.liquid" %}
+{% include "popular-posts.liquid" %}