Add scroll throttling, 404, and SEO

Author: jason-roundtree

web/components/NavMenu.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 
 const NavMenuPanel = styled.nav`

web/components/SEO.js

@@ -0,0 +1,71 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Helmet } from "react-helmet"
+// import { useLocation } from "@reach/router"
+import { useStaticQuery, graphql } from "gatsby"
+
+const SEO = ({ title, description, image }) => {
+    // const { pathname } = useLocation()
+    const { site } = useStaticQuery(query)
+
+    const {
+        defaultTitle,
+        defaultDescription,
+        siteUrl,
+        defaultImage,
+    } = site.siteMetadata
+
+    const seo = {
+        title: title || defaultTitle,
+        description: description || defaultDescription,
+        // image: `${siteUrl}${image || defaultImage}`,
+        // url: `${siteUrl}${pathname}`,
+    }
+
+    return (
+        <Helmet title={seo.title}>
+            <meta name="description" content={seo.description} />
+            <meta name="image" content={seo.image} />
+            <meta name="author" content={seo.author} />
+
+            {seo.url && <meta property="og:url" content={seo.url} />}
+
+            {seo.title && <meta property="og:title" content={seo.title} />}
+
+            {seo.description && (
+                <meta property="og:description" content={seo.description} />
+            )}
+
+            {/* {seo.image && <meta property="og:image" content={seo.image} />} */}
+            {/* {(article ? true : null) && <meta property="og:type" content="article" />} */}
+        </Helmet>
+    )
+}
+
+export default SEO
+
+SEO.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    image: PropTypes.string,
+    article: PropTypes.bool,
+}
+
+SEO.defaultProps = {
+    title: null,
+    description: null,
+    image: null,
+    article: false,
+}
+
+const query = graphql`
+    query SEO {
+            site {
+                siteMetadata {
+                    defaultTitle: title
+                    defaultDescription: description
+                    siteUrl: url
+                }
+            }
+}
+`

web/components/TopicSection.js

@@ -10,11 +10,9 @@ import DescriptiveItem from './DescriptiveItem'
 // `
 
 export default function TopicSection(props) {
-    // console.log('TopicSection props: ', props)
     return (
         <section 
             id={props.section.anchor_id}
-            // key={props.section._id}
         >
             <div className='section_header'>
                 <h3 

web/components/layout.js

@@ -7,26 +7,23 @@ const ListLink = props => (
     </li>
 )
 
-export default function Layout({ children }) {
-    // TODO: is it problematic getting pathname from window? Better way to do it using Gatsby with React Router?
-    const path = window.location.pathname
-    console.log('path: ', path)
+export default function Layout(props) {
     return (
         <div id='layout'>
             <header>
                 <h1>Web Dev Student Cheatsheet & Reference</h1>
 
                 <nav>
                     <ul>
-                        {path === "/" 
+                        {props.id !== "about" 
                             ?   <ListLink to='/about'>About</ListLink>
                             :   <ListLink to='/'>Home</ListLink>
                         }
                     </ul>
                 </nav>
             </header>
 
-            <>{children}</>
+            <>{props.children}</>
 
         </div>
     )

web/gatsby-config.js

@@ -1,11 +1,19 @@
 /**
  * Configure your Gatsby site with this file.
  *
- * See: https://www.gatsbyjs.org/docs/gatsby-config/
+ * See: https://www.gatsbyjs.org/docs/gatsby-config/`
  */
 
 module.exports = {
+  siteMetadata: {
+    title: "Web Development Reference Guide",
+    description: "A simple reference guide and cheatsheet on popular web development technologies with content aimed toward newer web developers.",
+    author: "Jason Roundtree"
+    // url: "https://www.reference.jasonroundtree.info",
+    // image: "/images/", // Path to your image you placed in the 'static' folder
+  },
   plugins: [
+    `gatsby-plugin-react-helmet`,
     {
       resolve: 'gatsby-source-sanity',
       options: {