feat(docs): web analytics from posthog (#1260)

ark/docs/app/layout.tsx

@@ -4,6 +4,7 @@ import { RootProvider } from "fumadocs-ui/provider"
 import { Raleway } from "next/font/google"
 import type { ReactNode } from "react"
 import { ReleaseBanner } from "../components/ReleaseBanner.tsx"
+import { CSPostHogProvider } from "./providers.tsx"
 
 const raleway = Raleway({
 	subsets: ["latin"]
@@ -24,8 +25,10 @@ export default ({ children }: { children: ReactNode }) => (
 					defaultTheme: "dark"
 				}}
 			>
-				<ReleaseBanner />
-				{children}
+				<CSPostHogProvider>
+					<ReleaseBanner />
+					{children}
+				</CSPostHogProvider>
 			</RootProvider>
 		</body>
 	</html>

ark/docs/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,
+		person_profiles: "always"
+	})
+}
+
+export const CSPostHogProvider = ({
+	children
+}: {
+	children: React.ReactNode
+}) => <PostHogProvider client={posthog}>{children}</PostHogProvider>

ark/docs/package.json

@@ -35,6 +35,7 @@
 		"lucide-react": "0.471.1",
 		"next": "15.1.4",
 		"postcss": "8.5.1",
+		"posthog-js": "^1.207.0",
 		"prettier-plugin-tailwindcss": "0.6.10",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",