feat(InstagramWidget): remove lozad dependency

* use absolute positioned gatsby-image instead
GaiAma · Nov 11, 2018 · b29290f · b29290f
1 parent bfec265
commit b29290f
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -82,7 +82,6 @@
     "hex2rgba": "0.0.1",
     "js-yaml": "3.12.0",
     "lodash": "4.17.11",
-    "lozad": "1.6.0",
     "moment-timezone": "0.5.21",
     "prop-styles": "2.0.0",
     "prop-types": "15.6.2",

diff --git a/src/components/InstagramWidget.js b/src/components/InstagramWidget.js
@@ -3,16 +3,14 @@ import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import { colors, fontFamilies, fullPageWidth, media } from '@/theme'
-import Lazy from '@/components/Lazy'
 import { mediaQuery } from '@/components/MediaQuery'
 
 const InstagramWidget = ({ user, followLink, bg, images }) => {
   const imgs = mediaQuery(`(max-width: 779px)`) ? images.slice(0, 3) : images
 
   return (
     <div>
-      <Lazy
-        image={bg}
+      <div
         css={{
           display: `flex`,
           justifyContent: `space-around`,
@@ -22,6 +20,16 @@ const InstagramWidget = ({ user, followLink, bg, images }) => {
           ...fullPageWidth,
         }}
       >
+        <Img
+          fluid={bg}
+          css={`
+            position: absolute !important;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+          `}
+        />
         {imgs.map(x => (
           <div
             key={x.node.id}
@@ -46,7 +54,7 @@ const InstagramWidget = ({ user, followLink, bg, images }) => {
             </a>
           </div>
         ))}
-      </Lazy>
+      </div>
       <div
         css={{
           marginTop: `.5rem`,
@@ -89,7 +97,7 @@ const InstagramWidget = ({ user, followLink, bg, images }) => {
 InstagramWidget.propTypes = {
   user: PropTypes.string,
   followLink: PropTypes.string,
-  bg: PropTypes.string,
+  bg: PropTypes.object,
   images: PropTypes.array,
 }
 

diff --git a/src/components/Lazy.js b/src/components/Lazy.js
diff --git a/src/templates/HomePage.js b/src/templates/HomePage.js
@@ -236,7 +236,7 @@ const HomePage = props => (
     <InstagramWidget
       user={props.data.instagram.frontmatter.instagramUser}
       followLink={props.data.instagram.frontmatter.followLink}
-      bg={props.data.instagram.frontmatter.bg.image.fluid.src}
+      bg={props.data.instagram.frontmatter.bg.image.fluid}
       images={props.data.instagramImages.edges}
     />
 

diff --git a/yarn.lock b/yarn.lock
@@ -9765,11 +9765,6 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
-lozad@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.6.0.tgz#e96c37c2e334bf626138aaac547a7230773d6647"
-  integrity sha512-CKhW0A4dyFqoy91KWCNZKjEupWCIOwPDFvkQajfRPpsO5iP3SySMG+IE3wvbT211Su101Rv69iWCG1/W5bJcLw==
-
 lpad-align@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/lpad-align/-/lpad-align-1.1.2.tgz#21f600ac1c3095c3c6e497ee67271ee08481fe9e"