chore: isolate fathom-script into client component + fix reliability of the pathname

SutuSebastian · SutuSebastian · commit 34d9bff104ba · 2024-04-23T15:11:37.000+03:00
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,8 +1,8 @@
 import { ThemeModeScript } from "flowbite-react";
 import { Inter as InterFont } from "next/font/google";
-import { headers } from "next/headers";
-import type { Metadata, NextPage, Viewport } from "next/types";
-import type { FC, PropsWithChildren } from "react";
+import type { Metadata, Viewport } from "next/types";
+import type { PropsWithChildren } from "react";
+import { FathomScript } from "~/components/fathom-script";
 
 import "~/styles/globals.css";
 
@@ -54,25 +54,16 @@ export const viewport: Viewport = {
   ],
 };
 
-const RootLayout: NextPage<PropsWithChildren> = ({ children }) => {
-  const pathname = headers().get("next-url");
-  const isExamplesPage = pathname?.startsWith("/examples/");
-
+export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" className={`${interFont.variable} font-sans`}>
       <head>
         <ThemeModeScript />
       </head>
       <body className="bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
         {children}
-        {!isExamplesPage && <FathomScript />}
+        <FathomScript />
       </body>
     </html>
   );
-};
-
-const FathomScript: FC = () => {
-  return <script data-site="UXMSXUQI" defer src="https://cdn.usefathom.com/script.js" />;
-};
-
-export default RootLayout;
+}
diff --git a/apps/web/components/fathom-script.tsx b/apps/web/components/fathom-script.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+export function FathomScript() {
+  const pathname = usePathname();
+  const isExamplesPage = pathname.startsWith("/examples/");
+
+  if (isExamplesPage) return null;
+
+  return <script data-site="UXMSXUQI" defer src="https://cdn.usefathom.com/script.js" />;
+}
