docs: enhance analytics integration

Author: karol-broda

docs/instrumentation-client.ts

@@ -2,8 +2,12 @@ import posthog from "posthog-js";
 
 if (typeof window !== "undefined") {
   const apiKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  const CONSENT_KEY = "funnel-analytics-consent";
 
   if (apiKey) {
+    const consent = localStorage.getItem(CONSENT_KEY);
+    const hasAccepted = consent === "accepted";
+
     posthog.init(apiKey, {
       api_host: "/ingest",
       ui_host: "https://eu.posthog.com",
@@ -18,6 +22,11 @@ if (typeof window !== "undefined") {
         css_selector_allowlist: ["[data-track]", "button", "a[href]"],
         dom_event_allowlist: ["click", "submit"],
       },
+      opt_out_capturing_by_default: true,
     });
+
+    if (hasAccepted) {
+      posthog.opt_in_capturing();
+    }
   }
 }

docs/src/app/(home)/layout.tsx

@@ -1,7 +1,13 @@
-import type { ReactNode } from 'react';
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { baseOptions } from '@/app/layout.config';
+import type { ReactNode } from "react";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/app/layout.config";
+import { Footer } from "@/components/layout/footer";
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+  return (
+    <>
+      <HomeLayout {...baseOptions}>{children}</HomeLayout>
+      <Footer />
+    </>
+  );
 }

docs/src/app/(legal)/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { Footer } from "@/components/layout/footer";
+
+export default function LegalLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <Footer />
+    </>
+  );
+}

docs/src/app/docs/layout.tsx

@@ -2,6 +2,7 @@ import { DocsLayout, type DocsLayoutProps } from "fumadocs-ui/layouts/docs";
 import type { ReactNode } from "react";
 import { baseOptions } from "@/app/layout.config";
 import { source } from "@/lib/source";
+import { Footer } from "@/components/layout/footer";
 
 const layoutOptions: DocsLayoutProps = {
   ...baseOptions,
@@ -23,5 +24,10 @@ const layoutOptions: DocsLayoutProps = {
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return <DocsLayout {...layoutOptions}>{children}</DocsLayout>;
+  return (
+    <>
+      <DocsLayout {...layoutOptions}>{children}</DocsLayout>
+      <Footer />
+    </>
+  );
 }

docs/src/app/layout.config.tsx

@@ -10,9 +10,5 @@ export const baseOptions: BaseLayoutProps = {
       text: "documentation",
       url: "/docs",
     },
-    {
-      text: "privacy",
-      url: "/privacy",
-    },
   ],
 };

docs/src/components/layout/footer.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export function Footer() {
+  return (
+    <footer className="border-t bg-card/50 py-12">
+      <div className="container flex flex-col items-center justify-center gap-4 text-center">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <Link
+              href="/privacy"
+              className="hover:text-foreground transition-colors"
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="/terms"
+              className="hover:text-foreground transition-colors"
+            >
+              Terms of Service
+            </Link>
+          </div>
+          <span className="hidden sm:inline">•</span>
+          <span>Built with ❤️ for developers</span>
+        </div>
+        <div className="text-xs text-muted-foreground">
+          © 2025 funnel. Open source tunneling solution.
+        </div>
+      </div>
+    </footer>
+  );
+}

docs/src/components/legal/cookie-banner.tsx

@@ -11,18 +11,25 @@ export function CookieBanner() {
 
   useEffect(() => {
     const hasConsent = localStorage.getItem(CONSENT_KEY);
-    if (!hasConsent) {
+
+    if (hasConsent !== "accepted") {
       setIsVisible(true);
     }
   }, []);
 
   const handleAccept = () => {
     localStorage.setItem(CONSENT_KEY, "accepted");
     setIsVisible(false);
+
+    if (
+      typeof window !== "undefined" &&
+      (window as unknown as { posthog?: any }).posthog
+    ) {
+      (window as unknown as { posthog?: any }).posthog.opt_in_capturing();
+    }
   };
 
   const handleDecline = () => {
-    localStorage.setItem(CONSENT_KEY, "declined");
     setIsVisible(false);
 
     if (
@@ -49,7 +56,7 @@ export function CookieBanner() {
               <Link href="/privacy" className="underline hover:no-underline">
                 privacy policy
               </Link>{" "}
-              for details.
+              for details. If you decline, we won't store anything at all.
             </p>
           </div>
 

docs/src/components/legal/privacy-aware-analytics.tsx

@@ -15,7 +15,7 @@ export function PrivacyAwareAnalytics() {
       if (posthog) {
         if (consentGiven) {
           posthog.opt_in_capturing();
-        } else if (consent === "declined") {
+        } else {
           posthog.opt_out_capturing();
         }
       }