From 3aa87e0e82b784c3221641a71d319c997cf77026 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 6 Mar 2021 02:58:10 +0100 Subject: [PATCH] migrate to gatsby-plugin-image --- gatsby-config.js | 1 + package-lock.json | 166 +++++++++++++++++++----- package.json | 2 +- src/@types/Image.d.ts | 14 +- src/components/atoms/Image.tsx | 25 +--- src/components/atoms/SEO/index.tsx | 6 +- src/components/molecules/PostTeaser.tsx | 2 +- src/components/molecules/Vcard.tsx | 21 ++- 8 files changed, 162 insertions(+), 75 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 41538764..4f372a2c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -23,6 +23,7 @@ module.exports = { }, plugins: [ ...sources, + 'gatsby-plugin-image', { resolve: 'gatsby-plugin-sharp', options: { diff --git a/package-lock.json b/package-lock.json index 86341593..b03c115a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,9 +22,9 @@ "feather-icons": "^4.28.0", "fraction.js": "^4.0.13", "gatsby": "^3.0.3", - "gatsby-image": "^3.0.0", "gatsby-plugin-catch-links": "^3.0.0", "gatsby-plugin-feed": "^3.0.0", + "gatsby-plugin-image": "^1.0.0", "gatsby-plugin-lunr": "^1.5.2", "gatsby-plugin-manifest": "^3.0.0", "gatsby-plugin-matomo": "^0.9.0", @@ -5981,6 +5981,11 @@ "node": ">=8" } }, + "node_modules/babel-jsx-utils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.0.1.tgz", + "integrity": "sha512-Qph/atlQiSvfmkoIZ9VA+t8dA0ex2TwL37rkhLT9YLJdhaTMZ2HSM2QGzbqjLWanKA+I3wRQJjjhtuIEgesuLw==" + }, "node_modules/babel-loader": { "version": "8.2.2", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz", @@ -13424,20 +13429,6 @@ "node": ">=12.13.0" } }, - "node_modules/gatsby-image": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/gatsby-image/-/gatsby-image-3.0.0.tgz", - "integrity": "sha512-8Ma2ay4KAs9JR+Y2BiSw3jqiNLAAR4V1ZBC5Pjuf3fEzSONHjhOmZ7hOw8TzYHV32MQWYVFiOiHVHjLQDjH7jw==", - "deprecated": "This package has been deprecated in favor of gatsby-plugin-image. The migration guide can be found here: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.", - "dependencies": { - "@babel/runtime": "^7.12.5", - "object-fit-images": "^3.2.4", - "prop-types": "^15.7.2" - }, - "engines": { - "node": ">=12.13.0" - } - }, "node_modules/gatsby-legacy-polyfills": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gatsby-legacy-polyfills/-/gatsby-legacy-polyfills-1.0.0.tgz", @@ -13520,6 +13511,68 @@ "react-dom": "^16.9.0 || ^17.0.0" } }, + "node_modules/gatsby-plugin-image": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.0.0.tgz", + "integrity": "sha512-qPfydip7atF+rlESv1HLDmbwmmQvC8aU7W6GwO62hWcuGcIFJD3lcn6B8xF55f4rxE99vxbO5gUwRUwj+fUH1A==", + "dependencies": { + "@babel/parser": "^7.12.5", + "@babel/traverse": "^7.12.5", + "babel-jsx-utils": "^1.0.1", + "babel-plugin-remove-graphql-queries": "^3.0.0", + "camelcase": "^5.3.1", + "chokidar": "^3.5.1", + "common-tags": "^1.8.0", + "fs-extra": "^8.1.0", + "gatsby-core-utils": "^2.0.0", + "objectFitPolyfill": "^2.3.0", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "gatsby": "^3.0.0-next.0", + "gatsby-plugin-sharp": "^3.0.0-next.0", + "gatsby-source-filesystem": "^3.0.0-next.0", + "react": "^16.9.0 || ^17.0.0", + "react-dom": "^16.9.0 || ^17.0.0" + } + }, + "node_modules/gatsby-plugin-image/node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/gatsby-plugin-image/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/gatsby-plugin-image/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/gatsby-plugin-image/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/gatsby-plugin-lunr": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/gatsby-plugin-lunr/-/gatsby-plugin-lunr-1.5.2.tgz", @@ -22381,11 +22434,6 @@ "node": ">=0.10.0" } }, - "node_modules/object-fit-images": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/object-fit-images/-/object-fit-images-3.2.4.tgz", - "integrity": "sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg==" - }, "node_modules/object-inspect": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz", @@ -22544,6 +22592,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/objectFitPolyfill": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz", + "integrity": "sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA==" + }, "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -39091,6 +39144,11 @@ } } }, + "babel-jsx-utils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.0.1.tgz", + "integrity": "sha512-Qph/atlQiSvfmkoIZ9VA+t8dA0ex2TwL37rkhLT9YLJdhaTMZ2HSM2QGzbqjLWanKA+I3wRQJjjhtuIEgesuLw==" + }, "babel-loader": { "version": "8.2.2", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz", @@ -45035,16 +45093,6 @@ "@babel/runtime": "^7.12.5" } }, - "gatsby-image": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/gatsby-image/-/gatsby-image-3.0.0.tgz", - "integrity": "sha512-8Ma2ay4KAs9JR+Y2BiSw3jqiNLAAR4V1ZBC5Pjuf3fEzSONHjhOmZ7hOw8TzYHV32MQWYVFiOiHVHjLQDjH7jw==", - "requires": { - "@babel/runtime": "^7.12.5", - "object-fit-images": "^3.2.4", - "prop-types": "^15.7.2" - } - }, "gatsby-legacy-polyfills": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gatsby-legacy-polyfills/-/gatsby-legacy-polyfills-1.0.0.tgz", @@ -45101,6 +45149,54 @@ "rss": "^1.2.2" } }, + "gatsby-plugin-image": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.0.0.tgz", + "integrity": "sha512-qPfydip7atF+rlESv1HLDmbwmmQvC8aU7W6GwO62hWcuGcIFJD3lcn6B8xF55f4rxE99vxbO5gUwRUwj+fUH1A==", + "requires": { + "@babel/parser": "^7.12.5", + "@babel/traverse": "^7.12.5", + "babel-jsx-utils": "^1.0.1", + "babel-plugin-remove-graphql-queries": "^3.0.0", + "camelcase": "^5.3.1", + "chokidar": "^3.5.1", + "common-tags": "^1.8.0", + "fs-extra": "^8.1.0", + "gatsby-core-utils": "^2.0.0", + "objectFitPolyfill": "^2.3.0", + "prop-types": "^15.7.2" + }, + "dependencies": { + "camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" + }, + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "requires": { + "graceful-fs": "^4.1.6" + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + } + } + }, "gatsby-plugin-lunr": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/gatsby-plugin-lunr/-/gatsby-plugin-lunr-1.5.2.tgz", @@ -51776,11 +51872,6 @@ } } }, - "object-fit-images": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/object-fit-images/-/object-fit-images-3.2.4.tgz", - "integrity": "sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg==" - }, "object-inspect": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz", @@ -51889,6 +51980,11 @@ "has": "^1.0.3" } }, + "objectFitPolyfill": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz", + "integrity": "sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA==" + }, "obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", diff --git a/package.json b/package.json index abf7c5b9..ddba6f61 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,9 @@ "feather-icons": "^4.28.0", "fraction.js": "^4.0.13", "gatsby": "^3.0.3", - "gatsby-image": "^3.0.0", "gatsby-plugin-catch-links": "^3.0.0", "gatsby-plugin-feed": "^3.0.0", + "gatsby-plugin-image": "^1.0.0", "gatsby-plugin-lunr": "^1.5.2", "gatsby-plugin-manifest": "^3.0.0", "gatsby-plugin-matomo": "^0.9.0", diff --git a/src/@types/Image.d.ts b/src/@types/Image.d.ts index e048962e..82488e37 100644 --- a/src/@types/Image.d.ts +++ b/src/@types/Image.d.ts @@ -1,18 +1,14 @@ -import { FixedObject, FluidObject } from 'gatsby-image' +import { GatsbyImageProps, IGatsbyImageData } from 'gatsby-plugin-image' -export interface ImageProps { +export interface ImageProps extends GatsbyImageProps { title?: string - fluid?: FluidObject - fixed?: FixedObject - alt?: string original?: { src: string } className?: string } -export interface ImageNode { - childImageSharp: ImageProps - fields: { - exif: Exif +export interface ImageNode extends IGatsbyImageData { + fields?: { + exif?: Exif } } diff --git a/src/components/atoms/Image.tsx b/src/components/atoms/Image.tsx index a05134ed..21218eca 100644 --- a/src/components/atoms/Image.tsx +++ b/src/components/atoms/Image.tsx @@ -1,13 +1,12 @@ import React, { ReactElement } from 'react' import { graphql } from 'gatsby' -import Img from 'gatsby-image' +import { GatsbyImage } from 'gatsby-plugin-image' import { ImageProps } from '../../@types/Image' import * as styles from './Image.module.css' export const Image = ({ title, - fluid, - fixed, + image, alt, original, className @@ -16,13 +15,7 @@ export const Image = ({ className={`${styles.image} ${className ? className : ''}`} data-original={original && original.src} > - {alt} + {title &&
{title}
} ) @@ -32,9 +25,7 @@ export const imageSizeDefault = graphql` original { src } - fluid(maxWidth: 950, quality: 85) { - ...GatsbyImageSharpFluid_withWebp_noBase64 - } + gatsbyImageData(layout: CONSTRAINED, width: 950, quality: 85) } ` @@ -43,9 +34,7 @@ export const imageSizeThumb = graphql` original { src } - fluid(maxWidth: 420, maxHeight: 140, quality: 85, cropFocus: CENTER) { - ...GatsbyImageSharpFluid_withWebp_noBase64 - } + gatsbyImageData(layout: CONSTRAINED, width: 420, height: 140, quality: 85) } ` @@ -54,8 +43,6 @@ export const photoSizeThumb = graphql` original { src } - fluid(maxWidth: 300, maxHeight: 300, quality: 85, cropFocus: CENTER) { - ...GatsbyImageSharpFluid_withWebp_noBase64 - } + gatsbyImageData(layout: CONSTRAINED, width: 300, height: 300, quality: 85) } ` diff --git a/src/components/atoms/SEO/index.tsx b/src/components/atoms/SEO/index.tsx index 2b1f9ed3..41c327b5 100644 --- a/src/components/atoms/SEO/index.tsx +++ b/src/components/atoms/SEO/index.tsx @@ -1,6 +1,6 @@ import React, { ReactElement } from 'react' import { graphql, useStaticQuery } from 'gatsby' - +import { getSrc } from 'gatsby-plugin-image' import { useSiteMetadata } from '../../../hooks/use-site-metadata' import { Post } from '../../../@types/Post' import MetaTags from './MetaTags' @@ -39,9 +39,7 @@ export default function SEO({ const postMeta = post.frontmatter title = `${postMeta.title} ¦ ${siteTitle}` description = postMeta.description ? postMeta.description : post.excerpt - image = postMeta.image - ? postMeta.image.childImageSharp.fluid.src - : `/${logo}` + image = postMeta.image ? getSrc(postMeta.image) : `/${logo}` postURL = `${siteUrl}${slug}` } else { title = `${siteTitle} ¦ ${siteDescription}` diff --git a/src/components/molecules/PostTeaser.tsx b/src/components/molecules/PostTeaser.tsx index 703e93e9..9478ee96 100644 --- a/src/components/molecules/PostTeaser.tsx +++ b/src/components/molecules/PostTeaser.tsx @@ -47,7 +47,7 @@ export default function PostTeaser({ onClick={toggleSearch && toggleSearch} > {image ? ( - {title} + {title} ) : ( )} diff --git a/src/components/molecules/Vcard.tsx b/src/components/molecules/Vcard.tsx index 4d089a74..dac3275a 100644 --- a/src/components/molecules/Vcard.tsx +++ b/src/components/molecules/Vcard.tsx @@ -1,6 +1,6 @@ import React, { ReactElement } from 'react' import { graphql, useStaticQuery } from 'gatsby' -import Img from 'gatsby-image' +import { getSrc } from 'gatsby-plugin-image' import IconLinks from './Networks' import * as styles from './Vcard.module.css' import { useSiteMetadata } from '../../hooks/use-site-metadata' @@ -11,9 +11,12 @@ const query = graphql` edges { node { childImageSharp { - fixed(width: 80, height: 80, quality: 90) { - ...GatsbyImageSharpFixed_withWebp_noBase64 - } + gatsbyImageData( + layout: CONSTRAINED + width: 80 + height: 80 + quality: 85 + ) } } } @@ -25,12 +28,18 @@ export default function Vcard(): ReactElement { const data = useStaticQuery(query) const { author, rss, jsonfeed } = useSiteMetadata() const { twitter, github, name, uri } = author - const avatar = data.avatar.edges[0].node.childImageSharp.fixed + const avatar = getSrc(data.avatar.edges[0].node) const links = [twitter, github, rss, jsonfeed] return ( <> - avatar + avatar

Blog of designer & developer{' '}