Skip to content

Commit

Permalink
Refactor: using-contentful to use gatsby-plugin-image exclusively (#3…
Browse files Browse the repository at this point in the history 
…0717)

* refactor: use gatsby-plugin-image only

* fix: improve header layout and use layout on image example page
  • Loading branch information
@axe312ger
axe312ger authored Apr 13, 2021
1 parent 7ebf454 commit e5b9222
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 179 deletions.
1 change: 0 additions & 1 deletion examples/using-contentful/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"dependencies": {
"gatsby": "next",
"gatsby-core-utils": "next",
"gatsby-image": "next",
"gatsby-plugin-image": "next",
"gatsby-plugin-sharp": "next",
"gatsby-plugin-typography": "next",
Expand Down
74 changes: 42 additions & 32 deletions examples/using-contentful/src/layouts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,48 @@ const propTypes = {
}

const DefaultLayout = ({ children }) => (
<div
style={{
margin: `0 auto`,
marginTop: rhythm(1.5),
marginBottom: rhythm(1.5),
maxWidth: 650,
paddingLeft: rhythm(3 / 4),
paddingRight: rhythm(3 / 4),
}}
>
<Link style={{ textDecoration: `none` }} to="/">
<h3 style={{ color: `tomato`, marginBottom: rhythm(1.5) }}>
Example of using Contentful as a data source for a Gatsby site
</h3>
</Link>
{children}
<hr style={{ marginTop: rhythm(3) }} />
<p>
The src for this website is at
{` `}
<a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful">
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
</a>
</p>
<p>
The Contentful site that is providing the data for this site is at
{` `}
<a href="https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1">
https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1
</a>
</p>
</div>
<>
<header
style={{
textAlign: "center",
backgroundColor: `tomato`,
padding: rhythm(1 / 2),
}}
>
<Link style={{ textDecoration: `none` }} to="/">
<h4 style={{ color: `white`, marginBottom: 0 }}>
Example of using Contentful as a data source for a Gatsby site
</h4>
</Link>
</header>
<div
style={{
margin: `0 auto`,
marginTop: rhythm(1.5),
marginBottom: rhythm(1.5),
maxWidth: 650,
paddingLeft: rhythm(3 / 4),
paddingRight: rhythm(3 / 4),
}}
>
{children}
<hr style={{ marginTop: rhythm(3) }} />
<p>
The src for this website is at
{` `}
<a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful">
https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful
</a>
</p>
<p>
The Contentful site that is providing the data for this site is at
{` `}
<a href="https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1">
https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M?delivery_access_token=e481b0f7c5572374474b29f81a91e8ac487bb27d70a6f14dd12142837d8e980a&space_id=ubriaw6jfhm1
</a>
</p>
</div>
</>
)

DefaultLayout.propTypes = propTypes
Expand Down
199 changes: 99 additions & 100 deletions examples/using-contentful/src/pages/image-api.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import Layout from "../layouts"
import { rhythm } from "../utils/typography"

const ImageAPI = props => {
const assets = props.data.allContentfulAsset.edges
return (
<>
<Layout>
<div
style={{
margin: `0 auto`,
Expand Down Expand Up @@ -161,12 +162,11 @@ const ImageAPI = props => {
image={assets[1].node.fullWidth}
style={{}}
/>
<Layout>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -176,36 +176,36 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
<h2 id="dominant">Dominant color previews</h2>
<p>
This calculates the dominant color of the source image and uses it as
a solid background color.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, dominant } }) => (
<div key={id}>
<GatsbyImage
image={dominant}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
/>
</pre>
<h2 id="dominant">Dominant color previews</h2>
<p>
This calculates the dominant color of the source image and uses it as a
solid background color.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, dominant } }) => (
<div key={id}>
<GatsbyImage
image={dominant}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -219,36 +219,36 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
<h2 id="blurred">Blurred previews</h2>
<p>
This generates a very low-resolution version of the source image and
displays it as a blurred background.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, blurred } }) => (
<div key={id}>
<GatsbyImage
image={blurred}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
/>
</pre>
<h2 id="blurred">Blurred previews</h2>
<p>
This generates a very low-resolution version of the source image and
displays it as a blurred background.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, blurred } }) => (
<div key={id}>
<GatsbyImage
image={blurred}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -262,37 +262,37 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
<h2 id="traced">Traced SVG previews</h2>
<p>
This generates a simplified, flat SVG version of the source image,
which it displays as a placeholder. This works well for images with
simple shapes or that include transparency.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, traced } }) => (
<div key={id}>
<GatsbyImage
image={traced}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
/>
</pre>
<h2 id="traced">Traced SVG previews</h2>
<p>
This generates a simplified, flat SVG version of the source image, which
it displays as a placeholder. This works well for images with simple
shapes or that include transparency.
</p>
<div
style={{
display: `grid`,
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
gap: rhythm(1),
}}
>
{assets.map(({ node: { id, title, traced } }) => (
<div key={id}>
<GatsbyImage
image={traced}
alt={title}
style={{ border: `1px solid red` }}
/>
</div>
))}
</div>
<h4>GraphQL query</h4>
<pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
<code
dangerouslySetInnerHTML={{
__html: `{
allContentfulAsset {
edges {
node {
Expand All @@ -306,11 +306,10 @@ const ImageAPI = props => {
}
}
}`,
}}
/>
</pre>
</Layout>
</>
}}
/>
</pre>
</Layout>
)
}

Expand Down
21 changes: 11 additions & 10 deletions examples/using-contentful/src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react"
import { Link, graphql } from "gatsby"
import * as PropTypes from "prop-types"
import Img from "gatsby-image"

import { Link, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import { rhythm } from "../utils/typography"
import Layout from "../layouts"

Expand All @@ -25,8 +27,11 @@ const Product = ({ node }) => (
}}
>
<div style={{ marginRight: rhythm(1 / 2) }}>
{node.image[0].fixed.src && (
<Img style={{ margin: 0 }} fixed={node.image[0].fixed} />
{node.image[0].gatsbyImageData && (
<GatsbyImage
style={{ margin: 0 }}
image={node.image[0].gatsbyImageData}
/>
)}
</div>
<div style={{ flex: 1 }}>{node.productName.productName}</div>
Expand Down Expand Up @@ -89,9 +94,7 @@ export const pageQuery = graphql`
productName
}
image {
fixed(width: 75) {
...GatsbyContentfulFixed
}
gatsbyImageData(layout: FIXED, width: 75)
}
}
}
Expand All @@ -104,9 +107,7 @@ export const pageQuery = graphql`
productName
}
image {
fixed(width: 75) {
...GatsbyContentfulFixed
}
gatsbyImageData(layout: FIXED, width: 75)
}
}
}
Expand Down
Loading

0 comments on commit e5b9222

Please sign in to comment.