add fathom
This commit is contained in:
parent
05be8e56a9
commit
4b226b440d
19
app/hooks/use-fathom.ts
Normal file
19
app/hooks/use-fathom.ts
Normal 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]);
|
||||||
|
}
|
||||||
|
|
78
app/root.tsx
78
app/root.tsx
@ -1,33 +1,61 @@
|
|||||||
import { cssBundleHref } from "@remix-run/css-bundle";
|
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 {
|
import {
|
||||||
Links,
|
Links,
|
||||||
LiveReload,
|
LiveReload,
|
||||||
Meta,
|
Meta,
|
||||||
Outlet,
|
Outlet,
|
||||||
Scripts,
|
Scripts,
|
||||||
ScrollRestoration,
|
ScrollRestoration,
|
||||||
|
useLoaderData,
|
||||||
} from "@remix-run/react";
|
} from "@remix-run/react";
|
||||||
|
|
||||||
|
import useFathom from "./hooks/use-fathom";
|
||||||
|
|
||||||
export const links: LinksFunction = () => [
|
export const links: LinksFunction = () => [
|
||||||
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
|
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function App() {
|
export const loader = () =>
|
||||||
return (
|
json({
|
||||||
<html lang="en">
|
siteConfig: {
|
||||||
<head>
|
fathom: {
|
||||||
<meta charSet="utf-8" />
|
siteId: process.env.FATHOM_SITE_ID!,
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
domain: process.env.FATHOM_CUSTOM_DOMAIN!,
|
||||||
<Meta />
|
},
|
||||||
<Links />
|
},
|
||||||
</head>
|
});
|
||||||
<body>
|
|
||||||
<Outlet />
|
declare global {
|
||||||
<ScrollRestoration />
|
interface Window {
|
||||||
<Scripts />
|
siteConfig: SerializeFrom<typeof loader>["siteConfig"];
|
||||||
<LiveReload />
|
}
|
||||||
</body>
|
}
|
||||||
</html>
|
|
||||||
);
|
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
6
package-lock.json
generated
@ -10,6 +10,7 @@
|
|||||||
"@remix-run/node": "^2.3.1",
|
"@remix-run/node": "^2.3.1",
|
||||||
"@remix-run/react": "^2.3.1",
|
"@remix-run/react": "^2.3.1",
|
||||||
"@remix-run/serve": "^2.3.1",
|
"@remix-run/serve": "^2.3.1",
|
||||||
|
"fathom-client": "^3.6.0",
|
||||||
"isbot": "^3.6.8",
|
"isbot": "^3.6.8",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0"
|
||||||
@ -4976,6 +4977,11 @@
|
|||||||
"reusify": "^1.0.4"
|
"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": {
|
"node_modules/fault": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
"@remix-run/node": "^2.3.1",
|
"@remix-run/node": "^2.3.1",
|
||||||
"@remix-run/react": "^2.3.1",
|
"@remix-run/react": "^2.3.1",
|
||||||
"@remix-run/serve": "^2.3.1",
|
"@remix-run/serve": "^2.3.1",
|
||||||
|
"fathom-client": "^3.6.0",
|
||||||
"isbot": "^3.6.8",
|
"isbot": "^3.6.8",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0"
|
||||||
|
Reference in New Issue
Block a user