m
/
portfolio
mirror of https://github.com/kremalicious/portfolio.git
1
0
Fork 0
Code Releases Activity

migrate to new Giphy SDK

This commit is contained in:
Matthias Kretschmann 2021-02-06 14:24:58 +01:00
parent 3f88de176a
commit 32bdbfffbc
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 128 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"@giphy/js-fetch-api": "^2.1.0",
"@loadable/component": "^5.14.1",
"axios": "^0.21.1",
"file-saver": "^2.0.5",
@ -28,7 +29,6 @@
"gatsby-transformer-json": "^2.10.0",
"gatsby-transformer-sharp": "^2.11.0",
"gatsby-transformer-yaml": "^2.10.0",
"giphy-js-sdk-core": "^1.0.6",
"intersection-observer": "^0.12.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
@ -1589,6 +1589,50 @@
"node": ">=8"
}
},
"node_modules/@giphy/js-fetch-api": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-2.1.0.tgz",
"integrity": "sha512-I2xXeJrzScawxev1rSk4+zMkVGmjrKiGcY90otXh2Hb3zBjnsZZGanHFJuF3dyUnE2wYgmWa812z2u86i/cpGw==",
"dependencies": {
"@giphy/js-types": "^3.0.0",
"@giphy/js-util": "^2.1.0",
"qs": "^6.9.4"
}
},
"node_modules/@giphy/js-fetch-api/node_modules/qs": {
"version": "6.9.6",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
"integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/@giphy/js-types": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-3.0.0.tgz",
"integrity": "sha512-o0e/0eyT7xxqU1el7rc5xL7K1ibWxiRSzqJcUDB9Zy/YGrAYx01YZNji84gNnR83w/rC3Zmw+TN3fm7WHA4dKA=="
},
"node_modules/@giphy/js-util": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-2.1.0.tgz",
"integrity": "sha512-MY75RHk4rhSYqZ7y87RB/xhDeIHrzHsaeJSfpi7HALs5TZp4HTkAoO8Hh0KeCwVDK/9dP52AMqbjDgrIYp7xDw==",
"dependencies": {
"@giphy/js-types": "^3.0.0",
"dompurify": "^2.2.2",
"uuid": "^8.3.0"
}
},
"node_modules/@giphy/js-util/node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/@graphql-tools/batch-execute": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
@ -4686,11 +4730,6 @@
"node": ">=0.10.0"
}
},
"node_modules/asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
},
"node_modules/asn1": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@ -9350,6 +9389,11 @@
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/dompurify": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz",
"integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ=="
},
"node_modules/domutils": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
@ -9606,25 +9650,6 @@
"node": ">= 0.8"
}
},
"node_modules/encoding": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
"dependencies": {
"iconv-lite": "^0.6.2"
}
},
"node_modules/encoding/node_modules/iconv-lite": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
"integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/end-of-stream": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@ -9887,11 +9912,6 @@
"es6-symbol": "^3.1.1"
}
},
"node_modules/es6-promise": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
},
"node_modules/es6-symbol": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@ -14373,17 +14393,6 @@
"omggif": "^1.0.10"
}
},
"node_modules/giphy-js-sdk-core": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/giphy-js-sdk-core/-/giphy-js-sdk-core-1.0.6.tgz",
"integrity": "sha512-WaOm2ZEMSyPzlM+XbiVSDPZiSNfNfCItIeLh9QNglqiSl5fqewjTl7TY9wJT41Q/ORyOekV5rJDe4EIkjLDLFw==",
"dependencies": {
"es6-promise": "^4.1.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.4",
"promise": "^7.1.1"
}
},
"node_modules/git-up": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.2.tgz",
@ -16910,32 +16919,6 @@
"node": ">=0.10.0"
}
},
"node_modules/isomorphic-fetch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
"dependencies": {
"node-fetch": "^1.0.1",
"whatwg-fetch": ">=0.10.0"
}
},
"node_modules/isomorphic-fetch/node_modules/is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/isomorphic-fetch/node_modules/node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
"dependencies": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
},
"node_modules/isomorphic-form-data": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-2.0.0.tgz",
@ -23517,14 +23500,6 @@
"node": ">=0.4.0"
}
},
"node_modules/promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dependencies": {
"asap": "~2.0.3"
}
},
"node_modules/promise-inflight": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@ -31674,11 +31649,6 @@
"iconv-lite": "0.4.24"
}
},
"node_modules/whatwg-fetch": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz",
"integrity": "sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A=="
},
"node_modules/whatwg-mimetype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
@ -33787,6 +33757,45 @@
}
}
},
"@giphy/js-fetch-api": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-2.1.0.tgz",
"integrity": "sha512-I2xXeJrzScawxev1rSk4+zMkVGmjrKiGcY90otXh2Hb3zBjnsZZGanHFJuF3dyUnE2wYgmWa812z2u86i/cpGw==",
"requires": {
"@giphy/js-types": "^3.0.0",
"@giphy/js-util": "^2.1.0",
"qs": "^6.9.4"
},
"dependencies": {
"qs": {
"version": "6.9.6",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
"integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
}
}
},
"@giphy/js-types": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-3.0.0.tgz",
"integrity": "sha512-o0e/0eyT7xxqU1el7rc5xL7K1ibWxiRSzqJcUDB9Zy/YGrAYx01YZNji84gNnR83w/rC3Zmw+TN3fm7WHA4dKA=="
},
"@giphy/js-util": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-2.1.0.tgz",
"integrity": "sha512-MY75RHk4rhSYqZ7y87RB/xhDeIHrzHsaeJSfpi7HALs5TZp4HTkAoO8Hh0KeCwVDK/9dP52AMqbjDgrIYp7xDw==",
"requires": {
"@giphy/js-types": "^3.0.0",
"dompurify": "^2.2.2",
"uuid": "^8.3.0"
},
"dependencies": {
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
}
}
},
"@graphql-tools/batch-execute": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-7.0.0.tgz",
@ -36200,11 +36209,6 @@
"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
"dev": true
},
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
},
"asn1": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@ -39906,6 +39910,11 @@
"domelementtype": "^2.1.0"
}
},
"dompurify": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz",
"integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ=="
},
"domutils": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
@ -40112,24 +40121,6 @@
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
},
"encoding": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
"requires": {
"iconv-lite": "^0.6.2"
},
"dependencies": {
"iconv-lite": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
"integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
"requires": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
}
}
}
},
"end-of-stream": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@ -40360,11 +40351,6 @@
"es6-symbol": "^3.1.1"
}
},
"es6-promise": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
},
"es6-symbol": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@ -43834,17 +43820,6 @@
"omggif": "^1.0.10"
}
},
"giphy-js-sdk-core": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/giphy-js-sdk-core/-/giphy-js-sdk-core-1.0.6.tgz",
"integrity": "sha512-WaOm2ZEMSyPzlM+XbiVSDPZiSNfNfCItIeLh9QNglqiSl5fqewjTl7TY9wJT41Q/ORyOekV5rJDe4EIkjLDLFw==",
"requires": {
"es6-promise": "^4.1.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.4",
"promise": "^7.1.1"
}
},
"git-up": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.2.tgz",
@ -45755,31 +45730,6 @@
"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA=="
},
"isomorphic-fetch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
"requires": {
"node-fetch": "^1.0.1",
"whatwg-fetch": ">=0.10.0"
},
"dependencies": {
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
},
"node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
}
}
},
"isomorphic-form-data": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-2.0.0.tgz",
@ -51091,14 +51041,6 @@
"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
},
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"requires": {
"asap": "~2.0.3"
}
},
"promise-inflight": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@ -57580,11 +57522,6 @@
"iconv-lite": "0.4.24"
}
},
"whatwg-fetch": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz",
"integrity": "sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A=="
},
"whatwg-mimetype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",

2
package.json
View File

@ -20,6 +20,7 @@
"new": "babel-node ./scripts/new.js"
},
"dependencies": {
"@giphy/js-fetch-api": "^2.1.0",
"@loadable/component": "^5.14.1",
"axios": "^0.21.1",
"file-saver": "^2.0.5",
@ -39,7 +40,6 @@
"gatsby-transformer-json": "^2.10.0",
"gatsby-transformer-sharp": "^2.11.0",
"gatsby-transformer-yaml": "^2.10.0",
"giphy-js-sdk-core": "^1.0.6",
"intersection-observer": "^0.12.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",

75
src/pages/404.jsx
View File

@ -1,64 +1,55 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import React, { useEffect, useState } from 'react'
import { Link } from 'gatsby'
import giphyAPI from 'giphy-js-sdk-core'
import { GiphyFetch } from '@giphy/js-fetch-api'
import SEO from '../components/atoms/SEO'
import Button from '../components/atoms/Button'
import styles from './404.module.css'
// 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'
const giphyClient = new GiphyFetch('LfXRwufRyt6PK414G2kKJBv3L8NdnxyR')
const tag = 'cat'
export default class NotFound extends Component {
state = { gif: '' }
export default function NotFound() {
const [gif, setGif] = useState('')
static propTypes = {
location: PropTypes.object
}
componentDidMount() {
this.getRandomGif()
}
async getRandomGif() {
async function getRandomGif() {
try {
let response = await giphyClient.random('gifs', { tag })
let response = await giphyClient.random({ tag })
const gif = response.data.images.original.mp4
this.setState({ gif })
setGif(gif)
} catch (error) {
return error
console.error(error.message)
}
}
handleClick = (e) => {
async function handleClick(e) {
e.preventDefault()
this.getRandomGif()
await getRandomGif()
}
render() {
return (
<>
<SEO />
useEffect(() => {
getRandomGif()
}, [])
<article className={styles.content}>
<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 {tag} gifs, entirely your choice.
</p>
return (
<>
<SEO />
<video className="gif" src={this.state.gif} autoPlay loop />
<article className={styles.content}>
<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{' '}
{tag} gifs, entirely your choice.
</p>
<div>
<Button
onClick={this.handleClick}
>{`Get another '${tag}' gif`}</Button>
</div>
</article>
</>
)
}
<video className="gif" src={gif} autoPlay loop />
<div>
<Button onClick={handleClick}>{`Get another '${tag}' gif`}</Button>
</div>
</article>
</>
)
}