Merge pull request #7 from JSConfCL/lego/feat/posthog-analytics

Lego/feat/posthog analytics
JSConfCL · Mar 26, 2024 · 6d1ae8c · 6d1ae8c
2 parents b5aff79 + 9b46f32
commit 6d1ae8c
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 10 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "clsx": "^2.1.0",
     "lucide-react": "^0.335.0",
     "next": "14.1.0",
+    "posthog-js": "^1.116.6",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.1",
@@ -32,6 +33,7 @@
     "@commitlint/config-conventional": "^18.6.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@next/eslint-plugin-next": "^14.1.0",
+    "@posthog/plugin-scaffold": "^1.6.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Barlow, Inconsolata, Koulen } from "next/font/google";
 import { clsx } from "clsx";
 
+import { CSPostHogProvider } from "./providers";
+
 import "./globals.css";
 
 const koulen = Koulen({
@@ -37,16 +39,18 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={clsx(
-          koulen.variable,
-          barlow.variable,
-          inconsolata.variable,
-          "relative z-50 bg-[#090907] after:pointer-events-none after:absolute after:inset-0 after:size-full after:select-none after:bg-noise after:bg-repeat after:content-['']",
-        )}
-      >
-        {children}
-      </body>
+      <CSPostHogProvider>
+        <body
+          className={clsx(
+            koulen.variable,
+            barlow.variable,
+            inconsolata.variable,
+            "relative z-50 bg-[#090907] after:pointer-events-none after:absolute after:inset-0 after:size-full after:select-none after:bg-noise after:bg-repeat after:content-['']",
+          )}
+        >
+          {children}
+        </body>
+      </CSPostHogProvider>
     </html>
   );
 }
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+
+if (
+  typeof window !== "undefined" &&
+  process.env.NEXT_PUBLIC_POSTHOG_KEY &&
+  process.env.NEXT_PUBLIC_POSTHOG_HOST
+) {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  });
+}
+export function CSPostHogProvider({
+  children,
+}: {
+  children: JSX.Element | JSX.Element[];
+}) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NEXT_PUBLIC_POSTHOG_KEY=
		NEXT_PUBLIC_POSTHOG_HOST=