From 11987e3e633fc1959e0dbe5ef6bc12b56f01bcb3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 11 Nov 2018 02:26:27 +0100 Subject: [PATCH 1/2] 404 page --- package.json | 1 + src/pages/404.js | 11 ----- src/pages/404.jsx | 75 +++++++++++++++++++++++++++++++ src/pages/404.module.scss | 27 +++++++++++ src/pages/{index.js => index.jsx} | 0 5 files changed, 103 insertions(+), 11 deletions(-) delete mode 100755 src/pages/404.js create mode 100755 src/pages/404.jsx create mode 100644 src/pages/404.module.scss rename src/pages/{index.js => index.jsx} (100%) diff --git a/package.json b/package.json index f0674565..86bf2ff4 100755 --- a/package.json +++ b/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", diff --git a/src/pages/404.js b/src/pages/404.js deleted file mode 100755 index 49f7e668..00000000 --- a/src/pages/404.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import Layout from '../components/Layout' - -const NotFoundPage = () => ( - -

NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

- -) - -export default NotFoundPage diff --git a/src/pages/404.jsx b/src/pages/404.jsx new file mode 100755 index 00000000..fae665c6 --- /dev/null +++ b/src/pages/404.jsx @@ -0,0 +1,75 @@ +// +// 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 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 ( + + +
+

Page not found.

+

+ You just hit a route that doesn't exist... the + sadness. Check your url,{' '} + go back to the homepage, or + check out some {tag} gifs, entirely your + choice. +

+ +
+ + + ) + } +} diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss new file mode 100644 index 00000000..b4a80883 --- /dev/null +++ b/src/pages/404.module.scss @@ -0,0 +1,27 @@ +@import 'variables'; + +.content { + max-width: 33rem; + margin: auto; + text-align: center; + + video { + 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; + } +} diff --git a/src/pages/index.js b/src/pages/index.jsx similarity index 100% rename from src/pages/index.js rename to src/pages/index.jsx From 81395e5fd1bf00d98c36106b55d523daa76bc0a7 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 11 Nov 2018 02:32:13 +0100 Subject: [PATCH 2/2] meta title --- src/pages/404.jsx | 54 +++++++++++++++++++++------------------ src/pages/404.module.scss | 1 + 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/pages/404.jsx b/src/pages/404.jsx index fae665c6..d6f3b96b 100755 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -6,6 +6,7 @@ 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' @@ -43,33 +44,36 @@ export default class NotFoundPage extends Component { render() { return ( - - -
-

Page not found.

-

- You just hit a route that doesn't exist... the - sadness. Check your url,{' '} - go back to the homepage, or - check out some {tag} gifs, entirely your - choice. -

+ <> + + + +
+

Page not found.

+

+ You just hit a route that doesn't exist... + the sadness. Check your url,{' '} + go back to the homepage, + or check out some {tag} gifs, entirely + your choice. +

-
- - +
+ +
+
+ + + ) } } diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss index b4a80883..99e69bb4 100644 --- a/src/pages/404.module.scss +++ b/src/pages/404.module.scss @@ -6,6 +6,7 @@ text-align: center; video { + margin-top: $spacer; margin-bottom: $spacer; display: block; width: auto;