diff --git a/.env.sample b/.env.sample new file mode 100644 index 00000000..7884cbf4 --- /dev/null +++ b/.env.sample @@ -0,0 +1,4 @@ +SITE_BASE_URL="http://localhost:3000" +SITE_GA_ID="UA-000000000-0" +NOTION_ACCESS_TOKEN="" +NOTION_PHRASES_DATABASE_ID="" \ No newline at end of file diff --git a/app/root.tsx b/app/root.tsx index 7fabf533..74d89be2 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,5 +1,15 @@ import type { MetaFunction } from '@remix-run/node'; -import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useTransition } from '@remix-run/react'; +import { json } from '@remix-run/node'; +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, + useLoaderData, + useTransition, +} from '@remix-run/react'; import styles from '~/styles/main.css'; import { Loading } from './components/Loading'; import { shuffleArray } from './utils'; @@ -47,7 +57,17 @@ export function links() { ]; } +type LoaderData = { + gaId: string; +}; + +export async function loader() { + const googleAnalyticsId = process.env.SITE_GA_ID || ''; + return json({ googleAnalyticsId }); +} + export default function App() { + const { googleAnalyticsId } = useLoaderData(); const [bgClass, setBgClass] = React.useState('--bg1'); const [loading, setLoading] = React.useState(false); const transition = useTransition(); @@ -66,6 +86,21 @@ export default function App() { + {process.env.NODE_ENV === 'production' && googleAnalyticsId && ( + <> +