diff --git a/Grid/CodeSection.tsx b/Grid/CodeSection.tsx index 6002c6a..fe05e42 100644 --- a/Grid/CodeSection.tsx +++ b/Grid/CodeSection.tsx @@ -8,6 +8,7 @@ import cssState from './cssState'; import { optionsState } from './GridActions'; import { Handle } from './Handle'; import CodePenButton from '@components/CodePenButton'; +import { analytics } from '@lib/analytics'; export const CodeSection = ({ className }) => { const [{ width: initialWidth, useCssRepeatFn }, setOptions] = useRecoilState( @@ -57,7 +58,11 @@ export const CodeSection = ({ className }) => { {code?.css && } {code?.html && } - + analytics.track('Codepen Created')} + /> diff --git a/components/CodePenButton.tsx b/components/CodePenButton.tsx index d2b29cc..f4fce07 100644 --- a/components/CodePenButton.tsx +++ b/components/CodePenButton.tsx @@ -1,6 +1,6 @@ -import React, { FC, ReactNode } from 'react'; import { Icon, iconButtonCss } from '@lib/Icons'; -import Button from '@primer/components/lib/Button'; +import React, { FC, ReactNode } from 'react'; + export interface CodePenData { title?: string; description?: string; @@ -83,7 +83,7 @@ const CodePenButton: FC = ({ className={className} > - + ); }; diff --git a/components/SEO.tsx b/components/SEO.tsx index 0622099..320d5f7 100644 --- a/components/SEO.tsx +++ b/components/SEO.tsx @@ -1,14 +1,14 @@ -import { Head } from 'next/document'; import React from 'react'; +import { Helmet, HelmetProps } from 'react-helmet'; import packageJson from '../package.json'; -export type SEOProps = { +export interface SEOProps extends HelmetProps { title?: string; description?: string; image?: string; article?: boolean; keywords?: string[]; -}; +} const SEO: React.FC = ({ title, @@ -17,6 +17,7 @@ const SEO: React.FC = ({ article, keywords, children, + ...props }) => { const seo = { title: title || packageJson.name, @@ -26,7 +27,7 @@ const SEO: React.FC = ({ }; return ( - + {seo.url && } @@ -54,7 +55,7 @@ const SEO: React.FC = ({ {seo.image && } {children} - + ); }; diff --git a/package.json b/package.json index 11f7049..057cb06 100644 --- a/package.json +++ b/package.json @@ -139,6 +139,7 @@ "@types/node": "^14.14.21", "@types/react": "^17.0.0", "@types/react-beautiful-dnd": "^13.0.0", + "@types/react-helmet": "^6.1.0", "@types/react-modal": "^3.10.6", "@types/react-resizable": "^1.7.2", "@types/rebass": "^4.0.7", diff --git a/pages/_app.tsx b/pages/_app.tsx index 452b0a1..8f02688 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,23 +1,19 @@ // _app.js import ContextProvider from '@components/ContextProvider'; -import { analytics, initGA } from '@lib/analytics'; -// import { initGA } from '@lib/analytics'; +import SEO from '@components/SEO'; +import { analytics } from '@lib/analytics'; import { colors } from '@lib/theme'; import App, { AppContext, AppProps } from 'next/app'; import React from 'react'; -import Helmet from 'react-helmet'; import { RecoilRoot } from 'recoil'; - +import pkg from '../package.json'; /* 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 + analytics.page({ title: newState.title }); previousTitle = newState.title; } }; @@ -34,22 +30,27 @@ class MyApp extends App> { } componentDidMount() { - console.log('hi'); + analytics.page( + { + title: this.props.pageProps.name, + path: this.props.router.asPath, + }, + () => { + console.log(this.props); + } + ); } render() { - initGA(); - // guestersEventListeners(); - // setCssObjectVariables(colors, 'color'); - // setCssArrayVariables( - // space.map((val) => `${val}px`), - // 'space' - // ); const { Component, pageProps } = this.props; return ( - - Super Grid 9K + > { - + diff --git a/public/public/supergrid9k.png b/public/public/supergrid9k.png new file mode 100644 index 0000000..1894e06 Binary files /dev/null and b/public/public/supergrid9k.png differ diff --git a/public/site.webmanifest b/public/site.webmanifest index fa99de7..da23ebb 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,6 +1,6 @@ { - "name": "", - "short_name": "", + "name": "Super Grid 9K", + "short_name": "supergrid9k", "icons": [ { "src": "/android-chrome-192x192.png", diff --git a/public/supergrid9k.PNG b/public/supergrid9k.PNG deleted file mode 100644 index c31f83f..0000000 Binary files a/public/supergrid9k.PNG and /dev/null differ diff --git a/ui/Navbar.tsx b/ui/Navbar.tsx index 51ef933..95c2e64 100644 --- a/ui/Navbar.tsx +++ b/ui/Navbar.tsx @@ -1,28 +1,30 @@ import { LogoIcon } from '@lib/Icons'; import { colors } from '@lib/theme'; import Link from 'next/link'; -import React from 'react'; +import React, { FC } from 'react'; import styled from 'styled-components'; -const Navbar: React.FC = () => { - return ( -
- - - - Super Grid 9K - - -
- ); -}; +const Navbar: FC = () => ( +
+ + + +
Super Grid 9K
+ + +
+); const Header = styled.header` display: flex; place-items: center; height: ${(props) => props.theme.navbarHeight}; + padding-left: 1rem; background-color: ${colors.base}; border-bottom: 4px solid ${colors.baseShade}; + svg { + margin-right: 1rem; + } `; export default Navbar; diff --git a/yarn.lock b/yarn.lock index 15c3b08..32c7cb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1310,6 +1310,13 @@ dependencies: "@types/react" "*" +"@types/react-helmet@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a" + integrity sha512-PYRoU1XJFOzQ3BHvWL1T8iDNbRjdMDJMT5hFmZKGbsq09kbSqJy61uwEpTrbTNWDopVphUT34zUSVLK9pjsgYQ== + dependencies: + "@types/react" "*" + "@types/react-modal@^3.10.6": version "3.10.6" resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.10.6.tgz#76717220f32bc72769190692147814a540053c7e"