Add posthog

dohooo · Oct 14, 2024 · 73ef698 · 73ef698
1 parent a3a98fb
commit 73ef698
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 66 deletions.
diff --git a/example/website/package.json b/example/website/package.json
@@ -17,11 +17,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "@vercel/analytics": "^1.1.1",
     "next": "^13.0.6",
     "next-sitemap": "^4.2.3",
     "nextra": "2.13.2",
     "nextra-theme-docs": "2.13.2",
+    "posthog-js": "^1.167.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "snack-sdk": "^4.2.0"

diff --git a/example/website/pages/Examples/summary.mdx b/example/website/pages/Examples/summary.mdx
@@ -23,33 +23,32 @@ image:
 slug: /examples/summary
 ---
 
-{/* 
+{/\*
 
-=========================================================================
-=========================================================================
-This page generated by /scripts/gen-pages.mjs, Don't update it manually 
-=========================================================================
-=========================================================================
+# =========================================================================
 
-*/}
+# This page generated by /scripts/gen-pages.mjs, Don't update it manually
 
-import { Cards } from 'nextra/components'
-import Link from 'next/link'
+=========================================================================
+
+\*/}
 
+import { Cards } from "nextra/components";
+import Link from "next/link";
+import posthog from "posthog-js";
 
 ### Basic Layouts
 
 <Cards num={2}>
 
-        <Link href="/Examples/basic-layouts/stack">
+        <Link href="/Examples/basic-layouts/stack" onClick={() => posthog.capture('example-clicked', { name: 'stack',kind: 'basic-layouts' })}>
           <div className='summary-item'>
             <div className='image-container'>![basic-layouts-stack](../../../app/app/demos/basic-layouts/stack/preview.png)</div>
             <div className='label-container'>
               Stack
             </div>
           </div>
         </Link>
-
 
         <Link href="/Examples/basic-layouts/parallax">
           <div className='summary-item'>
@@ -59,7 +58,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/basic-layouts/normal">
           <div className='summary-item'>
@@ -69,7 +68,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/basic-layouts/left-align">
           <div className='summary-item'>
@@ -79,24 +78,21 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 </Cards>
 
 ### Utils
 
 <Cards num={2}>
-
-        <Link href="/Examples/utils/pagination">
-          <div className='summary-item'>
-            <div className='image-container'>![utils-pagination](../../../app/app/demos/utils/pagination/preview.png)</div>
-            <div className='label-container'>
-              Pagination
-            </div>
-          </div>
-        </Link>
-
+  <Link href="/Examples/utils/pagination">
+    <div className="summary-item">
+      <div className="image-container">
+        ![utils-pagination](../../../app/app/demos/utils/pagination/preview.png)
+      </div>
+      <div className="label-container">Pagination</div>
+    </div>
+  </Link>
 </Cards>
-
 ### Custom Animations
 
 <Cards num={2}>
@@ -109,7 +105,6 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-
 
         <Link href="/Examples/custom-animations/scale-fade-in-out">
           <div className='summary-item'>
@@ -119,7 +114,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/rotate-in-out">
           <div className='summary-item'>
@@ -129,7 +124,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/rotate-fade-in-out">
           <div className='summary-item'>
@@ -139,7 +134,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/quick-swipe">
           <div className='summary-item'>
@@ -149,7 +144,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/press-swipe">
           <div className='summary-item'>
@@ -159,7 +154,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/multiple">
           <div className='summary-item'>
@@ -169,7 +164,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/fold">
           <div className='summary-item'>
@@ -179,7 +174,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/flow">
           <div className='summary-item'>
@@ -189,7 +184,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/curve">
           <div className='summary-item'>
@@ -199,7 +194,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/cube-3d">
           <div className='summary-item'>
@@ -209,7 +204,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/circular">
           <div className='summary-item'>
@@ -219,7 +214,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/blur-rotate">
           <div className='summary-item'>
@@ -229,7 +224,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/blur-parallax">
           <div className='summary-item'>
@@ -239,7 +234,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/anim-tab-bar">
           <div className='summary-item'>
@@ -249,7 +244,7 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
+
 
         <Link href="/Examples/custom-animations/advanced-parallax">
           <div className='summary-item'>
@@ -259,5 +254,5 @@ import Link from 'next/link'
             </div>
           </div>
         </Link>
-  
-</Cards>
+
+</Cards>
diff --git a/example/website/pages/_app.js b/example/website/pages/_app.js
@@ -1,11 +1,26 @@
 import "../styles.css";
-import { Analytics } from "@vercel/analytics/react";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 
-export default function MyApp({ Component, pageProps }) {
+if (typeof window !== "undefined") {
+  // checks that we are client-side
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host:
+      process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
+    person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === "development") posthog.debug(); // debug mode in development
+    },
+  });
+}
+
+export default function MyApp({
+  Component,
+  pageProps: { session: _session, ...pageProps },
+}) {
   return (
-    <>
+    <PostHogProvider client={posthog}>
       <Component {...pageProps} />
-      <Analytics />
-    </>
+    </PostHogProvider>
   );
 }
diff --git a/example/website/scripts/gen-summary-template.mjs b/example/website/scripts/gen-summary-template.mjs
@@ -47,6 +47,7 @@ This page generated by /scripts/gen-pages.mjs, Don't update it manually
 
 import { Cards } from 'nextra/components'
 import Link from 'next/link'
+import posthog from "posthog-js";
 
 ${Object.keys(groupedPages)
   .sort((a, b) => {
@@ -68,7 +69,7 @@ ${Object.keys(groupedPages)
     .map((page) => {
       const { pageKind, pageName } = page.demo;
       return `
-        <Link href="/Examples/${pageKind}/${pageName}">
+        <Link href="/Examples/${pageKind}/${pageName}" onClick={() => posthog.capture('example-clicked', { name: '${pageName}', kind: '${pageKind}' })}>
           <div className='summary-item'>
             <div className='image-container'>![${pageKind}-${pageName}](../../../app/app/demos/${pageKind}/${pageName}/preview.png)</div>
             <div className='label-container'>

diff --git a/example/website/yarn.lock b/example/website/yarn.lock
@@ -625,15 +625,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vercel/analytics@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@vercel/analytics@npm:1.1.1"
-  dependencies:
-    server-only: "npm:^0.0.1"
-  checksum: fece944678360085a5deaea3afdade16cab67097dca6585e02a1c4c67ac3ba91b8e0bb848b7ec686b87757aad763df5bae41ce103bdc16c6e586b9390d0b4c11
-  languageName: node
-  linkType: hard
-
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -2135,6 +2126,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
+
 "fill-range@npm:^7.0.1":
   version: 7.0.1
   resolution: "fill-range@npm:7.0.1"
@@ -4779,6 +4777,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"posthog-js@npm:^1.167.0":
+  version: 1.167.0
+  resolution: "posthog-js@npm:1.167.0"
+  dependencies:
+    fflate: "npm:^0.4.8"
+    preact: "npm:^10.19.3"
+    web-vitals: "npm:^4.0.1"
+  checksum: 7b1332cecb86094f9c08394065f459dfcb99d5de72deb79a36f1fa16be6bf88ec3524d1699b8cf1cac3d637fdf307ad95e614477cdbc3ad703d0cecfb2f3374a
+  languageName: node
+  linkType: hard
+
+"preact@npm:^10.19.3":
+  version: 10.24.3
+  resolution: "preact@npm:10.24.3"
+  checksum: e9c4c901a4ddd475a1072355b5c6c944b05797445e0d68f317ad0dbc976b831523573693ea75d2e12e7902042e3729af435377816d25558bf693ecf6b516c707
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^3.3.3":
   version: 3.3.3
   resolution: "prettier@npm:3.3.3"
@@ -4959,14 +4975,14 @@ __metadata:
   resolution: "reanimated-carousel-website@workspace:."
   dependencies:
     "@types/node": "npm:18.11.10"
-    "@vercel/analytics": "npm:^1.1.1"
     autoprefixer: "npm:^10.4.16"
     dotenv: "npm:^16.4.5"
     next: "npm:^13.0.6"
     next-sitemap: "npm:^4.2.3"
     nextra: "npm:2.13.2"
     nextra-theme-docs: "npm:2.13.2"
     postcss: "npm:^8.4.32"
+    posthog-js: "npm:^1.167.0"
     prettier: "npm:^3.3.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -5217,13 +5233,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"server-only@npm:^0.0.1":
-  version: 0.0.1
-  resolution: "server-only@npm:0.0.1"
-  checksum: c432348956641ea3f460af8dc3765f3a1bdbcf7a1e0205b0756d868e6e6fe8934cdee6bff68401a1dd49ba4a831c75916517a877446d54b334f7de36fa273e53
-  languageName: node
-  linkType: hard
-
 "set-function-length@npm:^1.1.1":
   version: 1.1.1
   resolution: "set-function-length@npm:1.1.1"
@@ -6152,6 +6161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-vitals@npm:^4.0.1":
+  version: 4.2.3
+  resolution: "web-vitals@npm:4.2.3"
+  checksum: f4f1b0d6e0dd06b50a1d48c5cbe8a2804f26c5778d7c9bd0a8f591c147fd044f35465a3e95659b9ca801bfd85742e0ac70c3416228c4241d858fcecb8b396503
+  languageName: node
+  linkType: hard
+
 "web-worker@npm:^1.2.0":
   version: 1.2.0
   resolution: "web-worker@npm:1.2.0"