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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
diff --git a/package-lock.json b/package-lock.json
index 6579b4d..f2741ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"@remix-run/node": "^2.3.1",
"@remix-run/react": "^2.3.1",
"@remix-run/serve": "^2.3.1",
+ "fathom-client": "^3.6.0",
"isbot": "^3.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0"
@@ -4976,6 +4977,11 @@
"reusify": "^1.0.4"
}
},
+ "node_modules/fathom-client": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/fathom-client/-/fathom-client-3.6.0.tgz",
+ "integrity": "sha512-/mrgmVvpw4HqDCcqUfPulERhONKgnJGL74RAxfqKDuRQ+7w9lKoTHMzqBWE7WNBvmsgZEthQWJFOWOEjv+T3gA=="
+ },
"node_modules/fault": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
diff --git a/package.json b/package.json
index 4d65431..240f72c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"@remix-run/node": "^2.3.1",
"@remix-run/react": "^2.3.1",
"@remix-run/serve": "^2.3.1",
+ "fathom-client": "^3.6.0",
"isbot": "^3.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0"