[Ready 4 Review] SQIP - Vectorized primitive image previews (#4205)

* first working version with Contentful assets only

* add readme

* respect width, height, aspect ratio, cropping, resize focus and background

* add support for gatsby-transformer-sharp

* integrate in gatsbygram

* avoid useless regeneration cus contentDigest changes

* proper way to get absolute path to ImageSharp nodes

* queue preview generation and cache results on disk

* upgrade to latest node-sqip to get rid of the GoLang dependency

* replace custom svg data uri function with package

* prepare images via sharp plugin and allow sharp transformations

* load cached svg properly from disk

* fix queue resolving to early

* set contentful images to 400px

* implement new sharp transformation awareness feature

* WIP - extract generation and write first pseudo test

* fix styling for gatsbygram post detail

* finalize unit tests for actual sqip implementation

* use 256px input image width to match sqip/primitive default

* add using-sqip example page

* some cleanup

* clean up example and enhance polaroid effect

* fix using-sqip dependency

* remove base64 since it was not implemented and is bad for compression

* remove sqip from gatsbygram example

* simplify tests

* Small change to trigger build

Author: axe312ger

examples/using-sqip/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

examples/using-sqip/.gitignore

@@ -0,0 +1,8 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build directory
+/public
+.DS_Store

examples/using-sqip/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

examples/using-sqip/gatsby-config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby SQIP Example`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/images/`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `background`,
+        path: `${__dirname}/src/background/`,
+      },
+    },
+    `gatsby-image`,
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+    `gatsby-transformer-sqip`,
+  ],
+}

examples/using-sqip/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "using-sqip",
+  "description": "Gatsby example site using the sqip transformer plugin",
+  "version": "1.0.0",
+  "author": "Benedikt Rötsch <[email protected]>",
+  "dependencies": {
+    "gatsby": "^1.9.247",
+    "gatsby-image": "^1.0.48",
+    "gatsby-plugin-sharp": "^1.6.43",
+    "gatsby-source-filesystem": "^1.5.34",
+    "gatsby-transformer-sharp": "^1.6.23",
+    "gatsby-transformer-sqip": "*"
+  },
+  "keywords": ["gatsby"],
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write 'src/**/*.js'",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "prettier": "^1.12.0"
+  }
+}

examples/using-sqip/src/background/neven-krcmarek-264325-unsplash.jpg

@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Image from 'gatsby-image'
+
+// Styling based on https://codepen.io/havardob/pen/ZOOmMe
+
+const data = {
+  'alisa-anton-166247-unsplash-2000px': {
+    style: { left: `6vw`, bottom: `6vw` },
+    author: `Alisa Anton`,
+    url: `https://unsplash.com/photos/ukxAK0c2FqM`,
+  },
+  'anthony-esau-173126-unsplash-2000px': {
+    style: { left: `30vw`, bottom: `12vw` },
+    author: `Anthony Esau`,
+    url: `https://unsplash.com/photos/N2zk9yXjmLA`,
+  },
+  'beth-solano-313648-unsplash-2000px': {
+    style: { left: `39vw`, top: `3vw` },
+    author: `Beth Solando`,
+    url: `https://unsplash.com/photos/VGkn9ENxLXM`,
+  },
+  'desmond-simon-412494-unsplash-2000px': {
+    style: { right: `5vw`, bottom: `5vw` },
+    author: `Desmond Simon`,
+    url: `https://unsplash.com/photos/HhOo98Iygps`,
+  },
+  'igor-ovsyannykov-307432-unsplash-2000px': {
+    style: { right: `27vw`, bottom: `3vw` },
+    author: `Igor Ovsyannykov`,
+    url: `https://unsplash.com/photos/uzd2UEDdQJ8`,
+  },
+  'quino-al-101314-unsplash-2000px': {
+    style: { right: `28vw`, bottom: `27vw` },
+    author: `Quino Al`,
+    url: `https://unsplash.com/photos/vBxlL1xpSdc`,
+  },
+  'samuel-zeller-16570-unsplash-2000px': {
+    style: { right: `16vw`, top: `2vw` },
+    author: `Samuel Zeller`,
+    url: `https://unsplash.com/photos/CwkiN6_qpDI`,
+  },
+  'tyler-lastovich-205631-unsplash-2000px': {
+    style: { right: `3vw`, top: `14vw` },
+    author: `Tyler Lastovich`,
+    url: `https://unsplash.com/photos/DMJUIGRO_1M`,
+  },
+}
+
+function generateStyle(imageData) {
+  const rotation = Math.floor(Math.random() * 26) - 13
+  return {
+    boxSizing: `content-box`,
+
+    display: `block`,
+    position: `absolute`,
+
+    width: `18vw`,
+
+    padding: `0.8vw 0.4vw 0`,
+    background: `linear-gradient(120deg, #fff, #eee 60%)`,
+
+    color: `inherit`,
+
+    boxShadow: `2px 2px 7px 0px rgba(0,0,0,0.4), rgba(0, 0, 0, 0.1) 1px 1px 3px 0px inset`,
+    transform: `rotate(${rotation}deg)`,
+
+    ...imageData.style,
+  }
+}
+
+const Polaroid = ({ image }) => {
+  const imageData = data[image.name]
+
+  return (
+    <a
+      href={imageData.url}
+      title={`by ${imageData.author}`}
+      style={generateStyle(imageData)}
+    >
+      <div style={{ position: `relative` }}>
+        <Image
+          sizes={{
+            ...image.childImageSharp.sizes,
+            base64: image.childImageSharp.sqip.dataURI,
+          }}
+        />
+        <div
+          style={{
+            position: `absolute`,
+            top: 0,
+            left: 0,
+            background: `linear-gradient(120deg, rgba(255, 255, 255, 0.5), transparent 60%, rgba(0, 0, 0, 0.4) 99%)`,
+            boxShadow: `inset 4px 5px 10px 0 rgba(0,0,0,0.05)`,
+            width: `100%`,
+            height: `100%`
+          }}
+        />
+      </div>
+      <div
+        style={{
+          lineHeight: `4vw`,
+          textAlign: `center`,
+          fontSize: `1.6vw`,
+        }}
+      >{`📷 ${imageData.author}`}</div>
+    </a>
+  )
+}
+
+Polaroid.propTypes = {
+  image: PropTypes.object,
+}
+
+export default Polaroid