chore: use default fathom domain for script, use env variable to inli…

…ne site id Signed-off-by: Logan McAnsh <logan@mcan.sh>
mcansh · Oct 10, 2024 · 793f45c · 793f45c
1 parent 644b520
commit 793f45c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -108,6 +108,8 @@ function applySecurityHeaders(request: Request, responseHeaders: Headers) {
 
 	let url = new URL(request.url);
 
+	let fathomScriptDomain = "https://cdn.usefathom.com/script.js";
+
 	let nonce = createNonce();
 	let securityHeaders = createSecureHeaders({
 		"Content-Security-Policy": {
@@ -116,11 +118,11 @@ function applySecurityHeaders(request: Request, responseHeaders: Headers) {
 			"img-src": [
 				"'self'",
 				`https://res.cloudinary.com/${env.CLOUDINARY_CLOUD_NAME}/image/upload/`,
-				"https://thirtyseven-active.b-cdn.net",
+				fathomScriptDomain,
 			],
 			"script-src": [
 				"'self'",
-				"https://thirtyseven-active.b-cdn.net/script.js",
+				new URL("script.js", fathomScriptDomain).toString(),
 				new URL(
 					"cdn-cgi/scripts/*/cloudflare-static/email-decode.min.js",
 					url.origin,

diff --git a/app/env.server.ts b/app/env.server.ts
@@ -1,8 +1,9 @@
 import { z } from "zod";
 
 let envSchema = z.object({
-	CLOUDINARY_CLOUD_NAME: z.string(),
+	CLOUDINARY_CLOUD_NAME: z.string().min(1),
 	SENTRY_REPORT_URL: z.string().url(),
+	VITE_FATHOM_SITE_ID: z.string().min(1),
 });
 
 export let env = envSchema.parse(process.env);
diff --git a/app/root.tsx b/app/root.tsx
@@ -7,6 +7,7 @@ import {
 	Outlet,
 	Scripts,
 	ScrollRestoration,
+	useLocation,
 	useMatches,
 	useRouteError,
 } from "@remix-run/react";
@@ -50,17 +51,24 @@ export const links: LinksFunction = () => {
 	];
 };
 
-function useFathom() {
-	let initialized = React.useRef(false);
+function TrackPageView() {
+	let location = useLocation();
+
 	React.useEffect(() => {
-		if (initialized.current) return;
-		initialized.current = true;
-		Fathom.load("EPVCGNZL", {
+		Fathom.load(import.meta.env.VITE_FATHOM_SITE_ID, {
 			excludedDomains: ["localhost"],
-			url: "https://thirtyseven-active.b-cdn.net/script.js",
-			spa: "auto",
+			auto: false,
 		});
 	}, []);
+
+	React.useEffect(() => {
+		Fathom.trackPageview({
+			url: location.pathname + location.search,
+			referrer: document.referrer,
+		});
+	}, [location.pathname, location.search]);
+
+	return null;
 }
 
 function useHandleBodyClassName() {
@@ -78,7 +86,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
 	let error = useRouteError();
 	let handleBodyClassName = useHandleBodyClassName();
 	let nonce = useNonce();
-	useFathom();
 
 	return (
 		<html lang="en" className="h-dvh">
@@ -95,6 +102,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 					handleBodyClassName,
 				)}
 			>
+				<TrackPageView />
 				{children}
 				<ScrollRestoration nonce={nonce} />
 				<Scripts nonce={nonce} />