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

Commit

Permalink
first working version
Browse files Browse the repository at this point in the history
  • Loading branch information
Benedikt Rötsch committed Feb 23, 2018
1 parent 3c13ee0 commit c8d4882
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 4 deletions.
1 change: 1 addition & 0 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = {
pathPrefix: '/gatsby-contentful-starter',
plugins: [
'gatsby-transformer-remark',
'gatsby-transformer-sqip',
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-contentful',
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
},
"dependencies": {
"contentful-import": "^6.2.0",
"gatsby-image": "^1.0.39",
"gatsby-link": "^1.6.34",
"gatsby-plugin-react-helmet": "^1.0.8",
"gatsby-source-contentful": "^1.3.38",
Expand Down
10 changes: 9 additions & 1 deletion src/components/article-preview.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import React from 'react'
import styles from './article-preview.module.css'
import Link from 'gatsby-link'
import Img from 'gatsby-image'

export default ({ article }) => (
<div className={styles.preview}>
<img src={`${article.heroImage.file.url}?fit=scale&w=350&h=196`} alt="" />
<Img
className={styles.heroImage}
resolutions={{
...article.heroImage.resolutions,
base64: article.heroImage.sqip
}}
alt=""
/>
<h3 className={styles.previewTitle}>
<Link to={`/blog/${article.slug}`}>{article.title}</Link>
</h3>
Expand Down
8 changes: 6 additions & 2 deletions src/components/hero.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React from 'react'
import Img from "gatsby-image";
import styles from './hero.module.css'

export default ({ person }) => (
<div className={styles.hero}>
<img
<Img
className={styles.heroImage}
src={`${person.node.image.file.url}?w=1180&h=600&fit=pad&bg=rgb:000000`}
resolutions={{
...person.node.image.resolutions,
base64: person.node.image.sqip
}}
alt=""
/>
<div className={styles.heroDetails}>
Expand Down
10 changes: 9 additions & 1 deletion src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ export const pageQuery = graphql`
heroImage {
file {
url
}
},
resolutions {
...GatsbyContentfulResolutions_withWebp_noBase64
},
sqip
}
description {
childMarkdownRemark {
Expand All @@ -69,6 +73,10 @@ export const pageQuery = graphql`
url
fileName
contentType
},
sqip(numberOfPrimitives: 3, blur: 0),
resolutions {
...GatsbyContentfulResolutions_withWebp_noBase64
}
}
}
Expand Down

0 comments on commit c8d4882

Please sign in to comment.