Add Posthog configuration in non-pages directory

package.json

@@ -32,6 +32,7 @@
     "graphql-ws": "^5.14.2",
     "markdown-to-jsx": "^7.3.2",
     "postcss": "^8.4.31",
+    "posthog-js": "^1.133.0",
     "prism-react-renderer": "^2.3.1",
     "punycode": "^2.3.1",
     "react": "^18.0.0",

src/theme/Navbar/Posthog/index.ts

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import posthog from 'posthog-js';
+
+// 🦔 config
+posthog.init('phc_MZpdcQLGf57lyfOUT0XA93R3jaCxGsqftVt4iI4MyUY', {
+  api_host: 'https://analytics-posthog.hasura-app.io',
+});
+
+async function fetchUser() {
+  const url = 'https://data.pro.hasura.io/v1/graphql';
+
+  const headers = {
+    Accept: '*/*',
+    'Accept-Language': 'en-US,en;q=0.9,es-US;q=0.8,es;q=0.7',
+    'Content-Type': 'application/json',
+    'Hasura-Client-Name': 'hasura-docs',
+    Origin: 'https://hasura.io/docs/3.0',
+    Referer: 'https://hasura.io/docs/3.0',
+    'Sec-Fetch-Mode': 'cors',
+    'Sec-Fetch-Site': 'same-site',
+  };
+
+  const body = {
+    query: `
+    query fetchCurrentUser {
+      users {
+        id
+        email
+      }
+    }
+    `,
+  };
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error('Error fetching user:', error);
+    return null;
+  }
+}
+
+export default function UserFetcher() {
+  const [docsUser, setDocsUser] = useState(null);
+
+  useEffect(() => {
+    async function getUser() {
+      const user = await fetchUser();
+      if (user) {
+        setDocsUser(user);
+        posthog.identify(user.data.users[0]?.id, { email: user.data.users[0]?.email });
+      }
+    }
+
+    getUser();
+  }, []);
+
+  return null;
+}

src/theme/Navbar/index.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import NavbarLayout from '@theme/Navbar/Layout';
 import NavbarContent from '@theme/Navbar/Content';
+import UserFetcher from './Posthog/index';
 export default function Navbar() {
   return (
     <NavbarLayout>
+      <UserFetcher />
       <NavbarContent />
     </NavbarLayout>
   );

yarn.lock

@@ -6329,6 +6329,7 @@ __metadata:
     graphql-ws: "npm:^5.14.2"
     markdown-to-jsx: "npm:^7.3.2"
     postcss: "npm:^8.4.31"
+    posthog-js: "npm:^1.133.0"
     prism-react-renderer: "npm:^2.3.1"
     punycode: "npm:^2.3.1"
     react: "npm:^18.0.0"
@@ -6967,6 +6968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.4.8":
+  version: 0.4.8
+  resolution: "fflate@npm:0.4.8"
+  checksum: c0c75029bcbefd0b47cede4ad2a3698f571e38d3d93dfbb96d744c655ec3bf5e31111044c2c01fa3965109874f5be8b5a6b3686b958392693689665cbabf3ece
+  languageName: node
+  linkType: hard
+
 "file-loader@npm:^6.2.0":
   version: 6.2.0
   resolution: "file-loader@npm:6.2.0"
@@ -11411,6 +11419,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"posthog-js@npm:^1.133.0":
+  version: 1.133.0
+  resolution: "posthog-js@npm:1.133.0"
+  dependencies:
+    fflate: "npm:^0.4.8"
+    preact: "npm:^10.19.3"
+  checksum: 668651237240bc1628ed83ed3e61c2b100641b497fd26f99aaf4b8fc214a0f61d1a0965c1069fa8dc9b6f186905c898a5adeff4497d9e7cdecbcb1abf32af1ff
+  languageName: node
+  linkType: hard
+
+"preact@npm:^10.19.3":
+  version: 10.22.0
+  resolution: "preact@npm:10.22.0"
+  checksum: 0f3092916a538fa47d205d603bb5c513f9368a59bcbf881b457641ea6b88470b6a07960da8727db1287c232cb0f3a6292963917fa5cf09864be5eb50bf2a294e
+  languageName: node
+  linkType: hard
+
 "pretty-error@npm:^4.0.0":
   version: 4.0.0
   resolution: "pretty-error@npm:4.0.0"