queries refactoring

2024-12-22 17:23:22 +01:00 · 2018-08-26 21:28:06 +02:00 · 2018-08-26 21:28:06 +02:00 · 6bbf35b32e
commit 6bbf35b32e
parent 409a239104
10 changed files with 330 additions and 280 deletions
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@ -1,71 +1,22 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 import Head from './molecules/Head'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'

 const Layout = ({ children, location }) => {
+  const isHomepage = location.pathname === '/'
+
  return (
-    <StaticQuery
-      query={graphql`
-        query {
-          # the data/meta.yml file
-          dataYaml {
-            title
-            tagline
-            description
-            url
-            email
-            avatar {
-              childImageSharp {
-                original: resize {
-                  src
-                }
-                small: resize(width: 256) {
-                  src
-                }
-              }
-            }
-            img {
-              childImageSharp {
-                resize(width: 980) {
-                  src
-                }
-              }
-            }
-            social {
-              Email
-              Blog
-              Twitter
-              GitHub
-              Dribbble
-            }
-            availability {
-              status
-            }
-            gpg
-            addressbook
-          }
-        }
-      `}
-      render={data => {
-        const meta = data.dataYaml
-        const isHomepage = location.pathname === '/'
+    <Fragment>
+      <Head />
+      <Header isHomepage={isHomepage} />

-        return (
-          <Fragment>
-            <Head meta={meta} />
-            <Header meta={meta} isHomepage={isHomepage} />
+      <main className={styles.screen}>{children}</main>

-            <main className={styles.screen}>{children}</main>
-
-            <Footer meta={meta} />
-          </Fragment>
-        )
-      }}
-    />
+      <Footer />
+    </Fragment>
  )
 }

--- a/src/components/atoms/LogoUnit.jsx
+++ b/src/components/atoms/LogoUnit.jsx
@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
 import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'

@ -25,23 +26,39 @@ class LogoUnit extends PureComponent {
  }

  render() {
-    const { meta } = this.props
-    const { minimal } = this.state
-
    return (
-      <div className={minimal ? styles.minimal : styles.logounit}>
-        <Logo className={styles.logounit__logo} />
-        <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
-        <p className={styles.logounit__description}>
-          <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
-        </p>
-      </div>
+      <StaticQuery
+        query={graphql`
+          query {
+            dataYaml {
+              title
+              tagline
+            }
+          }
+        `}
+        render={data => {
+          const meta = data.dataYaml
+          const { minimal } = this.state
+
+          return (
+            <div className={minimal ? styles.minimal : styles.logounit}>
+              <Logo className={styles.logounit__logo} />
+              <h1 className={styles.logounit__title}>
+                {meta.title.toLowerCase()}
+              </h1>
+              <p className={styles.logounit__description}>
+                <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
+                <span>{' }'}</span>
+              </p>
+            </div>
+          )
+        }}
+      />
    )
  }
 }

 LogoUnit.propTypes = {
-  meta: PropTypes.object.isRequired,
  minimal: PropTypes.bool
 }

--- a/src/components/atoms/ProjectImage.jsx
+++ b/src/components/atoms/ProjectImage.jsx
@ -4,13 +4,13 @@ import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import styles from './ProjectImage.module.scss'

-const ProjectImage = props => (
+const ProjectImage = ({ fluid, alt }) => (
  <Img
    className={styles.project__image}
    outerWrapperClassName={styles.project__imagewrap}
    backgroundColor="#6b7f88"
-    fluid={props.fluid}
-    alt={props.alt}
+    fluid={fluid}
+    alt={alt}
  />
 )

--- a/src/components/atoms/SEO.jsx
+++ b/src/components/atoms/SEO.jsx
@ -1,6 +1,7 @@
 import React from 'react'
 import Helmet from 'react-helmet'
 import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'

 function truncate(n, useWordBoundary) {
  if (this.length <= n) {
@ -14,49 +15,80 @@ function truncate(n, useWordBoundary) {
  )
 }

-const SEO = ({ project, meta }) => {
-  const title = project.title ? project.title : meta.title
-  const description = project.description
-    ? truncate.apply(project.description, [320, true])
-    : truncate.apply(meta.description, [320, true])
-  const image = project.img
-    ? project.img.childImageSharp.twitterImage.src
-    : meta.img.childImageSharp.resize.src
-  const url = project.slug ? `${meta.url}${project.slug}` : meta.url
+const SEO = ({ project }) => (
+  <StaticQuery
+    query={graphql`
+      query {
+        dataYaml {
+          title
+          tagline
+          description
+          url
+          email
+          img {
+            childImageSharp {
+              resize(width: 980) {
+                src
+              }
+            }
+          }
+          social {
+            Email
+            Blog
+            Twitter
+            GitHub
+            Dribbble
+          }
+          gpg
+          addressbook
+        }
+      }
+    `}
+    render={data => {
+      const meta = data.dataYaml

-  return (
-    <Helmet>
-      <html lang="en" />
+      const title = project.title ? project.title : meta.title
+      const description = project.description
+        ? truncate.apply(project.description, [320, true])
+        : truncate.apply(meta.description, [320, true])
+      const image = project.img
+        ? project.img.childImageSharp.twitterImage.src
+        : meta.img.childImageSharp.resize.src
+      const url = project.slug ? `${meta.url}${project.slug}` : meta.url

-      {/* General tags */}
-      <meta name="description" content={description} />
-      <meta name="image" content={`${meta.url}${image}`} />
-      <link rel="canonical" href={url} />
+      return (
+        <Helmet>
+          <html lang="en" />

-      {/* OpenGraph tags */}
-      <meta property="og:url" content={url} />
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={description} />
-      <meta property="og:image" content={`${meta.url}${image}`} />
+          {/* General tags */}
+          <meta name="description" content={description} />
+          <meta name="image" content={`${meta.url}${image}`} />
+          <link rel="canonical" href={url} />

-      {/* Twitter Card tags */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:creator" content={meta.social.Twitter} />
-      <meta name="twitter:title" content={title} />
-      <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={`${meta.url}${image}`} />
-    </Helmet>
-  )
-}
+          {/* OpenGraph tags */}
+          <meta property="og:url" content={url} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="og:image" content={`${meta.url}${image}`} />
+
+          {/* Twitter Card tags */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:creator" content={meta.social.Twitter} />
+          <meta name="twitter:title" content={title} />
+          <meta name="twitter:description" content={description} />
+          <meta name="twitter:image" content={`${meta.url}${image}`} />
+        </Helmet>
+      )
+    }}
+  />
+)

 SEO.propTypes = {
-  project: PropTypes.object,
-  meta: PropTypes.object
+  project: PropTypes.object
 }

 SEO.defaultProps = {
-  project: {},
-  meta: {}
+  project: {}
 }

 export default SEO
--- a/src/components/atoms/Vcard.jsx
+++ b/src/components/atoms/Vcard.jsx
@ -1,101 +1,132 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
 import FileSaver from 'file-saver'
 import vCard from 'vcf'

-class Vcard extends PureComponent {
-  constructor(props) {
-    super(props)
+const Vcard = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        dataYaml {
+          title
+          tagline
+          description
+          url
+          email
+          avatar {
+            childImageSharp {
+              original: resize {
+                src
+              }
+            }
+          }
+          social {
+            Email
+            Blog
+            Twitter
+            GitHub
+            Dribbble
+          }
+          gpg
+          addressbook
+        }
+      }
+    `}
+    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()
+      }
+
+      return (
+        <a
+          // href is kinda fake, only there for usability
+          // so user knows what to expect when hovering the link before clicking
+          href={meta.addressbook}
+          onClick={handleAddressbookClick}
+        >
+          Add to addressbook
+        </a>
+      )
+    }}
+  />
+)
+
+// Helper function to create base64 string from avatar image
+// without the need to read image file from file system
+const toDataURL = (src, callback, outputFormat) => {
+  const img = new Image()
+  img.crossOrigin = 'Anonymous'
+
+  img.onload = function() {
+    // yeah, we're gonna create a fake canvas to render the image
+    // and then create a base64 string from the rendered result
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    let dataURL
+
+    canvas.height = this.naturalHeight
+    canvas.width = this.naturalWidth
+    ctx.drawImage(this, 0, 0)
+    dataURL = canvas.toDataURL(outputFormat)
+    callback(dataURL)
  }

-  // Helper function to create base64 string from avatar image
-  // without the need to read image file from file system
-  toDataURL(src, callback, outputFormat) {
-    const img = new Image()
-    img.crossOrigin = 'Anonymous'
-
-    img.onload = function() {
-      // yeah, we're gonna create a fake canvas to render the image
-      // and then create a base64 string from the rendered result
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
-      let dataURL
-
-      canvas.height = this.naturalHeight
-      canvas.width = this.naturalWidth
-      ctx.drawImage(this, 0, 0)
-      dataURL = canvas.toDataURL(outputFormat)
-      callback(dataURL)
-    }
-
+  img.src = src
+  if (img.complete || img.complete === undefined) {
+    img.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
    img.src = src
-    if (img.complete || img.complete === undefined) {
-      img.src =
-        'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
-      img.src = src
-    }
  }
-
-  constructVcard() {
-    const meta = this.props.meta
-    const contact = new vCard()
-    const photoSrc = meta.avatar.childImageSharp.original.src
-
-    // first, convert the avatar to base64,
-    // then construct all vCard elements
-    this.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')
-
-        this.downloadVcard(vcard)
-      },
-      'image/jpeg'
-    )
-  }
-
-  // Construct the download from a blob of the just constructed vCard,
-  // and save it to user's file system
-  downloadVcard(vcard) {
-    const name = this.props.meta.addressbook.split('/').join('')
-    const blob = new Blob([vcard], { type: 'text/x-vcard' })
-    FileSaver.saveAs(blob, name)
-  }
-
-  handleAddressbookClick = e => {
-    e.preventDefault()
-    this.constructVcard()
-  }
-
-  render() {
-    return (
-      <a
-        // href is kinda fake, only there for usability
-        // so user knows what to expect when hovering the link before clicking
-        href={this.props.meta.addressbook}
-        onClick={this.handleAddressbookClick}
-      >
-        Add to addressbook
-      </a>
-    )
-  }
-}
-
-Vcard.propTypes = {
-  meta: PropTypes.object
 }

 export default Vcard
--- a/src/components/molecules/Head.jsx
+++ b/src/components/molecules/Head.jsx
@ -1,30 +1,41 @@
 import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
+import { StaticQuery, graphql } from 'gatsby'
 import SEO from '../atoms/SEO'
 import Typekit from '../atoms/Typekit'

-const Head = ({ meta }) => {
-  const { title, tagline } = meta
+const Head = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        dataYaml {
+          title
+          tagline
+        }
+      }
+    `}
+    render={data => {
+      const { title, tagline } = data.dataYaml

-  return (
-    <Fragment>
-      <Helmet
-        defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
-        titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
-      >
-        <meta name="apple-mobile-web-app-title" content={title.toLowerCase()} />
-      </Helmet>
+      return (
+        <Fragment>
+          <Helmet
+            defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
+            titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
+          >
+            <meta
+              name="apple-mobile-web-app-title"
+              content={title.toLowerCase()}
+            />
+          </Helmet>

-      <Typekit />
+          <Typekit />

-      <SEO meta={meta} />
-    </Fragment>
-  )
-}
-
-Head.propTypes = {
-  meta: PropTypes.object.isRequired
-}
+          <SEO />
+        </Fragment>
+      )
+    }}
+  />
+)

 export default Head
--- a/src/components/molecules/Networks.jsx
+++ b/src/components/molecules/Networks.jsx
@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
 import { FadeIn } from '../atoms/Animations'

 import Email from '../svg/Email'
@ -55,28 +56,44 @@ class Network extends PureComponent {

  render() {
    return (
-      !this.props.hide && (
-        <FadeIn>
-          <aside className={this.state.classes}>
-            {Object.keys(this.props.meta.social).map((key, i) => (
-              <a
-                className={styles.link}
-                href={this.props.meta.social[key]}
-                key={i}
-              >
-                <NetworkIcon title={key} className={icons.icon} />
-                <span className={styles.title}>{key}</span>
-              </a>
-            ))}
-          </aside>
-        </FadeIn>
-      )
+      <StaticQuery
+        query={graphql`
+          query {
+            dataYaml {
+              social {
+                Email
+                Blog
+                Twitter
+                GitHub
+                Dribbble
+              }
+            }
+          }
+        `}
+        render={data => {
+          const meta = data.dataYaml
+
+          return (
+            !this.props.hide && (
+              <FadeIn>
+                <aside className={this.state.classes}>
+                  {Object.keys(meta.social).map((key, i) => (
+                    <a className={styles.link} href={meta.social[key]} key={i}>
+                      <NetworkIcon title={key} className={icons.icon} />
+                      <span className={styles.title}>{key}</span>
+                    </a>
+                  ))}
+                </aside>
+              </FadeIn>
+            )
+          )
+        }}
+      />
    )
  }
 }

 Network.propTypes = {
-  meta: PropTypes.object,
  minimal: PropTypes.bool,
  hide: PropTypes.bool
 }
--- a/src/components/organisms/Footer.jsx
+++ b/src/components/organisms/Footer.jsx
@ -1,5 +1,4 @@
 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'
@ -14,8 +13,6 @@ class Footer extends PureComponent {
  }

  render() {
-    const meta = this.props.meta
-
    return (
      <StaticQuery
        query={graphql`
@ -27,18 +24,24 @@ class Footer extends PureComponent {
              repository
              bugs
            }
+
+            dataYaml {
+              title
+              gpg
+            }
          }
        `}
        render={data => {
          const pkg = data.portfolioJson
+          const meta = data.dataYaml

          return (
            <footer className={styles.footer}>
-              <LogoUnit meta={meta} minimal />
-              <Networks meta={meta} minimal />
+              <LogoUnit minimal />
+              <Networks minimal />

              <p className={styles.footer__actions}>
-                <Vcard meta={meta} />
+                <Vcard />
                <a href={meta.gpg}>PGP/GPG key</a>
                <a href={pkg.bugs}>Found a bug?</a>
              </p>
@ -56,9 +59,4 @@ class Footer extends PureComponent {
  }
 }

-Footer.propTypes = {
-  meta: PropTypes.object,
-  pkg: PropTypes.object
-}
-
 export default Footer
--- a/src/components/organisms/Header.jsx
+++ b/src/components/organisms/Header.jsx
@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
-import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
@ -29,28 +29,44 @@ class Header extends PureComponent {
  }

  render() {
-    const { isHomepage, meta } = this.props
+    const { isHomepage } = this.props
    const { minimal } = this.state

    return (
-      <header className={minimal ? styles.minimal : styles.header}>
-        <ThemeSwitch />
+      <StaticQuery
+        query={graphql`
+          query {
+            dataYaml {
+              availability {
+                status
+              }
+            }
+          }
+        `}
+        render={data => {
+          const meta = data.dataYaml

-        <Link className={styles.header__link} to={'/'}>
-          <LogoUnit meta={meta} minimal={!isHomepage} />
-        </Link>
+          return (
+            <header className={minimal ? styles.minimal : styles.header}>
+              <ThemeSwitch />

-        <Networks meta={meta} hide={!isHomepage} />
+              <Link className={styles.header__link} to={'/'}>
+                <LogoUnit minimal={!isHomepage} />
+              </Link>

-        <Availability hide={!isHomepage && !meta.availability.status} />
-      </header>
+              <Networks hide={!isHomepage} />
+
+              <Availability hide={!isHomepage && !meta.availability.status} />
+            </header>
+          )
+        }}
+      />
    )
  }
 }

 Header.propTypes = {
-  isHomepage: PropTypes.bool,
-  meta: PropTypes.object
+  isHomepage: PropTypes.bool
 }

 export default Header
--- a/src/templates/Project.jsx
+++ b/src/templates/Project.jsx
@ -32,7 +32,6 @@ const ProjectImages = ({ projectImages, title }) => (
 )

 const Project = ({ data, location }) => {
-  const meta = data.dataYaml
  const project = data.projectsYaml
  const projectImages = data.projectImages.edges
  const { title, links, techstack } = project
@ -43,7 +42,7 @@ const Project = ({ data, location }) => {
    <Layout location={location}>
      <Helmet title={title} />

-      <SEO project={project} meta={meta} />
+      <SEO project={project} />

      <article className={styles.project}>
        <Content>
@ -99,28 +98,6 @@ export const projectAndProjectsQuery = graphql`
      }
    }

-    # the data/meta.yml file
-    dataYaml {
-      title
-      tagline
-      description
-      url
-      social {
-        Email
-        Blog
-        Twitter
-        GitHub
-        Dribbble
-      }
-      img {
-        childImageSharp {
-          resize(width: 980) {
-            src
-          }
-        }
-      }
-    }
-
    projectImages: allImageSharp(
      filter: { fluid: { originalName: { regex: $slug } } }
      sort: { fields: [fluid___originalName], order: ASC }