feat(docs): add fathom (#30)

apps/docs/package.json

@@ -17,6 +17,7 @@
     "@iconicicons/react": "^1.5.1",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "clsx": "^2.0.0",
+    "fathom-client": "^3.6.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",

apps/docs/src/app/layout.tsx

@@ -9,6 +9,7 @@ import { Sidebar } from "@/components/Sidebar";
 
 import "@/styles/globals.css";
 
+import Fathom from "@/components/Fathom";
 import Header from "@/components/Header";
 
 export const metadata: Metadata = {
@@ -27,6 +28,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           monoFont.variable
         )}
       >
+        <Fathom />
+
         <div className="min-h-screen-dvh flex flex-col">
           <Providers>
             <Header />

apps/docs/src/components/Fathom.tsx

@@ -0,0 +1,32 @@
+// Fathom.tsx
+"use client";
+
+import { Suspense, useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { load, trackPageview } from "fathom-client";
+
+function TrackPageView() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    load("VDTVBMMX", {
+      includedDomains: ["lemonsqueezy.com"],
+    });
+  }, []);
+
+  useEffect(() => {
+    trackPageview();
+
+    // Record a pageview when route changes
+  }, [pathname, searchParams]);
+
+  return null;
+}
+
+export default function Fathom() {
+  return (
+    <Suspense fallback={null}>
+      <TrackPageView />
+    </Suspense>
+  );
+}