feat: popular posts

.env

@@ -1,3 +1,4 @@
+API_KEY_PLAUSIBLE=
 API_KEY_TRAKT=
 API_KEY_WEBMENTIONS_CORYD_DEV=
 API_BEARER_APPLE_MUSIC=

config/filters.js

@@ -15,6 +15,16 @@ module.exports = {
     if (image && image !== '') return image
     return '/assets/img/social-card.webp'
   },
+  getPopularPosts: (posts, analytics) => {
+    return posts
+      .filter((post) => {
+        if (analytics.find((p) => p.page === post.url)) return true
+      })
+      .sort((a, b) => {
+        const visitors = (page) => analytics.filter((p) => p.page === page.url)[0].visitors
+        return visitors(b) - visitors(a)
+      })
+  },
   webmentionsByUrl: (webmentions, url) => {
     const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of']
 

src/404.md

@@ -20,3 +20,5 @@ permalink: 404.html
     </a>
   </div>
 </div>
+<hr />
+{% include "popular-posts.liquid" %}

src/_data/analytics.js

@@ -0,0 +1,18 @@
+const EleventyFetch = require('@11ty/eleventy-fetch')
+
+module.exports = async function () {
+  const API_KEY_PLAUSIBLE = process.env.API_KEY_PLAUSIBLE
+  const url =
+    'https://plausible.io/api/v1/stats/breakdown?site_id=coryd.dev&period=6mo&property=event:page&limit=30'
+  const res = EleventyFetch(url, {
+    duration: '1h',
+    type: 'json',
+    fetchOptions: {
+      headers: {
+        Authorization: `Bearer ${API_KEY_PLAUSIBLE}`,
+      },
+    },
+  }).catch()
+  const pages = await res
+  return pages.results.filter((p) => p.page.includes('posts')).splice(0, 5)
+}

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" %}

src/search.md

@@ -17,4 +17,30 @@ meta:
   image:
     src: https://coryd.dev/assets/img/avatar.webp
 ---
-{% include "forms/search.liquid" %}
+<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>
+{% include "popular-posts.liquid" %}