Skip to content

Commit

Permalink
Merge pull request #52 from glweems/analytics
Browse files Browse the repository at this point in the history
add google analytics
  • Loading branch information
glweems authored Jan 16, 2021
2 parents 2e8db4f + a0d1922 commit f16e8ec
Show file tree
Hide file tree
Showing 7 changed files with 797 additions and 838 deletions.
2 changes: 2 additions & 0 deletions Grid/CodeSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import cssState from './cssState';
import { optionsState } from './GridActions';
import { Handle } from './Handle';
import CodePenButton from '@components/CodePenButton';

export const CodeSection = ({ className }) => {
const [{ width: initialWidth, useCssRepeatFn }, setOptions] = useRecoilState(
Expand Down Expand Up @@ -56,6 +57,7 @@ export const CodeSection = ({ className }) => {
{code?.css && <CodeBlock language="css" code={code.css} />}
{code?.html && <CodeBlock language="html" code={code.html} />}
</Fragment>
<CodePenButton code={code} />
</motion.div>
</AnimatePresence>
</Resizable>
Expand Down
57 changes: 36 additions & 21 deletions components/CodePenButton.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { FC, ReactNode } from 'react';
import { Icon, iconButtonCss } from '@lib/Icons';
import Button from '@primer/components/lib/Button';
export interface CodePenData {
Expand Down Expand Up @@ -55,57 +55,72 @@ export interface CodePenData {
js_external?: string;
}

interface CodePenButtonProps extends Omit<CodePenData, 'html' | 'css' | 'js'> {
interface CodePenButtonProps {
options?: Omit<CodePenData, 'html' | 'css' | 'js'>;
code?: Pick<CodePenData, 'html' | 'css' | 'js'>;
children?: React.ReactNode;
className?: string;
buttonStyle?: React.CSSProperties;
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
icon?: ReactNode;
}

const CodePenButton: React.FC<CodePenButtonProps> = ({
const CodePenButton: FC<CodePenButtonProps> = ({
children,
className,
code,
buttonStyle,
...config
onClick,
icon,
options,
}) => {
const values = JSON.stringify({ ...config, ...code });
const config = JSON.stringify({ ...options, ...code });
return (
<form
action="https://codepen.io/pen/define"
method="POST"
target="_blank"
className={className}
>
<input type="hidden" name="data" value={values} />
<input type="hidden" name="data" value={config} />
<Button
id={CodePenButton.displayName}
color="text"
style={buttonStyle}
css={iconButtonCss as any}
type="submit"
onClick={onClick}
>
<Icon viewBox="0 0 1792 1792">
<path
d="M216 1169l603 402v-359l-334-223zm-62-144l193-129-193-129v258zm819 546l603-402-269-180-334 223v359zm-77-493l272-182-272-182-272 182zm-411-275l334-223v-359l-603 402zm960 93l193 129v-258zm-138-93l269-180-603-402v359zm485-180v546q0 41-34 64l-819 546q-21 13-43 13t-43-13l-819-546q-34-23-34-64v-546q0-41 34-64l819-546q21-13 43-13t43 13l819 546q34 23 34 64z"
fill="#fff"
/>
</Icon>
{icon}

<div>{children}</div>
<div style={{ paddingLeft: '5px' }}>{children}</div>
</Button>
</form>
);
};

CodePenButton.defaultProps = {
title: 'Super Grid 9k Creation',
description: `Created With Super Grid 9k!\nCreate your at https://supergrid9k.dev`,
tags: ['SuperGrid9k', 'css', 'grid', 'cssgrid', 'css-grid'],
head: `<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700">`,
css_external: 'https://supergrid9k.dev/codepen.css',
editors: '110',
layout: 'right',
css_starter: 'normalize',
options: {
title: 'Super Grid 9k Creation',
description: `Created With Super Grid 9k!\nCreate your at https://supergrid9k.dev`,
tags: ['SuperGrid9k', 'css', 'grid', 'cssgrid', 'css-grid'],
head: `<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700">`,
css_external: 'https://supergrid9k.dev/codepen.css',
editors: '110',
layout: 'right',
css_starter: 'normalize',
},
className: 'CodePenButton',
children: 'Create CodePen',
buttonStyle: { backgroundColor: '#2c303a', color: '#fff' },
onClick: (e) => console.log(`${e.currentTarget.id} Clicked`),
icon: (
<Icon viewBox="0 0 1792 1792">
<path d="M216 1169l603 402v-359l-334-223zm-62-144l193-129-193-129v258zm819 546l603-402-269-180-334 223v359zm-77-493l272-182-272-182-272 182zm-411-275l334-223v-359l-603 402zm960 93l193 129v-258zm-138-93l269-180-603-402v359zm485-180v546q0 41-34 64l-819 546q-21 13-43 13t-43-13l-819-546q-34-23-34-64v-546q0-41 34-64l819-546q21-13 43-13t43 13l819 546q34 23 34 64z" />
</Icon>
),
};

CodePenButton.displayName = 'CodePenButton';

export default CodePenButton;
28 changes: 28 additions & 0 deletions lib/analytics.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import Analytics from 'analytics';
import googleAnalytics from '@analytics/google-analytics';
import ReactGA from 'react-ga';

export const initGA = () => {
console.log('GA init');
typeof document !== 'undefined' && ReactGA.initialize('UA-175519886-1');
};
export const logPageView = () => {
console.log(`Logging pageview for ${window.location.pathname}`);
ReactGA.set({ page: window?.location.pathname });
ReactGA.pageview(window?.location.pathname);
};
export const logEvent = (category = '', action = '') => {
if (category && action) {
ReactGA.event({ category, action });
}
};
export const logException = (description = '', fatal = false) => {
if (description) {
ReactGA.exception({ description, fatal });
}
};

export const analytics = Analytics({
app: 'super-grid-9k',
plugins: [googleAnalytics({ trackingId: 'UA-175519886-1' })],
});
73 changes: 39 additions & 34 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,52 +12,57 @@
"create"
],
"dependencies": {
"@analytics/google-analytics": "^0.5.2",
"@popmotion/popcorn": "^0.4.4",
"@primer/components": "^20.3.0",
"@primer/octicons-react": "^11.1.0",
"@primer/components": "^23.0.1",
"@primer/octicons-react": "^11.2.0",
"@styled-system/css": "^5.1.5",
"@types/body-scroll-lock": "^2.6.1",
"analytics": "^0.6.6",
"array-move": "^3.0.1",
"axios": "^0.21.0",
"axios": "^0.21.1",
"babel-jest": "^26.6.3",
"body-scroll-lock": "^3.1.5",
"clipboard": "^2.0.6",
"colors": "^1.4.0",
"envalid": "^6.0.2",
"formik": "^2.2.5",
"framer-motion": "^2.9.4",
"formik": "^2.2.6",
"framer-motion": "^3.2.1",
"gatsby-plugin-google-analytics": "^2.9.0",
"jest": "^26.6.3",
"js-cookie": "^2.2.1",
"lodash": "^4.17.20",
"mongoose": "^5.10.15",
"next": "^10.0.3",
"mongoose": "^5.11.12",
"next": "^10.0.5",
"next-connect": "^0.9.1",
"next-cookies": "^2.0.3",
"polished": "^4.0.4",
"polished": "^4.0.5",
"prism-react-renderer": "^1.1.1",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-clipboard.js": "^2.0.16",
"react-div-100vh": "^0.5.6",
"react-dom": "^17.0.1",
"react-error-boundary": "^3.0.2",
"react-error-boundary": "^3.1.0",
"react-firebaseui": "^4.1.0",
"react-hook-form": "^6.11.5",
"react-ga": "^3.3.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.14.1",
"react-json-view": "^1.19.1",
"react-resizable": "^1.11.0",
"react-sortable-hoc": "^1.11.0",
"react-typography": "^0.16.19",
"react-use": "^15.3.4",
"react-use": "^15.3.8",
"react-use-dimensions": "^1.2.1",
"recoil": "^0.1.2",
"styled-components": "^5.2.1",
"styled-system": "^5.1.5",
"swr": "^0.3.9",
"swr": "^0.4.0",
"ts-jest": "^26.4.4",
"typescript": "^4.1.1-rc",
"typescript": "^4.1.3",
"typography": "^0.16.19",
"typography-plugin-code": "^0.16.19",
"use-debounce": "^5.1.0"
"use-debounce": "^5.2.0"
},
"jest": {
"transform": {
Expand Down Expand Up @@ -122,43 +127,43 @@
},
"devDependencies": {
"@babel/preset-typescript": "^7.12.7",
"@testing-library/dom": "^7.28.1",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/react-hooks": "^3.4.2",
"@testing-library/user-event": "^12.2.2",
"@types/cookie-session": "^2.0.41",
"@types/jest": "^26.0.15",
"@types/lodash": "^4.14.165",
"@types/mongoose": "^5.10.1",
"@types/node": "^14.14.10",
"@testing-library/dom": "^7.29.4",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/react-hooks": "^5.0.0",
"@testing-library/user-event": "^12.6.0",
"@types/cookie-session": "^2.0.42",
"@types/jest": "^26.0.20",
"@types/lodash": "^4.14.167",
"@types/mongoose": "^5.10.3",
"@types/node": "^14.14.21",
"@types/react": "^17.0.0",
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-modal": "^3.10.6",
"@types/react-resizable": "^1.7.2",
"@types/rebass": "^4.0.7",
"@types/rebass__forms": "^4.0.4",
"@types/styled-components": "^5.1.4",
"@types/styled-components": "^5.1.7",
"@types/styled-system": "^5.1.10",
"@types/typography": "^0.16.3",
"@typescript-eslint/eslint-plugin": "4.8.2",
"@typescript-eslint/parser": "4.8.2",
"@typescript-eslint/eslint-plugin": "4.13.0",
"@typescript-eslint/parser": "4.13.0",
"babel-eslint": "10.1.0",
"babel-plugin-macros": "^2.8.0",
"babel-plugin-macros": "^3.0.1",
"babel-plugin-styled-components": "^1.12.0",
"eslint": "7.14.0",
"eslint-config-prettier": "^6.15.0",
"eslint": "7.18.0",
"eslint-config-prettier": "^7.1.0",
"eslint-config-react-app": "6.0.0",
"eslint-config-stylelint": "^13.1.0",
"eslint-plugin-flowtype": "5.2.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^4.3.0",
"husky": "^4.3.8",
"jest-styled-components": "^7.0.3",
"prettier": "2.2.0",
"prettier": "2.2.1",
"pretty-quick": "^3.1.0",
"react-test-renderer": "^17.0.1",
"stylelint": "^13.8.0",
Expand Down
28 changes: 25 additions & 3 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
// _app.js
import ContextProvider from '@components/ContextProvider';
import { analytics, initGA } from '@lib/analytics';
// import { initGA } from '@lib/analytics';
import { colors } from '@lib/theme';
import App, { AppContext, AppProps } from 'next/app';
import Head from 'next/head';
import React from 'react';
import Helmet from 'react-helmet';
import { RecoilRoot } from 'recoil';

/* Using react-helmet onChangeClientState */
let previousTitle;
const handlePageView = (newState) => {
if (previousTitle !== newState.title) {
console.log(`react-helmet onChangeClientState "${newState.title}"`);
// Run page view!
analytics.page({ title: newState.title }, () => {
console.log('Page callback from CustomHelmet');
});
// set previousTitle
previousTitle = newState.title;
}
};

class MyApp extends App<AppProps<{ dehydratedState: any }>> {
static async getInitialProps({ Component, ctx }: AppContext) {
let pageProps = {};
Expand All @@ -17,7 +33,12 @@ class MyApp extends App<AppProps<{ dehydratedState: any }>> {
return { pageProps };
}

componentDidMount() {
console.log('hi');
}

render() {
initGA();
// guestersEventListeners();
// setCssObjectVariables(colors, 'color');
// setCssArrayVariables(
Expand All @@ -27,7 +48,7 @@ class MyApp extends App<AppProps<{ dehydratedState: any }>> {
const { Component, pageProps } = this.props;
return (
<React.Fragment>
<Head>
<Helmet onChangeClientState={handlePageView}>
<title>Super Grid 9K</title>
<link
rel="apple-touch-icon"
Expand Down Expand Up @@ -102,7 +123,8 @@ class MyApp extends App<AppProps<{ dehydratedState: any }>> {
<meta name="msapplication-TileColor" content={colors.focus} />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content={colors.focus} />
</Head>
</Helmet>

<ContextProvider>
<RecoilRoot>
<Component {...pageProps} />
Expand Down
1 change: 1 addition & 0 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export default class MyDocument extends Document<MyDocumentProps> {
});

const initialProps = await Document.getInitialProps(ctx);

return {
...initialProps,
styles: (
Expand Down
Loading

1 comment on commit f16e8ec

@vercel
Copy link

@vercel vercel bot commented on f16e8ec Jan 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.