Add OpenPanel

apps/home/package.json

@@ -11,10 +11,11 @@
 		"lint:fix": "biome check --write"
 	},
 	"dependencies": {
+		"@openpanel/web": "^1.0.1",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.2",
-		"@startupkit/analytics": "0.2.0",
+		"@startupkit/analytics": "workspace:*",
 		"@startupkit/cms": "0.2.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",

apps/home/src/components/Features.tsx

@@ -92,6 +92,11 @@ const FEATURES = [
 				label: "Plausible",
 				image: require("@/images/integrations/plausible.svg"),
 				className: "h-6"
+			},
+			{
+				label: "OpenPanel",
+				image: require("@/images/integrations/openpanel.svg"),
+				className: "h-6"
 			}
 		]
 	},

apps/home/src/components/StartupKitProvider.tsx

@@ -1,32 +1,69 @@
-"use client"
+'use client';
 
-import { AnalyticsProvider } from "@startupkit/analytics"
-import googleAnalytics from "@startupkit/analytics/ga"
-import plausiblePlugin from "@startupkit/analytics/plausible"
-import posthogPlugin from "@startupkit/analytics/posthog"
+import { OpenPanel } from '@openpanel/web';
+import { AnalyticsProvider } from '@startupkit/analytics';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
 
-const plugins: any[] = [
-	googleAnalytics({
-		measurementIds: [process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID]
-	}),
-	plausiblePlugin({
-		domain: "startupkit.com",
-		trackLocalhost: true
-	}),
-	posthogPlugin({
-		token: process.env.NEXT_PUBLIC_POSTHOG_TOKEN || "",
-		enabled: true,
-		options: {
-			persistence: "memory",
-			disable_cookie: true
-		}
-	})
-]
+const openpanel =
+  typeof window !== 'undefined'
+    ? new OpenPanel({
+        clientId:
+          process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID ||
+          process.env.OPENPANEL_CLIENT_ID ||
+          '',
+        trackScreenViews: false,
+        trackOutgoingLinks: true,
+        trackAttributes: true,
+      })
+    : null;
 
 export const StartupKitProvider = ({
-	children
+  children,
 }: Readonly<{
-	children: React.ReactNode
+  children: ReactNode;
 }>) => {
-	return <AnalyticsProvider plugins={plugins}>{children}</AnalyticsProvider>
-}
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    if (!initialized.current && openpanel) {
+      initialized.current = true;
+    }
+  }, []);
+
+  return (
+    <AnalyticsProvider
+      flags={{}}
+      handlers={{
+        identify: (userId, traits) => {
+          if (!openpanel) return;
+          if (userId) {
+            openpanel.identify({
+              profileId: userId,
+              ...(traits || {}),
+            });
+          } else {
+            openpanel.clear();
+          }
+        },
+        track: (event, properties) => {
+          if (!openpanel) return;
+          openpanel.track(event, properties || {});
+        },
+        page: (name, properties) => {
+          if (!openpanel) return;
+          openpanel.track('$pageview', {
+            ...(properties || {}),
+            ...(name ? { route: name } : {}),
+          });
+        },
+        reset: () => {
+          if (!openpanel) return;
+          openpanel.clear();
+        },
+      }}
+    >
+      {children}
+    </AnalyticsProvider>
+  );
+};