chore: add plausible event tracking

src/components/PostCard.tsx

@@ -39,6 +39,7 @@ import {
 } from './ui/dropdown-menu';
 import { memo, useState } from 'react';
 import { toast } from 'sonner';
+import { usePlausible } from '@/hooks/usePlausible';
 
 const contextToText = (context: string) => {
   if (context === 'following') return 'following';
@@ -61,6 +62,7 @@ const BetterContext = ({ context }: { context?: string }) => {
 };
 
 const PostDropdownMenu = ({ post, setTranslatedText }: { post: BSkyPost; setTranslatedText: (text: string) => void }) => {
+  const { trackEvent } = usePlausible();
   const isProd = window.location.hostname === 'akari.blue';
   const handleTranslate = async (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -87,6 +89,7 @@ const PostDropdownMenu = ({ post, setTranslatedText }: { post: BSkyPost; setTran
       translatedText: string;
     };
     setTranslatedText(json.translatedText);
+    trackEvent('translate', { language: source });
   };
 
   return (
@@ -104,6 +107,7 @@ const PostDropdownMenu = ({ post, setTranslatedText }: { post: BSkyPost; setTran
             event.stopPropagation();
             navigator.clipboard.writeText(post.record.text);
             toast.info('Copied post text to clipboard');
+            trackEvent('copyToClipboard', { type: 'post-text' });
           }}
         >
           {'copy post text'} <ClipboardIcon />
@@ -125,6 +129,7 @@ const PostDropdownMenu = ({ post, setTranslatedText }: { post: BSkyPost; setTran
               `https://akari.blue/profile/${post.author.handle}/post/${post.uri.split('/').pop()}`,
             );
             toast.info('Copied post link to clipboard');
+            trackEvent('copyToClipboard', { type: 'post-link' });
           }}
         >
           {'copy link to post'} <ShareIcon />

src/hooks/usePlausible.ts

@@ -0,0 +1,35 @@
+type Events = {
+  translate: { language: string };
+  copyToClipboard: { type: 'post-text' | 'post-link' };
+};
+
+declare global {
+  interface Window {
+    plausible: {
+      (...args: unknown[]): void;
+      q: unknown[];
+    };
+  }
+}
+const plausible = (window.plausible =
+  window.plausible ||
+  function (...args: unknown[]) {
+    (window.plausible.q = window.plausible.q || []).push(args);
+  });
+
+function trackEvent<EventType extends keyof Events>(
+  eventType: EventType,
+  ...args: Events[EventType] extends never ? [] : [Events[EventType]]
+) {
+  if (args.length > 0) {
+    plausible(eventType, { props: args[0] });
+  } else {
+    plausible(eventType);
+  }
+}
+
+export const usePlausible = () => {
+  return {
+    trackEvent,
+  };
+};