add fathom

This commit is contained in:
m5r 2023-12-13 21:48:50 +01:00
parent 05be8e56a9
commit 4b226b440d
No known key found for this signature in database
GPG Key ID: 5BC847276DD5DDEA
4 changed files with 79 additions and 25 deletions

19
app/hooks/use-fathom.ts Normal file
View File

@ -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]);
}

View File

@ -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 (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
export const loader = () =>
json({
siteConfig: {
fathom: {
siteId: process.env.FATHOM_SITE_ID!,
domain: process.env.FATHOM_CUSTOM_DOMAIN!,
},
},
});
declare global {
interface Window {
siteConfig: SerializeFrom<typeof loader>["siteConfig"];
}
}
export default function App() {
const { siteConfig } = useLoaderData<typeof loader>();
useFathom();
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<script
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: `window.siteConfig=${JSON.stringify(siteConfig)};`,
}}
/>
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}

6
package-lock.json generated
View File

@ -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",

View File

@ -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"