feat: add umami tracking code and track events

README.md

@@ -1 +1,3 @@
-# todo
+## 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)

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>

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

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>

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

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

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>

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"