From 2e631ec025c6335f575ab604796cbb1866702b3b Mon Sep 17 00:00:00 2001 From: Arian Ahmadinejad Date: Fri, 21 Jun 2024 01:47:04 -0400 Subject: [PATCH] feat: add analytics --- next.config.mjs | 13 +++ package.json | 1 + pnpm-lock.yaml | 21 +++++ src/env.mjs | 8 +- src/pages/_app.tsx | 210 ++++++++++++++++++++++++--------------------- 5 files changed, 151 insertions(+), 102 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 6be179f..fbcdc8e 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -31,5 +31,18 @@ const config = { }, ], }, + async rewrites() { + return [ + { + source: "/ingest/static/:path*", + destination: "https://us-assets.i.posthog.com/static/:path*", + }, + { + source: "/ingest/:path*", + destination: "https://us.i.posthog.com/:path*", + }, + ]; + }, + skipTrailingSlashRedirect: true, }; export default config; diff --git a/package.json b/package.json index 644a64d..33d74cb 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "next": "^14.1.1", "next-sanity": "^7.0.10", "next-themes": "^0.2.1", + "posthog-js": "^1.139.6", "react": "18.2.0", "react-dom": "18.2.0", "react-markdown": "^9.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b3c06c3..bddbc3d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ importers: next-themes: specifier: ^0.2.1 version: 0.2.1(next@14.1.1(@babel/core@7.23.7)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + posthog-js: + specifier: ^1.139.6 + version: 1.139.6 react: specifier: 18.2.0 version: 18.2.0 @@ -2034,6 +2037,9 @@ packages: fastq@1.16.0: resolution: {integrity: sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==} + fflate@0.4.8: + resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==} + file-entry-cache@6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -3287,6 +3293,12 @@ packages: resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==} engines: {node: ^10 || ^12 || >=14} + posthog-js@1.139.6: + resolution: {integrity: sha512-JpJwufLW6RhJ7yup0qZ6Lx9Fl0GpwhKUO30wzINywksTgucOujqneepgaSjuCoYPb6Sb0ULImUebIYlotSAzBA==} + + preact@10.22.0: + resolution: {integrity: sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw==} + prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} @@ -6481,6 +6493,8 @@ snapshots: dependencies: reusify: 1.0.4 + fflate@0.4.8: {} + file-entry-cache@6.0.1: dependencies: flat-cache: 3.2.0 @@ -8001,6 +8015,13 @@ snapshots: picocolors: 1.0.0 source-map-js: 1.0.2 + posthog-js@1.139.6: + dependencies: + fflate: 0.4.8 + preact: 10.22.0 + + preact@10.22.0: {} + prelude-ls@1.2.1: {} prettier-plugin-tailwindcss@0.5.11(prettier@3.2.2): diff --git a/src/env.mjs b/src/env.mjs index 449fcc5..ac6b8d1 100644 --- a/src/env.mjs +++ b/src/env.mjs @@ -16,6 +16,8 @@ const client = z.object({ // NEXT_PUBLIC_CLIENTVAR: z.string().min(1), NEXT_PUBLIC_LASTFM_USERNAME: z.string(), NEXT_PUBLIC_LASTFM_TOKEN: z.string(), + NEXT_PUBLIC_POSTHOG_KEY: z.string(), + NEXT_PUBLIC_POSTHOG_HOST: z.string(), }); /** @@ -29,6 +31,8 @@ const processEnv = { // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR, NEXT_PUBLIC_LASTFM_USERNAME: process.env.NEXT_PUBLIC_LASTFM_USERNAME, NEXT_PUBLIC_LASTFM_TOKEN: process.env.NEXT_PUBLIC_LASTFM_TOKEN, + NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY, + NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST, }; // Don't touch the part below @@ -54,7 +58,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) { if (parsed.success === false) { console.error( "❌ Invalid environment variables:", - parsed.error.flatten().fieldErrors + parsed.error.flatten().fieldErrors, ); throw new Error("Invalid environment variables"); } @@ -68,7 +72,7 @@ if (!!process.env.SKIP_ENV_VALIDATION == false) { throw new Error( process.env.NODE_ENV === "production" ? "❌ Attempted to access a server-side environment variable on the client" - : `❌ Attempted to access server-side environment variable '${prop}' on the client` + : `❌ Attempted to access server-side environment variable '${prop}' on the client`, ); return target[/** @type {keyof typeof target} */ (prop)]; }, diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6b3775d..657dbdc 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -12,13 +12,26 @@ import "~/styles/globals.css"; import { NextPage } from "next"; import { AppProps } from "next/app"; import "easymde/dist/easymde.min.css"; -// import "../styles/github-dark.css"; -// import "../styles/isbl-editor-dark.css"; import "../styles/catppuccin-frape.css"; import "../styles/callout-style.css"; -const outfit = Outfit({ subsets: ["latin"] }); +import posthog from "posthog-js"; +import { PostHogProvider } from "posthog-js/react"; +import { env } from "~/env.mjs"; + +if (typeof window !== "undefined") { + // checks that we are client-side + posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, { + api_host: "/ingest", + ui_host: env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com", + person_profiles: "always", // or 'always' to create profiles for anonymous users as well + loaded: (posthog) => { + if (process.env.NODE_ENV === "development") posthog.debug(); // debug mode in development + }, + }); +} +const outfit = Outfit({ subsets: ["latin"] }); const open = Open_Sans({ weight: ["400", "500", "700"], subsets: ["latin"] }); export type NextPageWithLayout

= NextPage & { @@ -36,106 +49,103 @@ const MyApp: AppType = ({ Component, pageProps }: AppPropsWithLayout) => { return ( - - {/* */} - + + + - {/* */} - - - - - + {/* */} + + + + + - {/* */} - - - - - - - - {/* */} - - - - - - - - - - + {/* */} + + + + + + + + {/* */} + + + + + + + + + + - - - Arian Ahmadinejad - - - {getLayout()} - - + + + Arian Ahmadinejad + + + {getLayout()} + + + );