diff --git a/gatsby-browser.js b/gatsby-browser.js index 16a3a4d..7b42130 100644 --- a/gatsby-browser.js +++ b/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'; diff --git a/package.json b/package.json index d8cf12b..e7d9a6c 100644 --- a/package.json +++ b/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", diff --git a/src/pages/index.js b/src/pages/index.js index 1e60026..8247109 100644 --- a/src/pages/index.js +++ b/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" > diff --git a/yarn.lock b/yarn.lock index 5709c6d..1eedfb7 100644 --- a/yarn.lock +++ b/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"