Merge pull request #27 from kremalicious/feature/gatsby-updates

package updates, put StaticQuery queries into variables

.codeclimate.yml

@@ -1,5 +0,0 @@
-version: "2"
-checks:
-  method-lines:
-      config:
-        threshold: 50 # Gatsby's StaticQuery makes render functions pretty long

package.json

@@ -21,11 +21,11 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-rc.11",
+    "gatsby": "^2.0.0-rc.13",
     "gatsby-image": "^2.0.0-rc.1",
     "gatsby-plugin-manifest": "^2.0.2-rc.1",
     "gatsby-plugin-matomo": "^0.5.0",
-    "gatsby-plugin-offline": "^2.0.0-rc.3",
+    "gatsby-plugin-offline": "^2.0.0-rc.4",
     "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
     "gatsby-plugin-sass": "^2.0.0-rc.2",
     "gatsby-plugin-sharp": "^2.0.0-rc.3",

src/components/atoms/LogoUnit.jsx

@@ -4,11 +4,20 @@ import { StaticQuery, graphql } from 'gatsby'
 import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'
 
-class LogoUnit extends PureComponent {
+const query = graphql`
-  constructor(props) {
+  query {
-    super(props)
+    dataYaml {
+      title
+      tagline
+    }
+  }
+`
 
-    this.state = { minimal: false }
+class LogoUnit extends PureComponent {
+  state = { minimal: false }
+
+  static propTypes = {
+    minimal: PropTypes.bool
   }
 
   checkMinimal = () => {
@@ -28,14 +37,7 @@ class LogoUnit extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              title
-              tagline
-            }
-          }
-        `}
         render={data => {
           const meta = data.dataYaml
           const { minimal } = this.state
@@ -58,8 +60,4 @@ class LogoUnit extends PureComponent {
   }
 }
 
-LogoUnit.propTypes = {
-  minimal: PropTypes.bool
-}
-
 export default LogoUnit

src/components/atoms/SEO.jsx

@@ -15,35 +15,37 @@ function truncate(n, useWordBoundary) {
   )
 }
 
-const SEO = ({ project }) => (
+const query = graphql`
-  <StaticQuery
+  query {
-    query={graphql`
+    dataYaml {
-      query {
+      title
-        dataYaml {
+      tagline
-          title
+      description
-          tagline
+      url
-          description
+      email
-          url
+      img {
-          email
+        childImageSharp {
-          img {
+          resize(width: 980) {
-            childImageSharp {
+            src
-              resize(width: 980) {
-                src
-              }
-            }
           }
-          social {
-            Email
-            Blog
-            Twitter
-            GitHub
-            Dribbble
-          }
-          gpg
-          addressbook
         }
       }
-    `}
+      social {
+        Email
+        Blog
+        Twitter
+        GitHub
+        Dribbble
+      }
+      gpg
+      addressbook
+    }
+  }
+`
+
+const SEO = ({ project }) => (
+  <StaticQuery
+    query={query}
     render={data => {
       const meta = data.dataYaml
 

src/components/atoms/Typekit.js

@@ -17,15 +17,17 @@ const TypekitScript = typekitID => (
   </script>
 )
 
+const query = graphql`
+  query {
+    dataYaml {
+      typekitID
+    }
+  }
+`
+
 const Typekit = () => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        dataYaml {
-          typekitID
-        }
-      }
-    `}
     render={data => {
       const { typekitID } = data.dataYaml
 

src/components/atoms/Vcard.jsx

@@ -3,88 +3,43 @@ import { StaticQuery, graphql } from 'gatsby'
 import FileSaver from 'file-saver'
 import vCard from 'vcf'
 
-const Vcard = () => (
+const query = graphql`
-  <StaticQuery
+  query {
-    query={graphql`
+    dataYaml {
-      query {
+      title
-        dataYaml {
+      tagline
-          title
+      description
-          tagline
+      url
-          description
+      email
-          url
+      avatar {
-          email
+        childImageSharp {
-          avatar {
+          original: resize {
-            childImageSharp {
+            src
-              original: resize {
-                src
-              }
-            }
           }
-          social {
-            Email
-            Blog
-            Twitter
-            GitHub
-            Dribbble
-          }
-          gpg
-          addressbook
         }
       }
-    `}
+      social {
+        Email
+        Blog
+        Twitter
+        GitHub
+        Dribbble
+      }
+      gpg
+      addressbook
+    }
+  }
+`
+
+const Vcard = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const meta = data.dataYaml
 
-      const constructVcard = () => {
-        const contact = new vCard()
-        const photoSrc = meta.avatar.childImageSharp.original.src
-
-        // first, convert the avatar to base64,
-        // then construct all vCard elements
-        toDataURL(
-          photoSrc,
-          dataUrl => {
-            // stripping this data out of base64 string is required
-            // for vcard to actually display the image for whatever reason
-            const dataUrlCleaned = dataUrl
-              .split('data:image/jpeg;base64,')
-              .join('')
-            contact.set('photo', dataUrlCleaned, {
-              encoding: 'b',
-              type: 'JPEG'
-            })
-            contact.set('fn', meta.title)
-            contact.set('title', meta.tagline)
-            contact.set('email', meta.email)
-            contact.set('url', meta.url, { type: 'Portfolio' })
-            contact.add('url', meta.social.Blog, { type: 'Blog' })
-            contact.set('nickname', 'kremalicious')
-            contact.add('x-socialprofile', meta.social.Twitter, {
-              type: 'twitter'
-            })
-            contact.add('x-socialprofile', meta.social.GitHub, {
-              type: 'GitHub'
-            })
-
-            const vcard = contact.toString('3.0')
-
-            downloadVcard(vcard)
-          },
-          'image/jpeg'
-        )
-      }
-
-      // Construct the download from a blob of the just constructed vCard,
-      // and save it to user's file system
-      const downloadVcard = vcard => {
-        const name = meta.addressbook.split('/').join('')
-        const blob = new Blob([vcard], { type: 'text/x-vcard' })
-        FileSaver.saveAs(blob, name)
-      }
-
       const handleAddressbookClick = e => {
         e.preventDefault()
-        constructVcard()
+        constructVcard(meta)
       }
 
       return (
@@ -101,6 +56,43 @@ const Vcard = () => (
   />
 )
 
+// Construct the download from a blob of the just constructed vCard,
+// and save it to user's file system
+const downloadVcard = (vcard, meta) => {
+  const name = meta.addressbook.split('/').join('')
+  const blob = new Blob([vcard], { type: 'text/x-vcard' })
+  FileSaver.saveAs(blob, name)
+}
+
+const constructVcard = meta => {
+  const contact = new vCard()
+  const photoSrc = meta.avatar.childImageSharp.original.src
+
+  // first, convert the avatar to base64, then construct all vCard elements
+  toDataURL(
+    photoSrc,
+    dataUrl => {
+      // stripping this data out of base64 string is required
+      // for vcard to actually display the image for whatever reason
+      const dataUrlCleaned = dataUrl.split('data:image/jpeg;base64,').join('')
+      contact.set('photo', dataUrlCleaned, { encoding: 'b', type: 'JPEG' })
+      contact.set('fn', meta.title)
+      contact.set('title', meta.tagline)
+      contact.set('email', meta.email)
+      contact.set('url', meta.url, { type: 'Portfolio' })
+      contact.add('url', meta.social.Blog, { type: 'Blog' })
+      contact.set('nickname', 'kremalicious')
+      contact.add('x-socialprofile', meta.social.Twitter, { type: 'twitter' })
+      contact.add('x-socialprofile', meta.social.GitHub, { type: 'GitHub' })
+
+      const vcard = contact.toString('3.0')
+
+      downloadVcard(vcard, meta)
+    },
+    'image/jpeg'
+  )
+}
+
 // Helper function to create base64 string from avatar image
 // without the need to read image file from file system
 const toDataURL = (src, callback, outputFormat) => {

src/components/molecules/Availability.jsx

@@ -4,25 +4,25 @@ import { StaticQuery, graphql } from 'gatsby'
 import { MoveIn } from '../atoms/Animations'
 import styles from './Availability.module.scss'
 
-class Availability extends PureComponent {
+const query = graphql`
-  constructor(props) {
+  query {
-    super(props)
+    dataYaml {
+      availability {
+        status
+        available
+        unavailable
+      }
+    }
   }
+`
+
+export default class Availability extends PureComponent {
+  static propTypes = { hide: PropTypes.bool }
 
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              availability {
-                status
-                available
-                unavailable
-              }
-            }
-          }
-        `}
         render={data => {
           const { availability } = data.dataYaml
           const { status, available, unavailable } = availability
@@ -53,9 +53,3 @@ class Availability extends PureComponent {
     )
   }
 }
-
-Availability.propTypes = {
-  hide: PropTypes.bool
-}
-
-export default Availability

src/components/molecules/Head.jsx

@@ -4,16 +4,18 @@ import { StaticQuery, graphql } from 'gatsby'
 import SEO from '../atoms/SEO'
 import Typekit from '../atoms/Typekit'
 
+const query = graphql`
+  query {
+    dataYaml {
+      title
+      tagline
+    }
+  }
+`
+
 const Head = () => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        dataYaml {
-          title
-          tagline
-        }
-      }
-    `}
     render={data => {
       const { title, tagline } = data.dataYaml
 

src/components/molecules/Networks.jsx

@@ -12,6 +12,20 @@ import Dribbble from '../svg/Dribbble'
 import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'
 
+const query = graphql`
+  query {
+    dataYaml {
+      social {
+        Email
+        Blog
+        Twitter
+        GitHub
+        Dribbble
+      }
+    }
+  }
+`
+
 const NetworkIcon = props => {
   switch (props.title) {
     case 'Email':
@@ -29,13 +43,14 @@ const NetworkIcon = props => {
   }
 }
 
-class Network extends PureComponent {
+export default class Network extends PureComponent {
-  constructor(props) {
+  static propTypes = {
-    super(props)
+    minimal: PropTypes.bool,
+    hide: PropTypes.bool
+  }
 
-    this.state = {
+  state = {
-      classes: styles.networks
+    classes: styles.networks
-    }
   }
 
   componentDidMount() {
@@ -57,19 +72,7 @@ class Network extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              social {
-                Email
-                Blog
-                Twitter
-                GitHub
-                Dribbble
-              }
-            }
-          }
-        `}
         render={data => {
           const meta = data.dataYaml
 
@@ -92,10 +95,3 @@ class Network extends PureComponent {
     )
   }
 }
-
-Network.propTypes = {
-  minimal: PropTypes.bool,
-  hide: PropTypes.bool
-}
-
-export default Network

src/components/molecules/ProjectNav.jsx

@@ -5,6 +5,26 @@ import Img from 'gatsby-image'
 import FullWidth from '../atoms/FullWidth'
 import styles from './ProjectNav.module.scss'
 
+const query = graphql`
+  query {
+    allProjectsYaml {
+      edges {
+        node {
+          title
+          slug
+          img {
+            childImageSharp {
+              fluid(maxWidth: 500, quality: 85) {
+                ...GatsbyImageSharpFluid_noBase64
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 const ProjectLink = ({ node }) => (
   <Link className={styles.link} to={node.slug}>
     <Img
@@ -16,15 +36,9 @@ const ProjectLink = ({ node }) => (
   </Link>
 )
 
-class ProjectNav extends Component {
+export default class ProjectNav extends Component {
-  constructor(props) {
+  state = {
-    super(props)
+    scrolledToCurrent: false
-
-    this.state = {
-      scrolledToCurrent: false
-    }
-
-    this.scrollToCurrent = this.scrollToCurrent.bind(this)
   }
 
   componentDidMount() {
@@ -54,25 +68,7 @@ class ProjectNav extends Component {
 
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            allProjectsYaml {
-              edges {
-                node {
-                  title
-                  slug
-                  img {
-                    childImageSharp {
-                      fluid(maxWidth: 500, quality: 85) {
-                        ...GatsbyImageSharpFluid_noBase64
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        `}
         render={data => {
           const projects = data.allProjectsYaml.edges
 
@@ -111,5 +107,3 @@ ProjectLink.propTypes = {
 ProjectNav.propTypes = {
   slug: PropTypes.string
 }
-
-export default ProjectNav

src/components/molecules/ThemeSwitch.jsx

@@ -5,20 +5,20 @@ import Day from '../svg/Day'
 import Night from '../svg/Night'
 import styles from './ThemeSwitch.module.scss'
 
-const ThemeToggle = props => (
+const ThemeToggle = ({ dark }) => (
   <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
-    <Day className={props.dark ? null : 'active'} />
+    <Day className={dark ? null : 'active'} />
     <span className={styles.checkboxFake} />
-    <Night className={props.dark ? 'active' : null} />
+    <Night className={dark ? 'active' : null} />
   </span>
 )
 
-class ThemeSwitch extends PureComponent {
+ThemeToggle.propTypes = {
-  constructor(props) {
+  dark: PropTypes.bool
-    super(props)
+}
 
-    this.state = { dark: null }
+export default class ThemeSwitch extends PureComponent {
-  }
+  state = { dark: null }
 
   isDark = () => this.state.dark === true
 
@@ -78,9 +78,3 @@ class ThemeSwitch extends PureComponent {
     )
   }
 }
-
-ThemeToggle.propTypes = {
-  dark: PropTypes.bool
-}
-
-export default ThemeSwitch

src/components/organisms/Footer.jsx

@@ -1,62 +1,66 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../atoms/LogoUnit'
 import Networks from '../molecules/Networks'
 import styles from './Footer.module.scss'
 
-class Footer extends PureComponent {
+const query = graphql`
-  constructor(props) {
+  query {
-    super(props)
+    # the package.json file
+    portfolioJson {
+      name
+      homepage
+      repository
+      bugs
+    }
 
-    this.state = { year: new Date().getFullYear() }
+    dataYaml {
+      title
+      gpg
+    }
   }
+`
+
+const FooterMarkup = ({ meta, pkg, year }) => (
+  <footer className={styles.footer}>
+    <LogoUnit minimal />
+    <Networks minimal />
+
+    <p className={styles.footer__actions}>
+      <Vcard />
+      <a href={meta.gpg}>PGP/GPG key</a>
+      <a href={pkg.bugs}>Found a bug?</a>
+    </p>
+    <p className={styles.footer__copyright}>
+      <small>
+        &copy; {year} {meta.title} &mdash; All Rights Reserved
+      </small>
+    </p>
+  </footer>
+)
+
+FooterMarkup.propTypes = {
+  meta: PropTypes.object,
+  pkg: PropTypes.object,
+  year: PropTypes.number
+}
+
+export default class Footer extends PureComponent {
+  state = { year: new Date().getFullYear() }
 
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            # the package.json file
-            portfolioJson {
-              name
-              homepage
-              repository
-              bugs
-            }
-
-            dataYaml {
-              title
-              gpg
-            }
-          }
-        `}
         render={data => {
           const pkg = data.portfolioJson
           const meta = data.dataYaml
 
-          return (
+          return <FooterMarkup year={this.state.year} pkg={pkg} meta={meta} />
-            <footer className={styles.footer}>
-              <LogoUnit minimal />
-              <Networks minimal />
-
-              <p className={styles.footer__actions}>
-                <Vcard />
-                <a href={meta.gpg}>PGP/GPG key</a>
-                <a href={pkg.bugs}>Found a bug?</a>
-              </p>
-              <p className={styles.footer__copyright}>
-                <small>
-                  &copy; {this.state.year} {meta.title} &mdash; All Rights
-                  Reserved
-                </small>
-              </p>
-            </footer>
-          )
         }}
       />
     )
   }
 }
-
-export default Footer

src/components/organisms/Header.jsx

@@ -7,12 +7,18 @@ import ThemeSwitch from '../molecules/ThemeSwitch'
 import LogoUnit from '../atoms/LogoUnit'
 import styles from './Header.module.scss'
 
-class Header extends PureComponent {
+const query = graphql`
-  constructor(props) {
+  query {
-    super(props)
+    dataYaml {
-
+      availability {
-    this.state = { minimal: false }
+        status
+      }
+    }
   }
+`
+
+export default class Header extends PureComponent {
+  state = { minimal: false }
 
   checkMinimal = () => {
     const { isHomepage } = this.props
@@ -34,15 +40,7 @@ class Header extends PureComponent {
 
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              availability {
-                status
-              }
-            }
-          }
-        `}
         render={data => {
           const meta = data.dataYaml
 
@@ -68,5 +66,3 @@ class Header extends PureComponent {
 Header.propTypes = {
   isHomepage: PropTypes.bool
 }
-
-export default Header

src/pages/404.jsx

@@ -12,12 +12,11 @@ import './404.scss'
 const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
 const tag = 'fail-cat'
 
-class NotFound extends Component {
+export default class NotFound extends Component {
-  constructor(props) {
+  state = { gif: '' }
-    super(props)
-    this.state = { gif: '' }
 
-    this.handleClick = this.handleClick.bind(this)
+  static propTypes = {
+    location: PropTypes.object
   }
 
   componentDidMount() {
@@ -36,7 +35,7 @@ class NotFound extends Component {
       })
   }
 
-  handleClick(e) {
+  handleClick = e => {
     e.preventDefault()
     this.getRandomGif()
   }
@@ -64,9 +63,3 @@ class NotFound extends Component {
     )
   }
 }
-
-NotFound.propTypes = {
-  location: PropTypes.object
-}
-
-export default NotFound