From aaaf100d2ccee6e328c5f116d784f5f266822f8a Mon Sep 17 00:00:00 2001
From: Guoqi Sun <sun412926@gmail.com>
Date: Sat, 21 Dec 2024 21:02:50 +0800
Subject: [PATCH] feat: add umami tracking code and track events

---
 README.md                                |  4 +++-
 src/components/astro/footer.astro        |  3 ++-
 src/components/astro/header.astro        | 11 ++++++++---
 src/components/astro/nav.astro           |  9 ++++++++-
 src/components/astro/post-list.astro     |  1 +
 src/components/react/language-toggle.tsx |  8 +++++++-
 src/components/react/theme-toggle.tsx    |  2 +-
 src/layouts/base.astro                   |  6 ++++++
 8 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 99f1089..616b9e7 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,3 @@
-# todo
\ No newline at end of file
+## todo
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/de94319e-7049-462a-8022-817fe915045c/deploy-status)](https://app.netlify.com/sites/blog-air/deploys)
\ No newline at end of file
diff --git a/src/components/astro/footer.astro b/src/components/astro/footer.astro
index 0eb8dea..a75008c 100644
--- a/src/components/astro/footer.astro
+++ b/src/components/astro/footer.astro
@@ -2,7 +2,7 @@
 const currentYear = new Date().getFullYear()
 ---
 
-<footer class="relative z-10 my-10 flex flex-wrap items-center gap-1">
+<footer class="relative z-10 flex flex-wrap items-center gap-1 py-10">
   <p>&copy; {currentYear}</p>
 
   {
@@ -24,6 +24,7 @@ const currentYear = new Date().getFullYear()
         <a
           href={item.link}
           class="text-blue-500 transition-colors duration-200 hover:text-blue-700"
+          data-umami-event={`footer-${item.label}`}
         >
           {item.label}
         </a>
diff --git a/src/components/astro/header.astro b/src/components/astro/header.astro
index b78200a..05a3ba8 100644
--- a/src/components/astro/header.astro
+++ b/src/components/astro/header.astro
@@ -10,21 +10,26 @@ const config = lang === "zh" ? zh : en
 ---
 
 <header class="flex h-24 w-full items-center justify-between">
-  <a href="/">
+  <a href="/" data-umami-event="site-name">
     <div class="text-2xl font-semibold">{config.siteName}</div>
   </a>
 
   <div class="flex items-center gap-6">
     {
       config.rss && (
-        <a href="/atom.xml" target="_blank">
+        <a href="/atom.xml" target="_blank" data-umami-event="rss">
           <Rss />
         </a>
       )
     }
     {
       config.social.map((social) => (
-        <a href={social.link} target="_blank" class="hidden md:block">
+        <a
+          href={social.link}
+          target="_blank"
+          class="hidden md:block"
+          data-umami-event={social.label}
+        >
           <social.icon />
         </a>
       ))
diff --git a/src/components/astro/nav.astro b/src/components/astro/nav.astro
index 6824f5c..a54076b 100644
--- a/src/components/astro/nav.astro
+++ b/src/components/astro/nav.astro
@@ -12,7 +12,11 @@ const { home, archive, custom, about } =
 <div class="mb-10 mt-4 flex gap-4 overflow-x-auto whitespace-nowrap text-lg">
   {
     home && (
-      <a href={`/${lang}`} class="hover:underline hover:underline-offset-4">
+      <a
+        href={`/${lang}`}
+        class="hover:underline hover:underline-offset-4"
+        data-umami-event="nav-home"
+      >
         <p>{t("nav.home")}</p>
       </a>
     )
@@ -22,6 +26,7 @@ const { home, archive, custom, about } =
       <a
         href={`/${lang}/archive`}
         class="hover:underline hover:underline-offset-4"
+        data-umami-event="nav-archive"
       >
         <p>{t("nav.archive")}</p>
       </a>
@@ -33,6 +38,7 @@ const { home, archive, custom, about } =
         href={tab.link}
         class="hover:underline hover:underline-offset-4"
         target="_blank"
+        data-umami-event={`nav-${tab.label}`}
       >
         <p>{tab.label}</p>
       </a>
@@ -43,6 +49,7 @@ const { home, archive, custom, about } =
       <a
         href={`/${lang}/about`}
         class="hover:underline hover:underline-offset-4"
+        data-umami-event="nav-about"
       >
         <p>{t("nav.about")}</p>
       </a>
diff --git a/src/components/astro/post-list.astro b/src/components/astro/post-list.astro
index e1cbbf0..26e1006 100644
--- a/src/components/astro/post-list.astro
+++ b/src/components/astro/post-list.astro
@@ -12,6 +12,7 @@ import { formatDate } from "~/utils"
 
 <a
   href={`/${lang}/posts/${post.id}/`}
+  data-umami-event={`post-${post.id}`}
   class="my-3 flex visited:text-purple-500/90 md:my-2"
 >
   <p
diff --git a/src/components/react/language-toggle.tsx b/src/components/react/language-toggle.tsx
index 6fe6021..2b02f6d 100644
--- a/src/components/react/language-toggle.tsx
+++ b/src/components/react/language-toggle.tsx
@@ -11,5 +11,11 @@ export function LanguageToggle() {
     window.location.href = newPath
   }
 
-  return <Languages className="cursor-pointer" onClick={handleLanguageToggle} />
+  return (
+    <Languages
+      className="cursor-pointer"
+      data-umami-event="language-toggle"
+      onClick={handleLanguageToggle}
+    />
+  )
 }
diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
index 00419aa..2782ede 100644
--- a/src/components/react/theme-toggle.tsx
+++ b/src/components/react/theme-toggle.tsx
@@ -23,7 +23,7 @@ export function ThemeToggle() {
   }
 
   return (
-    <button onClick={handleToggleClick}>
+    <button onClick={handleToggleClick} data-umami-event="theme-toggle">
       <Sun className="dark:hidden" />
       <Moon className="hidden dark:block" />
     </button>
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 26b0b9a..70c1c7b 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -71,6 +71,12 @@ const config = lang === "zh" ? zh.meta : en.meta
         setTheme()
       })
     </script>
+
+    <script
+      defer
+      src="https://umami.guoqi.dev/script.js"
+      data-website-id="3cd55e92-cb53-4254-a97d-24441b08d7c3"
+      data-domains="astro-air.netlify.app"></script>
   </head>
   <body
     class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0"