404 page

package.json

@@ -28,6 +28,7 @@
     "gatsby-source-filesystem": "^1.5.35",
     "gatsby-transformer-sharp": "^1.6.24",
     "gatsby-transformer-yaml": "^1.5.16",
+    "giphy-js-sdk-core": "^1.0.3",
     "intersection-observer": "^0.5.0",
     "js-yaml": "^3.11.0",
     "react-helmet": "^5.2.0",

src/components/atoms/Content.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './Content.scss'
 
-const Content = ({ children }) => <div className="content">{children}</div>
+const Content = props => (
+  <div className="content" {...props}>
+    {props.children}
+  </div>
+)
 
 Content.propTypes = {
   children: PropTypes.node,

src/components/molecules/ProjectNav.jsx

@@ -21,11 +21,7 @@ const ProjectNav = ({ previous, next }) => (
         </Link>
       </div>
     )}
-    <Link
-      className="project__nav__index"
-      title="Back to projects"
-      to={'/'}
-    >
+    <Link className="project__nav__index" title="Back to projects" to={'/'}>
       <Index className="icon" />
     </Link>
     {next ? (
@@ -40,12 +36,12 @@ const ProjectNav = ({ previous, next }) => (
         </Link>
       </div>
     ) : (
-        <div className="project__nav__item project__nav__item--end">
-          <div className="project__nav__end">
-            <h3>This is the end</h3>
-            <p>I would rather not show you my websites from 1999.</p>
-          </div>
+      <div className="project__nav__item project__nav__item--end">
+        <div className="project__nav__end">
+          <h3>This is the end</h3>
+          <p>I would rather not show you my websites from 1999.</p>
         </div>
+      </div>
     )}
   </nav>
 )

src/pages/404.jsx

@@ -1,5 +1,62 @@
-import React from 'react'
+import React, { Component } from 'react'
+import Link from 'gatsby-link'
+import giphyAPI from 'giphy-js-sdk-core'
+import Content from '../components/atoms/Content'
+import './404.scss'
 
-const NotFound = () => <h1>Shenanigans, page not found.</h1>
+// Famous last words:
+// "It's just the 404 page so why not expose the dev API key"
+const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
+const tag = 'fail-cat'
+
+class NotFound extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { gif: '' }
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  componentDidMount() {
+    this.getRandomGif()
+  }
+
+  getRandomGif() {
+    giphyClient
+      .random('gifs', { tag })
+      .then(response => {
+        const gif = response.data.images.original.mp4
+        this.setState({ gif })
+      })
+      .catch(err => {
+        return err
+      })
+  }
+
+  handleClick(e) {
+    e.preventDefault()
+    this.getRandomGif()
+  }
+
+  render() {
+    return (
+      <Content className="content content--404">
+        <h1>Shenanigans, page not found.</h1>
+        <p>
+          You might want to check the url, or{' '}
+          <Link to={'/'}>go back to the homepage</Link>. Or just check out some fail gifs, entirely your choice.
+        </p>
+
+        <video className="gif" src={this.state.gif} autoPlay loop />
+
+        <div>
+          <a className="gif__action" href="#" onClick={this.handleClick}>
+            Show me another cat fail gif
+          </a>
+        </div>
+      </Content>
+    )
+  }
+}
 
 export default NotFound

src/pages/404.scss

@@ -0,0 +1,22 @@
+@import 'variables';
+
+.content--404 {
+    text-align: center;
+    height: 100%;
+
+    .gif {
+        display: inline-block;
+        width: auto;
+        height: 300px;
+        box-shadow: 0 3px 5px rgba($brand-main, .15), 0 5px 16px rgba($brand-main, .15);
+        margin-top: $spacer / 4;
+        margin-bottom: $spacer / 2;
+    }
+
+    .gif__action {
+        font-size: $font-size-small;
+        padding: $spacer / 6 $spacer / 2;
+        border: 1px solid $brand-cyan;
+        border-radius: 4px;
+    }
+}