docs: update posthog docs and availability (langfuse#539)

Author: marcklingen

components/availability.tsx

@@ -0,0 +1,87 @@
+import { Check, X } from "lucide-react";
+
+const plans = [
+  { id: "hobby", label: "Hobby" },
+  { id: "pro", label: "Pro" },
+  { id: "team", label: "Team" },
+  { id: "selfHosted", label: "Self Hosted" },
+] as const;
+
+const availabilities = [
+  { id: "full", label: "Full", Icon: Check },
+  { id: "private-beta", label: "Private Beta", Icon: Check },
+  { id: "public-beta", label: "Public Beta", Icon: Check },
+  { id: "not-available", label: "Not Available", Icon: X },
+] as const;
+
+export function AvailabilitySidebar(props: {
+  frontMatter: Record<string, any>;
+}) {
+  const relevantFrontMatter = Object.entries(props.frontMatter)
+    .filter(([key, value]) => key.startsWith("availability"))
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+  if (Object.keys(relevantFrontMatter).length === 0) return null;
+
+  return (
+    <div className="flex flex-col space-y-2 text-primary/60 w-full align-middle border-y py-2">
+      <div className="font-bold">Availability</div>
+      <ul className="flex flex-col space-y-1">
+        {plans
+          .filter((plan) => `availability.${plan.id}` in relevantFrontMatter)
+          .map((plan) => {
+            const availability = availabilities.find(
+              (availability) =>
+                relevantFrontMatter[`availability.${plan.id}`] ===
+                availability.id
+            );
+            if (!availability) return null;
+            return (
+              <li key={plan.id} className="flex flex-row gap-2">
+                <availability.Icon className="w-4 h-4 inline-block" />
+                <div className="font-bold">{plan.label}</div>
+                <div>{availability.label}</div>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}
+
+export function AvailabilityBanner(props: {
+  availability: Record<
+    (typeof plans)[number]["id"],
+    (typeof availabilities)[number]["id"]
+  >;
+}) {
+  const availablePlans = plans
+    .filter((plan) => plan.id in props.availability)
+    .map((plan) => ({
+      ...plan,
+      availability: availabilities.find(
+        (availability) => availability.id === props.availability[plan.id]
+      ),
+    }));
+
+  return (
+    <div className="border-t border-b py-3 my-4">
+      <div className="font-semibold text-primary/60 mb-2">
+        Where is this feature available?
+      </div>
+      <ul className="flex flex-row gap-2 w-full justify-between">
+        {availablePlans.map((plan) => (
+          <li key={plan.id} className="flex flex-col gap-1">
+            <div className="font-bold">{plan.label}</div>
+            <div>
+              <plan.availability.Icon className="w-4 h-4 inline-block mr-1 lg:mr-2" />
+              <span className="hidden md:inline-block text-xs lg:text-sm">
+                {plan.availability.label}
+              </span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

pages/docs/analytics/posthog.mdx

@@ -1,9 +1,22 @@
 ---
 description: Display your Langfuse metrics in Posthog dashboards.
+availability.hobby: public-beta
+availability.pro: public-beta
+availability.team: public-beta
+availability.selfHosted: not-available
 ---
 
 # PostHog Integration (Beta)
 
+<AvailabilityBanner
+  availability={{
+    hobby: "public-beta",
+    pro: "public-beta",
+    team: "public-beta",
+    selfHosted: "not-available",
+  }}
+/>
+
 import { CloudflareVideo } from "@/components/Video";
 
 [PostHog](https://posthog.com) is a popular choice for OSS product analytics. While Langfuse offers [analytics](/docs/analytics) out of the box, many of our users have asked for a way to **integrate their LLM related metrics that they capture with Langfuse into their PostHog dashboards**.
@@ -25,24 +38,27 @@ We've built an integration to make it easy to answer questions like:
 
 ## Get started
 
-import { Callout } from "nextra/components";
+<Steps>
 
-<Callout type="info" emoji="ℹ️">
-  This is a beta feature and currently only available for users of our managed
-  service.
-</Callout>
+### Enable the integration
 
-Interested to use this integration for your Langfuse project? Reach out to us: early-access@langfuse.com
+Configure this integration in your Langfuse project settings. You will need to provide your PostHog Hostname and API key.
+
+<Frame border className="max-w-lg block">
+  ![Posthog Integration Settings](/images/docs/posthog-settings.png)
+</Frame>
 
-## Build a dashboard in PostHog
+### Build a dashboard in PostHog
 
-Once integrated, you can build a dashboard in PostHog to visualize your Langfuse metrics. Use the _AI Metrics_ template to get started with a pre-built dashboard that includes the most common metrics from Langfuse.
+Once integrated, you can build a dashboard in PostHog to visualize your Langfuse metrics (see [reference below](#details)). Use the _AI Metrics_ template to get started with a pre-built dashboard that includes the most common metrics from Langfuse.
 
 <Frame border className="max-w-xs block">
   ![PostHog Dashboard Template](/images/docs/posthog-template.png)
 </Frame>
 
-## Integration details
+</Steps>
+
+## Integration details [#details]
 
 On a daily schedule Langfuse batches aggregated events and metrics to your PostHog instance.
 
@@ -120,7 +136,3 @@ You can decide which events you want to send to PostHog. By default, we send all
 - `langfuse_release`: The release information of the trace associated with the score.
 - `langfuse_tags`: Any tags related to the trace of the score.
 - `langfuse_integration_version`: The integration version with LangFuse.
-
-## Questions?
-
-If you have any questions about this integration, please reach out to us at early-access@langfuse.com

public/images/docs/posthog-settings.png

@@ -9,6 +9,8 @@
 
 .nextra-toc>div> :last-child {
     fill-opacity: 50;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
 }
 
 /* smaller search bar */

src/overrides.css

@@ -20,6 +20,10 @@ import IconDiscord from "./components/icons/discord";
 import FooterMenu from "./components/FooterMenu";
 import Link from "next/link";
 import { FileCode, LibraryBig } from "lucide-react";
+import {
+  AvailabilityBanner,
+  AvailabilitySidebar,
+} from "./components/availability";
 
 const config: DocsThemeConfig = {
   logo: <Logo />,
@@ -106,6 +110,10 @@ const config: DocsThemeConfig = {
   },
   toc: {
     backToTop: true,
+    extraContent: () => {
+      const { frontMatter } = useConfig();
+      return <AvailabilitySidebar frontMatter={frontMatter} />;
+    },
   },
   docsRepositoryBase: "https://github.com/langfuse/langfuse-docs/tree/main",
   footer: {
@@ -214,6 +222,7 @@ const config: DocsThemeConfig = {
     Steps,
     Card,
     Cards,
+    AvailabilityBanner,
   },
   banner: {
     key: "launch-week",