improve event tracking

index.html

@@ -17,7 +17,7 @@
           </h1>
         </header>
 
-        <p><strong>Software engineer extraordinaire and founder of <a href="https://www.forandwhile.com" target="_blank">For & While</a></strong></p>
+        <p><strong>Software engineer extraordinaire and founder of <a href="https://www.forandwhile.com" target="_blank" data-umami-event="Clicked link" data-umami-event-link="For &amp; While">For & While</a></strong></p>
 
         <p>I have been working with computers for over twenty years and love to solve technical and business problems for a fair price.</p>
         <p>
@@ -25,7 +25,7 @@
           a keen collaborator with colleagues in all aspects of business, including other engineers, project management, sales and marketing, and leadership.
         </p>
         <p>
-          <a href="#contact">Let me know what I can do for you,</a> or read on to learn more about me and what I might be able to offer.
+          <a href="#contact" data-umami-event="Jump to contact">Let me know what I can do for you,</a> or read on to learn more about me and what I might be able to offer.
         </p>
       </section>
 
@@ -53,7 +53,7 @@
         </ul>
 
         <p>
-          I am always open to new challenges. <a href="#contact">Send me a message</a> to let me know what I can help you with.
+          I am always open to new challenges. <a href="#contact" data-umami-event="Jump to contact">Send me a message</a> to let me know what I can help you with.
         </p>
       </section>
 
@@ -64,7 +64,7 @@
 
         <p>
           Are you looking for expertise in a specific domain? This list provides an overview of pretty much everything I know.
-          If you have any questions, or something you need isn't on the list, <a href="#contact">get in touch</a> and I'd be happy to talk about it.
+          If you have any questions, or something you need isn't on the list, <a href="#contact" data-umami-event="Jump to contact">get in touch</a> and I'd be happy to talk about it.
         </p>
 
         <div class="data-view">
@@ -96,12 +96,12 @@
 
         <template x-if="descriptions">
           <p>
-            To see a bit less information, <a href="#" x-on:click="toggleDescriptions" href="#">hide descriptions</a>.
+            To see a bit less information, <a href="#" x-on:click="toggleDescriptions" href="">hide descriptions</a>.
           </p>
         </template>
         <template x-if="!descriptions">
           <p>
-            To see even more information, <a x-on:click="toggleDescriptions" href="#">show descriptions</a>.
+            To see even more information, <a x-on:click="toggleDescriptions" x-bind:href="`?descriptions=1`">show descriptions</a>.
           </p>
         </template>
       </section>
@@ -112,18 +112,18 @@
         </header>
 
         <p>
-          You are welcome to browse my public code online, including the <a href="https://github.com/annybs/www.aneur.in" target="_blank">code of the website you're looking at right now</a>.
+          You are welcome to browse my public code online, including the <a href="https://github.com/annybs/www.aneur.in" target="_blank" data-umami-event="Clicked link" data-umami-event-link="Website code">code of the website you're looking at right now</a>.
         </p>
 
         <ul>
           <li>
-            <a href="https://goto.aneur.in/go" target="_blank">Go projects</a>
+            <a href="https://goto.aneur.in/go" target="_blank" data-umami-event="Clicked link" data-umami-event-link="Go projects">Go projects</a>
           </li>
           <li>
-            <a href="https://goto.aneur.in/ts" target="_blank">TypeScript/JavaScript projects</a>
+            <a href="https://goto.aneur.in/ts" target="_blank" data-umami-event="Clicked link" data-umami-event-link="TypeScript/JavaScript projects">TypeScript/JavaScript projects</a>
           </li>
           <li>
-            <a href="https://goto.aneur.in/pkg" target="_blank">Packages and Docker images</a>
+            <a href="https://goto.aneur.in/pkg" target="_blank" data-umami-event="Clicked link" data-umami-event-link="Packages and Docker images">Packages and Docker images</a>
           </li>
         </ul>
 
@@ -131,7 +131,7 @@
 
         <p>
           I also have an extensive history of professional work that I am happy to discuss in general terms.
-          Please <a href="#contact">send me a message</a> if you'd like to know more.
+          Please <a href="#contact" data-umami-event="Jump to contact">send me a message</a> if you'd like to know more.
         </p>
       </section>
 
@@ -157,7 +157,7 @@
 
         <p>
           If you are a charitable organisation, I would love to work with you and can offer a reduced rate to suit your budgetary
-          requirements. <a href="#contact">Get in touch</a> to discuss what you need from me.
+          requirements. <a href="#contact" data-umami-event="Jump to contact">Get in touch</a> to discuss what you need from me.
         </p>
       </section>
 
@@ -187,18 +187,18 @@
 
         <p x-data="contact">
           The best way to reach me is by email.
-          Send a message to <a x-bind:href="`mailto:${email}`" x-text="email"></a> summarising what you're looking for&#11834;or just to say hello!
+          Send a message to <a x-bind:href="`mailto:${email}`" x-text="email" data-umami-event="Clicked link" data-umami-event-link="Email"></a> summarising what you're looking for&#11834;or just to say hello!
           I look forward to hearing from you.
         </p>
 
         <p>
-          You can also find me on <a href="https://github.com/annybs/" target="_blank">GitHub</a> and <a href="https://www.linkedin.com/in/aneurinbs/" target="_blank">LinkedIn</a>.
+          You can also find me on <a href="https://github.com/annybs/" target="_blank" data-umami-event="Clicked link" data-umami-event-link="GitHub">GitHub</a> and <a href="https://www.linkedin.com/in/aneurinbs/" target="_blank" data-umami-event="Clicked link" data-umami-event-link="LinkedIn">LinkedIn</a>.
         </p>
       </section>
     </main>
 
     <div x-data="color" id="color">
-      <button title="Change colour scheme" x-on:click="rotateColorScheme">
+      <button title="Change colour scheme" x-on:click="rotateColorScheme" data-umami-event="Change colour scheme">
         <template x-if="currentScheme === 'auto'">
           <!-- clock @ https://heroicons.com/mini -->
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">