[SQIP] Add documentation

examples/using-sqip/package.json

@@ -9,9 +9,11 @@
     "gatsby-plugin-sharp": "^1.6.43",
     "gatsby-source-filesystem": "^1.5.34",
     "gatsby-transformer-sharp": "^1.6.23",
-    "gatsby-transformer-sqip": "*"
+    "gatsby-transformer-sqip": "0.0.6"
   },
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",

examples/using-sqip/src/components/polaroid.js

@@ -27,12 +27,12 @@ const data = {
     url: `https://unsplash.com/photos/HhOo98Iygps`,
   },
   'igor-ovsyannykov-307432-unsplash-2000px': {
-    style: { right: `27vw`, bottom: `3vw` },
+    style: { right: `27vw`, bottom: `4vw` },
     author: `Igor Ovsyannykov`,
     url: `https://unsplash.com/photos/uzd2UEDdQJ8`,
   },
   'quino-al-101314-unsplash-2000px': {
-    style: { right: `28vw`, bottom: `27vw` },
+    style: { right: `26vw`, bottom: `27vw` },
     author: `Quino Al`,
     url: `https://unsplash.com/photos/vBxlL1xpSdc`,
   },
@@ -48,24 +48,10 @@ const data = {
   },
 }
 
-function generateStyle(imageData) {
+function generateDynamicStyle(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,
   }
 }
@@ -77,34 +63,18 @@ const Polaroid = ({ image }) => {
     <a
       href={imageData.url}
       title={`by ${imageData.author}`}
-      style={generateStyle(imageData)}
+      className="polaroid"
+      style={generateDynamicStyle(imageData)}
     >
-      <div style={{ position: `relative` }}>
+      <div className="polaroid-image-wrapper">
         <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>
+      <div className="polaroid-author">{`📷 ${imageData.author}`}</div>
     </a>
   )
 }

examples/using-sqip/src/layouts/index.css

@@ -60,7 +60,7 @@ dfn {
 }
 h1 {
   font-size: 2em;
-  margin: .67em 0;
+  margin: 0.67em 0;
 }
 mark {
   background-color: #ff0;
@@ -77,10 +77,10 @@ sup {
   vertical-align: baseline;
 }
 sub {
-  bottom: -.25em;
+  bottom: -0.25em;
 }
 sup {
-  top: -.5em;
+  top: -0.5em;
 }
 img {
   border-style: none;
@@ -122,29 +122,29 @@ button,
 select {
   text-transform: none;
 }
-[type=reset],
-[type=submit],
+[type='reset'],
+[type='submit'],
 button,
-html [type=button] {
+html [type='button'] {
   -webkit-appearance: button;
 }
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner,
 button::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring,
 button:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 fieldset {
   border: 1px solid silver;
   margin: 0 2px;
-  padding: .35em .625em .75em;
+  padding: 0.35em 0.625em 0.75em;
 }
 legend {
   box-sizing: border-box;
@@ -157,26 +157,26 @@ legend {
 textarea {
   overflow: auto;
 }
-[type=checkbox],
-[type=radio] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
-[type=search] {
+[type='search'] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
-[type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 ::-webkit-input-placeholder {
   color: inherit;
-  opacity: .54;
+  opacity: 0.54;
 }
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
@@ -202,10 +202,10 @@ body {
   font-weight: normal;
   word-wrap: break-word;
   font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
+  -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+  -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+  -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
 }
 img {
   max-width: 100%;
@@ -573,10 +573,10 @@ td,
 th {
   text-align: left;
   border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
+  font-feature-settings: 'tnum';
+  -moz-font-feature-settings: 'tnum';
+  -ms-font-feature-settings: 'tnum';
+  -webkit-font-feature-settings: 'tnum';
   padding-left: 0.96667rem;
   padding-right: 0.96667rem;
   padding-top: 0.725rem;
@@ -594,8 +594,8 @@ tt,
 code {
   background-color: hsla(0, 0%, 0%, 0.04);
   border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
+  font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono',
+    'Liberation Mono', Menlo, Courier, monospace;
   padding: 0;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
@@ -609,16 +609,76 @@ code:after,
 tt:before,
 tt:after {
   letter-spacing: -0.2em;
-  content: " ";
+  content: ' ';
 }
 pre code:before,
 pre code:after,
 pre tt:before,
 pre tt:after {
-  content: "";
+  content: '';
 }
 @media only screen and (max-width: 480px) {
   html {
     font-size: 100%;
   }
 }
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.15em;
+  vertical-align: -0.45em;
+}
+blockquote p {
+  display: inline;
+}
+
+.polaroid {
+  box-sizing: content-box;
+  display: block;
+  position: absolute;
+  width: 18vw;
+  padding: 0.8vw 0.4vw 0;
+  background: linear-gradient(120deg, #fff, #eee 60%);
+  color: inherit;
+  text-decoration: none;
+  box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.4),
+    rgba(0, 0, 0, 0.1) 1px 1px 3px 0px inset;
+}
+
+.polaroid-image-wrapper {
+  position: relative;
+}
+
+.polaroid-image-wrapper::after {
+  content: '';
+  display: block;
+  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%
+  );
+  box-shadow: inset 4px 5px 10px 0 rgba(0, 0, 0, 0.05);
+  width: 100%;
+  height: 100%;
+}
+
+.polaroid-author {
+  line-height: 4vw;
+  text-align: center;
+  font-size: 1.4vw;
+  /* Hate me or not, Comic Sans is a great fit here */
+  font-family: "Comic Sans MS", cursive, sans-serif;
+}