umami analytics

src/components/Footer.astro

@@ -11,25 +11,53 @@ const year = new Date().getFullYear();
 ---
 
 <footer class="border-t border-border/80 font-mono">
-  <div class="mx-auto flex max-w-3xl flex-col gap-2 px-4 py-8 text-sm text-text-muted sm:flex-row sm:items-center sm:justify-between sm:px-6">
+  <div class="mx-auto flex flex-col gap-2 px-4 py-8 items-center text-xs text-text-muted lg:flex-row lg:justify-center lg:px-6">
     <p>
       &copy; {year} <span class="font-mono text-text">gabeefranco</span> &middot; {t('footer.rights')}
     </p>
     <div class="flex items-center gap-4">
-      <span class="hidden sm:inline">{t('footer.tagline')}</span>
       <a
         href="https://github.com/gabeefranco"
         target="_blank"
         rel="noopener noreferrer me"
-        class="transition-colors hover:text-primary"
+        class="text-primary hover:text-primary-hover underline"
+        data-umami-event="github-profile-footer-click"
       >
         GitHub
       </a>
       <a
-        href="https://github.com/gabeefranco/gabeefran.co-blog"
+        href="https://linkedin.com/in/gabeefranco"
         target="_blank"
         rel="noopener noreferrer"
-        class="transition-colors hover:text-primary"
+        class="text-primary hover:text-primary-hover underline"
+        data-umami-event="linkedin-footer-click"
+      >
+        LinkedIn
+      </a>
+      <a
+        href="https://x.com/gabeefranco_"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary hover:text-primary-hover underline"
+        data-umami-event="twitter-footer-click"
+      >
+        X.com
+      </a>
+      <a
+        href="https://instagram.com/gabeefranco_"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary hover:text-primary-hover underline"
+        data-umami-event="instagram-footer-click"
+      >
+        Instagram
+      </a>
+      <a
+        href="https://git.gabeefran.co/gabeefranco/gabeefran.co-blog"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-primary hover:text-primary-hover underline"
+        data-umami-event="source-footer-click"
       >
         {t('footer.source')}
       </a>

src/components/Header.astro

@@ -17,9 +17,9 @@ const aboutHref = getLocalizedPath('/about', lang);
 const langSwitchHref = getLocalizedPath(pathname, otherLang);
 
 const navLinks = [
-  { href: homeHref, label: t('nav.home') },
+{ href: homeHref, label: t('nav.home'), id: 'home' },
-  { href: postsHref, label: t('nav.posts') },
+{ href: postsHref, label: t('nav.posts'), id: 'posts' },
-  { href: aboutHref, label: t('nav.about') },
+{ href: aboutHref, label: t('nav.about'), id: 'about' },
 ];
 
 function isActive(href: string): boolean {
@@ -32,7 +32,7 @@ function isActive(href: string): boolean {
 <header class="sticky top-0 z-40 border-b border-border/80 bg-bg/85 backdrop-blur">
   <div class="flex flex-col justify-center gap-4 px-4 py-3 sm:px-6">
     <div class="flex flex-row justify-between items-end">
-      <a href={homeHref} class="flex hover:underline shrink-0 items-center gap-2.5" aria-label={t('site.name')}>
+      <a href={homeHref} class="flex hover:underline shrink-0 items-center gap-2.5" aria-label={t('site.name')} data-umami-event="logo-header-click">
         <img src="/logo.png" class="h-4"/>
         <span class="font-mono text-[15px] font-semibold tracking-tight text-text">{t('site.name')}</span>
 
@@ -43,7 +43,8 @@ function isActive(href: string): boolean {
         hreflang={otherLang}
         title={t('lang.switch')}
         aria-label={`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
-          class="text-accent max-w-fit font-mono text-xs sm:text-sm underline hover:cursor-pointer hover:text-accent-deep"
+        data-umami-event="switch-language-header-click" 
+        class="text-accent max-w-fit font-mono text-xs sm:text-sm underline hover:cursor-pointer hover:text-accent-deep"
       >
         {`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
       </a>
@@ -63,6 +64,7 @@ function isActive(href: string): boolean {
                 ? 'text-primary hover:text-primary-hover'
                 : 'text-text-muted hover:text-text',
             ]}
+            data-umami-event={`${link.id}-header-click`}
           >
             {link.label}
           </a>
@@ -73,7 +75,8 @@ function isActive(href: string): boolean {
         hreflang={otherLang}
         title={t('lang.switch')}
         aria-label={`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
-          class="text-accent max-w-fit py-1 font-mono text-xs sm:text-sm underline hover:cursor-pointer hover:text-accent-deep "
+        data-umami-event="switch-language-header-click" 
+        class="text-accent max-w-fit py-1 font-mono text-xs sm:text-sm underline hover:cursor-pointer hover:text-accent-deep "
       >
         {`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
       </a>
@@ -94,6 +97,7 @@ function isActive(href: string): boolean {
                 ? 'text-primary hover:text-primary-hover'
                 : 'text-text-muted hover:text-text',
             ]}
+            data-umami-event={`${link.id}-header-click`}
           >
             {link.label}
           </a>

src/components/ThemeToggle.astro

@@ -14,6 +14,7 @@ const t = useTranslations(lang);
   type="button"
   class="theme-toggle text-accent sm:ml-2 font-mono text-xs sm:text-sm underline hover:cursor-pointer hover:text-accent-deep"
   aria-label={t('theme.switch')}
+  data-umami-event="toggle-theme-header-click"
   title={t('theme.switch')}
 >
   {t('theme.switch')}

src/layouts/BaseLayout.astro

@@ -62,6 +62,14 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       rel="stylesheet"
     />
 
+    <script
+      is:inline
+      defer
+      src="https://stats.gabeefran.co/gabest.js"
+      data-website-id="d8448824-f620-48e0-98ab-c0ea596dc17d"
+      data-domains="gabeefran.co"
+    ></script>
+
     <script is:inline>
       // Runs before paint to avoid a flash of the wrong theme.
       (function () {