Merge pull request #53 from glweems/analytics

SEO Updates
glweems · Jan 16, 2021 · aa04c8d · aa04c8d · vercel · Jan 16, 2021
2 parents f16e8ec + 40504ab
commit aa04c8d
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 44 deletions.
diff --git 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 && <CodeBlock language="css" code={code.css} />}
               {code?.html && <CodeBlock language="html" code={code.html} />}
             </Fragment>
-            <CodePenButton code={code} />
+            <CodePenButton
+              code={code}
+              className="btn"
+              onClick={() => analytics.track('Codepen Created')}
+            />
           </motion.div>
         </AnimatePresence>
       </Resizable>

diff --git 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<CodePenButtonProps> = ({
       className={className}
     >
       <input type="hidden" name="data" value={config} />
-      <Button
+      <button
         id={CodePenButton.displayName}
         color="text"
         style={buttonStyle}
@@ -94,7 +94,7 @@ const CodePenButton: FC<CodePenButtonProps> = ({
         {icon}
 
         <div style={{ paddingLeft: '5px' }}>{children}</div>
-      </Button>
+      </button>
     </form>
   );
 };

diff --git 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<SEOProps> = ({
   title,
@@ -17,6 +17,7 @@ const SEO: React.FC<SEOProps> = ({
   article,
   keywords,
   children,
+  ...props
 }) => {
   const seo = {
     title: title || packageJson.name,
@@ -26,7 +27,7 @@ const SEO: React.FC<SEOProps> = ({
   };
 
   return (
-    <Head>
+    <Helmet title={seo.title} onChangeClientState={props.onChangeClientState}>
       <meta name="description" content={seo.description} />
 
       {seo.url && <meta property="og:url" content={seo.url} />}
@@ -54,7 +55,7 @@ const SEO: React.FC<SEOProps> = ({
       {seo.image && <meta name="twitter:image" content={seo.image} />}
 
       {children}
-    </Head>
+    </Helmet>
   );
 };
 

diff --git 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
@@ -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<AppProps<{ dehydratedState: any }>> {
   }
 
   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 (
       <React.Fragment>
-        <Helmet onChangeClientState={handlePageView}>
-          <title>Super Grid 9K</title>
+        <SEO
+          image="/public/supergrid9k.png"
+          onChangeClientState={handlePageView}
+          defaultTitle="Super Grid 9K"
+          keywords={pkg.keywords}
+        >
           <link
             rel="apple-touch-icon"
             sizes="57x57"
@@ -123,7 +124,7 @@ 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} />
-        </Helmet>
+        </SEO>
 
         <ContextProvider>
           <RecoilRoot>

diff --git a/public/public/supergrid9k.png b/public/public/supergrid9k.png
diff --git 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
diff --git 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 (
-    <Header>
-      <Link href="/">
-        <span>
-          <LogoIcon />
-          Super Grid 9K
-        </span>
-      </Link>
-    </Header>
-  );
-};
+const Navbar: FC = () => (
+  <Header>
+    <LogoIcon />
+    <Link href="/">
+      <a href="/" aria-label="homepage">
+        <div>Super Grid 9K</div>
+      </a>
+    </Link>
+  </Header>
+);
 
 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
@@ -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"