Skip to content
This repository has been archived by the owner on Feb 16, 2021. It is now read-only.

Migrate to gatsby plugin image #91

Draft
wants to merge 2 commits into
base: upgrade-dependencies
Choose a base branch
from
Draft

Migrate to gatsby plugin image #91

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe6e6e7
WIP - migrate to gatsby-plugin-image
axe312ger Dec 22, 2020
30cb85c
WIP: further migrate to gatsby-plugin-image
axe312ger Jan 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ module.exports = {
'gatsby-transformer-remark',
'gatsby-transformer-sharp',
'gatsby-plugin-react-helmet',
'gatsby-plugin-image',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-source-contentful',
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@
"core-js": "2",
"gatsby": "^2.29.0",
"gatsby-image": "^2.8.0",
"gatsby-plugin-image": "^0.4.0",
"gatsby-plugin-react-helmet": "^3.7.0",
"gatsby-plugin-sharp": "^2.11.0",
"gatsby-source-contentful": "^4.3.0",
"gatsby-source-contentful": "4.4.0-next.3-dev-1608643429691",
"gatsby-transformer-remark": "^2.13.0",
"gatsby-transformer-sharp": "^2.9.0",
"lodash": "^4.17.20",
Expand Down
6 changes: 3 additions & 3 deletions src/components/hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react'
import Img from 'gatsby-image'
import { GatsbyImage } from 'gatsby-plugin-image'

import styles from './hero.module.css'

const Hero = ({ data }) => (
<div className={styles.hero}>
<Img
<GatsbyImage
image={data.heroImage.gatsbyImageData}
className={styles.heroImage}
alt={data.name}
fluid={data.heroImage.fluid}
/>
<div className={styles.heroDetails}>
<h3 className={styles.heroHeadline}>{data.name}</h3>
Expand Down
18 changes: 15 additions & 3 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ const RootIndex = ({ data }) => {
const posts = data?.allContentfulBlogPost?.edges
const [author] = data?.allContentfulPerson?.edges

console.log({ author, posts, data })
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note to myself: remove this debug logger


return (
<Layout>
<div style={{ background: '#fff' }}>
Expand Down Expand Up @@ -52,6 +54,13 @@ export const pageQuery = graphql`
fluid(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
...GatsbyContentfulFluid_tracedSVG
}
gatsbyImageData(
layout: FLUID
maxWidth: 350
maxHeight: 196
resizingBehavior: SCALE
placeholder: TRACED_SVG
)
}
description {
childMarkdownRemark {
Expand All @@ -72,12 +81,15 @@ export const pageQuery = graphql`
}
title
heroImage: image {
fluid(
gatsbyImageData(
layout: FLUID
maxWidth: 1180
maxHeight: 480
resizingBehavior: PAD
background: "rgb:000000"
) {
placeholder: TRACED_SVG
# background: "rgb:000000"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note this API feature is currently unsupported. We need to reimplement it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reimplemented it :)

)
fluid(maxWidth: 1180, maxHeight: 480, resizingBehavior: PAD) {
...GatsbyContentfulFluid_tracedSVG
}
}
Expand Down
85 changes: 73 additions & 12 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2638,6 +2638,11 @@ babel-eslint@^10.1.0:
eslint-visitor-keys "^1.0.0"
resolve "^1.12.0"

babel-jsx-utils@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/babel-jsx-utils/-/babel-jsx-utils-1.0.1.tgz#f2d171cba526594e7d69e9893d634502cf950f07"
integrity sha512-Qph/atlQiSvfmkoIZ9VA+t8dA0ex2TwL37rkhLT9YLJdhaTMZ2HSM2QGzbqjLWanKA+I3wRQJjjhtuIEgesuLw==

babel-loader@^8.1.0:
version "8.2.2"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
Expand Down Expand Up @@ -2687,6 +2692,11 @@ babel-plugin-remove-graphql-queries@^2.13.0:
resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.13.0.tgz#7e62cb758b247c635565732c4778fc8581cb48b6"
integrity sha512-6sL3JVKDa3OjXtmBYrr467BnQeUjNI7p2dy+aBwbB8WqChHLJOFh5+lxfzC0z/7hBehqmWpBV7xHfZdIP1lAzQ==

babel-plugin-remove-graphql-queries@^2.14.0-next.0:
version "2.14.0-next.0"
resolved "http://localhost:4873/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.14.0-next.0.tgz#1ecc7a3e9c9839ee84cdef1fbdd27c26812f1161"
integrity sha512-LQk7gV7GGucz4oiqXtMWvsxyKgaK22vmswfrpfUFEB646S7S/uqIZQhVvu3aRat4e3es+oQ3Cp0JYwpoVPl8eg==

babel-plugin-transform-react-remove-prop-types@^0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
Expand Down Expand Up @@ -6385,6 +6395,19 @@ gatsby-core-utils@^1.7.0:
tmp "^0.2.1"
xdg-basedir "^4.0.0"

gatsby-core-utils@^1.8.0-next.0:
version "1.8.0-next.0"
resolved "http://localhost:4873/gatsby-core-utils/-/gatsby-core-utils-1.8.0-next.0.tgz#e2bf9c42f81c60fdb9d5e7f70c371ad76d1fc178"
integrity sha512-E67wVUirRwJeWlYH6CacQ30SC5msVeKQxpnvpVUMVzypmShTdL5h6hNX4YSb0gMPTSijScegIEhi4uB9DuKzvw==
dependencies:
ci-info "2.0.0"
configstore "^5.0.1"
fs-extra "^8.1.0"
node-object-hash "^2.0.0"
proper-lockfile "^4.1.1"
tmp "^0.2.1"
xdg-basedir "^4.0.0"

gatsby-graphiql-explorer@^0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-0.8.0.tgz#215ff1dd2a714e068e136620edd85ab9269f0210"
Expand Down Expand Up @@ -6431,6 +6454,36 @@ gatsby-page-utils@^0.6.0:
lodash "^4.17.20"
micromatch "^4.0.2"

gatsby-plugin-image@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-image/-/gatsby-plugin-image-0.4.0.tgz#ab26fabb58c00907e9c7bb095f574c0ba39d2677"
integrity sha512-3GNpMuj1CJmCOQ1QZu1JYpM+nYIUa8h5bHYne97y+koSIl6rJghygXkQuoqlEMqIZxAbLGgVMUBVKrLlgad+xA==
dependencies:
"@babel/parser" "^7.12.5"
"@babel/traverse" "^7.12.5"
babel-jsx-utils "^1.0.1"
babel-plugin-remove-graphql-queries "^2.13.0"
camelcase "^5.3.1"
chokidar "^3.4.3"
fs-extra "^8.1.0"
gatsby-core-utils "^1.7.0"
prop-types "^15.7.2"

gatsby-plugin-image@^0.5.0-next.5:
version "0.5.0-next.5"
resolved "http://localhost:4873/gatsby-plugin-image/-/gatsby-plugin-image-0.5.0-next.5.tgz#163b415b72d3e3e0bc0b1537e7d8226f5e903ea6"
integrity sha512-P/ReZscU9T+tj3w1DZ4NzLFqyJV0z+JWtpLIDplPyljBLQ1PBCs+VbRuymoBVl8T1u3bAqowgxFN/NorWsrsOw==
dependencies:
"@babel/parser" "^7.12.5"
"@babel/traverse" "^7.12.5"
babel-jsx-utils "^1.0.1"
babel-plugin-remove-graphql-queries "^2.14.0-next.0"
camelcase "^5.3.1"
chokidar "^3.4.3"
fs-extra "^8.1.0"
gatsby-core-utils "^1.8.0-next.0"
prop-types "^15.7.2"

gatsby-plugin-page-creator@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.7.0.tgz#8b6f2afa11794c15eb0809054d5b7e0d47a6ba99"
Expand Down Expand Up @@ -6496,6 +6549,13 @@ gatsby-plugin-utils@^0.6.0:
dependencies:
joi "^17.2.1"

gatsby-plugin-utils@^0.7.0-next.1:
version "0.7.0-next.1"
resolved "http://localhost:4873/gatsby-plugin-utils/-/gatsby-plugin-utils-0.7.0-next.1.tgz#0bab4045400f2de472594e166786afe6b3c7af08"
integrity sha512-IPM2Pa436rjfDJI1iEvvTgHq+bJYxaPOQmAIgvtBm0EWkI/P4DmctSECqboSwSKIxqGtIgKuPYn7yEODCJf6nw==
dependencies:
joi "^17.2.1"

gatsby-react-router-scroll@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.4.0.tgz#ceeb6974452a40d5bd070030d7055a2fd4e6e383"
Expand Down Expand Up @@ -6567,10 +6627,10 @@ gatsby-recipes@^0.6.0:
xstate "^4.9.1"
yoga-layout-prebuilt "^1.9.6"

gatsby-source-contentful@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/gatsby-source-contentful/-/gatsby-source-contentful-4.3.0.tgz#e1b06be46f3e8f5c453e051d736d116ff2dcccc0"
integrity sha512-3CmB3RNyiqJma0ZuKPiY3u6kgWafbNlCBMpMrNfVJtj4oQ9EMB5C0c8+fCWusj+jAMNipp/ljAWq6GpjpD9RDw==
gatsby-source-contentful@4.4.0-next.3-dev-1608643429691:
version "4.4.0-next.3-dev-1608643429691"
resolved "http://localhost:4873/gatsby-source-contentful/-/gatsby-source-contentful-4.4.0-next.3-dev-1608643429691.tgz#6eeb7d34f43148ea28a15bdf796a9a979edcbb7b"
integrity sha512-nVYj6UdfEYxB0SHHKaY8/NjNSWF+knGaPYYFJ7CS1G9058fdlJx5uIujAukXollCYlqN5IIqmEqAX3RM5fbSvw==
dependencies:
"@babel/runtime" "^7.12.5"
"@contentful/rich-text-react-renderer" "^14.1.2"
Expand All @@ -6582,27 +6642,28 @@ gatsby-source-contentful@^4.3.0:
chalk "^4.1.0"
contentful "^7.14.12"
fs-extra "^9.0.1"
gatsby-core-utils "^1.7.0"
gatsby-plugin-utils "^0.6.0"
gatsby-source-filesystem "^2.8.0"
gatsby-core-utils "^1.8.0-next.0"
gatsby-plugin-image "^0.5.0-next.5"
gatsby-plugin-utils "^0.7.0-next.1"
gatsby-source-filesystem "^2.9.0-next.1"
is-online "^8.5.1"
json-stringify-safe "^5.0.1"
lodash "^4.17.20"
node-fetch "^2.6.1"
progress "^2.0.3"
qs "^6.9.4"

gatsby-source-filesystem@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.8.0.tgz#72bd65eda0b49aa27c618d9a1eb86e1c1df5d943"
integrity sha512-wZXwL/B+PvgSAi4Fkrw33yBk6FdDoz6g2mRfS6NxVVQotbA2oNe+jFc+IL0j9/cUMTItP3rW+8V8U9ufASQfAw==
gatsby-source-filesystem@^2.9.0-next.1:
version "2.9.0-next.1"
resolved "http://localhost:4873/gatsby-source-filesystem/-/gatsby-source-filesystem-2.9.0-next.1.tgz#eb40e8f834aef3b7dc4665de5ffd3b9a91f08e73"
integrity sha512-R13bVO+qx962t9M3DdT1SYO4EexUDZHjWW0q4XMXQyEuihi3AxDTNpvf57gnoZ65EoeN1/xGrTNxORif9s3s4A==
dependencies:
"@babel/runtime" "^7.12.5"
better-queue "^3.8.10"
chokidar "^3.4.3"
file-type "^16.0.0"
fs-extra "^8.1.0"
gatsby-core-utils "^1.7.0"
gatsby-core-utils "^1.8.0-next.0"
got "^9.6.0"
md5-file "^5.0.0"
mime "^2.4.6"
Expand Down