chore: analytics

.env

@@ -2,8 +2,7 @@ ACCESS_KEY_B2=
 SECRET_KEY_B2=
 BUCKET_B2=
 API_KEY_LASTFM=
-SITE_ID=
-API_KEY_NETLIFY=
+API_KEY_FATHOM=
 API_KEY_TRAKT=
 API_KEY_MOVIEDB=
 API_TOKEN_READWISE=

config/filters/index.js

@@ -47,11 +47,11 @@ export default {
   getPopularPosts: (posts, analytics) => {
     return posts
       .filter((post) => {
-        if (analytics.find((p) => p.resource === post.url)) return true
+        if (analytics.find((p) => p.pathname === post.url)) return true
       })
       .sort((a, b) => {
-        const count = (page) => analytics.filter((p) => p.resource === page.url).pop().count
-        return count(b) - count(a)
+        const visitors = (page) => analytics.filter((p) => p.pathname === page.url).pop().visitors
+        return visitors(b) - visitors(a)
       })
   },
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "8.5.1",
+  "version": "8.6.1",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_data/analytics.js

@@ -1,23 +1,18 @@
 import EleventyFetch from '@11ty/eleventy-fetch'
 
 export default async function () {
-  const API_KEY_NETLIFY = process.env.API_KEY_NETLIFY
-  const SITE_ID = process.env.SITE_ID
-  const endDate = new Date();
-  const startDate = new Date(new Date().setDate(endDate.getDate() - 30));
-  const timezoneOffset = new Date().getTimezoneOffset() / 60;
+  const API_KEY_FATHOM = process.env.API_KEY_FATHOM
   const url =
-    `https://analytics.services.netlify.com/v2/${SITE_ID}/ranking/pages?from=${startDate.getTime()}&to=${endDate.getTime()}&timezone=-0${timezoneOffset}00&limit=50`
+    'https://api.usefathom.com/v1/aggregations?entity=pageview&entity_id=CWSVCDJC&aggregates=pageviews&field_grouping=pathname&sort_by=pageviews:desc&limit=10'
   const res = EleventyFetch(url, {
     duration: '1h',
     type: 'json',
     fetchOptions: {
       headers: {
-        Authorization: `Bearer ${API_KEY_NETLIFY}`,
+        Authorization: `Bearer ${API_KEY_FATHOM}`,
       },
     },
   }).catch()
-  const responseObject = await res
-  const pages = responseObject['data']
-  return pages.filter((p) => p.resource.includes('posts'))
-}
+  const pages = await res
+  return pages.filter((p) => p.pathname.includes('posts'))
+}

src/_includes/base.liquid

@@ -15,6 +15,7 @@
       {% render "../assets/styles/index.css" %}
     {% endcapture %}
     <style>{{ css }}</style>
+    <script src="https://cdn.usefathom.com/script.js" data-site="CWSVCDJC" defer></script>
     <link rel="canonical" href="{{ fullUrl }}" />
     <meta property="og:title" content="{{ pageTitle }}" />
     <meta name="description" content="{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}" />

src/_includes/partials/addon-links.liquid

@@ -3,6 +3,10 @@
 {% endcapture %}
 <style>{{ css }}</style>
 <div class="addon-links__wrapper">
+  {%- if analytics.size > 0 -%}
   <div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
+  {%- endif -%}
+  {%- if links.size > 0 -%}
   <div>{% render "partials/recent-links.liquid", links:links %}</div>
+  {%- endif -%}
 </div>

src/_includes/partials/popular-posts.liquid

@@ -1,4 +1,5 @@
 {% assign posts = posts | getPopularPosts: analytics %}
+{% if posts.size > 0 %}
 <h2 class="flex--centered">
   {% tablericon "flame" "Popular" %}
   Popular posts
@@ -11,4 +12,5 @@
       </a>
     </li>
   {% endfor %}
-</ul>
+</ul>
+{% endif %}

src/assets/scripts/search.js

@@ -29,6 +29,7 @@
     const query = $input.value
     const results = (query.length > 1) ? getSearchResults(query) : []
     if (query === '') renderSearchResults([])
+    if (results && fathom) fathom?.trackEvent(`Search query: ${query}`)
     renderSearchResults(results)
   })
 

src/pages/blogroll.html

@@ -9,7 +9,7 @@ description: 'These are awesome blogs that I enjoy and you may enjoy too.'
 {% endcapture %}
 <style>{{ css }}</style>
 <h2 class="page__header">{{ title }}</h2>
-<p>You can <a href="/blogroll.opml">download an OPML file</a> containing all of these feeds and import them into your RSS reader.</p>
+<p>You can <a onclick="fathom?.trackEvent('OPML download')" href="/blogroll.opml">download an OPML file</a> containing all of these feeds and import them into your RSS reader.</p>
 <div class="blog__banner--grid">
   {% for blog in blogroll %}
   <div class="blog__banner">

src/pages/referrals.md

@@ -8,9 +8,12 @@ description: 'Referral links for services that I use.'
 
 Referral links for services I use. I save some money, and you do as well if you choose to use them.
 
-- [NextDNS](https://nextdns.io/?from=m56mt3z6)
-- [DNSimple](https://dnsimple.com/r/3a7cbb9e15df8f)
-- [Bunny.net](https://bunny.net?ref=revw3mehej)
-- [Feedpress](https://feedpress.com/?affid=34370)
-- [Proton](https://pr.tn/ref/X775YX40Z50G)
-- [DigitalOcean](https://m.do.co/c/3635bf99aee2)
+<ul>
+  <li><a onclick="fathom?.trackEvent('Fathom referral')" href="https://usefathom.com/ref/TFFKEZ">Fathom Analytics</a></li>
+  <li><a onclick="fathom?.trackEvent('NextDNS referral')" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a></li>
+  <li><a onclick="fathom?.trackEvent('DNSimple referral')" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a></li>
+  <li><a onclick="fathom?.trackEvent('Bunny.net referral')" href="https://bunny.net?ref=revw3mehej">Bunny.net</a></li>
+  <li><a onclick="fathom?.trackEvent('Feedpress referral')" href="https://feedpress.com/?affid=34370">Feedpress</a></li>
+  <li><a onclick="fathom?.trackEvent('Proton referral')" href="https://pr.tn/ref/X775YX40Z50G">Proton</a></li>
+  <li><a onclick="fathom?.trackEvent('DigitalOcean referral')" href="https://m.do.co/c/3635bf99aee2">DigitalOcean</a></li>
+</ul>

src/pages/uses.md

@@ -60,11 +60,12 @@ Software and services that I use for work and my own enjoyment.
 <h3>Services</h3>
 
 - [HEY](https://hey.com): it's the email service that works best for me and I quite enjoy their calendar.
-- [NextDNS](https://nextdns.io/?from=m56mt3z6): 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.
-- [DNSimple](https://dnsimple.com/r/3a7cbb9e15df8f): a robust, user-friendly DNS provider and registrar. I moved my domains here after my old provider was acquired.
-- [Bunny.net](https://bunny.net?ref=revw3mehej): 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).
-- [Netlify](https://netlify.com): I use their hosting, forms, webhooks and analytics. It's a reliable and feature-rich platform.
-- [Feedpress](https://feedpress.com/?affid=34370): 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 onclick="fathom?.trackEvent('Fathom referral')" href="https://usefathom.com/ref/TFFKEZ">Fathom Analytics</a>: privacy-friendly, lightweight and nicely designed analytics.
+- <a onclick="fathom?.trackEvent('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 onclick="fathom?.trackEvent('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 onclick="fathom?.trackEvent('Bunny.net 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).
+- [Netlify](https://netlify.com): I use their hosting, forms and webhooks. It's a reliable and feature-rich platform.
+- <a onclick="fathom?.trackEvent('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.
 - [Kagi](https://kagi.com): the only search engine at this point (or so it seems) that's interested in surfacing quality results.
 - [Readwise Reader](https://readwise.io/read): an impressive RSS reader that handles all the functionality you'd expect from a read it later app beautifully. It's as powerful as it is flexible.
 - [Todoist](https://todoist.com): the task manager I always return to for it's flexibility and endless integrations.
@@ -75,6 +76,6 @@ Software and services that I use for work and my own enjoyment.
 - [Slack](http://slack.com): I have a family Slack set up to avoid group text messages and am in a few other community Slacks.
 - [Discord](http://discord.com): I don't _like_ Discord but, for better or worse, it's where some communities I frequent are.
 - [Backblaze](https://backblaze.com): It backs up my MacBook Air and attached storage drive and I don't have to think about it.
-- [Proton VPN](https://pr.tn/ref/X775YX40Z50G): a reliable, trustworthy VPN with all of the features you'd expect from such a service.
+- <a onclick="fathom?.trackEvent('Proton referral')" href="https://pr.tn/ref/X775YX40Z50G">Proton VPN</a>: a reliable, trustworthy VPN with all of the features you'd expect from such a service.
 
 Check out [uses.tech](https://uses.tech) for more lists like this one.

src/posts/2022/apple-centric-digital-privacy-tools.md

@@ -11,7 +11,7 @@ A rundown of privacy tools that work well with Apple's technology ecosystem.<!--
 
 Ubiquitous free email providers profit by mining user data (whether humans are involved or not). Your inbox acts as a key to your digital life, and you should avoid using any provider that monetizes its contents.
 
-- [Fastmail](https://ref.fm/u30190984)[^2]: based in Melbourne, Australia Fastmail offers a range of affordably priced plans with a focus on support for open standards (including active development support for [JMAP](https://jmap.io) and the [Cyrus IMAP email server](https://fastmail.blog/open-technologies/why-we-contribute/)). They also [articulate a clear commitment to protecting and respecting your privacy](https://www.fastmail.com/values/) and offer an extensive [rundown of the privacy and security measures they employ on their site](https://www.fastmail.com/privacy-and-security/).
+- <a onclick="fathom?.trackEvent('Fastmail referral') href="https://ref.fm/u30190984">Fastmail</a>[^2]: based in Melbourne, Australia Fastmail offers a range of affordably priced plans with a focus on support for open standards (including active development support for [JMAP](https://jmap.io) and the [Cyrus IMAP email server](https://fastmail.blog/open-technologies/why-we-contribute/)). They also [articulate a clear commitment to protecting and respecting your privacy](https://www.fastmail.com/values/) and offer an extensive [rundown of the privacy and security measures they employ on their site](https://www.fastmail.com/privacy-and-security/).
   - I would also recommend exploring their [masked email implementation](https://www.fastmail.help/hc/en-us/articles/4406536368911-Masked-Email), which integrates seamlessly with [1Password](https://1password.com) (though using 1Password isn't required).
 - [mailbox.org](https://mailbox.org): based in Germany, [mailbox.org](http://mailbox.org) also has [a long history](https://mailbox.org/en/company#our-history) and [commitment to privacy](https://mailbox.org/en/company#our-mission). Their service is reliable, straightforward and fully featured (it's based off of a customized implementation [Open-Xchange](https://www.open-xchange.com)) and supports features like incoming address blocking, PGP support and so forth.
 - [Proton Mail](http://protonmail.com): Proton offers a host of encrypted tools, ranging from mail to drive, calendaring and VPN services. They're also the only option in this list that includes end-to-end encryption. The service is extremely polished and reliable but, it's worth noting, doesn't support access to your email via open standards like IMAP/SMTP without the use of a cumbersome, desktop-only, bridge application.

src/posts/2022/migrating-to-fastmail.md

@@ -11,7 +11,7 @@ I've used (and/or tried) nearly every email service I've heard of and have stuck
 
 ### Kicking things off
 
-Register for an account at [Fastmail](https://ref.fm/u30190984)[^3] — you'll be run through their lightweight onboarding process which allows you to select an address at a domain they own or use your own. If you use your own, they'll guide you through configuring the DNS records for it, often with registrar specific instructions.
+Register for an account at <a onclick="fathom?.trackEvent('Fastmail referral') href="https://ref.fm/u30190984">Fastmail</a>[^3] — you'll be run through their lightweight onboarding process which allows you to select an address at a domain they own or use your own. If you use your own, they'll guide you through configuring the DNS records for it, often with registrar specific instructions.
 
 They also offer [extensive documentation](https://www.fastmail.com/help/domain_management_custom_dns.html) on this process and offer a UI that validates that the records you have set are correct. For example, your finalized records would look like the following:
 

src/posts/2023/optimizing-for-performance-with-eleventy.md

@@ -134,7 +134,7 @@ This is most impactful on [my now page](https://coryd.dev/now) which is populate
 ```
 
 {% endraw %}
-For this page in particular, the images that are rendered above the fold are set to load as `eager` to mitigate performance impacts related to [too much lazy loading](https://web.dev/lcp-lazy-loading/). These images are fetched from caches hosted at [Bunny.net](https://bunny.net?ref=revw3mehej) when the site is built.
+For this page in particular, the images that are rendered above the fold are set to load as `eager` to mitigate performance impacts related to [too much lazy loading](https://web.dev/lcp-lazy-loading/). These images are fetched from caches hosted at <a onclick="fathom?.trackEvent('Bunny.net referral')" href="https://bunny.net?ref=revw3mehej">Bunny.net</a> when the site is built.
 
 All of these boilerplate steps leave us with a quick to load, accessible and resilient site: