From b315f5bbb071a56c7a3047db713ecad23df12ecf Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 11 Sep 2021 21:37:38 +0200 Subject: [PATCH] Migrate to Framer Motion (#656) * migrate to Framer Motion * animation tweaks * faster animations * handle reduced motion * handle SSR --- README.md | 2 +- gatsby-browser.js | 13 + gatsby-node.js | 41 +- package-lock.json | 625 +++++---------------- package.json | 2 +- scripts/github.js | 42 ++ src/components/Layout.jsx | 31 +- src/components/atoms/Transitions.js | 34 +- src/components/molecules/Availability.jsx | 16 +- src/components/molecules/LogoUnit.jsx | 10 +- src/components/molecules/Networks.jsx | 16 +- src/components/organisms/Header.module.css | 2 +- 12 files changed, 259 insertions(+), 575 deletions(-) create mode 100644 scripts/github.js diff --git a/README.md b/README.md index 049806c..ee0589a 100644 --- a/README.md +++ b/README.md @@ -98,7 +98,7 @@ If you want to know how, have a look at the respective component: ### 💫 Page transitions -Includes mechanism for transitioning between route changes with full page transitions defined with [react-pose](https://popmotion.io/pose/). Mechanism ~~stolen~~ inspired by [gatsby-universal](https://github.com/fabe/gatsby-universal). +Includes mechanism for transitioning between route changes with full page transitions defined with [Framer Motion](https://www.framer.com/motion/). If you want to know how, have a look at the respective components: diff --git a/gatsby-browser.js b/gatsby-browser.js index d0d3fdd..0559d3f 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -11,6 +11,19 @@ if (typeof window !== 'undefined' && !window.IntersectionObserver) { // Layout with Page Transitions export const wrapPageElement = wrapPageElementWithLayout +export const shouldUpdateScroll = ({ + routerProps: { location }, + getSavedScrollPosition +}) => { + if (location.action === 'PUSH') { + window.setTimeout(() => window.scrollTo(0, 0), 200) + } else { + const savedPosition = getSavedScrollPosition(location) + window.setTimeout(() => window.scrollTo(...(savedPosition || [0, 0])), 200) + } + return false +} + // Display a message when a service worker updates // https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates export const onServiceWorkerUpdateReady = () => { diff --git a/gatsby-node.js b/gatsby-node.js index 3b0e10b..d234b60 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -3,13 +3,13 @@ const remark = require('remark') const parse = require('remark-parse') const html = require('remark-html') -const axios = require('axios') const fs = require('fs') const yaml = require('js-yaml') const reposYaml = yaml.load(fs.readFileSync('./content/repos.yml', 'utf8')) const { performance } = require('perf_hooks') const chalk = require('chalk') const { execSync } = require('child_process') +const { getGithubRepos } = require('./scripts/github') function truncate(n, useWordBoundary) { if (this.length <= n) { @@ -30,45 +30,6 @@ execSync(`node ./scripts/fetch-matomo-js > static/matomo.js`, { stdio: 'inherit' }) -// -// Get GitHub repos -// -const gitHubConfig = { - headers: { - 'User-Agent': 'kremalicious/portfolio', - Authorization: `token ${process.env.GATSBY_GITHUB_TOKEN}` - } -} - -async function getGithubRepos(data) { - let repos = [] - let holder = {} - - for (let item of data) { - const user = item.split('/')[0] - const repoName = item.split('/')[1] - const repo = await axios.get( - `https://api.github.com/repos/${user}/${repoName}`, - gitHubConfig - ) - - holder.name = repo.data.name - holder.full_name = repo.data.full_name - holder.description = repo.data.description - holder.html_url = repo.data.html_url - holder.homepage = repo.data.homepage - holder.stargazers_count = repo.data.stargazers_count - holder.pushed_at = repo.data.pushed_at - repos.push(holder) - holder = {} - } - - // sort by pushed to, newest first - repos = repos.sort((a, b) => b.pushed_at.localeCompare(a.pushed_at)) - - return repos -} - // // Get GitHub repos once and store for later build stages // diff --git a/package-lock.json b/package-lock.json index 0f185c4..54666bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@giphy/js-fetch-api": "^4.1.2", "axios": "^0.21.4", "file-saver": "^2.0.5", + "framer-motion": "^4.1.17", "gatsby": "^3.13.0", "gatsby-plugin-image": "^1.13.0", "gatsby-plugin-manifest": "^3.13.0", @@ -32,7 +33,6 @@ "react-dom": "^17.0.2", "react-feather": "^2.0.9", "react-helmet": "^6.1.0", - "react-pose": "^4.0.10", "remark": "^13.0.0", "remark-breaks": "^2.0.2", "remark-html": "^13.0.2", @@ -1869,19 +1869,6 @@ "node": ">=4.0.0" } }, - "node_modules/@emotion/is-prop-valid": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", - "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", - "dependencies": { - "@emotion/memoize": "0.7.1" - } - }, - "node_modules/@emotion/memoize": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", - "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" - }, "node_modules/@endemolshinegroup/cosmiconfig-typescript-loader": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz", @@ -3380,23 +3367,6 @@ "integrity": "sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==", "dev": true }, - "node_modules/@popmotion/easing": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz", - "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw==" - }, - "node_modules/@popmotion/popcorn": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz", - "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==", - "dependencies": { - "@popmotion/easing": "^1.0.1", - "framesync": "^4.0.1", - "hey-listen": "^1.0.8", - "style-value-types": "^3.1.7", - "tslib": "^1.10.0" - } - }, "node_modules/@sideway/address": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz", @@ -3985,11 +3955,6 @@ "@types/node": "*" } }, - "node_modules/@types/invariant": { - "version": "2.2.35", - "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", - "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" - }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -10058,11 +10023,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/estree-walker": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", - "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==" - }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -11203,14 +11163,73 @@ "node": ">=0.10.0" } }, - "node_modules/framesync": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz", - "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==", + "node_modules/framer-motion": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", + "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", "dependencies": { - "hey-listen": "^1.0.5" + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.6", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0", + "react-dom": ">=16.8 || ^17.0.0" } }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, + "node_modules/framer-motion/node_modules/framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/framer-motion/node_modules/popmotion": { + "version": "9.3.6", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", + "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, + "node_modules/framer-motion/node_modules/style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, + "node_modules/framer-motion/node_modules/tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -19379,34 +19398,6 @@ "node": ">=4.0.0" } }, - "node_modules/popmotion": { - "version": "8.7.6", - "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-8.7.6.tgz", - "integrity": "sha512-gzU0mRAik8FIEOP4Nk5yqYptJIvHLoq/IRU+rANmKjDZ7tynAivYQ9cIJAxVaoS9h0zfXvN0cFBAg93ncmHHkA==", - "dependencies": { - "@popmotion/easing": "^1.0.1", - "@popmotion/popcorn": "^0.4.4", - "framesync": "^4.0.0", - "hey-listen": "^1.0.5", - "style-value-types": "^3.1.7", - "stylefire": "^7.0.1", - "tslib": "^1.10.0" - } - }, - "node_modules/popmotion-pose": { - "version": "3.4.11", - "resolved": "https://registry.npmjs.org/popmotion-pose/-/popmotion-pose-3.4.11.tgz", - "integrity": "sha512-KjaevePyC1+Q3ylIcBO3YMhCouE1a/3bvtBXThrwz44fw1yXCUQagPJGkGirXI/J1xF+w3Lx3bpkkgwArizpEQ==", - "dependencies": { - "@popmotion/easing": "^1.0.1", - "hey-listen": "^1.0.5", - "popmotion": "^8.7.1", - "pose-core": "^2.1.1", - "style-value-types": "^3.0.6", - "ts-essentials": "^1.0.3", - "tslib": "^1.10.0" - } - }, "node_modules/portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -19442,24 +19433,6 @@ "ms": "^2.1.1" } }, - "node_modules/pose-core": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/pose-core/-/pose-core-2.1.1.tgz", - "integrity": "sha512-fV1sDfu80debHmKerikypqGoORMEUHVwGh/BlWnqUSmmzQGYIg8neDrdwe66hFeRO+adr2qS4ZERSu/ZVjOiSQ==", - "dependencies": { - "@types/invariant": "^2.2.29", - "@types/node": "^10.0.5", - "hey-listen": "^1.0.5", - "rollup-plugin-typescript2": "^0.25.2", - "tslib": "^1.10.0", - "typescript": "^3.7.2" - } - }, - "node_modules/pose-core/node_modules/@types/node": { - "version": "10.17.60", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz", - "integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==" - }, "node_modules/posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -25283,21 +25256,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "node_modules/react-pose": { - "version": "4.0.10", - "resolved": "https://registry.npmjs.org/react-pose/-/react-pose-4.0.10.tgz", - "integrity": "sha512-OKc5oqKw+nL9FvIokxn8MmaAmkNsWv64hLX9xWWcMWXSgEo745hzYUqDn2viMJ97mf76oPy6Vc+BS4k6Kwj78g==", - "dependencies": { - "@emotion/is-prop-valid": "^0.7.3", - "hey-listen": "^1.0.5", - "popmotion-pose": "^3.4.10", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "react": "^16.3.2", - "react-dom": "^16.3.2" - } - }, "node_modules/react-refresh": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", @@ -25985,140 +25943,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/rollup-plugin-typescript2": { - "version": "0.25.3", - "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.25.3.tgz", - "integrity": "sha512-ADkSaidKBovJmf5VBnZBZe+WzaZwofuvYdzGAKTN/J4hN7QJCFYAq7IrH9caxlru6T5qhX41PNFS1S4HqhsGQg==", - "dependencies": { - "find-cache-dir": "^3.0.0", - "fs-extra": "8.1.0", - "resolve": "1.12.0", - "rollup-pluginutils": "2.8.1", - "tslib": "1.10.0" - }, - "peerDependencies": { - "rollup": ">=1.26.3", - "typescript": ">=2.4.0" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/find-cache-dir": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", - "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", - "dependencies": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/avajs/find-cache-dir?sponsor=1" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dependencies": { - "find-up": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/resolve": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", - "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==", - "dependencies": { - "path-parse": "^1.0.6" - } - }, - "node_modules/rollup-plugin-typescript2/node_modules/tslib": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", - "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" - }, - "node_modules/rollup-pluginutils": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz", - "integrity": "sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==", - "dependencies": { - "estree-walker": "^0.6.1" - } - }, "node_modules/run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -27793,27 +27617,6 @@ "inline-style-parser": "0.1.1" } }, - "node_modules/style-value-types": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.2.0.tgz", - "integrity": "sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==", - "dependencies": { - "hey-listen": "^1.0.8", - "tslib": "^1.10.0" - } - }, - "node_modules/stylefire": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz", - "integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==", - "dependencies": { - "@popmotion/popcorn": "^0.4.4", - "framesync": "^4.0.0", - "hey-listen": "^1.0.8", - "style-value-types": "^3.1.7", - "tslib": "^1.10.0" - } - }, "node_modules/stylehacks": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", @@ -29246,11 +29049,6 @@ "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz", "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==" }, - "node_modules/ts-essentials": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-1.0.4.tgz", - "integrity": "sha512-q3N1xS4vZpRouhYHDPwO0bDW3EZ6SK9CrrDHxi/D6BPReSjpVgWIOpLS2o0gSBZm+7q/wyKp6RVM1AeeW7uyfQ==" - }, "node_modules/ts-node": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz", @@ -29413,6 +29211,7 @@ "version": "3.9.10", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz", "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -33305,19 +33104,6 @@ "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", "dev": true }, - "@emotion/is-prop-valid": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", - "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", - "requires": { - "@emotion/memoize": "0.7.1" - } - }, - "@emotion/memoize": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", - "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" - }, "@endemolshinegroup/cosmiconfig-typescript-loader": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz", @@ -34501,23 +34287,6 @@ "integrity": "sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==", "dev": true }, - "@popmotion/easing": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz", - "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw==" - }, - "@popmotion/popcorn": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz", - "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==", - "requires": { - "@popmotion/easing": "^1.0.1", - "framesync": "^4.0.1", - "hey-listen": "^1.0.8", - "style-value-types": "^3.1.7", - "tslib": "^1.10.0" - } - }, "@sideway/address": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz", @@ -34958,11 +34727,6 @@ "@types/node": "*" } }, - "@types/invariant": { - "version": "2.2.35", - "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", - "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" - }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -39603,11 +39367,6 @@ "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-1.1.0.tgz", "integrity": "sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==" }, - "estree-walker": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", - "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==" - }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -40508,12 +40267,67 @@ "map-cache": "^0.2.2" } }, - "framesync": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz", - "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==", + "framer-motion": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", + "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", "requires": { - "hey-listen": "^1.0.5" + "@emotion/is-prop-valid": "^0.8.2", + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.6", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, + "framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "requires": { + "tslib": "^2.1.0" + } + }, + "popmotion": { + "version": "9.3.6", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", + "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", + "requires": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, + "style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } } }, "fresh": { @@ -46729,34 +46543,6 @@ "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==" }, - "popmotion": { - "version": "8.7.6", - "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-8.7.6.tgz", - "integrity": "sha512-gzU0mRAik8FIEOP4Nk5yqYptJIvHLoq/IRU+rANmKjDZ7tynAivYQ9cIJAxVaoS9h0zfXvN0cFBAg93ncmHHkA==", - "requires": { - "@popmotion/easing": "^1.0.1", - "@popmotion/popcorn": "^0.4.4", - "framesync": "^4.0.0", - "hey-listen": "^1.0.5", - "style-value-types": "^3.1.7", - "stylefire": "^7.0.1", - "tslib": "^1.10.0" - } - }, - "popmotion-pose": { - "version": "3.4.11", - "resolved": "https://registry.npmjs.org/popmotion-pose/-/popmotion-pose-3.4.11.tgz", - "integrity": "sha512-KjaevePyC1+Q3ylIcBO3YMhCouE1a/3bvtBXThrwz44fw1yXCUQagPJGkGirXI/J1xF+w3Lx3bpkkgwArizpEQ==", - "requires": { - "@popmotion/easing": "^1.0.1", - "hey-listen": "^1.0.5", - "popmotion": "^8.7.1", - "pose-core": "^2.1.1", - "style-value-types": "^3.0.6", - "ts-essentials": "^1.0.3", - "tslib": "^1.10.0" - } - }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -46791,26 +46577,6 @@ } } }, - "pose-core": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/pose-core/-/pose-core-2.1.1.tgz", - "integrity": "sha512-fV1sDfu80debHmKerikypqGoORMEUHVwGh/BlWnqUSmmzQGYIg8neDrdwe66hFeRO+adr2qS4ZERSu/ZVjOiSQ==", - "requires": { - "@types/invariant": "^2.2.29", - "@types/node": "^10.0.5", - "hey-listen": "^1.0.5", - "rollup-plugin-typescript2": "^0.25.2", - "tslib": "^1.10.0", - "typescript": "^3.7.2" - }, - "dependencies": { - "@types/node": { - "version": "10.17.60", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz", - "integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==" - } - } - }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -51262,17 +51028,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "react-pose": { - "version": "4.0.10", - "resolved": "https://registry.npmjs.org/react-pose/-/react-pose-4.0.10.tgz", - "integrity": "sha512-OKc5oqKw+nL9FvIokxn8MmaAmkNsWv64hLX9xWWcMWXSgEo745hzYUqDn2viMJ97mf76oPy6Vc+BS4k6Kwj78g==", - "requires": { - "@emotion/is-prop-valid": "^0.7.3", - "hey-listen": "^1.0.5", - "popmotion-pose": "^3.4.10", - "tslib": "^1.10.0" - } - }, "react-refresh": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", @@ -51797,105 +51552,6 @@ "glob": "^7.1.3" } }, - "rollup-plugin-typescript2": { - "version": "0.25.3", - "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.25.3.tgz", - "integrity": "sha512-ADkSaidKBovJmf5VBnZBZe+WzaZwofuvYdzGAKTN/J4hN7QJCFYAq7IrH9caxlru6T5qhX41PNFS1S4HqhsGQg==", - "requires": { - "find-cache-dir": "^3.0.0", - "fs-extra": "8.1.0", - "resolve": "1.12.0", - "rollup-pluginutils": "2.8.1", - "tslib": "1.10.0" - }, - "dependencies": { - "find-cache-dir": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", - "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", - "requires": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - } - }, - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "requires": { - "p-locate": "^4.1.0" - } - }, - "make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "requires": { - "semver": "^6.0.0" - } - }, - "p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "requires": { - "p-try": "^2.0.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "requires": { - "p-limit": "^2.2.0" - } - }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" - }, - "pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "requires": { - "find-up": "^4.0.0" - } - }, - "resolve": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", - "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==", - "requires": { - "path-parse": "^1.0.6" - } - }, - "tslib": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", - "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" - } - } - }, - "rollup-pluginutils": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz", - "integrity": "sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==", - "requires": { - "estree-walker": "^0.6.1" - } - }, "run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -53251,27 +52907,6 @@ "inline-style-parser": "0.1.1" } }, - "style-value-types": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.2.0.tgz", - "integrity": "sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==", - "requires": { - "hey-listen": "^1.0.8", - "tslib": "^1.10.0" - } - }, - "stylefire": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz", - "integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==", - "requires": { - "@popmotion/popcorn": "^0.4.4", - "framesync": "^4.0.0", - "hey-listen": "^1.0.8", - "style-value-types": "^3.1.7", - "tslib": "^1.10.0" - } - }, "stylehacks": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz", @@ -54370,11 +54005,6 @@ "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz", "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==" }, - "ts-essentials": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-1.0.4.tgz", - "integrity": "sha512-q3N1xS4vZpRouhYHDPwO0bDW3EZ6SK9CrrDHxi/D6BPReSjpVgWIOpLS2o0gSBZm+7q/wyKp6RVM1AeeW7uyfQ==" - }, "ts-node": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz", @@ -54498,7 +54128,8 @@ "typescript": { "version": "3.9.10", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz", - "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==" + "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==", + "peer": true }, "unbox-primitive": { "version": "1.0.1", diff --git a/package.json b/package.json index 2aafc0e..f6284ce 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@giphy/js-fetch-api": "^4.1.2", "axios": "^0.21.4", "file-saver": "^2.0.5", + "framer-motion": "^4.1.17", "gatsby": "^3.13.0", "gatsby-plugin-image": "^1.13.0", "gatsby-plugin-manifest": "^3.13.0", @@ -43,7 +44,6 @@ "react-dom": "^17.0.2", "react-feather": "^2.0.9", "react-helmet": "^6.1.0", - "react-pose": "^4.0.10", "remark": "^13.0.0", "remark-breaks": "^2.0.2", "remark-html": "^13.0.2", diff --git a/scripts/github.js b/scripts/github.js new file mode 100644 index 0000000..c9579d3 --- /dev/null +++ b/scripts/github.js @@ -0,0 +1,42 @@ +const axios = require('axios') + +// +// Get GitHub repos +// +const gitHubConfig = { + headers: { + 'User-Agent': 'kremalicious/portfolio', + Authorization: `token ${process.env.GATSBY_GITHUB_TOKEN}` + } +} + +async function getGithubRepos(data) { + let repos = [] + let holder = {} + + for (let item of data) { + const user = item.split('/')[0] + const repoName = item.split('/')[1] + const repo = await axios.get( + `https://api.github.com/repos/${user}/${repoName}`, + gitHubConfig + ) + + holder.name = repo.data.name + holder.full_name = repo.data.full_name + holder.description = repo.data.description + holder.html_url = repo.data.html_url + holder.homepage = repo.data.homepage + holder.stargazers_count = repo.data.stargazers_count + holder.pushed_at = repo.data.pushed_at + repos.push(holder) + holder = {} + } + + // sort by pushed to, newest first + repos = repos.sort((a, b) => b.pushed_at.localeCompare(a.pushed_at)) + + return repos +} + +module.exports = { getGithubRepos } diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 1d2d9f2..78783ce 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import posed, { PoseGroup } from 'react-pose' -import { fadeIn } from './atoms/Transitions' +import { motion, AnimatePresence, useReducedMotion } from 'framer-motion' +import { fadeIn, moveInBottom, getAnimationProps } from './atoms/Transitions' import Typekit from './atoms/Typekit' import HostnameCheck from './atoms/HostnameCheck' import ThemeSwitch from './molecules/ThemeSwitch' @@ -24,11 +24,10 @@ Layout.propTypes = { }).isRequired } -const timeout = 200 -const RoutesContainer = posed.div(fadeIn) - export default function Layout({ children, location }) { const { allowedHosts } = useMeta() + const shouldReduceMotion = useReducedMotion() + const isSsr = typeof window === 'undefined' const isHomepage = location.pathname === '/' || @@ -42,16 +41,24 @@ export default function Layout({ children, location }) { - - +
-
{children}
- - + + {children} + + +