more Pure Components

src/components/atoms/Typekit.jsx

@@ -34,7 +34,6 @@ const Typekit = () => (
       return (
         typekitID && (
           <Helmet>
-            <link rel="dns-prefetch" href="https://use.typekit.net/" />
             <link rel="dns-prefetch" href="https://p.typekit.net/" />
 
             {TypekitScript(typekitID)}

src/components/molecules/LogoUnit.module.scss

@@ -51,7 +51,6 @@
     transform-origin: top center;
     transform-box: border-box;
 
-    // stylelint-disable no-descending-specificity
     .logounit__title,
     .logounit__description {
         color: $text-color-light;
@@ -60,7 +59,6 @@
             color: $text-color-light--dark;
         }
     }
-    // stylelint-enable no-descending-specificity
 
     .logounit__logo {
         margin-bottom: $spacer / 3;

src/components/molecules/Networks.jsx

@@ -27,21 +27,23 @@ const query = graphql`
   }
 `
 
-const NetworkIcon = props => {
-  switch (props.title) {
+class NetworkIcon extends PureComponent {
+  render() {
+    switch (this.props.title) {
       case 'Email':
-      return <Email {...props} />
+        return <Email {...this.props} />
       case 'Blog':
-      return <Blog {...props} />
+        return <Blog {...this.props} />
       case 'Twitter':
-      return <Twitter {...props} />
+        return <Twitter {...this.props} />
       case 'GitHub':
-      return <GitHub {...props} />
+        return <GitHub {...this.props} />
       case 'Dribbble':
-      return <Dribbble {...props} />
+        return <Dribbble {...this.props} />
       default:
         return null
     }
+  }
 }
 
 const Animation = posed.aside(moveInTop)

src/components/molecules/ProjectLinks.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../atoms/Button'
@@ -50,14 +50,20 @@ const LinkIcon = ({ title, type, ...props }) => {
   }
 }
 
-const ProjectLinks = ({ links }) => (
+export default class ProjectLinks extends PureComponent {
+  static propTypes = {
+    links: PropTypes.array
+  }
+
+  render() {
+    return (
       <div className={styles.projectLinks}>
         <h3 className={styles.title}>
           Links <span>Learn more on the interwebz.</span>
         </h3>
 
         <ul>
-      {links.map(link => {
+          {this.props.links.map(link => {
             const { title, url, type } = link
 
             return (
@@ -71,10 +77,6 @@ const ProjectLinks = ({ links }) => (
           })}
         </ul>
       </div>
-)
-
-ProjectLinks.propTypes = {
-  links: PropTypes.array
+    )
+  }
 }
-
-export default ProjectLinks

src/components/molecules/ProjectNav.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql, StaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
@@ -24,7 +24,11 @@ const query = graphql`
   }
 `
 
-const ProjectLink = ({ node }) => (
+class ProjectLink extends PureComponent {
+  render() {
+    const { node } = this.props
+
+    return (
       <Link className={styles.link} to={node.slug}>
         <Img
           className={styles.image}
@@ -33,9 +37,11 @@ const ProjectLink = ({ node }) => (
         />
         <h1 className={styles.title}>{node.title}</h1>
       </Link>
-)
+    )
+  }
+}
 
-export default class ProjectNav extends Component {
+export default class ProjectNav extends PureComponent {
   state = {
     scrolledToCurrent: false
   }

src/components/organisms/Footer.jsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../molecules/LogoUnit'
 import Networks from '../molecules/Networks'
@@ -23,9 +22,15 @@ const query = graphql`
   }
 `
 
-const FooterMarkup = ({ meta, pkg, year }) => (
+export default class Footer extends PureComponent {
+  state = { year: new Date().getFullYear() }
+
+  FooterMarkup = ({ meta, pkg, year }) => (
     <footer className={styles.footer}>
+      <Link to={'/'}>
         <LogoUnit minimal />
+      </Link>
+
       <Networks minimal />
 
       <p className={styles.footer__actions}>
@@ -39,16 +44,7 @@ const FooterMarkup = ({ meta, pkg, year }) => (
         </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 (
@@ -58,7 +54,9 @@ export default class Footer extends PureComponent {
           const pkg = data.portfolioJson
           const meta = data.dataYaml
 
-          return <FooterMarkup year={this.state.year} pkg={pkg} meta={meta} />
+          return (
+            <this.FooterMarkup year={this.state.year} pkg={pkg} meta={meta} />
+          )
         }}
       />
     )

src/components/organisms/Header.jsx

@@ -18,6 +18,10 @@ const query = graphql`
 `
 
 export default class Header extends PureComponent {
+  static propTypes = {
+    minimal: PropTypes.bool
+  }
+
   state = { isMinimal: this.props.minimal }
 
   checkMinimal = () => {
@@ -61,7 +65,3 @@ export default class Header extends PureComponent {
     )
   }
 }
-
-Header.propTypes = {
-  minimal: PropTypes.bool
-}

src/pages/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import SEO from '../components/atoms/SEO'
@@ -6,7 +6,7 @@ import ProjectImage from '../components/molecules/ProjectImage'
 import { ReactComponent as Images } from '../images/images.svg'
 import styles from './index.module.scss'
 
-const getImageCount = (images, slug) => {
+function getImageCount(images, slug) {
   let array = []
   let slugWithoutSlashes = slug.replace(/\//g, '')
 
@@ -17,7 +17,14 @@ const getImageCount = (images, slug) => {
   return array.length
 }
 
-const Home = ({ data }) => {
+export default class Home extends PureComponent {
+  static propTypes = {
+    data: PropTypes.object,
+    location: PropTypes.object
+  }
+
+  render() {
+    const { data } = this.props
     const projects = data.allProjectsYaml.edges
     const images = data.projectImageFiles.edges
 
@@ -51,15 +58,9 @@ const Home = ({ data }) => {
         </div>
       </>
     )
+  }
 }
 
-Home.propTypes = {
-  data: PropTypes.object,
-  location: PropTypes.object
-}
-
-export default Home
-
 export const IndexQuery = graphql`
   query {
     allProjectsYaml {

src/templates/Project.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import FullWidth from '../components/atoms/FullWidth'
@@ -9,12 +9,23 @@ import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
 import styles from './Project.module.scss'
 
-const ProjectMeta = ({ links, techstack }) => (
+class ProjectMeta extends PureComponent {
+  static propTypes = {
+    links: PropTypes.array,
+    techstack: PropTypes.array
+  }
+
+  render() {
+    const { links, techstack } = this.props
+
+    return (
       <footer className={styles.meta}>
         {!!links && <ProjectLinks links={links} />}
         {!!techstack && <ProjectTechstack techstack={techstack} />}
       </footer>
-)
+    )
+  }
+}
 
 const ProjectImages = ({ projectImages, title }) => (
   <FullWidth>
@@ -26,12 +37,22 @@ const ProjectImages = ({ projectImages, title }) => (
   </FullWidth>
 )
 
-const Project = ({ data }) => {
-  const project = data.projectsYaml
-  const projectImages = data.projectImages.edges
+ProjectImages.propTypes = {
+  projectImages: PropTypes.array,
+  title: PropTypes.string
+}
+
+export default class Project extends PureComponent {
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired
+  }
+
+  render() {
+    const project = this.props.data.projectsYaml
+    const projectImages = this.props.data.projectImages.edges
+    const descriptionHtml = this.props.data.projectsYaml.fields.descriptionHtml
     const { title, links, techstack } = project
-  const description = data.projectsYaml.description
-  const descriptionWithLineBreaks = description.split('\n').join('\n\n')
 
     return (
       <>
@@ -52,31 +73,18 @@ const Project = ({ data }) => {
         <ProjectNav slug={project.slug} />
       </>
     )
+  }
 }
 
-ProjectMeta.propTypes = {
-  links: PropTypes.array,
-  techstack: PropTypes.array
-}
-
-ProjectImages.propTypes = {
-  projectImages: PropTypes.array,
-  title: PropTypes.string
-}
-
-Project.propTypes = {
-  data: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired
-}
-
-export default Project
-
 export const projectAndProjectsQuery = graphql`
   query($slug: String!) {
     projectsYaml(slug: { eq: $slug }) {
       title
       slug
       description
+      fields {
+        descriptionHtml
+      }
       links {
         title
         url