mirror of
https://github.com/veeso/termscp.git
synced 2026-06-12 19:49:49 +02:00
chore(site): add site umami analytics
This commit is contained in:
14
site/src/analytics.ts
Normal file
14
site/src/analytics.ts
Normal 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);
|
||||
}
|
||||
@@ -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");
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user