feat: plausible integration

Author: adelphi-liong

src/components/SocialShareButtons.tsx

@@ -11,6 +11,13 @@ export function SocialShareButtons({ title, description, url }: SocialShareButto
   const encodedTitle = encodeURIComponent(title);
   const encodedText = encodeURIComponent(`${title} - ${description}`);
 
+  const handleShareClick = (platform: string) => {
+    // Track share button click with Plausible
+    if (typeof window !== 'undefined' && (window as any).plausible) {
+      (window as any).plausible('Share Click', { props: { platform } });
+    }
+  };
+
   const shareLinks = [
     {
       name: 'Twitter',
@@ -61,6 +68,7 @@ export function SocialShareButtons({ title, description, url }: SocialShareButto
             target="_blank"
             rel="noopener noreferrer"
             aria-label={`Share on ${name}`}
+            onClick={() => handleShareClick(name)}
             className={`flex items-center justify-center w-10 h-10 rounded-full border border-border bg-background text-muted-foreground transition-colors ${color} hover:border-current`}
           >
             <Icon className="w-5 h-5" />

src/layouts/Layout.astro

@@ -71,6 +71,13 @@ const primaryHSLDark = `${h} ${s} ${lighterL}`;
     <!-- Preload OG image for faster social media crawler fetching -->
     {image && <link rel="preload" as="image" href={image} />}
 
+    <!-- Privacy-friendly analytics by Plausible -->
+    <script async src="https://plausible.io/js/pa-D-pChuIO1uVcJNWr_9MOx.js"></script>
+    <script is:inline>
+      window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
+      plausible.init()
+    </script>
+
     <!-- Theme initialization script (must run before body renders to prevent flash) -->
     <script is:inline>
       // This script runs immediately to prevent flash of unstyled content