package updates

content/articles/2020-05-22-gatsby-redirect-from/index.md

@@ -54,7 +54,6 @@ redirect_from:
   - /2008/04/aperture-file-types/
   # note: trailing slashes are required
 ---
-
 ```
 
 ## Default Query

gatsby-browser.js

@@ -1,4 +1,5 @@
 import './src/global/global.css'
+import './src/global/imports.css'
 
 import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
 export const wrapPageElement = wrapPageElementWithLayout

gatsby-config.js

@@ -37,7 +37,6 @@ module.exports = {
       options: {
         excerpt_separator: '<!-- more -->',
         plugins: [
-          'gatsby-remark-breaks',
           {
             resolve: 'gatsby-remark-images',
             options: {

package.json

@@ -28,45 +28,44 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@ethersproject/providers": "^5.0.24",
+    "@ethersproject/providers": "^5.2.0",
-    "@ethersproject/units": "^5.0.11",
+    "@ethersproject/units": "^5.2.0",
-    "@loadable/component": "^5.14.1",
+    "@loadable/component": "^5.15.0",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "date-fns": "^2.19.0",
+    "date-fns": "^2.21.3",
     "dms2dec": "^1.1.0",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.28.0",
-    "fraction.js": "^4.0.13",
+    "fraction.js": "^4.1.0",
-    "gatsby": "^3.1.1",
+    "gatsby": "^3.5.1",
-    "gatsby-plugin-catch-links": "^3.1.0",
+    "gatsby-plugin-catch-links": "^3.5.0",
-    "gatsby-plugin-feed": "^3.1.0",
+    "gatsby-plugin-feed": "^3.5.0",
-    "gatsby-plugin-image": "^1.1.1",
+    "gatsby-plugin-image": "^1.5.0",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^3.1.0",
+    "gatsby-plugin-manifest": "^3.5.0",
-    "gatsby-plugin-matomo": "^0.9.0",
+    "gatsby-plugin-matomo": "^0.10.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-offline": "^4.1.0",
+    "gatsby-plugin-offline": "^4.5.1",
-    "gatsby-plugin-react-helmet": "^4.1.0",
+    "gatsby-plugin-react-helmet": "^4.5.0",
-    "gatsby-plugin-sharp": "^3.1.1",
+    "gatsby-plugin-sharp": "^3.5.0",
-    "gatsby-plugin-sitemap": "^3.1.0",
+    "gatsby-plugin-sitemap": "^4.1.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.21",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
     "gatsby-plugin-webpack-size": "^2.0.1",
-    "gatsby-redirect-from": "^0.3.0",
+    "gatsby-redirect-from": "^0.4.1",
-    "gatsby-remark-autolink-headers": "^3.1.0",
+    "gatsby-remark-autolink-headers": "^4.2.0",
-    "gatsby-remark-breaks": "^1.0.0",
+    "gatsby-remark-copy-linked-files": "^4.2.1",
-    "gatsby-remark-copy-linked-files": "^3.1.0",
+    "gatsby-remark-images": "^5.2.1",
-    "gatsby-remark-images": "^4.1.0",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-smartypants": "^3.1.0",
+    "gatsby-remark-smartypants": "^4.2.0",
     "gatsby-remark-vscode": "^3.2.1",
-    "gatsby-source-filesystem": "^3.1.0",
+    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-source-graphql": "^3.1.0",
+    "gatsby-source-graphql": "^3.5.0",
-    "gatsby-transformer-remark": "^3.1.0",
+    "gatsby-transformer-remark": "^4.2.0",
-    "gatsby-transformer-sharp": "^3.1.0",
+    "gatsby-transformer-sharp": "^3.5.0",
     "node-fetch": "^2.6.1",
     "nord-visual-studio-code": "github:arcticicestudio/nord-visual-studio-code",
     "pigeon-maps": "^0.19.5",
@@ -76,55 +75,55 @@
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-helmet": "^6.1.0",
-    "react-qr-svg": "^2.3.0",
+    "react-qr-svg": "^2.4.0",
     "react-transition-group": "^4.4.1",
     "remark": "^13.0.0",
     "remark-react": "^8.0.0",
-    "slugify": "^1.5.0"
+    "slugify": "^1.5.3"
   },
   "devDependencies": {
     "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^11.2.7",
-    "@types/classnames": "^2.2.11",
+    "@types/classnames": "^2.3.1",
-    "@types/fs-extra": "^9.0.8",
+    "@types/fs-extra": "^9.0.11",
-    "@types/jest": "^26.0.21",
+    "@types/jest": "^26.0.23",
     "@types/loadable__component": "^5.13.3",
     "@types/lunr": "^2.3.3",
-    "@types/node": "^14.14.35",
+    "@types/node": "^15.6.0",
-    "@types/node-fetch": "^2.5.8",
+    "@types/node-fetch": "^2.5.10",
-    "@types/react": "^17.0.3",
+    "@types/react": "^17.0.6",
-    "@types/react-dom": "^17.0.3",
+    "@types/react-dom": "^17.0.5",
-    "@types/react-helmet": "^6.1.0",
+    "@types/react-helmet": "^6.1.1",
-    "@types/react-transition-group": "^4.4.0",
+    "@types/react-transition-group": "^4.4.1",
     "@types/shortid": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/parser": "^4.24.0",
-    "@welldone-software/why-did-you-render": "^6.1.1",
+    "@welldone-software/why-did-you-render": "^6.1.4",
-    "eslint": "^7.22.0",
+    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-testing-library": "^3.10.2",
-    "fs-extra": "^9.1.0",
+    "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "markdownlint-cli": "^0.27.1",
     "node-iptc": "^1.0.5",
     "npm-run-all": "^4.1.5",
     "ora": "^5.4.0",
-    "postcss": "^8.2.8",
+    "postcss": "^8.3.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "shortid": "^2.2.16",
-    "stylelint": "^13.12.0",
+    "stylelint": "^13.13.1",
     "stylelint-config-css-modules": "^2.2.0",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^21.0.0",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-prettier": "^1.2.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
     "typescript-plugin-css-modules": "^3.2.0"
   },
   "repository": {

src/components/atoms/Exif.tsx

@@ -20,15 +20,8 @@ const ExifData = ({
 )
 
 export default function Exif({ exif }: { exif: ExifMeta }): ReactElement {
-  const {
+  const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } =
-    iso,
+    exif.formatted
-    model,
-    fstop,
-    shutterspeed,
-    focalLength,
-    exposure,
-    gps
-  } = exif.formatted
 
   return (
     <aside className={styleExif}>

src/components/atoms/ExifMap.tsx

@@ -3,15 +3,11 @@ import { Map } from 'pigeon-maps'
 import Marker from 'pigeon-marker'
 import useDarkMode from '../../hooks/useDarkMode'
 
-const mapbox = (mapboxId: string) => (
+const mapbox =
-  x: string,
+  (mapboxId: string) => (x: string, y: string, z: string, dpr?: number) =>
-  y: string,
+    `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${
-  z: string,
+      dpr >= 2 ? '@2x' : ''
-  dpr?: number
+    }?access_token=${process.env.GATSBY_MAPBOX_ACCESS_TOKEN}`
-) =>
-  `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${
-    dpr >= 2 ? '@2x' : ''
-  }?access_token=${process.env.GATSBY_MAPBOX_ACCESS_TOKEN}`
 
 const providers = {
   light: mapbox('light-v10'),

src/components/molecules/Pagination.tsx

@@ -55,13 +55,8 @@ export default function Pagination({
 }: {
   pageContext: PageContext
 }): ReactElement {
-  const {
+  const { slug, currentPageNumber, numPages, prevPagePath, nextPagePath } =
-    slug,
+    pageContext
-    currentPageNumber,
-    numPages,
-    prevPagePath,
-    nextPagePath
-  } = pageContext
   const isFirst = currentPageNumber === 1
   const isLast = currentPageNumber === numPages
 

src/components/molecules/Web3Donation/Alert.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import { success, error, alert } from './Alert.module.css'
 
-export function getTransactionMessage(
+export function getTransactionMessage(transactionHash?: string): {
-  transactionHash?: string
+  [key: string]: string
-): { [key: string]: string } {
+} {
   return {
     transaction: `<a href="https://etherscan.io/tx/${transactionHash}" target="_blank">See your transaction on etherscan.io.</a>`,
     waitingForUser: 'Waiting for your confirmation',

src/components/templates/Archive.tsx

@@ -47,7 +47,7 @@ export default function Archive({
 }
 
 export const archiveQuery = graphql`
-  query($tag: String, $skip: Int, $limit: Int) {
+  query ($tag: String, $skip: Int, $limit: Int) {
     allMarkdownRemark(
       filter: {
         fields: { type: { nin: "photo" } }

src/components/templates/Photos.tsx

@@ -67,7 +67,7 @@ export default function Photos(props: PhotosPageProps): ReactElement {
 }
 
 export const photosQuery = graphql`
-  query($skip: Int, $limit: Int) {
+  query ($skip: Int, $limit: Int) {
     allMarkdownRemark(
       filter: { fields: { type: { eq: "photo" } } }
       sort: { order: DESC, fields: [fields___date] }

src/global/global.css

@@ -342,11 +342,6 @@ td {
 /* More basic elements
 ///////////////////////////////////// */
 
-@import '_buttons';
-@import '_code.css';
-@import '_toast.css';
-@import '_alerts.css';
-
 .medium-zoom-overlay {
   background-color: var(--body-background-color) !important;
 }

src/global/imports.css

@@ -0,0 +1,4 @@
+@import '_buttons';
+@import '_code.css';
+@import '_toast.css';
+@import '_alerts.css';