feat: umami integration

Author: Xetera

package.json

@@ -28,7 +28,7 @@
     "@types/react-dom": "^18.3.5",
     "@unocss/preset-icons": "^65.4.3",
     "@unocss/transformer-variant-group": "^65.4.3",
-    "astro": "^5.2.3",
+    "astro": "^5.3.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -63,5 +63,5 @@
     "pnpm": "^10.1.0",
     "typescript": "^5.7.3"
   },
-  "packageManager": "pnpm@9.14.2"
+  "packageManager": "pnpm@10.0.0"
 }

pnpm-lock.yaml

@@ -12,6 +12,24 @@ const { title, description, themeColor } = Astro.props;
 <meta name="viewport" content="width=device-width" />
 <meta name="description" content={description ?? "Xetera's Blog"} />
 <link rel="icon" type="image/png" href="/xetera_favicon.png" />
+<!--
+This is a tracking script for selfhosted, privacy-conscious https://umami.is analytics.
+Feel free to block it if you want but the data collected is stored locally on my cluster and not by a 3rd party.
+-->
+<script
+  is:inline
+  defer
+  data-domains={Astro.site ? Astro.site.host : ""}
+  src="https://overtime-contingency.xetera.dev/selfhosted-umami"
+  data-website-id="fb997c11-6572-43df-bddf-9a64b1f2812d"></script>
+{
+  // ignoring local visit + forks
+  import.meta.env.DEV && (
+    <script is:inline type="module">
+      localStorage.setItem('umami.disabled', 1)
+    </script>
+  )
+}
 <!-- Repeating a little bit of code here to make sure this is inlined properly -->
 <script is:inline transition:persist>
   const modes = ["dark", "light", "system"];

src/components/BaseHead.astro

@@ -44,6 +44,7 @@ const latestShort = (await getAllShorts())[0];
               href={`https://github.com/${import.meta.env.SOCIAL_GITHUB}`}
               target="_blank"
               class="hover:color-text-900"
+              data-umami-event="social:github"
             >
               <Github />
             </ExternalLink>
@@ -56,6 +57,7 @@ const latestShort = (await getAllShorts())[0];
               href={`https://twitter.com/${import.meta.env.SOCIAL_TWITTER}`}
               target="_blank"
               class="hover:color-text-900"
+              data-umami-event="social:bsky"
             >
               <Twitter />
             </ExternalLink>
@@ -68,6 +70,7 @@ const latestShort = (await getAllShorts())[0];
               href=""
               target="_blank"
               class="email-target hover:color-text-900 relative"
+              data-umami-event="social:email"
             >
               <div
                 class="obfuscated-email hidden"

src/components/Bio.astro

@@ -1,20 +1,19 @@
 ---
-import type { AnchorHTMLAttributes } from "react";
+import type { HTMLAttributes } from "astro/types";
 
-interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+interface Props extends HTMLAttributes<"a"> {
   href: string;
   noIcon?: boolean;
   class?: string;
-  target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
 }
 
-const { href, noIcon, target, class: className } = Astro.props;
+const { href, noIcon, class: className, ...rest } = Astro.props;
 ---
 
 <a
   rel="noreferrer noopener"
+  {...rest}
   href={href}
-  href={target}
   class:list={[className, "external-link"]}
 >
   <slot />

src/components/ExternalLink.astro

@@ -53,7 +53,13 @@ const className = "book-item rounded";
           )}/dp/${book.asin}`;
           const render = <Book {...book} class={className} />;
           return (
-            <a href={link} target="_blank">
+            <a
+              rel="noopener noreferrer"
+              href={link}
+              target="_blank"
+              data-umami-event="book-timeline:poster-click"
+              data-umami-event-book={book.title}
+            >
               {render}
             </a>
           );

src/components/kindle/BookGrid.astro

@@ -37,7 +37,13 @@ const augmented = groupBy(
             <SpotifyDateDivider class="mb-3">{distance}</SpotifyDateDivider>
             <div class="flex flex-col gap-6">
               {songs.map((song) => (
-                <a href={song.song.spotifyUrl} target="_blank">
+                <a
+                  rel="noreferrer noopener"
+                  href={song.song.spotifyUrl}
+                  target="_blank"
+                  data-umami-event="spotify:song-click"
+                  data-umami-event-song={song.song.title}
+                >
                   <SpotifySong {...song.song} />
                 </a>
               ))}