chore(site): add site umami analytics

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);
+}

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");

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>

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
-      <a href="https://crates.io/crates/termscp" class="hover:text-text"
+        href={GITHUB_URL}
-        >crates.io</a
+        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.

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));

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
-      <a href={DOCS_URL} class="text-overlay hover:text-text">User manual</a>
+        href="/install"
-      <a href={GITHUB_URL} class="text-overlay hover:text-text">GitHub</a>
+        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
-        <a href={DOCS_URL} class="text-overlay hover:text-text">User manual</a>
+          href="/install"
-        <a href={GITHUB_URL} class="text-overlay hover:text-text">GitHub</a>
+          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>