chore(site): add site umami analytics

This commit is contained in:
Christian Visintin
2026-06-08 10:29:15 +02:00
parent 1ca8abbfe8
commit 987751d732
6 changed files with 76 additions and 12 deletions

14
site/src/analytics.ts Normal file
View File

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

View File

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

View File

@@ -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>

View File

@@ -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.

View File

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

View File

@@ -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>