Merge pull request #10 from oceanprotocol/feature/404

404 page

package.json

@@ -30,6 +30,7 @@
     "gatsby-transformer-remark": "^2.1.12",
     "gatsby-transformer-sharp": "^2.1.8",
     "gatsby-transformer-yaml": "^2.1.5",
+    "giphy-js-sdk-core": "^1.0.6",
     "intersection-observer": "^0.5.1",
     "node-sass": "^4.10.0",
     "prismjs": "^1.15.0",

src/pages/404.js

@@ -1,11 +0,0 @@
-import React from 'react'
-import Layout from '../components/Layout'
-
-const NotFoundPage = () => (
-    <Layout>
-        <h1>NOT FOUND</h1>
-        <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
-)
-
-export default NotFoundPage

src/pages/404.jsx

@@ -0,0 +1,79 @@
+//
+// Thanks @kremalicious
+// https://github.com/kremalicious/portfolio/blob/master/src/pages/404.jsx
+//
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
+import giphyAPI from 'giphy-js-sdk-core'
+import Helmet from 'react-helmet'
+import Layout from '../components/Layout'
+import Content from '../components/Content'
+import styles from './404.module.scss'
+
+// Famous last words:
+// "It's just the 404 page so why not expose the dev API key"
+const giphyClient = giphyAPI('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
+const tag = 'ocean'
+
+export default class NotFoundPage extends Component {
+    state = { gif: '' }
+
+    static propTypes = {
+        location: PropTypes.object
+    }
+
+    componentDidMount() {
+        this.getRandomGif()
+    }
+
+    async getRandomGif() {
+        try {
+            let response = await giphyClient.random('gifs', { tag })
+            const gif = response.data.images.original.mp4
+            this.setState({ gif })
+        } catch (error) {
+            return error
+        }
+    }
+
+    handleClick = e => {
+        e.preventDefault()
+        this.getRandomGif()
+    }
+
+    render() {
+        return (
+            <>
+                <Helmet title="404 - Not Found" />
+                <Layout location={this.props.location}>
+                    <Content>
+                        <article className={styles.content}>
+                            <h1>Page not found.</h1>
+                            <p>
+                                You just hit a route that doesn&#39;t exist...
+                                the sadness. Check your url,{' '}
+                                <Link to={'/'}>go back to the homepage</Link>,
+                                or check out some <em>{tag}</em> gifs, entirely
+                                your choice.
+                            </p>
+
+                            <video
+                                className="gif"
+                                src={this.state.gif}
+                                autoPlay
+                                loop
+                            />
+
+                            <div>
+                                <button
+                                    onClick={this.handleClick}
+                                >{`Get another ${tag} gif`}</button>
+                            </div>
+                        </article>
+                    </Content>
+                </Layout>
+            </>
+        )
+    }
+}

src/pages/404.module.scss

@@ -0,0 +1,28 @@
+@import 'variables';
+
+.content {
+    max-width: 33rem;
+    margin: auto;
+    text-align: center;
+
+    video {
+        margin-top: $spacer;
+        margin-bottom: $spacer;
+        display: block;
+        width: auto;
+        max-height: 300px;
+        border: $page-frame solid $brand-black;
+        background: $brand-black;
+    }
+
+    button {
+        background: none;
+        border: 0;
+        box-shadow: none;
+        font-family: $font-family-button;
+        font-weight: $font-weight-bold;
+        font-size: $font-size-base;
+        color: $brand-pink;
+        cursor: pointer;
+    }
+}