add posthog

gatsby-browser.js

@@ -1,4 +1,10 @@
 import './src/styles/global.css';
+import posthog from 'posthog-js';
+
+const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
+if (env === 'production') {
+  posthog.init('HR8Gte105aCHNx2BqhL1XkbvH9kzKGptxjkbhuTj6Ek', { api_host: 'https://posthog.chuckdries.com' });
+}
 // import * as React from 'react';
 // import { MDXProvider } from '@mdx-js/react';
 

package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "develop": "gatsby develop",
-    "start": "gatsby develop",
+    "start": "gatsby develop -H 0.0.0.0",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
@@ -53,6 +53,7 @@
     "node-vibrant": "3.1.6",
     "postcss": "^8.3.4",
     "postcss-nested": "^5.0.5",
+    "posthog-js": "^1.11.3",
     "ramda": "^0.27.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/pages/index.js

@@ -4,6 +4,7 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import { Helmet } from 'react-helmet';
 import { take } from 'ramda';
 import classnames from 'classnames';
+import posthog from 'posthog-js';
 
 import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
 import { HeroA } from '../components/IndexComponents';
@@ -28,8 +29,15 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
     return images[imageIndex];
   }, [images, imageIndex]);
 
-  const shuffleImage = React.useCallback(() => {
+  const shuffleImage = React.useCallback((currentImage) => {
     const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
+    try {
+      // eslint-disable-next-line
+      posthog.capture('[shuffle image]', { currentImage: currentImage?.base });
+    } catch (e) {
+      console.log('failed to send shuffle image', e);
+      // do nothing
+    }
     const index = getDifferentRand(images.length, lastThreeImages);
     localStorage.setItem('lastHeros', JSON.stringify(take(3, [index, ...lastThreeImages])));
     setImageIndex(index);
@@ -39,9 +47,9 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
   React.useEffect(() => {
     if (!isClient) {
       setIsClient(true);
-      shuffleImage();
+      shuffleImage(image);
     }
-  }, [isClient, imageIndex, shuffleImage]);
+  }, [isClient, imageIndex, image, shuffleImage]);
 
   React.useEffect(() => {
     const keyListener = (e) => {
@@ -133,7 +141,10 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
                 className={classnames(
                   'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
                   isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
-                onClick={shuffleImage} 
+                id="shuffle-button"
+                onClick={() => {
+                  shuffleImage(image);
+                }}
                 title="shuffle image"
                 type="button"
               >

yarn.lock

@@ -5848,6 +5848,11 @@ fd@~0.0.2:
   resolved "https://registry.yarnpkg.com/fd/-/fd-0.0.3.tgz#b3240de86dbf5a345baae7382a07d4713566ff0c"
   integrity sha512-iAHrIslQb3U68OcMSP0kkNWabp7sSN6d2TBSb2JO3gcLJVDd4owr/hKM4SFJovFOUeeXeItjYgouEDTMWiVAnA==
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -10958,6 +10963,13 @@ postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.3.4:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+posthog-js@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.11.3.tgz#52e0b9265f22505a1ca4f6b5007090cab2692c5b"
+  integrity sha512-udk6Yv34XSzBl5P36H0fFCeL00/BbtjA9KpxvoXyGsxq5zCLkiS0x7FR+qde2AQJ+TNwEY/GZQVXs0hT66+Zng==
+  dependencies:
+    fflate "^0.4.1"
+
 potrace@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/potrace/-/potrace-2.1.8.tgz#50f6fba92e1e39ddef6f979b0a0f841809e0acf2"