Add posthog (#2013)

* posthog added to project

* added posthog

apps/framework-docs/.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 # Sentry Auth Token
 .sentryclirc
 
+.env*.local

apps/framework-docs/next.config.js

@@ -40,6 +40,23 @@ const nextConfig = {
     //   'Disable the Sentry SDK Debug Logger to Save Bundle Size':
     //     - disableLogger
   },
+  async rewrites() {
+    return [
+      {
+        source: "/ingest/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+      {
+        source: "/ingest/decide",
+        destination: "https://us.i.posthog.com/decide",
+      },
+    ];
+  },
+  skipTrailingSlashRedirect: true,
 };
 
 const sentryWebpackPluginOptions = {

apps/framework-docs/package.json

@@ -18,6 +18,7 @@
     "next": "^14.2.15",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
+    "posthog-js": "^1.214.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-server-dom-webpack": "^0.0.1",

apps/framework-docs/src/components/callout.tsx

@@ -52,7 +52,7 @@ export function Callout({ type, title, children }: CalloutProps) {
   return (
     <Card
       className={cn(
-        "callout border b-[1px] rounded-3xl my-5 flex items-start w-full p-4 space-x-2",
+        "callout border b-[1px] my-5 flex items-start w-full p-4 space-x-2",
         variantProps.color,
         variantProps.border,
       )}

apps/framework-docs/src/components/cta-card.tsx

@@ -39,9 +39,9 @@ export function CTACard({
   variant = "default",
 }: CTACardProps) {
   return (
-    <Card className={cn("rounded-3xl h-full flex flex-col", className)}>
+    <Card className={cn("h-full flex flex-col", className)}>
       <CardHeader>
-        <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
           <Icon className="h-[20px] w-[20px] text-purple-400" />
           <SmallText className="text-primary text-purple-400 my-0">
             {cardName}

apps/framework-docs/src/components/two-columns.tsx

@@ -10,6 +10,7 @@ import {
 } from "@514labs/design-system-components/typography";
 
 import { cn } from "@514labs/design-system-components/utils";
+import { Card } from "@514labs/design-system-components/components";
 
 interface ColumnProps {
   heading: string;
@@ -35,5 +36,9 @@ export function Column({ heading, body, list, className }: ColumnProps) {
 }
 
 export function Columns({ children }: { children: React.ReactNode }) {
-  return <Grid className="mt-4 md:gap-x-0 border rounded-3xl">{children}</Grid>;
+  return (
+    <Card className="mt-4 md:gap-x-0">
+      <Grid>{children}</Grid>
+    </Card>
+  );
 }

apps/framework-docs/src/pages/_app.mdx

@@ -1,10 +1,55 @@
 import "@514labs/design-system-base/globals.css";
 import RootLayout from "../components/layouts";
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import Router from 'next/router'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+
 
 export default function App({ Component, pageProps }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Wait until Next.js router is ready to ensure query params are populated.
+    if (!router.isReady) return;
+
+    // Extract cross-site tracking params from Next.js router query.
+    // These are added by TrackLink as 'ph_distinct_id' and 'ph_session_id'.
+    const { ph_distinct_id, ph_session_id } = router.query;
+    let bootstrapData = {};
+
+    if (ph_distinct_id || ph_session_id) {
+      bootstrapData = {
+        ...(ph_distinct_id && { distinct_id: ph_distinct_id }),
+        ...(ph_session_id && { session_id: ph_session_id }),
+      };
+    }
+
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+      ui_host: 'https://us.posthog.com',
+      bootstrap: bootstrapData, // Bootstrap with IDs from the URL if provided.
+      // Enable debug mode in development
+      loaded: (posthogInstance) => {
+        if (process.env.NODE_ENV === 'development') posthogInstance.debug()
+      }
+    })
+
+    const handleRouteChange = () => posthog?.capture('$pageview')
+
+    Router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange);
+    }
+  }, [router.isReady])
+
   return (
-    <RootLayout>
-      <Component {...pageProps} />
-    </RootLayout>
+    <PostHogProvider client={posthog}>
+      <RootLayout>
+        <Component {...pageProps} />
+      </RootLayout>
+    </PostHogProvider>
   );
 }