From d73ec6ba7bae5a2626e0ae91193db79f28823a77 Mon Sep 17 00:00:00 2001
From: Dan Jones <danjones@goodevilgenius.org>
Date: Tue, 3 Jan 2023 14:47:27 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88=20Add=20umami=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Makefile     |  4 +++-
 build/app.js | 35 +++++++++++++++++++++++++++++++++++
 compile.js   |  9 +++++++++
 config.toml  |  7 +++++++
 index.html   |  4 +++-
 5 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 build/app.js

diff --git a/Makefile b/Makefile
index 146632f..c4f716b 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,7 @@
 ifndef dev
 sass_opts = --no-source-map --style=compressed
+else
+compile_opts = dev
 endif
 
 .PHONY: all
@@ -10,7 +12,7 @@ clean:
 	rm -v build/index.html build/style.css*
 
 build/index.html: index.html config.toml compile.js
-	node compile.js
+	node compile.js $(compile_opts)
 
 build/style.css: scss/style.scss node_modules/bootstrap/scss/_root.scss
 	npx sass $(sass_opts) $< $@
diff --git a/build/app.js b/build/app.js
new file mode 100644
index 0000000..4a22048
--- /dev/null
+++ b/build/app.js
@@ -0,0 +1,35 @@
+/* global umami */
+
+document.addEventListener('click', getFollows);
+
+function getFollows(evt) {
+    const el = evt.target;
+    if (el.tagName.toLowerCase() !== 'a') {
+        return;
+    }
+
+    const name = el.dataset.name;
+
+    if (!name) {
+        return;
+    }
+
+    const url = el.href;
+    if (!url) {
+        return;
+    }
+
+    if (!window.umami) {
+        return;
+    }
+
+    const umProm = umami.trackEvent('visit', { type: 'click', site: name });
+
+    if (!el.target || el.target.match(/^_(self|parent|top)$/i)) {
+        // If we're not opening in a new tab, then try to send event before navigating away
+        // Don't wait too long though (half a second, at most)
+        evt.preventDefault();
+        umProm.then(() => location.href = url).catch(() => location.href = url);
+        setTimeout(() => location.href = url, 500);
+    }
+}
diff --git a/compile.js b/compile.js
index a05017d..eb5bb14 100644
--- a/compile.js
+++ b/compile.js
@@ -1,3 +1,5 @@
+/* global process */
+
 const { parse } = require('@ltd/j-toml');
 const { render } = require('mustache');
 const { readFile, writeFile } = require('node:fs/promises');
@@ -13,11 +15,18 @@ async function compile() {
     const config = parse(confToml);
 
     config.version = stdout.trim();
+    config.slug = function () {
+        return this.text ? this.text.toLowerCase() : this.icon;
+    };
     config.text = function () {
         const string = this.icon;
         return string.charAt(0).toUpperCase() + string.slice(1);
     };
 
+    if (process.argv[2] === 'dev') {
+        config.umami.website_id = config.umami.dev_website_id;
+    }
+
     const tempPath = resolve('./index.html');
     const template = await readFile(tempPath, { encoding: 'utf8' });
 
diff --git a/config.toml b/config.toml
index 20aeb76..ce516ff 100644
--- a/config.toml
+++ b/config.toml
@@ -1,6 +1,10 @@
 title = "Dan Jones's Links"
 name = "Dan Jones"
 
+[umami]
+website_id = "698f40c8-f098-4287-8d01-f98e55902d6c"
+dev_website_id = "23b68fab-0a02-4e81-8240-63bec79b5f2e"
+
 [[links]]
 icon = "mastodon"
 url = "https://fosstodon.org/@danjones000"
@@ -9,12 +13,14 @@ url = "https://fosstodon.org/@danjones000"
 icon = "blog"
 la = "las"
 text = "Dan's Musings"
+slug = "musings"
 url = "https://goodevilgenius.org"
 
 [[links]]
 icon = "swatchbook"
 la = "las"
 text = "Résumé"
+slug = "danielrayjones"
 url = "https://danielrayjones.com/"
 
 [[links]]
@@ -49,6 +55,7 @@ url = "https://trakt.tv/users/goodevilgenius/"
 [[links]]
 icon = "lastfm"
 text = "Last.FM"
+slug = "lastfm"
 url = "https://www.last.fm/user/dan000"
 
 [[links]]
diff --git a/index.html b/index.html
index 600947b..ef92b1a 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
         <title>{{title}}</title>
         <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"/>
         <link rel="stylesheet" href="style.css?ver={{version}}"/>
+        <script async data-website-id="{{umami.website_id}}" data-do-not-track="true" src="https://whoami.goodevilgenius.org/whoami.js?ver={{version}}"></script>
+        <script async src="app.js"></script>
     </head>
     <body>
         <header class="py-3 mb-4 border-bottom">
@@ -23,7 +25,7 @@
             <ul class="list-group">
                 {{#links}}
                 <li class="list-group-item text-center">
-                    <a href="{{{url}}}" rel="me" class="fs-4 text-decoration-none text-dark">
+                    <a href="{{{url}}}" data-name="{{slug}}" rel="me" class="fs-4 text-decoration-none text-dark">
                         <i class="{{la}}{{^la}}lab{{/la}} la-{{icon}}"></i>
                         {{text}}
                     </a>