feat: implement analytics with posthog

omsimos · May 11, 2024 · 2a37b3c · 2a37b3c
1 parent 6aa2bc4
commit 2a37b3c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -29,24 +29,24 @@
     "next": "14.2.3",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
+    "posthog-js": "^1.131.4",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.4",
-    "sharp": "^0.33.3",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.0",
     "zod": "^3.23.6"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.0"
+    "typescript": "^5"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { Toaster } from "@/components/ui/sonner";
 import NextTopLoader from "nextjs-toploader";
 import Navbar from "@/components/navbar";
 import "./globals.css";
+import { CSPostHogProvider } from "./provider";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://www.github-stats.omsimos.com"),
@@ -34,14 +35,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${GeistSans.className} ${GeistMono.variable}`}>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <Navbar />
-          <Toaster />
-          <NextTopLoader />
-          {children}
-        </ThemeProvider>
-      </body>
+      <CSPostHogProvider>
+        <body className={`${GeistSans.className} ${GeistMono.variable}`}>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <Navbar />
+            <Toaster />
+            <NextTopLoader />
+            {children}
+          </ThemeProvider>
+        </body>
+      </CSPostHogProvider>
     </html>
   );
 }
diff --git a/src/app/provider.tsx b/src/app/provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+
+if (typeof window !== "undefined") {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  });
+}
+
+export function CSPostHogProvider({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}