Add umami analytics

web/public/scripts/ua_latest.js

@@ -0,0 +1,152 @@
+!function() {
+ "use strict";
+ (t => {
+ const {
+ screen: { width: e, height: a },
+ navigator: { language: r },
+ location: n,
+ localStorage: i,
+ document: c,
+ history: o
+ } = t;
+ const { hostname: s, href: u } = n;
+ const { currentScript: l, referrer: d } = c;
+
+ if (!l) return;
+
+ const m = "data-",
+ f = l.getAttribute.bind(l),
+ h = f(m + "website-id"),
+ p = f(m + "host-url"),
+ g = f(m + "tag"),
+ y = "false" !== f(m + "auto-track"),
+ b = "true" === f(m + "exclude-search"),
+ v = f(m + "domains") || "",
+ w = v.split(",").map(t => t.trim()),
+ S = `${(p || "https://api-gateway.umami.dev" || l.src.split("/").slice(0, -1).join("/")).replace(/\/$/, "")}/api/send`,
+ N = `${e}x${a}`,
+ T = /data-umami-event-([\w-_]+)/,
+ A = m + "umami-event",
+ x = 300;
+
+ const O = t => {
+ if (t) {
+ try {
+ const e = decodeURI(t);
+ if (e !== t) return e;
+ } catch (e) {
+ return t;
+ }
+ return encodeURI(t);
+ }
+ };
+
+ const U = t => {
+ try {
+ const { pathname: e, search: a } = new URL(t);
+ t = e + a;
+ } catch (t) { }
+ return b ? t.split("?")[0] : t;
+ };
+
+ const j = () => ({
+ website: h,
+ hostname: s,
+ screen: N,
+ language: r,
+ title: O(q),
+ url: O(D),
+ referrer: O(_),
+ tag: g || void 0
+ });
+
+ const k = (t, e, a) => {
+ a && (_ = D, D = U(a.toString()), D !== _ && setTimeout(I, x));
+ };
+
+ const E = () => !h || i && i.getItem("umami.disabled") || v && !w.includes(s);
+
+ const L = async (t, e = "event") => {
+ if (E()) return;
+ const a = { "Content-Type": "application/json" };
+ void 0 !== R && (a["x-umami-cache"] = R);
+ try {
+ const r = await fetch(S, {
+ method: "POST",
+ body: JSON.stringify({ type: e, payload: t }),
+ headers: a
+ });
+ const n = await r.text();
+ return R = n;
+ } catch (t) { }
+ };
+
+ const $ = () => {
+ B || (
+ I(),
+ (() => {
+ const t = (t, e, a) => {
+ const r = t[e];
+ return (...e) => (a.apply(null, e), r.apply(t, e));
+ };
+ o.pushState = t(o, "pushState", k);
+ o.replaceState = t(o, "replaceState", k);
+ })(),
+ (() => {
+ const t = new MutationObserver(([t]) => {
+ q = t && t.target ? t.target.text : void 0;
+ });
+ const e = c.querySelector("head > title");
+ e && t.observe(e, { subtree: !0, characterData: !0, childList: !0 });
+ })(),
+ c.addEventListener("click", async t => {
+ const e = t => ["BUTTON", "A"].includes(t),
+ a = async t => {
+ const e = t.getAttribute.bind(t),
+ a = e(A);
+ if (a) {
+ const r = {};
+ return t.getAttributeNames().forEach(t => {
+ const a = t.match(T);
+ a && (r[a[1]] = e(t));
+ }), I(a, r);
+ }
+ },
+ r = t.target,
+ i = e(r.tagName) ? r : ((t, a) => {
+ let r = t;
+ for (let t = 0; t < a; t++) {
+ if (e(r.tagName)) return r;
+ if (r = r.parentElement, !r) return null;
+ }
+ })(r, 10);
+ if (!i) return a(r);
+ {
+ const { href: e, target: r } = i,
+ c = i.getAttribute(A);
+ if (c)
+ if ("A" === i.tagName) {
+ const o = "_blank" === r || t.ctrlKey || t.shiftKey || t.metaKey || t.button && 1 === t.button;
+ if (c && e) return o || t.preventDefault(), a(i).then(() => {
+ o || (n.href = e);
+ });
+ } else if ("BUTTON" === i.tagName) return a(i);
+ }
+ }, !0),
+ B = !0
+ );
+ };
+
+ const I = (t, e) => L(
+ "string" == typeof t ? { ...j(), name: t, data: "object" == typeof e ? e : void 0 } : "object" == typeof t ? t : "function" == typeof t ? t(j()) : j()
+ );
+
+ const K = t => L({ ...j(), data: t }, "identify");
+
+ t.umami || (t.umami = { track: I, identify: K });
+
+ let R, B, D = U(u), _ = d !== s ? d : "", q = c.title;
+
+ y && !E() && ("complete" === c.readyState ? $() : c.addEventListener("readystatechange", $, !0));
+ })(window);
+}();

web/src/components/clickTracker.astro

@@ -0,0 +1,34 @@
+---
+// Track if div clicked, then send umami event once per page view
+interface Props {
+ div_id: string;
+ eventLabel: string;
+}
+
+const { div_id, eventLabel }: Props = Astro.props;
+---
+
+<script define:vars={{ div_id, eventLabel }}>
+ document.addEventListener('DOMContentLoaded', function() {
+ setTimeout(() => {
+ const section_div = document.getElementById(div_id);
+
+ if (section_div) {
+ let hasTracked = false;
+
+ section_div.onclick = () => {
+ if (!hasTracked) {
+ if (typeof umami !== 'undefined') {
+ umami.track(eventLabel);
+ } else {
+ console.error('umami is not defined.');
+ }
+ hasTracked = true;
+ }
+ };
+ } else {
+ console.warn(`Element with id "${div_id}" not found.`);
+ }
+ }, 0);
+ });
+</script>

web/src/components/code.astro

@@ -12,7 +12,7 @@ import "prismjs/plugins/line-highlight/prism-line-highlight.js";
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
-
+import ClickTracker from './clickTracker.astro';
 import GoogleColab from '../images/google_colab.svg.png'
 
 const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
@@ -791,7 +791,8 @@ const frameworks = [
 
 ---
 
-<div class="bg-white py-24 sm:py-24">
+<ClickTracker div_id="code_div" eventLabel="Example Code"/>
+<div id="code_div" class="bg-white py-24 sm:py-24">
  <div class="mx-auto max-w-[1500px] px-6 lg:px-8">
  <!-- Example Code Title & Description -->
  <div class="mx-auto max-w-5xl text-center">

web/src/components/gettingStarted.astro

@@ -1,4 +1,6 @@
 ---
+import ClickTracker from './clickTracker.astro';
+
 const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
 
 const walkthrough = [
@@ -93,7 +95,8 @@ const series = [
 ]
 ---
 
-<div class="bg-gray-50 py-24 sm:py-24">
+<ClickTracker div_id="getting_started_div" eventLabel="Getting Started"/>
+<div id="getting_started_div" class="bg-gray-50 py-24 sm:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
  <div class="mt-16 md:mt-0 text-center">
  <h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">

web/src/components/hero.astro

@@ -1,11 +1,13 @@
 ---
 import NvidiaLogo from '../images/nvidia_eye.png'
 import NvflareAnimation from '../images/nvflare_graphic_animation.mp4'
+import ClickTracker from './clickTracker.astro';
 
 const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
 const base_url = import.meta.env.BASE_URL;
 ---
-<div class="bg-white">
+<ClickTracker div_id="hero_div" eventLabel="Hero"/>
+<div id="hero_div" class="bg-white">
  <div class="relative isolate overflow-hidden bg-black">
  <div class="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-12">
  <div class="px-6 lg:px-0 lg:pt-4">

web/src/components/learnMore.astro

@@ -1,4 +1,5 @@
 ---
+import ClickTracker from './clickTracker.astro';
 
 const learnMore = [
  {
@@ -22,7 +23,8 @@ const learnMore = [
 ];
 ---
 
-<div class="bg-white py-24 sm:py-24">
+<ClickTracker div_id="learn_more_div" eventLabel="Learn More"/>
+<div id="learn_more_div" class="bg-white py-24 sm:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
  <div class="mx-auto lg:mx-0 text-center">
  <h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight text-gray-900">

web/src/components/overview.astro

@@ -1,4 +1,6 @@
 ---
+import ClickTracker from './clickTracker.astro';
+
 const features = [
  {
  id: "research",
@@ -70,7 +72,8 @@ const features = [
 
 ---
 
-<div class="bg-white py-20 sm:py-24">
+<ClickTracker div_id="overview_div" eventLabel="Why FLARE"/>
+<div id="overview_div" class="bg-white py-20 sm:py-24">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
  <div class="mx-auto lg:mx-0 text-center">
  <h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight text-gray-900">

web/src/components/series.astro

@@ -1,4 +1,6 @@
 ---
+import ClickTracker from './clickTracker.astro';
+
 const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
 
 const series_100 = {
@@ -304,7 +306,8 @@ const series_list = [
 
 ---
 
-<div class="bg-white py-20 sm:py-24">
+<ClickTracker div_id="series_div" eventLabel="Series"/>
+<div id="series_div" class="bg-white py-20 sm:py-24">
  <div class="mx-auto max-w-[1500px] px-6 lg:px-8">
  <div class="mx-auto lg:mx-0 text-center">
  <h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight text-gray-900">

web/src/components/tutorials.astro

@@ -1,5 +1,6 @@
 ---
 import GoogleColab from '../images/google_colab.svg.png'
+import ClickTracker from './clickTracker.astro';
 
 const gh_branch = import.meta.env.PUBLIC_GH_BRANCH;
 const base_url = import.meta.env.BASE_URL;
@@ -517,7 +518,8 @@ const tag_list = [
 
 ---
 
-<div class="bg-white py-16 sm:py-16">
+<ClickTracker div_id="tutorials_div" eventLabel="Tutorial Catalog"/>
+<div id="tutorials_div" class="bg-white py-16 sm:py-16">
  <div class="mx-auto max-w-[1600px] px-6 lg:px-8">
  <div class="mx-auto max-w-5xl mt-10 flex justify-left">
  <a href={base_url} class="text-sm font-semibold leading-6 text-nvidia">

web/src/layouts/Layout.astro

@@ -12,14 +12,16 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 const { title } = Astro.props;
 
 const makeTitle = title ? title + " | " + "NVIDIA FLARE" : "NVIDIA FLARE";
+
+const base_url = import.meta.env.BASE_URL;
 ---
 
 <!doctype html>
 <html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
- <link rel="icon" type="image/x-icon" href="public/favicon.ico">
+ <link rel="icon" type="image/x-icon" href=`${base_url}/favicon.ico`>
  <meta name="generator" content={Astro.generator} />
 
  <SEO
@@ -45,5 +47,6 @@ const makeTitle = title ? title + " | " + "NVIDIA FLARE" : "NVIDIA FLARE";
  </style>
  <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
  <script src="prismjs/prism.js"></script>
+ <script async defer data-website-id="020a242d-d343-48e8-bd5e-0daeddc9f756" src=`${base_url}/scripts/ua_latest.js`></script>
  </body>
 </html>