fix: resolve conflict

.env

@@ -1,9 +1,8 @@
 API_KEY_LASTFM=
+API_KEY_PLAUSIBLE=
 API_KEY_TRAKT=
 API_KEY_MOVIEDB=
 API_KEY_WEBMENTIONS_CORYD_DEV=
 API_TOKEN_PINBOARD=
-SITE_ID_CLICKY=
-SITE_KEY_CLICKY=
 SECRET_FEED_ALBUM_RELEASES=
 COOKIE_STORYGRAPH=

_redirects

@@ -58,6 +58,5 @@ https://cdme.netlify.app https://coryd.dev 301!
 /follow.json https://feedpress.me/coryd-follow.json
 
 # analytics
-/4afe62271e477e.js https://static.getclicky.com/js?in=%2F4dcb93321b2a3b 200
-/4dcb93321b2a3b https://in.getclicky.com/in.php 200
-/404ca498061b54 https://in.getclicky.com/101424044ns.gif 200
+/js/script.js https://plausible.io/js/script.outbound-links.tagged-events.js 200
+/api/event https://plausible.io/api/event 200

config/filters.js

@@ -35,10 +35,10 @@ module.exports = {
   getPopularPosts: (posts, analytics) => {
     return posts
       .filter((post) => {
-        if (analytics.find((p) => p.url.includes(post.url))) return true
+        if (analytics.find((p) => p.page === post.url)) return true
       })
       .sort((a, b) => {
-        const visitors = (page) => analytics.filter((p) => p.url.includes(page.url)).pop().rank
+        const visitors = (page) => analytics.filter((p) => p.page === page.url).pop().visitors
         return visitors(b) - visitors(a)
       })
   },

src/404.html

@@ -26,4 +26,9 @@ permalink: 404.html
   </div>
 </div>
 <hr />
-{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
+{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    plausible('404', { props: { path: document.location.pathname } })
+  })
+</script>

src/_data/analytics.js

@@ -1,31 +1,18 @@
 const EleventyFetch = require('@11ty/eleventy-fetch')
 
 module.exports = async function () {
-  const SITE_ID_CLICKY = process.env.SITE_ID_CLICKY
-  const SITE_KEY_CLICKY = process.env.SITE_KEY_CLICKY
-  const url = `https://api.clicky.com/api/stats/4?site_id=${SITE_ID_CLICKY}&sitekey=${SITE_KEY_CLICKY}&type=pages&date=last-90-days&output=json`
+  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 data = await res
-  const pages = data[0].dates[0].items
-    .filter((p) => p.url.includes('posts'))
-    .filter((p) => !p.url.includes('/null'))
-    .map((page) => {
-      return {
-        title: page.title,
-        rank: parseInt(page.value),
-        url: page.url.split('?')[0],
-      }
-    })
-  const postsObj = {}
-  pages.forEach((page) => {
-    if (postsObj[page.url]) {
-      postsObj[page.url].rank += postsObj[page.url].rank
-    } else {
-      postsObj[page.url] = page
-    }
-  })
-  return Object.values(postsObj)
+  const pages = await res
+  return pages.results.filter((p) => p.page.includes('posts')).splice(0, 5)
 }

src/_includes/base.liquid

@@ -58,8 +58,8 @@
     <script type="application/ld+json">
       {% jsonLd meta, type, tags %}
     </script>
-    <script async data-id="101424044" src="/4afe62271e477e.js"></script>
-    <noscript><img width="1" height="1" src="/404ca498061b54" style="display:none" /></noscript>
+    <script defer data-domain="coryd.dev" src="/js/script.js"></script>
+    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <noscript>
       <style>
         .client-side {

src/_includes/partials/popular-posts.liquid

@@ -5,7 +5,7 @@
     Popular posts
   </h2>
   <ul class="list-inside list-disc pl-5 md:pl-10">
-    {% for post in posts limit: 5 %}
+    {% for post in posts %}
       <li class="mt-1.5 mb-2">
         <a href="{{post.url}}" title="{{ post.data.title | escape}}">
           {{ post.data.title }}
@@ -13,4 +13,4 @@
       </li>
     {% endfor %}
   </ul>
-</div>
+</div>

src/referrals.md

@@ -26,9 +26,8 @@ meta:
 
 Referral links for services I use. I save some money, and you do as well if you choose to use them.
 
-- <a onclick="clicky.goal('Referral: nextDNS')" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a>
-- <a onclick="clicky.goal('Referral: DNSimple')" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a>
-- <a onclick="clicky.goal('Referral: Bunny.net')" href="https://bunny.net?ref=revw3mehej">Bunny.net</a>
-- <a onclick="clicky.goal('Referral: Clicky')" href="https://clicky.com/101424044">Clicky</a>
-- <a onclick="clicky.goal('Referral: Feedpress')" href="https://feedpress.com/?affid=34370">Feedpress</a>
-- <a onclick="clicky.goal('Referral: DigitalOcean')" href="https://m.do.co/c/3635bf99aee2">DigitalOcean</a>
+- <a class="plausible-event-name=NextDNS+referral" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a>
+- <a class="plausible-event-name=DNSimple+referral" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a>
+- <a class="plausible-event-name=bunny+referral" href="https://bunny.net?ref=revw3mehej">Bunny.net</a>
+- <a class="plausible-event-name=Feedpress+referral" href="https://feedpress.com/?affid=34370">Feedpress</a>
+- <a class="plausible-event-name=DigitalOcean+referral" href="https://m.do.co/c/3635bf99aee2">DigitalOcean</a>

src/uses.md

@@ -26,7 +26,7 @@ meta:
 
 Software and services that I use for work and my own enjoyment.
 
-{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'border border-blue-600 dark:border-blue-400 rounded-lg overflow-hidden [&>*]:w-full', 'eager' %}
+{% image '<https://coryd.dev/assets/img/pages/uses.jpg>', 'My desk', 'border border-blue-600 dark:border-blue-400 rounded-lg overflow-hidden [&>*]:w-full', 'eager' %}
 
 <h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">Computer setup</h3>
 
@@ -73,11 +73,11 @@ Software and services that I use for work and my own enjoyment.
 
 <h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">Services</h3>
 
-- <a onclick="clicky.goal('Referral: nextDNS')" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a>: a privacy-focused, set it and forget it DNS service. I use their security features on my home network and a profile with strict ad-blocking rules on all of my devices.
-- <a onclick="clicky.goal('Referral: DNSimple')" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a>: a robust, user-friendly DNS provider and registrar. I moved my domains here after my old provider was acquired.
-- <a onclick="clicky.goal('Referral: Bunny.net')" href="https://bunny.net?ref=revw3mehej">Bunny.net</a>: a powerful and affordable CDN. I use it to serve assets on my personal site (most notable my now page — raw assets are fetched by Eleventy and then optimized to webp).
-- <a onclick="clicky.goal('Referral: Clicky')" href="https://clicky.com/101424044">Clicky</a>: powerful and easy to understand analytics (if, perhaps, not the prettiest to look at).
-- <a onclick="clicky.goal('Referral: Feedpress')" href="https://feedpress.com/?affid=34370">Feedpress</a>: they've been around for a while now and don't change much (nor do they need to), but look no further for reliable, helpful feed analytics.
+- <a class="plausible-event-name=NextDNS+referral" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a>: a privacy-focused, set it and forget it DNS service. I use their security features on my home network and a profile with strict ad-blocking rules on all of my devices.
+- <a class="plausible-event-name=DNSimple+referral" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a>: a robust, user-friendly DNS provider and registrar. I moved my domains here after my old provider was acquired.
+- <a class="plausible-event-name=bunny+referral" href="https://bunny.net?ref=revw3mehej">Bunny.net</a>: a powerful and affordable CDN. I use it to serve assets on my personal site (most notable my now page — raw assets are fetched by Eleventy and then optimized to webp).
+- [Plausible](https://plausible.io): powerful, well-designed and privacy-respecting analytics.
+- <a class="plausible-event-name=Feedpress+referral" href="https://feedpress.com/?affid=34370">Feedpress</a>: they've been around for a while now and don't change much (nor do they need to), but look no further for reliable, helpful feed analytics.
 - [SavvyCal](https://savvycal.com): the most pleasant scheduling solution I've found to date. It offers a number of scheduling niceties and allows visitors to overlay their own calendars for a seamless booking experience.
 - [IVPN](https://www.ivpn.net): my VPN of choice for browsing outside of my home network. Privacy-focused and trustworthy.
 - [Kagi](https://kagi.com): search that's actually helpful and ad-free. It's lenses feature and the ability to up/downvote and block results from different sites are indispensable.