From e68e6d7c8690db7330c30ca4959bca800ed4c5fa Mon Sep 17 00:00:00 2001 From: suthesan Date: Fri, 23 Oct 2020 15:57:49 +0800 Subject: [PATCH 1/4] added gatsby image next gen --- package-lock.json | 8 ++++++ package.json | 1 + src/components/elements/image/image.js | 39 ++++++++++++++++++++++++++ src/pages/home/_hero.js | 20 +++++++++++-- 4 files changed, 65 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index df5400c..4f21dde 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2746,6 +2746,14 @@ "wonka": "^4.0.14" } }, + "@wardpeet/gatsby-image-nextgen": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@wardpeet/gatsby-image-nextgen/-/gatsby-image-nextgen-0.0.2.tgz", + "integrity": "sha512-B3zr6k0xLSzPJ+Vm1VVOStz2J/+kCVYUKUywKF1Cg6KM+QY4yg92eVVky3sr6UJokqYrwPCPw+eAwba6KeSwcQ==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz", diff --git a/package.json b/package.json index d7fdaca..b4f14aa 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "@artsy/fresnel": "^1.2.2", "@svgr/webpack": "^5.4.0", + "@wardpeet/gatsby-image-nextgen": "0.0.2", "babel-plugin-styled-components": "^1.11.1", "commander": "^6.1.0", "crc-32": "^1.2.0", diff --git a/src/components/elements/image/image.js b/src/components/elements/image/image.js index 234a2c9..c1072d6 100644 --- a/src/components/elements/image/image.js +++ b/src/components/elements/image/image.js @@ -1,11 +1,16 @@ import React from 'react' import Img from 'gatsby-image' +import { GatsbyImage } from '@wardpeet/gatsby-image-nextgen' import { ImageWrapper } from './image-style' export const Image = ({ data, alt, width, height, className }) => { if (data) { const data_fluid = data.childImageSharp.fluid const data_fixed = data.childImageSharp.fixed + + console.log(data_fluid) // eslint-disable-line + console.log(data_fixed) // eslint-disable-line + return ( { return null } + +export const NextGenImage = ({ data, alt, width, height, className }) => { + if (data) { + const data_fluid = data.childImageSharp.fluid + const data_fixed = data.childImageSharp.fixed + console.log(data_fluid) // eslint-disable-line + console.log(data_fixed.src) // eslint-disable-line + + return ( + + + + ) + } + + return null +} diff --git a/src/pages/home/_hero.js b/src/pages/home/_hero.js index cc4c511..01dee91 100644 --- a/src/pages/home/_hero.js +++ b/src/pages/home/_hero.js @@ -5,7 +5,7 @@ import { useSnackbar } from 'react-simple-snackbar' import { StyledInput, StyledText, LogoWrapper, StyledImage, HeroContainer } from './_home-style' import { Media } from 'themes' import Login from 'common/login' -import { WhiteText, Button, Flex, Image, Text, Background } from 'components/elements' +import { WhiteText, Button, Flex, NextGenImage, Text, Background } from 'components/elements' import { localize, Localize } from 'components/localization' import { BinarySocketBase } from 'websocket/socket_base' import TrafficSource from 'common/traffic-source' @@ -21,7 +21,19 @@ const query = graphql` ...fadeIn } hero_desktop: file(relativePath: { eq: "home/desktop/hero-image.png" }) { - ...desktopFadeIn + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + fixed(width: 688, height: 382) { + fallback: base64 + width + height + src + srcSet + srcWebp + srcSetWebp + } + } } hero_mobile: file(relativePath: { eq: "home/mobile/hero-image.png" }) { ...mobileFadeIn @@ -106,6 +118,8 @@ export const Hero = () => { Login.initOneAll(data_provider) } + console.log(data['hero_desktop']) // eslint-disable-line + return ( @@ -190,7 +204,7 @@ export const Hero = () => {
- platform devices desktop Date: Fri, 23 Oct 2020 16:31:33 +0800 Subject: [PATCH 2/4] changed hero images to use gatsby next gen --- src/components/elements/image/image-style.js | 4 ++++ src/components/elements/image/image.js | 4 ---- src/pages/home/_hero.js | 14 +++++++++++--- src/pages/home/_home-style.js | 3 ++- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/elements/image/image-style.js b/src/components/elements/image/image-style.js index f375cfa..bfc63c9 100644 --- a/src/components/elements/image/image-style.js +++ b/src/components/elements/image/image-style.js @@ -9,4 +9,8 @@ export const ImageWrapper = styled.div` width: 100%; height: 100%; } + & .gatsby-image { + width: 100%; + height: 100%; + } ` diff --git a/src/components/elements/image/image.js b/src/components/elements/image/image.js index c1072d6..5ab6351 100644 --- a/src/components/elements/image/image.js +++ b/src/components/elements/image/image.js @@ -8,9 +8,6 @@ export const Image = ({ data, alt, width, height, className }) => { const data_fluid = data.childImageSharp.fluid const data_fixed = data.childImageSharp.fixed - console.log(data_fluid) // eslint-disable-line - console.log(data_fixed) // eslint-disable-line - return ( { const data_fluid = data.childImageSharp.fluid const data_fixed = data.childImageSharp.fixed console.log(data_fluid) // eslint-disable-line - console.log(data_fixed.src) // eslint-disable-line return ( diff --git a/src/pages/home/_hero.js b/src/pages/home/_hero.js index 01dee91..5046da7 100644 --- a/src/pages/home/_hero.js +++ b/src/pages/home/_hero.js @@ -36,7 +36,17 @@ const query = graphql` } } hero_mobile: file(relativePath: { eq: "home/mobile/hero-image.png" }) { - ...mobileFadeIn + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + fluid { + fallback: base64 + src + srcSet + srcWebp + srcSetWebp + } + } } } ` @@ -118,8 +128,6 @@ export const Hero = () => { Login.initOneAll(data_provider) } - console.log(data['hero_desktop']) // eslint-disable-line - return ( diff --git a/src/pages/home/_home-style.js b/src/pages/home/_home-style.js index 9e7e8be..928abdf 100644 --- a/src/pages/home/_home-style.js +++ b/src/pages/home/_home-style.js @@ -9,6 +9,7 @@ import { Image, Text, Background, + NextGenImage, } from 'components/elements' import { device } from 'themes/device' @@ -46,7 +47,7 @@ export const LogoWrapper = styled(Flex)` margin-left: 8px; ` -export const StyledImage = styled(Image)` +export const StyledImage = styled(NextGenImage)` @media ${device.mobileS} { width: 329px; height: 181px; From 1cd27b46833c70f2be575a1247bf1f672b0c3ffc Mon Sep 17 00:00:00 2001 From: suthesan Date: Fri, 23 Oct 2020 16:43:51 +0800 Subject: [PATCH 3/4] changed highlights section images to use gatsby next gen --- src/components/elements/image/image.js | 1 - src/pages/home/_highlights.js | 42 ++++++++++++++++++++++---- src/pages/home/_home-style.js | 2 +- 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/src/components/elements/image/image.js b/src/components/elements/image/image.js index 5ab6351..439f33f 100644 --- a/src/components/elements/image/image.js +++ b/src/components/elements/image/image.js @@ -26,7 +26,6 @@ export const NextGenImage = ({ data, alt, width, height, className }) => { if (data) { const data_fluid = data.childImageSharp.fluid const data_fixed = data.childImageSharp.fixed - console.log(data_fluid) // eslint-disable-line return ( diff --git a/src/pages/home/_highlights.js b/src/pages/home/_highlights.js index 0754dbb..4fa2591 100644 --- a/src/pages/home/_highlights.js +++ b/src/pages/home/_highlights.js @@ -14,13 +14,43 @@ import { SectionContainer } from 'components/elements' const query = graphql` query { anytime: file(relativePath: { eq: "home/anytime-anywhere.jpg" }) { - ...fadeIn + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + fluid { + fallback: base64 + src + srcSet + srcWebp + srcSetWebp + } + } } crypto: file(relativePath: { eq: "home/crypto-wallets.png" }) { - ...fadeIn + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + fluid { + fallback: base64 + src + srcSet + srcWebp + srcSetWebp + } + } } deposit: file(relativePath: { eq: "home/minimum-deposit.jpg" }) { - ...fadeIn + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + fluid { + fallback: base64 + src + srcSet + srcWebp + srcSetWebp + } + } } } ` @@ -43,7 +73,7 @@ export const Highlights = () => { data={data.anytime} alt="highlights anytime" width={{ _: '300px', xxl: '588px' }} - height={{ _: '100%', xxl: '100%' }} + height={{ _: '310px', xxl: '688px' }} /> @@ -64,7 +94,7 @@ export const Highlights = () => { data={data.crypto} alt="crypto wallet" width={{ _: '292px', xxl: '528px' }} - height={{ _: '100%', xxl: '528px' }} + height={{ _: '292px', xxl: '528px' }} /> @@ -85,7 +115,7 @@ export const Highlights = () => { data={data.deposit} alt="deposit" width={{ _: '276px', xxl: '510px' }} - height={{ _: '100%', xxl: '256px' }} + height={{ _: '138px', xxl: '256px' }} /> diff --git a/src/pages/home/_home-style.js b/src/pages/home/_home-style.js index 928abdf..a3d635d 100644 --- a/src/pages/home/_home-style.js +++ b/src/pages/home/_home-style.js @@ -84,7 +84,7 @@ export const ContentWrapper = styled(Container)` } ` -export const HighLightsImage = styled(Image)` +export const HighLightsImage = styled(NextGenImage)` margin: auto; ` From 27c9416f682d4fe1347af1ef0a4d0a38e8ea4711 Mon Sep 17 00:00:00 2001 From: suthesan Date: Fri, 23 Oct 2020 16:58:19 +0800 Subject: [PATCH 4/4] changed reviews section to use ngatsby ext gen --- src/pages/home/_reviews.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/pages/home/_reviews.js b/src/pages/home/_reviews.js index 4d79e6d..8d277b4 100644 --- a/src/pages/home/_reviews.js +++ b/src/pages/home/_reviews.js @@ -8,14 +8,26 @@ import { Carousel, SectionContainer, Container, - Image, + NextGenImage, } from 'components/elements' import { Localize, localize } from 'components/localization' const query = graphql` query { jose: file(relativePath: { eq: "home/reviews/jose.png" }) { - ...fadeIn + childImageSharp { + # Specify the image processing specifications right in the query. + # Makes it trivial to update as your page's design changes. + fixed(width: 48, height: 48) { + fallback: base64 + width + height + src + srcSet + srcWebp + srcSetWebp + } + } } } ` @@ -27,7 +39,7 @@ const Card = ({ name, quote, location, image }) => { {quote} - jose + {name}