From 07c6b98581833753579db5c0eeaa5ac1be74e707 Mon Sep 17 00:00:00 2001
From: Sarina Li <sarinajin.li@gmail.com>
Date: Thu, 16 Oct 2025 16:28:25 -0400
Subject: [PATCH] cookie policy + external links

---
 docs/src/app/layout.tsx                   |  6 ++
 docs/src/components/analytics-tracker.tsx | 71 +++++++++++++++++++++++
 docs/src/components/cookie-consent.tsx    | 44 ++++++++++++++
 docs/src/components/footer.tsx            | 16 +++++
 docs/src/mdx-components.tsx               | 10 ++++
 docs/src/providers/posthog-provider.tsx   |  1 -
 6 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/components/analytics-tracker.tsx
 create mode 100644 docs/src/components/cookie-consent.tsx
 create mode 100644 docs/src/components/footer.tsx

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 0aa16d29..e821184e 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -3,6 +3,9 @@ import { RootProvider } from 'fumadocs-ui/provider';
 import { Inter } from 'next/font/google';
 import type { ReactNode } from 'react';
 import { PHProvider, PostHogPageView } from '@/providers/posthog-provider';
+import { AnalyticsTracker } from '@/components/analytics-tracker';
+import { CookieConsent } from '@/components/cookie-consent';
+import { Footer } from '@/components/footer';
 import { Suspense } from 'react';
 
 const inter = Inter({
@@ -20,9 +23,12 @@ export default function Layout({ children }: { children: ReactNode }) {
           <Suspense fallback={null}>
             <PostHogPageView />
           </Suspense>
+          <AnalyticsTracker />
           <RootProvider search={{ options: { api: '/docs/api/search' } }}>
             {children}
           </RootProvider>
+          <Footer />
+          <CookieConsent />
         </PHProvider>
       </body>
     </html>
diff --git a/docs/src/components/analytics-tracker.tsx b/docs/src/components/analytics-tracker.tsx
new file mode 100644
index 00000000..61f3d5cd
--- /dev/null
+++ b/docs/src/components/analytics-tracker.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect } from 'react';
+import posthog from 'posthog-js';
+
+export function AnalyticsTracker() {
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const link = target.closest('a');
+
+      if (!link) return;
+
+      const href = link.href;
+      const text = link.textContent || link.getAttribute('aria-label') || '';
+
+      if (href.includes('github.com/trycua')) {
+        posthog.capture('github_link_clicked', {
+          url: href,
+          link_text: text,
+          page: window.location.pathname,
+        });
+      }
+
+      if (href.includes('discord.com/invite') || href.includes('discord.gg')) {
+        posthog.capture('discord_link_clicked', {
+          url: href,
+          link_text: text,
+          page: window.location.pathname,
+        });
+      }
+
+      if (
+        (href.includes('trycua.com') && !href.includes('trycua.com/docs')) ||
+        href.includes('cua.ai')
+      ) {
+        posthog.capture('main_website_clicked', {
+          url: href,
+          link_text: text,
+          page: window.location.pathname,
+        });
+      }
+
+      if (link.hostname && link.hostname !== window.location.hostname) {
+        if (
+          href.includes('github.com/trycua') ||
+          href.includes('discord.com') ||
+          href.includes('trycua.com') ||
+          href.includes('cua.ai')
+        ) {
+          return;
+        }
+
+        posthog.capture('external_link_clicked', {
+          url: href,
+          link_text: text,
+          page: window.location.pathname,
+          domain: link.hostname,
+        });
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, []);
+
+  return null;
+}
diff --git a/docs/src/components/cookie-consent.tsx b/docs/src/components/cookie-consent.tsx
new file mode 100644
index 00000000..7e37733c
--- /dev/null
+++ b/docs/src/components/cookie-consent.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import posthog from 'posthog-js';
+
+export function CookieConsent() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if user has already accepted cookies
+    const hasAccepted = localStorage.getItem('cookie-consent');
+    if (!hasAccepted) {
+      setIsVisible(true);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('cookie-consent', 'accepted');
+    setIsVisible(false);
+
+    // Track cookie acceptance
+    posthog.capture('cookie_consent_accepted', {
+      page: window.location.pathname,
+    });
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-fd-background border-t border-fd-border shadow-lg">
+      <div className="container mx-auto px-4 py-2 flex flex-col sm:flex-row items-center justify-between gap-3">
+        <p className="text-xs text-fd-muted-foreground">
+          This site uses cookies for website functionality, analytics, and personalized content.
+        </p>
+        <button
+          onClick={handleAccept}
+          className="px-4 py-1 text-xs bg-fd-primary text-fd-primary-foreground rounded hover:opacity-90 transition-opacity whitespace-nowrap"
+        >
+          Okay
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/components/footer.tsx b/docs/src/components/footer.tsx
new file mode 100644
index 00000000..2aafa33b
--- /dev/null
+++ b/docs/src/components/footer.tsx
@@ -0,0 +1,16 @@
+export function Footer() {
+  return (
+    <footer className="mt-auto border-t border-fd-border py-4">
+      <div className="container mx-auto px-4 flex justify-end">
+        <a
+          href="https://www.cua.ai/cookie-policy"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+        >
+          Cookie Policy
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/docs/src/mdx-components.tsx b/docs/src/mdx-components.tsx
index 3b27cf8c..4e73fd57 100644
--- a/docs/src/mdx-components.tsx
+++ b/docs/src/mdx-components.tsx
@@ -3,6 +3,12 @@ import * as TabsComponents from 'fumadocs-ui/components/tabs';
 import type { MDXComponents } from 'mdx/types';
 import { Mermaid } from './components/mermaid';
 import IOU from './components/iou';
+import {
+  EditableCodeBlock,
+  EditableValue,
+  EditableForm,
+  EditableInput,
+} from './components/editable-code-block';
 
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
@@ -10,6 +16,10 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     ...defaultMdxComponents,
     Mermaid,
     IOU,
+    EditableCodeBlock,
+    EditableValue,
+    EditableForm,
+    EditableInput,
     ...TabsComponents,
     ...components,
   };
diff --git a/docs/src/providers/posthog-provider.tsx b/docs/src/providers/posthog-provider.tsx
index aa298e5b..eb9b1d9c 100644
--- a/docs/src/providers/posthog-provider.tsx
+++ b/docs/src/providers/posthog-provider.tsx
@@ -30,7 +30,6 @@ export function PostHogPageView(): null {
         url = url + `?${searchParams.toString()}`;
       }
 
-      console.log('[PostHog] Capturing pageview:', url);
       posthog.capture('$pageview', {
         $current_url: url,
       });