fix: incorrect static graphql queries, layout wrapping

HarrisJT · Jul 2, 2019 · 6790c20 · 6790c20
1 parent 554903c
commit 6790c20
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 84 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -4,8 +4,8 @@ require('typeface-asul');
 
 // Import global styles
 require('normalize.css');
-require('./src/css/reset.css');
 require('prismjs/themes/prism.css');
+require('./src/css/reset.css');
 
 // A stub function is needed because gatsby won't load this file otherwise
 // (https://github.com/gatsbyjs/gatsby/issues/6759)

diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
@@ -1,43 +1,41 @@
-import React, {PureComponent} from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import {GlobalStyle} from '../../css/globalStyle';
 import Footer from '../Footer/Footer';
 import {useSiteMetadata} from '../../utils/useSiteMetadata';
 
-class Template extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
+// scroll-to-top fix on page navigation
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  height: 100vh;
+`;
 
-  render() {
-    const {children} = this.props;
-    const {email, twitterHandle, githubHandle, linkedinHandle, facebookAppId} = useSiteMetadata();
+const Layout = ({children}) => {
+  const {email, twitterHandle, githubHandle, linkedinHandle, facebookAppId} = useSiteMetadata();
 
-    // scroll-to-top fix on page navigation
-    const Main = styled.main`
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      overflow: auto;
-      justify-content: space-between;
-      height: 100vh;
-    `;
-
-    return (
-      <React.Fragment>
-        <GlobalStyle />
-        <Main>{children}</Main>
+  return (
+    <React.Fragment>
+      <GlobalStyle />
+      <Main>
+        {children}
         <Footer
           email={email}
           twitterHandle={twitterHandle}
           githubHandle={githubHandle}
           linkedinHandle={linkedinHandle}
           facebookAppId={facebookAppId}
         />
-      </React.Fragment>
-    );
-  }
-}
+      </Main>
+    </React.Fragment>
+  );
+};
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
 
-export default Template;
+export default Layout;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -7,7 +7,6 @@ import Introduction from '../components/Introduction';
 import TitleAndMetaTags from '../components/TitleAndMetaTags';
 import Layout from '../components/Layout';
 import {fadeIn, moveRight} from '../css/animations';
-import {useSiteMetadata} from '../utils/useSiteMetadata';
 
 const Root = styled.div`
   animation: ${fadeIn} 450ms cubic-bezier(0.67, 0, 0.67, 1), ${moveRight} 500ms cubic-bezier(0.33, 0, 0, 1);
@@ -19,13 +18,15 @@ class Home extends PureComponent {
       allMarkdownRemark: PropTypes.shape({
         edges: PropTypes.array.isRequired,
       }),
+      site: PropTypes.object.isRequired,
     }).isRequired,
   };
 
   render() {
     const {data} = this.props;
 
-    const {author, description, facebookAppId, siteUrl, title, twitterHandle, email} = useSiteMetadata();
+    const {author, description, facebookAppId, siteUrl, title, twitterHandle, email} = data.site.siteMetadata;
+
     const posts = data.allMarkdownRemark.edges.map(({node}) => ({
       date: node.frontmatter.date,
       excerpt: node.excerpt,
@@ -73,6 +74,17 @@ export default Home;
 // eslint-disable-next-line no-undef
 export const pageQuery = graphql`
   query getPosts {
+    site {
+      siteMetadata {
+        author
+        description
+        facebookAppId
+        title
+        twitterHandle
+        siteUrl
+        email
+      }
+    }
     allMarkdownRemark(
       limit: 100
       filter: {frontmatter: {draft: {ne: true}}}

diff --git a/src/pages/search.jsx b/src/pages/search.jsx
@@ -9,7 +9,7 @@ import Header from '../components/Header';
 import Navigation from '../components/Navigation';
 import TitleAndMetaTags from '../components/TitleAndMetaTags';
 import {fadeIn, moveUp} from '../css/animations';
-import {useSiteMetadata} from '../utils/useSiteMetadata';
+import Layout from '../components/Layout';
 
 const Form = styled.div`
   display: flex;
@@ -55,21 +55,6 @@ const SearchResultWrapper = styled.div`
   margin: 10px 2vw;
   transition: background-color 100ms ease;
 
-  div {
-    display: flex;
-    align-items: center;
-    padding-top: 1rem;
-  }
-
-  h2 {
-    margin: 0;
-    transition: opacity 100ms ease;
-  }
-
-  .date-published {
-    color: ${colors.textLight};
-  }
-
   p {
     color: ${colors.textLight};
     margin: 5px 0 0;
@@ -85,31 +70,46 @@ const SearchResultWrapper = styled.div`
   }
 `;
 
+const SearchResultHeader = styled.div`
+  display: flex;
+  align-items: center;
+  padding-top: 1rem;
+
+  h2 {
+    margin: 0;
+    transition: opacity 100ms ease;
+  }
+
+  .date-published {
+    color: ${colors.textLight};
+  }
+`;
+
 const pagesContaining = term => x =>
   x.node.frontmatter.title.toLowerCase().includes(term.toLowerCase()) ||
   x.node.excerpt.toLowerCase().includes(term.toLowerCase()) ||
   !term;
 
 const SearchResults = ({term, pages}) => (
-  <div>
+  <React.Fragment>
     {pages
       .filter(pagesContaining(term))
       .map(page => (
         <SearchResultWrapper key={page.node.id}>
           <Link to={page.node.fields.slug}>
-            <div>
+            <SearchResultHeader>
               <h2>{page.node.frontmatter.title}</h2>
               {page.node.frontmatter.type === `article` && <span className="dot-separator" />}
               {page.node.frontmatter.type === `article` && (
                 <span className="date-published">{page.node.frontmatter.date}</span>
               )}
-            </div>
+            </SearchResultHeader>
             <p>{page.node.excerpt}</p>
           </Link>
         </SearchResultWrapper>
       ))
       .slice(0, 15)}
-  </div>
+  </React.Fragment>
 );
 
 SearchResults.propTypes = {
@@ -125,6 +125,7 @@ class Search extends Component {
   static propTypes = {
     data: PropTypes.shape({
       allMarkdownRemark: PropTypes.object.isRequired,
+      site: PropTypes.object.isRequired,
     }).isRequired,
   };
 
@@ -149,10 +150,10 @@ class Search extends Component {
   };
 
   render() {
-    const {author, description, facebookAppId, title, twitterHandle, siteUrl} = useSiteMetadata();
+    const {author, description, facebookAppId, title, twitterHandle, siteUrl} = this.props.data.site.siteMetadata;
 
     return (
-      <div>
+      <React.Fragment>
         <TitleAndMetaTags
           author={author}
           description={description}
@@ -170,19 +171,21 @@ class Search extends Component {
         />
         <Header />
         <Navigation searchPage />
-        <Form>
-          <Input
-            type="text"
-            aria-label="Search"
-            onChange={this.searchHandler}
-            onKeyDown={this.handleEnter}
-            placeholder="Search..."
-            title="Type search term here"
-            autoFocus
-          />
-          <SearchResults term={this.state.term} pages={this.pages} />
-        </Form>
-      </div>
+        <Layout>
+          <Form>
+            <Input
+              type="text"
+              aria-label="Search"
+              onChange={this.searchHandler}
+              onKeyDown={this.handleEnter}
+              placeholder="Search..."
+              title="Type search term here"
+              autoFocus
+            />
+            <SearchResults term={this.state.term} pages={this.pages} />
+          </Form>
+        </Layout>
+      </React.Fragment>
     );
   }
 }
@@ -191,6 +194,17 @@ export default Search;
 
 export const pageQuery = graphql`
   query SearchQuery {
+    site {
+      siteMetadata {
+        author
+        description
+        facebookAppId
+        title
+        twitterHandle
+        siteUrl
+        email
+      }
+    }
     allMarkdownRemark(
       limit: 1000
       filter: {frontmatter: {draft: {ne: true}}}

diff --git a/src/templates/post.jsx b/src/templates/post.jsx
@@ -12,6 +12,7 @@ import {colors, linkStyle, sizes} from '../css/variables';
 import {fadeIn, moveUp} from '../css/animations';
 import PostHeader from '../components/PostHeader';
 import {useSiteMetadata} from '../utils/useSiteMetadata';
+import Layout from '../components/Layout';
 
 const PostContainer = styled.article`
   margin: ${sizes.small} auto;
@@ -55,7 +56,7 @@ const Post = ({data, pathContext}) => {
   const nextTitle = next ? pathContext.next.frontmatter.title : null;
 
   return (
-    <div>
+    <React.Fragment>
       <TitleAndMetaTags
         author={author}
         date={post.frontmatter.date}
@@ -76,24 +77,26 @@ const Post = ({data, pathContext}) => {
       />
       <Header />
       <Navigation previous={prev} next={next} />
-      <PostContainer>
-        <PostHeader
-          title={post.frontmatter.title}
-          type={post.frontmatter.type}
-          date={post.frontmatter.date}
-          dateModified={post.frontmatter.dateModified ? post.frontmatter.dateModified : null}
-          timeToRead={post.timeToRead ? post.timeToRead : null}
-          role={post.frontmatter.role ? post.frontmatter.role : null}
-        />
-        <PostContent dangerouslySetInnerHTML={{__html: post.html}} />
-        <PostFooter
-          nextTitle={nextTitle}
-          next={next}
-          issueUrl={issueUrl}
-          githubUrl={post.fileAbsolutePath.split(`/src/`)[1]}
-        />
-      </PostContainer>
-    </div>
+      <Layout>
+        <PostContainer>
+          <PostHeader
+            title={post.frontmatter.title}
+            type={post.frontmatter.type}
+            date={post.frontmatter.date}
+            dateModified={post.frontmatter.dateModified ? post.frontmatter.dateModified : null}
+            timeToRead={post.timeToRead ? post.timeToRead : null}
+            role={post.frontmatter.role ? post.frontmatter.role : null}
+          />
+          <PostContent dangerouslySetInnerHTML={{__html: post.html}} />
+          <PostFooter
+            nextTitle={nextTitle}
+            next={next}
+            issueUrl={issueUrl}
+            githubUrl={post.fileAbsolutePath.split(`/src/`)[1]}
+          />
+        </PostContainer>
+      </Layout>
+    </React.Fragment>
   );
 };