mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
migrate to gatsby-plugin-image
This commit is contained in:
parent
78a99d651b
commit
3aa87e0e82
GPG Key ID:
606EEEF3C479A91F
@ -23,6 +23,7 @@ module.exports = {
|
||||
},
|
||||
plugins: [
|
||||
...sources,
|
||||
'gatsby-plugin-image',
|
||||
{
|
||||
resolve: 'gatsby-plugin-sharp',
|
||||
options: {
|
||||
|
||||
166
package-lock.json
generated
166
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
14
src/@types/Image.d.ts
vendored
14
src/@types/Image.d.ts
vendored
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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}
|
||||
>
|
||||
<Img
|
||||
backgroundColor="transparent"
|
||||
fluid={fluid}
|
||||
fixed={fixed}
|
||||
alt={alt}
|
||||
imgStyle={{ objectFit: 'contain' }}
|
||||
/>
|
||||
<GatsbyImage backgroundColor="transparent" image={image} alt={alt} />
|
||||
{title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
|
||||
</figure>
|
||||
)
|
||||
@ -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)
|
||||
}
|
||||
`
|
||||
|
||||
@ -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}`
|
||||
|
||||
@ -47,7 +47,7 @@ export default function PostTeaser({
|
||||
onClick={toggleSearch && toggleSearch}
|
||||
>
|
||||
{image ? (
|
||||
<Image fluid={image.childImageSharp.fluid} alt={title} />
|
||||
<Image image={image} alt={title} />
|
||||
) : (
|
||||
<span className={styles.empty} />
|
||||
)}
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<Img className={styles.avatar} fixed={avatar} alt="avatar" />
|
||||
<img
|
||||
className={styles.avatar}
|
||||
src={avatar}
|
||||
width="80"
|
||||
height="80"
|
||||
alt="avatar"
|
||||
/>
|
||||
<p className={styles.description}>
|
||||
Blog of designer & developer{' '}
|
||||
<a className="fn" rel="author" href={uri}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user