Fixed eslint & console errors

.gitignore

@@ -67,3 +67,6 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+
+# IDEs
+.idea/

content/pages/contact.json

@@ -15,19 +15,19 @@
         {
           "label": "Name",
           "inputType": "text",
-          "autocomplete": "name",
+          "autoComplete": "name",
           "_template": "nameInputBlock"
         },
         {
           "label": "Email",
           "inputType": "text",
-          "autocomplete": "email",
+          "autoComplete": "email",
           "_template": "emailInputBlock"
         },
         {
           "label": "Message",
           "inputType": "textarea",
-          "autocomplete": "",
+          "autoComplete": "",
           "_template": "messageInputBlock"
         }
       ],

content/pages/dummy.json

@@ -37,7 +37,7 @@
           "_template": "dummy",
           "label": "dummy",
           "inputType": "dummy",
-          "autocomplete": "dummy"
+          "autoComplete": "dummy"
         }
       ]
     }

package.json

@@ -23,7 +23,8 @@
     "gatsby-plugin-sharp": "^2.2.31",
     "gatsby-plugin-styled-components": "^3.1.11",
     "gatsby-plugin-tinacms": "^0.31.0",
-    "gatsby-plugin-transition-link": "^1.13.0",
+    "gatsby-plugin-transition-link": "^1.20.2",
+    "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-remark-copy-linked-files": "^2.1.28",
     "gatsby-remark-images": "^3.1.28",
     "gatsby-remark-prismjs": "^3.3.20",
@@ -42,19 +43,19 @@
     "polished": "^3.4.1",
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
-    "react-helmet": "^5.2.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "react-slugify": "^2.0.1",
-    "react-textarea-autosize": "^7.1.2",
+    "react-textarea-autosize": "^8.2.0",
     "react-tinacms-editor": "^0.31.0",
     "react-tinacms-inline": "^0.31.0",
     "styled-components": ">=4.1",
-    "styled-icons": "^10.2.1",
+    "styled-icons": "^10.16.0",
     "tinacms": "^0.31.0"
   },
   "devDependencies": {
-    "prettier": "^2.0.4"
+    "prettier": "^2.0.5"
   },
   "keywords": [
     "gatsby"

src/blocks/form.js

@@ -14,8 +14,8 @@ export function Form({ form }) {
       {form.fields.map(field => {
         if (field.inputType === "textarea") {
           return (
-            <FormField wide>
-              <label for={slugify(field.label)}>{field.label}</label>
+            <FormField key={field.label} wide>
+              <label htmlFor={slugify(field.label)}>{field.label}</label>
               <textarea
                 cols="40"
                 rows="5"
@@ -26,22 +26,22 @@ export function Form({ form }) {
           )
         } else {
           return (
-            <FormField>
-              <label for={slugify(field.label)}>{field.label}</label>
+            <FormField key={field.label}>
+              <label htmlFor={slugify(field.label)}>{field.label}</label>
               <input
                 id={slugify(field.label)}
                 name={slugify(field.label)}
                 type={field.inputType}
-                autocorrect="off"
-                autocomplete={field.autocomplete | ``}
+                autoCorrect="off"
+                autoComplete={field.autoComplete | ``}
               />
             </FormField>
           )
         }
       })}
       {form.fields.length > 0 && (
-        <FormField wide>
-          <Button primary type="submit" value="Submit">
+        <FormField key="submit" wide>
+          <Button primary="true" type="submit" value="Submit">
             Submit
           </Button>
         </FormField>
@@ -57,7 +57,7 @@ const base = {
   fields: [
     { name: "label", label: "Label", component: "text" },
     { name: "inputType", label: "Input Type", component: "text" },
-    { name: "autocomplete", label: "Autocomplete", component: "text" },
+    { name: "autoComplete", label: "autoComplete", component: "text" },
   ],
 }
 
@@ -71,7 +71,7 @@ export const nameInputBlock = {
   defaultItem: {
     label: "Name",
     inputType: "text",
-    autocomplete: "name",
+    autoComplete: "name",
   },
   ...base,
 }
@@ -81,7 +81,7 @@ export const emailInputBlock = {
   defaultItem: {
     label: "Email",
     inputType: "text",
-    autocomplete: "email",
+    autoComplete: "email",
   },
   ...base,
 }
@@ -91,7 +91,7 @@ export const phoneInputBlock = {
   defaultItem: {
     label: "Phone",
     inputType: "text",
-    autocomplete: "tel",
+    autoComplete: "tel",
   },
   ...base,
 }
@@ -101,7 +101,7 @@ export const companyInputBlock = {
   defaultItem: {
     label: "Company",
     inputType: "text",
-    autocomplete: "organization",
+    autoComplete: "organization",
   },
   ...base,
 }
@@ -111,7 +111,7 @@ export const messageInputBlock = {
   defaultItem: {
     label: "Message",
     inputType: "textarea",
-    autocomplete: "",
+    autoComplete: "",
   },
   ...base,
 }

src/components/header.js

@@ -19,7 +19,7 @@ export const Header = styled(({ siteTitle, ...styleProps }) => {
                 {siteTitle}
               </SiteLink>
             </SiteTitle>
-            <Nav toggleDarkMode={toggleDarkMode} isDarkMode={isDarkMode} />
+            <Nav toggleDarkMode={toggleDarkMode} isdarkmode={isDarkMode} />
           </HeaderWrapper>
         </header>
       )}

src/components/hero.js

@@ -22,8 +22,8 @@ export const Hero = ({ hero }) => {
               <Actions>
                 {Object.keys(hero.ctas).map(key => {
                   return (
-                    <LinkButton
-                      primary={hero.ctas[key].primary}
+                    <LinkButton key={key}
+                      primary={hero.ctas[key].primary.toString()}
                       to={hero.ctas[key].link}
                     >
                       {hero.ctas[key].label}

src/components/nav.js

@@ -14,39 +14,39 @@ export const Nav = ({ toggleDarkMode, isDarkMode }) => {
     }
   `)
 
-  const [navOpen, setNavOpen] = useState(false)
-  const toggleNavOpen = () => {
-    setNavOpen(!navOpen)
+  const [navopen, setnavopen] = useState(false)
+  const togglenavopen = () => {
+    setnavopen(!navopen)
   }
 
   const menu = data.settingsJson
 
   return (
     <>
-      <StyledNavbar navOpen={navOpen} isDarkMode={isDarkMode}>
+      <StyledNavbar navopen={navopen.toString()} isdarkmode={isDarkMode}>
         {menu.menuItems.map(item => (
           <NavItem key={item.label}>
             <NavLink
-              onClick={toggleNavOpen}
+              onClick={togglenavopen}
               partiallyActive={item.link === "/" ? false : true}
               to={item.link}
             >
               {item.label}
             </NavLink>
           </NavItem>
         ))}
-        <NavItem>
+        <NavItem key="toggle-dark">
           <DarkModeToggle
             aria-label="Toggle Dark Theme"
             onClick={toggleDarkMode}
-            isDarkMode={isDarkMode}
+            isdarkmode={isDarkMode}
           />
         </NavItem>
       </StyledNavbar>
       <NavToggle
         aria-label="Toggle Nav"
-        onClick={toggleNavOpen}
-        navOpen={navOpen}
+        onClick={togglenavopen}
+        navopen={navopen.toString()}
       ></NavToggle>
     </>
   )
@@ -73,7 +73,7 @@ export const StyledNavbar = styled.ul`
     transition: all 150ms ${p => p.theme.easing};
     pointer-events: none;
     ${props =>
-      props.navOpen &&
+      props.navopen &&
       css`
         opacity: 1;
         pointer-events: all;
@@ -132,7 +132,7 @@ export const NavItem = styled.li`
 `
 
 export const NavLink = styled(({ children, ...styleProps }) => (
-  <Link activeClassName="active" {...styleProps} isCurrent>
+  <Link activeClassName="active" {...styleProps} iscurrent="true">
     <span>{children}</span>
   </Link>
 ))`
@@ -387,7 +387,7 @@ export const NavToggle = styled(({ menuOpen, ...styleProps }) => {
   }
 
   ${props =>
-    props.navOpen &&
+    props.navopen &&
     css`
       .open {
         display: block;

src/components/theme.js

@@ -82,7 +82,7 @@ export const Theme = ({ children }) => {
         {({ theme }) => (
           <ThemeProvider theme={theme}>
             <>
-              <TinaOverrideGlobalStyle primary={theme.color.primary} />
+              <TinaOverrideGlobalStyle primary={theme.color.primary.toString()} />
               <GlobalStyles />
               {children}
             </>

src/fields/authors.js

@@ -22,7 +22,7 @@ export const AuthorsField = (props) => {
       <AuthorsHeader>
         <FieldLabel>Authors</FieldLabel>
         <IconButton
-          primary
+          primary="true"
           small
           onClick={() => setVisible(!visible)}
           open={visible}
@@ -32,7 +32,7 @@ export const AuthorsField = (props) => {
         <AuthorMenu open={visible}>
           <AuthorMenuList>
             {authors.map((author) => (
-              <AuthorOption
+              <AuthorOption key={author.id}
                 onClick={() => {
                   addAuthor(author.id)
                   setVisible(false)
@@ -53,7 +53,7 @@ export const AuthorsField = (props) => {
             {authorIDs.map((authorID, index) => {
               const author = authors.find((author) => author.id === authorID)
               return (
-                <AuthorListItem
+                <AuthorListItem key={author.id}
                   author={author}
                   form={form}
                   field={field}

src/pages/404.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+class NotFoundPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <br /><br /><br />
+        <h1>Not Found</h1>
+        <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      </div>
+    )
+  }
+}
+
+export default NotFoundPage

src/templates/list.js

@@ -10,15 +10,17 @@ import {
   MetaActions,
   DraftBadge,
 } from "../components/style"
-import { ListAuthors, AuthorsForm } from "../components/authors"
+import { ListAuthors } from "../components/authors"
+// import { ListAuthors, AuthorsForm } from "../components/authors" // currently unused AuthorsForm
 import { Link } from "gatsby"
 import { PageLayout } from "../components/pageLayout"
 
 export default function List({ data, pageContext }) {
   const [page] = useLocalJsonForm(data.page, ListForm)
-  const [authors] = useLocalJsonForm(data.authors, AuthorsForm)
+  // const [authors] = useLocalJsonForm(data.authors, AuthorsForm)  // currently unused
 
-  const { slug, limit, skip, numPages, currentPage } = pageContext
+  const { slug, numPages, currentPage } = pageContext
+  // const { slug, limit, skip, numPages, currentPage } = pageContext // some unused vars
   const isFirst = currentPage === 1
   const isLast = currentPage === numPages
   const prevPage =

src/templates/page.js

@@ -20,15 +20,15 @@ export default function Page({ data }) {
           blocks.map(({ _template, ...data }, i) => {
             switch (_template) {
               case "TitleBlock":
-                return <Title page={page} data={data} />
+                return <Title key={i} page={page} data={data} />
               case "ImageBlock":
-                return <Image data={data} />
+                return <Image key={i} data={data} />
               case "FormBlock":
-                return <Form form={data} />
+                return <Form key={i} form={data} />
               case "ContentBlock":
                 if (data.content && page.childrenPagesJsonBlockMarkdown[i])
                   return (
-                    <Content
+                    <Content key={i}
                       data={data}
                       html={
                         page.childrenPagesJsonBlockMarkdown[i]
@@ -40,6 +40,7 @@ export default function Page({ data }) {
               default:
                 return true
             }
+            return true
           })}
       </Paper>
     </PageLayout>
@@ -168,7 +169,7 @@ export const pageQuery = graphql`
         fields {
           label
           inputType
-          autocomplete
+          autoComplete
         }
         image {
           childImageSharp {