Merge pull request #48 from SkidGod4444/feature/auth

add posthog analytics
SkidGod4444 · Nov 13, 2024 · 1433a02 · 1433a02
2 parents 8a7dc6b + eb38c9c
commit 1433a02
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 31 deletions.
diff --git a/apps/app/app/layout.tsx b/apps/app/app/layout.tsx
@@ -7,6 +7,7 @@ import { AppSidebar } from "@/components/custom/sidebar/sidebar";
 import { cookies } from "next/headers";
 import Infobar from "@/components/custom/infobar/infobar";
 import ProgressBar from "@/components/custom/progress.bar";
+import { PosthogProvider } from "@/hooks/posthog";
 
 export const metadata: Metadata = {
   title: "Plura",
@@ -23,25 +24,27 @@ async function RootLayout({
 
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`min-h-screen bg-background font-sans ${GeistSans.variable} antialiased`}
-      >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem
-          disableTransitionOnChange
+      <PosthogProvider>
+        <body
+          className={`min-h-screen bg-background font-sans ${GeistSans.variable} antialiased`}
         >
-          <SidebarProvider defaultOpen={defaultOpen}>
-            <AppSidebar />
-            <div className="p-2">
-              <ProgressBar />
-              <Infobar />
-              {children}
-            </div>
-          </SidebarProvider>
-        </ThemeProvider>
-      </body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <SidebarProvider defaultOpen={defaultOpen}>
+              <AppSidebar />
+              <div className="p-2">
+                <ProgressBar />
+                <Infobar />
+                {children}
+              </div>
+            </SidebarProvider>
+          </ThemeProvider>
+        </body>
+      </PosthogProvider>
     </html>
   );
 }

diff --git a/apps/app/hooks/posthog.tsx b/apps/app/hooks/posthog.tsx
@@ -0,0 +1,17 @@
+"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!,
+    person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+  });
+}
+export function PosthogProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { GeistSans } from "geist/font/sans";
 import "./globals.css";
 import { ThemeProvider } from "@/hooks/theme-provider";
+import { PosthogProvider } from "@/hooks/posthog";
 
 export const metadata: Metadata = {
   title: "Plura",
@@ -15,20 +16,22 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={` bg-background font-sans min-h-screen  ${GeistSans.variable} antialiased`}
-      >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem
-          disableTransitionOnChange
+      <PosthogProvider>
+        <body
+          className={` bg-background font-sans min-h-screen  ${GeistSans.variable} antialiased`}
         >
-          <div className="flex flex-col items-center bg-background mx-auto">
-            {children}
-          </div>
-        </ThemeProvider>
-      </body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <div className="flex flex-col items-center bg-background mx-auto">
+              {children}
+            </div>
+          </ThemeProvider>
+        </body>
+      </PosthogProvider>
     </html>
   );
 }
diff --git a/apps/www/hooks/posthog.tsx b/apps/www/hooks/posthog.tsx
@@ -0,0 +1,17 @@
+"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!,
+    person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+  });
+}
+export function PosthogProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "next": "15.0.2",
     "next-auth": "5.0.0-beta.25",
     "postcss": "^8",
+    "posthog-js": "^1.184.1",
     "supertest": "^7.0.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml