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 { 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
View File

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

View File

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