diff --git a/app/hooks/use-fathom.ts b/app/hooks/use-fathom.ts new file mode 100644 index 0000000..a2cba79 --- /dev/null +++ b/app/hooks/use-fathom.ts @@ -0,0 +1,19 @@ +import { useEffect } from "react"; +import { useLocation } from "@remix-run/react"; +import * as Fathom from "fathom-client"; + +export default function useFathom() { + const location = useLocation(); + + useEffect(() => { + Fathom.load(window.siteConfig.fathom.siteId, { + spa: "history", + includedDomains: ["local-ip.sh"], + }); + }, []); + + useEffect(() => { + Fathom.trackPageview(); + }, [location]); +} + diff --git a/app/root.tsx b/app/root.tsx index a5259f9..6fcb8a0 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,33 +1,61 @@ import { cssBundleHref } from "@remix-run/css-bundle"; -import type { LinksFunction } from "@remix-run/node"; +import { json, type SerializeFrom, type LinksFunction } from "@remix-run/node"; import { - Links, - LiveReload, - Meta, - Outlet, - Scripts, - ScrollRestoration, + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, + useLoaderData, } from "@remix-run/react"; +import useFathom from "./hooks/use-fathom"; + export const links: LinksFunction = () => [ - ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), ]; -export default function App() { - return ( - - - - - - - - - - - - - - - ); +export const loader = () => + json({ + siteConfig: { + fathom: { + siteId: process.env.FATHOM_SITE_ID!, + domain: process.env.FATHOM_CUSTOM_DOMAIN!, + }, + }, + }); + +declare global { + interface Window { + siteConfig: SerializeFrom["siteConfig"]; + } +} + +export default function App() { + const { siteConfig } = useLoaderData(); + useFathom(); + + return ( + + + + + + + + + +