feat(sqip): implement sqip && fix mobile layout

README.md

@@ -8,6 +8,15 @@ Static sites are scalable, secure and have very little required maintenance. The
 
 With Contentful and Gatsby you can connect your favorite static site generator with an API that provides an easy to use interface for people writing content and automate the publishing using services like [Travis CI](https://travis-ci.org/) or [Netlify](https://www.netlify.com/).
 
+## Features
+
+* Simple content model and structure. Easy to adjust to your needs.
+* Contentful integration using our [Sync API](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/synchronization/initial-synchronization-of-entries-of-a-specific-content-type)
+* Using our [Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/) for development and our [Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/) for production.
+* Responsive/adaptive images via [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/)
+* Beautiful image placeholders via [SQIP](https://github.com/technopagan/sqip)
+
+
 ## Contribution
 
 This project is part of [contentful-userland](https://github.com/contentful-userland) which means that we’re always open to contributions and pull requests. You can learn more about how contentful userland is organized by visiting [our about repository](https://github.com/contentful-userland/about).

gatsby-config.js

@@ -26,5 +26,7 @@ module.exports = {
       resolve: 'gatsby-source-contentful',
       options: contentfulConfig,
     },
+    'gatsby-transformer-sharp',
+    'gatsby-transformer-sqip',
   ],
 }

package.json

@@ -7,23 +7,27 @@
     "url": "https://github.com/contentful-userland/gatsby-contentful-starter/issues"
   },
   "dependencies": {
-    "contentful-import": "^6.2.0",
-    "gatsby-link": "^1.6.34",
+    "contentful-import": "^7.0.1",
+    "gatsby": "^1.9.262",
+    "gatsby-image": "^1.0.51",
+    "gatsby-link": "^1.6.44",
     "gatsby-plugin-react-helmet": "^1.0.8",
-    "gatsby-source-contentful": "^1.3.38",
-    "gatsby-transformer-remark": "^1.7.32",
-    "inquirer": "^5.1.0",
-    "lodash": "^4.17.4",
+    "gatsby-source-contentful": "^1.3.51",
+    "gatsby-transformer-remark": "^1.7.41",
+    "gatsby-transformer-sharp": "^1.6.24",
+    "gatsby-transformer-sqip": "0.0.5",
+    "inquirer": "^5.2.0",
+    "lodash": "^4.17.10",
     "yargs-parser": "^10.0.0"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.1",
-    "chalk": "^2.3.1",
-    "eslint": "^4.15.0",
-    "eslint-plugin-react": "^7.5.1",
-    "gatsby": "^1.9.202",
+    "babel-eslint": "^8.2.3",
+    "chalk": "^2.4.1",
+    "eslint": "^4.19.1",
+    "eslint-plugin-react": "^7.8.2",
+    "gatsby-cli": "^1.1.53",
     "gh-pages": "^1.1.0",
-    "prettier": "^1.10.2"
+    "prettier": "^1.12.1"
   },
   "homepage": "https://github.com/contentful-userland/gatsby-contentful-starter#readme",
   "keywords": [

src/components/article-preview.js

@@ -1,10 +1,17 @@
 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
+      alt=""
+      sizes={{
+        ...article.heroImage.sizes,
+        base64: article.heroImage.sqip.dataURI,
+      }}
+    />
     <h3 className={styles.previewTitle}>
       <Link to={`/blog/${article.slug}`}>{article.title}</Link>
     </h3>

src/components/hero.js

@@ -1,17 +1,22 @@
 import React from 'react'
 import styles from './hero.module.css'
 
-export default ({ person }) => (
+import Img from 'gatsby-image'
+
+export default ({ data }) => (
   <div className={styles.hero}>
-    <img
+    <Img
       className={styles.heroImage}
-      src={`${person.node.image.file.url}?w=1180&h=600&fit=pad&bg=rgb:000000`}
       alt=""
+      sizes={{
+        ...data.heroImage.sizes,
+        base64: data.heroImage.sqip.dataURI,
+      }}
     />
     <div className={styles.heroDetails}>
-      <h3 className={styles.heroHeadline}>{person.node.name}</h3>
-      <p className={styles.heroTitle}>{person.node.title}</p>
-      <p>{person.node.shortBio.shortBio}</p>
+      <h3 className={styles.heroHeadline}>{data.name}</h3>
+      <p className={styles.heroTitle}>{data.title}</p>
+      <p>{data.shortBio ? data.shortBio.shortBio : data.subtitle}</p>
     </div>
   </div>
 )

src/components/hero.module.css

@@ -3,21 +3,25 @@
   background: #000;
   color: #fff;
   text-align: center;
-  height: 30em;
 }
 
 .heroImage {
-  height: 100%;
-  width: auto;
-  margin: 0 auto;
+  /*
+    Ensure golden ratio for the hero size while limiting it to some extend to
+    the viewport width
+  */
+  height: 61.8vh;
+  max-height: 80vw;
 }
 
 .heroDetails {
   position: absolute;
   background: rgba(0, 0, 0, .7);
-  top: 60%;
   left: 50%;
+  bottom: 0;
   transform: translate(-50%, 0);
+  font-size: calc(0.5em + 1vw);
+  padding: 0 0.5em;
 }
 
 .heroHeadline {
@@ -28,4 +32,4 @@
   margin: 0;
   font-size: 1.125em;
   font-weight: bold;
-}
+}

src/components/navigation.module.css

@@ -2,13 +2,19 @@
   display: flex;
   justify-content: center;
   list-style: none;
-  padding: 1em;
+  padding: 0;
+  margin: 0;
+  height: 20vh;
+  max-height: 100px;
   font-size: 1.25em;
 }
 
 .navigationItem {
+  display: inline-flex;
+  align-items: center;
   margin: 0 1em;
 }
-  .navigationItem a {
-    color: currentColor;
-  }
+
+.navigationItem a {
+  color: currentColor;
+}

src/layouts/base.css

@@ -12,6 +12,7 @@ body {
   line-height: 1.65;
   color: #373F49;
   background: #eee;
+  margin: 0;
 }
 
 img {
@@ -31,33 +32,29 @@ a {
 }
 
 .wrapper {
-  width: calc(100% - 10em);
+  width: calc(100% - 10vmin);
   margin: 0 auto;
-  padding: 2em 0;
+  padding: 5vmin 0;
 }
 
 /**
  * article grid
  */
 .article-list {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 -1em;
   margin: 0;
   padding: 0;
   list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-gap: 5vmin;
 }
-  .article-list > li {
-    flex: 1 1 calc(33.333% - 2em);
-    max-width: calc(33.3333% - 2em);
-  }
 
 /**
  *
  */
 .section-headline {
-  padding: 1em 0;
-  margin: 0 0 1em;
+  padding: 0 0 0.4em 0;
+  margin: 0 0 5vmin 0;
   border-bottom: 1px solid #ddd;
 }
 
@@ -72,4 +69,4 @@ a {
 
   .list-inline li {
     display: inline-block;
-  }
+  }

src/pages/blog.js

@@ -14,8 +14,7 @@ class BlogIndex extends React.Component {
       <div style={{ background: '#fff' }}>
         <Helmet title={siteTitle} />
         <div className="wrapper">
-          <div className={styles.hero}>Blog</div>
-          <h2 className="section-headline">Recent articles</h2>
+          <h2 className="section-headline">All articles:</h2>
           <ul className="article-list">
             {posts.map(({ node }) => {
               return (
@@ -43,8 +42,17 @@ export const pageQuery = graphql`
           publishDate(formatString: "MMMM Do, YYYY")
           tags
           heroImage {
-            file {
-              url
+            sqip(
+              numberOfPrimitives: 25
+              blur: 0
+              width: 350
+              height: 196
+              resizingBehavior: SCALE
+            ) {
+              dataURI
+            }
+            sizes(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
+              ...GatsbyContentfulSizes_withWebp_noBase64
             }
           }
           description {

src/pages/index.js

@@ -9,23 +9,26 @@ class RootIndex extends React.Component {
   render() {
     const siteTitle = get(this, 'props.data.site.siteMetadata.title')
     const posts = get(this, 'props.data.allContentfulBlogPost.edges')
-    const [author] = get(this, 'props.data.allContentfulPerson.edges')
+    const [authorNode] = get(this, 'props.data.allContentfulPerson.edges')
+    const author = authorNode.node
 
     return (
-      <div style={{ background: '#fff' }}>
-        <Helmet title={siteTitle} />
-        <Hero person={author} />
-        <div className="wrapper">
-          <h2 className="section-headline">Recent articles</h2>
-          <ul className="article-list">
-            {posts.map(({ node }) => {
-              return (
-                <li key={node.slug}>
-                  <ArticlePreview article={node} />
-                </li>
-              )
-            })}
-          </ul>
+      <div>
+        <Hero data={author} />
+        <div class="wrapper" style={{ background: '#fff' }}>
+          <Helmet title={siteTitle} />
+          <div className="wrapper">
+            <h2 className="section-headline">Recent articles</h2>
+            <ul className="article-list">
+              {posts.map(({ node }) => {
+                return (
+                  <li key={node.slug}>
+                    <ArticlePreview article={node} />
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
         </div>
       </div>
     )
@@ -44,8 +47,17 @@ export const pageQuery = graphql`
           publishDate(formatString: "MMMM Do, YYYY")
           tags
           heroImage {
-            file {
-              url
+            sqip(
+              numberOfPrimitives: 25
+              blur: 0
+              width: 350
+              height: 196
+              resizingBehavior: SCALE
+            ) {
+              dataURI
+            }
+            sizes(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
+              ...GatsbyContentfulSizes_withWebp_noBase64
             }
           }
           description {
@@ -64,11 +76,24 @@ export const pageQuery = graphql`
             shortBio
           }
           title
-          image {
-            file {
-              url
-              fileName
-              contentType
+          heroImage: image {
+            sqip(
+              numberOfPrimitives: 100
+              blur: 0
+              width: 1180
+              height: 480
+              resizingBehavior: PAD
+              background: "rgb:000000"
+            ) {
+              dataURI
+            }
+            sizes(
+              maxWidth: 1180
+              maxHeight: 480
+              resizingBehavior: PAD
+              background: "rgb:000000"
+            ) {
+              ...GatsbyContentfulSizes_withWebp_noBase64
             }
           }
         }