feat: bye analytics

.eleventy.js

@@ -6,7 +6,7 @@ import markdownItAnchor from 'markdown-it-anchor'
 import markdownItFootnote from 'markdown-it-footnote'
 import filters from './config/filters/index.js'
 import { copyErrorPages } from './config/events/index.js'
-import { popularPosts, processContent, albumReleasesCalendar } from './config/collections/index.js'
+import { processContent, albumReleasesCalendar } from './config/collections/index.js'
 import { DateTime } from 'luxon'
 
 // load .env
@@ -52,7 +52,6 @@ export default async function (eleventyConfig) {
   })
 
   // collections
-  eleventyConfig.addCollection('popularPosts', popularPosts)
   eleventyConfig.addCollection('allContent', (collection) => {
     const { allContent } = processContent(collection)
     return allContent

.env

@@ -1,4 +1,3 @@
-API_KEY_PLAUSIBLE=
 ACCOUNT_ID_PLEX=
 SUPABASE_URL=
 SUPABASE_KEY=

config/collections/index.js

@@ -192,16 +192,3 @@ export const albumReleasesCalendar = (collection) => {
 
   return value
 }
-
-export const popularPosts = (collection) => {
-  const collectionData = collection.getAll()[0]
-  const { data } = collectionData
-  const { posts, analytics } = data
-
-  return posts
-    .filter((post) => analytics.find((p) => p.page.includes(post.slug)))
-    .sort((a, b) => {
-      const visitors = (page) => analytics.filter((p) => p.page.includes(page.slug)).pop()?.visitors
-      return visitors(b) - visitors(a)
-    })
-}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "21.10.3",
+  "version": "22.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "21.10.3",
+      "version": "22.0.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "21.10.3",
+  "version": "22.0.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
@@ -9,7 +9,6 @@
     "build": "ELEVENTY_PRODUCTION=true eleventy",
     "update:deps": "npm upgrade && ncu",
     "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve",
-    "publish:analytics": "node scripts/worker-build.mjs analytics && wrangler deploy --env production --config workers/analytics/wrangler.toml",
     "publish:contact": "node scripts/worker-build.mjs contact && wrangler deploy --env production --config workers/contact/wrangler.toml",
     "publish:playing": "node scripts/worker-build.mjs playing && wrangler deploy --env production --config workers/playing/wrangler.toml",
     "publish:rebuild": "node scripts/worker-build.mjs rebuild && wrangler deploy --env production --config workers/rebuild/wrangler.toml",

src/assets/styles/base/index.css

@@ -430,6 +430,10 @@ main {
 .home-status,
 article {
   margin-bottom: var(--sizing-base);
+}
+
+.home-status,
+.posts-wrapper article {
   border-bottom: 1px solid var(--gray-light);
 }
 

src/assets/styles/components/addon-links.css

@@ -1,29 +0,0 @@
-.addon-links {
-  display: grid;
-  gap: var(--sizing-sm);
-  grid-template-columns: repeat(1, 1fr);
-
-  & div {
-    & > h3 {
-      margin-top: 0;
-    }
-
-    &:last-of-type h3 {
-      margin-top: var(--sizing-base);
-    }
-  }
-
-  & .link-list {
-    margin-bottom: 0;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .addon-links {
-    grid-template-columns: repeat(2, 1fr);
-
-    & div:last-of-type h3 {
-      margin-top: 0;
-    }
-  }
-}

src/assets/styles/index.css

@@ -25,7 +25,6 @@
 @import url('./pages/webrings.css') layer(page);
 
 /* component styles */
-@import url('./components/addon-links.css') layer(components);
 @import url('./components/badge-grid.css') layer(components);
 @import url('./components/banners.css') layer(components);
 @import url('./components/buttons.css') layer(components);

src/data/analytics.js

@@ -1,18 +0,0 @@
-import EleventyFetch from '@11ty/eleventy-fetch'
-
-export default 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'))
-}

src/includes/base.liquid

@@ -107,8 +107,7 @@
     <link rel="alternate" href="https://coryd.dev/feeds/movies" title="Movies / {{ globals.site_name }}'s movies feed" type="application/rss+xml">
     <link rel="alternate" href="https://coryd.dev/feeds/books" title="Books / {{ globals.site_name }}" type="application/rss+xml">
     <link rel="alternate" href="https://coryd.dev/feeds/all" title="All activity / {{ globals.site_name }}" type="application/rss+xml">
-    <script defer data-domain="coryd.dev" src="/js/script.js"></script>
+    <script defer src="/assets/scripts/index.js?v={% appVersion %}"></script>
-    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -154,6 +153,5 @@
       })()
     </script>
     {{ content }}
-    <script src="/assets/scripts/index.js?v={% appVersion %}" defer></script>
   </body>
 </html>

src/includes/partials/blocks/addon-links.liquid

@@ -1,8 +0,0 @@
-<div class="addon-links">
-  {%- if popularPosts.size > 0 -%}
-  <div>{% render "partials/blocks/popular-posts.liquid", popularPosts:popularPosts %}</div>
-  {%- endif -%}
-  {%- if links.size > 0 -%}
-  <div>{% render "partials/blocks/recent-links.liquid", links:links %}</div>
-  {%- endif -%}
-</div>

src/includes/partials/blocks/index.liquid

@@ -13,7 +13,5 @@
     {{ block.text | markdown }}
   {%- elsif block.type == 'divider' -%}
     {{ block.markup | markdown }}
-  {%- elsif block.type == 'addon_links' -%}
-    {% render "partials/blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
   {%- endif -%}
 {%- endfor -%}

src/includes/partials/blocks/popular-posts.liquid

@@ -1,15 +0,0 @@
-{%- if popularPosts.size > 0 -%}
-<h3 class="flex-centered">
-  {% tablericon "flame" "Popular" %}
-  Popular posts
-</h3>
-<ul class="link-list">
-  {%- for post in popularPosts limit: 5 -%}
-    <li>
-      <a class="no-underline" href="{{ post.slug }}" title="{{ post.title | escape}}">
-        {{ post.title }}
-      </a>
-    </li>
-  {%- endfor -%}
-</ul>
-{%- endif -%}

src/includes/partials/blocks/recent-links.liquid

@@ -1,16 +0,0 @@
-{%- if links.size > 0 -%}
-<h3 id="links" class="flex-centered">
-  {% tablericon "link" "Links" %}
-  Recent links
-</h3>
-<ul class="link-list">
-  {%- for link in links limit: 5 -%}
-    <li>
-      <a href="{{ link.link }}" title="{{ link.title | escape }}">
-        {{ link.title }}
-      </a>
-      {% if link.authors %} via <a href="{{ link.authors.url }}">{{ link.authors.name }}</a>{% endif %}
-    </li>
-  {%- endfor -%}
-</ul>
-{%- endif -%}

src/pages/dynamic/blogroll.html

@@ -5,7 +5,7 @@ permalink: /blogroll.html
 description: These are awesome blogs that I enjoy and you may enjoy too.
 ---
 <h2 class="page-header">{{ title }}</h2>
-<p>You can <a onclick="if (typeof plausible === 'function') { plausible('OPML download', { props: { action: 'download' } }) }" href="/blogroll.opml">Download OPML</a>
+<p>You can <a href="/blogroll.opml">Download OPML</a>
   download an OPML file</a> containing all of these feeds and import them into your RSS reader.</p>
 <table>
   <tr>

src/pages/dynamic/posts/post.html

@@ -7,7 +7,7 @@ pagination:
 permalink: "{{ post.slug }}/index.html"
 schema: blog
 ---
-<article class="h-entry">
+<article class="h-entry standalone">
   <div class="time-wrapper flex-centered">
     {% tablericon "calendar-month" "Date" %}
     <time class="dt-published" datetime="{{ date }}">
@@ -42,4 +42,3 @@ schema: blog
     {% render "partials/blocks/index.liquid", blocks:post.blocks %}
   </div>
 </article>
-{% render "partials/blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}

src/pages/static/contact.html

@@ -33,16 +33,3 @@ description: How to contact me.
     </div>
   </form>
 </div>
-<script>
-  document.querySelector('[data-form="contact"]').addEventListener('submit', function(event) {
-    if (typeof plausible === 'function') {
-      plausible('Contact form submitted', {
-        props: {
-          name: this.name.value,
-          email: this.email.value,
-          message: this.message.value
-        }
-      })
-    }
-  })
-</script>

src/pages/static/search.html

@@ -32,7 +32,6 @@ permalink: /search.html
       const query = $input.value
       const results = (query.length > 1) ? getSearchResults(query) : []
       if (query === '') renderSearchResults([])
-      if (results && typeof plausible === 'function') plausible('Search', { props: { query: query } });
       renderSearchResults(results)
     })
 
@@ -59,4 +58,3 @@ permalink: /search.html
   <input class="search__form--fallback" type="hidden" placeholder="Search" name="sites" value="coryd.dev">
 </form>
 <ul class="search__results hidden"></ul>
-{% render "partials/blocks/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}

workers/analytics/index.js

@@ -1,39 +0,0 @@
-const scriptName = '/js/script.js'
-const endpoint = '/api/event'
-
-addEventListener("fetch", (event) => {
-  event.passThroughOnException()
-  event.respondWith(handleRequest(event))
-})
-
-async function handleRequest(event) {
-  const url = new URL(event.request.url)
-  const pathname = url.pathname
-
-  if (pathname === scriptName) {
-    return getScript(event)
-  } else if (pathname === endpoint) {
-    return postData(event)
-  }
-  return new Response(null, { status: 404 })
-}
-
-async function getScript(event) {
-  const cache = caches.default
-  let response = await cache.match(event.request)
-
-  if (!response) {
-    const scriptUrl =
-      'https://plausible.io/js/plausible.outbound-links.tagged-events.js'
-    response = await fetch(scriptUrl)
-    if (response.ok) event.waitUntil(cache.put(event.request, response.clone()))
-  }
-
-  return response
-}
-
-async function postData(event) {
-  const request = new Request(event.request)
-  request.headers.delete('cookie')
-  return await fetch('https://plausible.io/api/event', request)
-}

workers/analytics/wrangler.template.toml

@@ -1,13 +0,0 @@
-name = "analytics-worker"
-main = "./index.js"
-compatibility_date = "2023-01-01"
-
-account_id = "${CF_ACCOUNT_ID}"
-workers_dev = true
-
-[env.production]
-name = "analytics-worker-production"
-routes = [
-  { pattern = "coryd.dev/js/*", zone_id = "${CF_ZONE_ID}" },
-  { pattern = "coryd.dev/api/event", zone_id = "${CF_ZONE_ID}" }
-]