docs: enable posthog analytics (#519)

tuono-labs · Feb 6, 2025 · 22c1dd0 · 22c1dd0
1 parent 74e34db
commit 22c1dd0
Show file tree

Hide file tree

Showing 11 changed files with 236 additions and 108 deletions.
diff --git a/apps/documentation/.env.local b/apps/documentation/.env.local
@@ -0,0 +1,4 @@
+VITE_PUBLIC_POSTHOG_KEY=phc_wqyze0qQlWutAwL5RL1Bv83D8bdySCkhcFw9MkTVuI8
+VITE_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
+VITE_ENV=development
+VITE_ENABLE_POSTHOG=false
diff --git a/apps/documentation/.env.production b/apps/documentation/.env.production
@@ -0,0 +1,4 @@
+VITE_PUBLIC_POSTHOG_KEY=phc_wqyze0qQlWutAwL5RL1Bv83D8bdySCkhcFw9MkTVuI8
+VITE_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
+VITE_ENV=production
+VITE_ENABLE_POSTHOG=true
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
@@ -17,6 +17,7 @@
     "@mdx-js/react": "3.1.0",
     "@tabler/icons-react": "3.28.1",
     "clsx": "2.1.1",
+    "posthog-js": "^1.215.5",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "remark-gfm": "4.0.0",

diff --git a/apps/documentation/src/components/App/App.tsx b/apps/documentation/src/components/App/App.tsx
@@ -0,0 +1,118 @@
+import type { ReactNode, JSX } from 'react'
+
+import { createTheme, MantineProvider, AppShell } from '@mantine/core'
+
+import type { CSSVariablesResolver } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+
+import PageWithTOC from '@/components/PageWithTOC'
+import Navbar from '@/components/Navbar'
+import Sidebar from '@/components/Sidebar'
+import MdxProvider from '@/components/MdxProvider'
+
+import '@mantine/core/styles.css'
+import '@mantine/code-highlight/styles.css'
+import Footer from '@/components/Footer'
+
+interface RootRouteProps {
+  children: ReactNode
+}
+
+const theme = createTheme({
+  primaryColor: 'violet',
+  primaryShade: { light: 6, dark: 9 },
+  fontFamily: 'Inter',
+  fontFamilyMonospace: 'Menlo',
+  respectReducedMotion: true,
+  radius: {
+    xs: '4px',
+    sm: '4px',
+    lg: '8px',
+    xl: '8px',
+    md: '8px',
+  },
+  fontSizes: {
+    // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    xs: '14px',
+    sm: '14px',
+  },
+  colors: {
+    dark: [
+      '#d5d7e0',
+      '#acaebf',
+      '#8c8fa3',
+      '#666980',
+      '#4d4f66',
+      '#34354a',
+      '#2b2c3d',
+      '#1d1e30',
+      '#0c0d21',
+      '#01010a',
+    ],
+  },
+  headings: {
+    sizes: {
+      h1: {
+        fontSize: '48px',
+      },
+    },
+  },
+  other: {
+    sidebarGrayLight: '#495057',
+    sidebarGrayDark: '#adb5bd',
+    sidebarTextHoverLight: '#212529',
+    sidebarTextHoverDark: '#f8f9fa',
+  },
+})
+
+const resolver: CSSVariablesResolver = (th) => {
+  const {
+    sidebarGrayLight,
+    sidebarTextHoverLight,
+    sidebarGrayDark,
+    sidebarTextHoverDark,
+  } = th.other as Record<string, string>
+
+  return {
+    variables: {},
+    light: {
+      '--mantine-color-footer-bg': th.colors.gray[1],
+      '--mantine-color-sidebar-gray': sidebarGrayLight,
+      '--mantine-color-sidebar-text-hover': sidebarTextHoverLight,
+      '--mantine-color-quote-border': th.colors.violet[1],
+    },
+    dark: {
+      '--mantine-color-footer-bg': th.colors.dark[6],
+      '--mantine-color-sidebar-gray': sidebarGrayDark,
+      '--mantine-color-sidebar-text-hover': sidebarTextHoverDark,
+      '--mantine-color-quote-border': th.colors.violet[9],
+    },
+  }
+}
+
+export default function App({ children }: RootRouteProps): JSX.Element {
+  const [opened, { toggle }] = useDisclosure()
+
+  return (
+    <MantineProvider theme={theme} cssVariablesResolver={resolver}>
+      <AppShell
+        layout="alt"
+        header={{ height: 60 }}
+        navbar={{
+          width: 300,
+          breakpoint: 'sm',
+          collapsed: { mobile: !opened },
+        }}
+      >
+        <Navbar toggle={toggle} />
+        <Sidebar close={toggle} />
+        <AppShell.Main pt={0} px="auto">
+          <MdxProvider>
+            <PageWithTOC>{children}</PageWithTOC>
+          </MdxProvider>
+        </AppShell.Main>
+        <Footer />
+      </AppShell>
+    </MantineProvider>
+  )
+}
diff --git a/apps/documentation/src/components/App/index.ts b/apps/documentation/src/components/App/index.ts
@@ -0,0 +1,3 @@
+import App from './App'
+
+export default App
diff --git a/apps/documentation/src/components/PostHog/PostHogPageView.tsx b/apps/documentation/src/components/PostHog/PostHogPageView.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { usePostHog } from 'posthog-js/react'
+import { useRouter } from 'tuono'
+
+export default function PostHogPageView(): null {
+  const { pathname } = useRouter()
+  const posthog = usePostHog()
+
+  // Track pageviews
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (pathname && posthog) {
+      const url = window.origin + pathname
+
+      posthog.capture('$pageview', { $current_url: url })
+    }
+  }, [pathname, posthog])
+
+  return null
+}
diff --git a/apps/documentation/src/components/PostHog/PostHogProvider.tsx b/apps/documentation/src/components/PostHog/PostHogProvider.tsx
@@ -0,0 +1,31 @@
+import type { JSX, ReactNode } from 'react'
+import { useEffect } from 'react'
+import { PostHogProvider as PostHogLibraryProvider } from 'posthog-js/react'
+import posthogJs from 'posthog-js'
+
+interface PostHogProviderProps {
+  children: ReactNode
+}
+
+export default function PostHogProvider({
+  children,
+}: PostHogProviderProps): JSX.Element {
+  useEffect(() => {
+    if (import.meta.env.VITE_ENABLE_POSTHOG === 'true') {
+      posthogJs.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
+        api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+        persistence: 'memory', // Cookieless tracking
+        disable_persistence: true, // Disable persistence
+        loaded: (ph) => {
+          if (import.meta.env.VITE_ENV === 'development') ph.debug()
+        },
+      })
+    }
+  }, [])
+
+  return (
+    <PostHogLibraryProvider client={posthogJs}>
+      {children}
+    </PostHogLibraryProvider>
+  )
+}
diff --git a/apps/documentation/src/components/PostHog/index.ts b/apps/documentation/src/components/PostHog/index.ts
@@ -0,0 +1,4 @@
+import PostHogProvider from './PostHogProvider'
+import PostHogPageView from './PostHogPageView'
+
+export { PostHogProvider, PostHogPageView }
diff --git a/apps/documentation/src/env.d.ts b/apps/documentation/src/env.d.ts
@@ -0,0 +1,10 @@
+interface ImportMetaEnv {
+  readonly VITE_PUBLIC_POSTHOG_KEY: string
+  readonly VITE_PUBLIC_POSTHOG_HOST: string
+  readonly VITE_ENV: 'production' | 'development'
+  readonly VITE_ENABLE_POSTHOG: 'true' | 'false'
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/apps/documentation/src/routes/__layout.tsx b/apps/documentation/src/routes/__layout.tsx
@@ -1,104 +1,20 @@
 import type { ReactNode, JSX } from 'react'
 import { TuonoScripts } from 'tuono'
 
-import {
-  ColorSchemeScript,
-  createTheme,
-  MantineProvider,
-  AppShell,
-  mantineHtmlProps,
-  type CSSVariablesResolver,
-} from '@mantine/core'
-import { useDisclosure } from '@mantine/hooks'
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core'
 
-import PageWithTOC from '@/components/PageWithTOC'
-import Navbar from '@/components/Navbar'
-import Sidebar from '@/components/Sidebar'
-import MdxProvider from '@/components/MdxProvider'
+import { PostHogProvider, PostHogPageView } from '@/components/PostHog'
 
 import '@mantine/core/styles.css'
 import '@mantine/code-highlight/styles.css'
-import Footer from '@/components/Footer'
+
+import App from '@/components/App'
 
 interface RootRouteProps {
   children: ReactNode
 }
 
-const theme = createTheme({
-  primaryColor: 'violet',
-  primaryShade: { light: 6, dark: 9 },
-  fontFamily: 'Inter',
-  fontFamilyMonospace: 'Menlo',
-  respectReducedMotion: true,
-  radius: {
-    xs: '4px',
-    sm: '4px',
-    lg: '8px',
-    xl: '8px',
-    md: '8px',
-  },
-  fontSizes: {
-    // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-    xs: '14px',
-    sm: '14px',
-  },
-  colors: {
-    dark: [
-      '#d5d7e0',
-      '#acaebf',
-      '#8c8fa3',
-      '#666980',
-      '#4d4f66',
-      '#34354a',
-      '#2b2c3d',
-      '#1d1e30',
-      '#0c0d21',
-      '#01010a',
-    ],
-  },
-  headings: {
-    sizes: {
-      h1: {
-        fontSize: '48px',
-      },
-    },
-  },
-  other: {
-    sidebarGrayLight: '#495057',
-    sidebarGrayDark: '#adb5bd',
-    sidebarTextHoverLight: '#212529',
-    sidebarTextHoverDark: '#f8f9fa',
-  },
-})
-
-const resolver: CSSVariablesResolver = (th) => {
-  const {
-    sidebarGrayLight,
-    sidebarTextHoverLight,
-    sidebarGrayDark,
-    sidebarTextHoverDark,
-  } = th.other as Record<string, string>
-
-  return {
-    variables: {},
-    light: {
-      '--mantine-color-footer-bg': th.colors.gray[1],
-      '--mantine-color-sidebar-gray': sidebarGrayLight,
-      '--mantine-color-sidebar-text-hover': sidebarTextHoverLight,
-      '--mantine-color-quote-border': th.colors.violet[1],
-    },
-    dark: {
-      '--mantine-color-footer-bg': th.colors.dark[6],
-      '--mantine-color-sidebar-gray': sidebarGrayDark,
-      '--mantine-color-sidebar-text-hover': sidebarTextHoverDark,
-      '--mantine-color-quote-border': th.colors.violet[9],
-    },
-  }
-}
-
 export default function RootRoute({ children }: RootRouteProps): JSX.Element {
-  const [opened, { toggle }] = useDisclosure()
-
   return (
     <html lang="en" {...mantineHtmlProps}>
       <head>
@@ -125,26 +41,10 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element {
         <ColorSchemeScript />
       </head>
       <body>
-        <MantineProvider theme={theme} cssVariablesResolver={resolver}>
-          <AppShell
-            layout="alt"
-            header={{ height: 60 }}
-            navbar={{
-              width: 300,
-              breakpoint: 'sm',
-              collapsed: { mobile: !opened },
-            }}
-          >
-            <Navbar toggle={toggle} />
-            <Sidebar close={toggle} />
-            <AppShell.Main pt={0} px="auto">
-              <MdxProvider>
-                <PageWithTOC>{children}</PageWithTOC>
-              </MdxProvider>
-            </AppShell.Main>
-            <Footer />
-          </AppShell>
-        </MantineProvider>
+        <PostHogProvider>
+          <PostHogPageView />
+          <App>{children}</App>
+        </PostHogProvider>
         <TuonoScripts />
       </body>
     </html>