From 987751d73223be2bbba2f3e1f847959aa0650752 Mon Sep 17 00:00:00 2001
From: Christian Visintin <christian.visintin@veeso.dev>
Date: Mon, 8 Jun 2026 10:29:15 +0200
Subject: [PATCH] chore(site): add site umami analytics

---
 site/src/analytics.ts                  | 14 +++++++++
 site/src/components/CopyButton.astro   |  4 +++
 site/src/components/ExplorerHero.astro |  6 ++--
 site/src/components/Footer.astro       | 21 ++++++++++---
 site/src/components/InstallTabs.astro  |  1 +
 site/src/components/Nav.astro          | 42 ++++++++++++++++++++++----
 6 files changed, 76 insertions(+), 12 deletions(-)
 create mode 100644 site/src/analytics.ts

diff --git a/site/src/analytics.ts b/site/src/analytics.ts
new file mode 100644
index 0000000..89d80a5
--- /dev/null
+++ b/site/src/analytics.ts
@@ -0,0 +1,14 @@
+interface Umami {
+  track: (event: string, data?: Record<string, unknown>) => void;
+}
+
+declare global {
+  interface Window {
+    umami?: Umami;
+  }
+}
+
+/** Send a custom event to Umami, no-op until the analytics script has loaded. */
+export function track(event: string, data?: Record<string, unknown>): void {
+  window.umami?.track(event, data);
+}
diff --git a/site/src/components/CopyButton.astro b/site/src/components/CopyButton.astro
index 61e5446..fe7eb0a 100644
--- a/site/src/components/CopyButton.astro
+++ b/site/src/components/CopyButton.astro
@@ -43,6 +43,8 @@ const { text, class: className } = Astro.props;
   </svg>
 </button>
 <script>
+  import { track } from "../analytics";
+
   const RESET_DELAY_MS = 1500;
 
   const handleCopy = async (button: HTMLElement) => {
@@ -53,6 +55,8 @@ const { text, class: className } = Astro.props;
       return;
     }
 
+    track("copy-install-command", { command: text });
+
     const copyIcon = button.querySelector(".copy-icon");
     const checkIcon = button.querySelector(".check-icon");
     copyIcon?.classList.add("hidden");
diff --git a/site/src/components/ExplorerHero.astro b/site/src/components/ExplorerHero.astro
index 374dcc3..d140e00 100644
--- a/site/src/components/ExplorerHero.astro
+++ b/site/src/components/ExplorerHero.astro
@@ -102,12 +102,14 @@ const status = "↹ switch · ↑↓ move · ↵ open · SPACE transfer";
         <a
           href="/install"
           class="rounded-lg bg-green px-5 py-2.5 font-bold text-crust"
-          >Install termscp →</a
+          data-umami-event="cta-install"
+          data-umami-event-location="hero">Install termscp →</a
         >
         <a
           href={DOCS_URL}
           class="rounded-lg border border-line px-5 py-2.5 text-text"
-          >User manual</a
+          data-umami-event="docs"
+          data-umami-event-location="hero">User manual</a
         >
       </div>
     </div>
diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
index 9a64903..acead06 100644
--- a/site/src/components/Footer.astro
+++ b/site/src/components/Footer.astro
@@ -8,11 +8,24 @@ const year = new Date().getFullYear();
     class="mx-auto flex max-w-5xl flex-col items-center gap-2 px-4 py-8 text-sm text-overlay"
   >
     <div class="flex gap-5">
-      <a href={GITHUB_URL} class="hover:text-text">GitHub</a>
-      <a href="https://crates.io/crates/termscp" class="hover:text-text"
-        >crates.io</a
+      <a
+        href={GITHUB_URL}
+        class="hover:text-text"
+        data-umami-event="github"
+        data-umami-event-location="footer">GitHub</a
+      >
+      <a
+        href="https://crates.io/crates/termscp"
+        class="hover:text-text"
+        data-umami-event="crates"
+        data-umami-event-location="footer">crates.io</a
+      >
+      <a
+        href={DOCS_URL}
+        class="hover:text-text"
+        data-umami-event="docs"
+        data-umami-event-location="footer">User manual</a
       >
-      <a href={DOCS_URL} class="hover:text-text">User manual</a>
     </div>
     <p>
       termscp v{VERSION} · © {year} Christian Visintin · Released under the MIT license.
diff --git a/site/src/components/InstallTabs.astro b/site/src/components/InstallTabs.astro
index 61fe21d..72b658d 100644
--- a/site/src/components/InstallTabs.astro
+++ b/site/src/components/InstallTabs.astro
@@ -41,6 +41,7 @@ const { methods } = Astro.props;
   document.querySelectorAll(".install-tab").forEach((tab) => {
     tab.addEventListener("click", () => {
       const id = tab.getAttribute("data-target");
+      window.umami?.track("install-tab", { method: id });
       document
         .querySelectorAll(".install-tab")
         .forEach((t) => t.toggleAttribute("data-active", t === tab));
diff --git a/site/src/components/Nav.astro b/site/src/components/Nav.astro
index 4f9fa30..ccb58a8 100644
--- a/site/src/components/Nav.astro
+++ b/site/src/components/Nav.astro
@@ -14,9 +14,24 @@ import { DOCS_URL, GITHUB_URL } from "../consts";
 
     <!-- Desktop -->
     <div class="hidden items-center gap-5 text-sm sm:flex">
-      <a href="/install" class="text-overlay hover:text-text">Install</a>
-      <a href={DOCS_URL} class="text-overlay hover:text-text">User manual</a>
-      <a href={GITHUB_URL} class="text-overlay hover:text-text">GitHub</a>
+      <a
+        href="/install"
+        class="text-overlay hover:text-text"
+        data-umami-event="cta-install"
+        data-umami-event-location="nav">Install</a
+      >
+      <a
+        href={DOCS_URL}
+        class="text-overlay hover:text-text"
+        data-umami-event="docs"
+        data-umami-event-location="nav">User manual</a
+      >
+      <a
+        href={GITHUB_URL}
+        class="text-overlay hover:text-text"
+        data-umami-event="github"
+        data-umami-event-location="nav">GitHub</a
+      >
       <ThemeToggle />
     </div>
 
@@ -29,9 +44,24 @@ import { DOCS_URL, GITHUB_URL } from "../consts";
       <div
         class="absolute right-0 mt-2 flex w-48 flex-col gap-3 rounded-lg border border-line bg-mantle p-4 text-sm shadow-xl"
       >
-        <a href="/install" class="text-overlay hover:text-text">Install</a>
-        <a href={DOCS_URL} class="text-overlay hover:text-text">User manual</a>
-        <a href={GITHUB_URL} class="text-overlay hover:text-text">GitHub</a>
+        <a
+          href="/install"
+          class="text-overlay hover:text-text"
+          data-umami-event="cta-install"
+          data-umami-event-location="nav-mobile">Install</a
+        >
+        <a
+          href={DOCS_URL}
+          class="text-overlay hover:text-text"
+          data-umami-event="docs"
+          data-umami-event-location="nav-mobile">User manual</a
+        >
+        <a
+          href={GITHUB_URL}
+          class="text-overlay hover:text-text"
+          data-umami-event="github"
+          data-umami-event-location="nav-mobile">GitHub</a
+        >
         <ThemeToggle />
       </div>
     </details>