From c94cc3f91f0077b3da6e52ad9d3c4f0e57721694 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 11:47:47 +0530 Subject: [PATCH 01/14] added srcSet in imageParams object --- src/components/impl/gumlet-image.js | 39 +++++++++++++++++------------ 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index 41da2bde..9257c35c 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -1,24 +1,26 @@ -import React, { useEffect } from "react"; -import emptyWebGif from 'empty-web-gif'; +import omit from "@babel/runtime/helpers/objectWithoutProperties"; +import emptyWebGif from "empty-web-gif"; import { FocusedImage } from "quintype-js"; +import React, { useEffect } from "react"; import { hashString, USED_PARAMS } from "./image-utils"; -import omit from '@babel/runtime/helpers/objectWithoutProperties'; let forceLoadingGumlet = false; function loadGumlet() { - if(window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) { + if (window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) { return; } - if (process.env.NODE_ENV == 'development') { - console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration"); + if (process.env.NODE_ENV == "development") { + console.warn( + "Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration" + ); } forceLoadingGumlet = true; window.GUMLET_CONFIG = window.GUMLET_CONFIG || { hosts: [] - } - const script = document.createElement('script'); - script.type = 'text/javascript'; - script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js'; + }; + const script = document.createElement("script"); + script.type = "text/javascript"; + script.src = "https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js"; document.body.appendChild(script); } @@ -29,6 +31,9 @@ export function GumletImage(props) { const imageProps = { src: emptyWebGif, "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams), + srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)} 300w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)} 768w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)} 1080w,`, key: hashString(slug) }; @@ -36,10 +41,12 @@ export function GumletImage(props) { useEffect(loadGumlet); - return - - - + return ( + + + + + ); } From 1dd7dcc7edd99511885ccedd9d0a2759887738c3 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 11:48:53 +0530 Subject: [PATCH 02/14] chore(release): 2.31.4-enable-srcset.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index a57751e9..76dbeef4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.3", + "version": "2.31.4-enable-srcset.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1e8b51c5..ce348247 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.3", + "version": "2.31.4-enable-srcset.0", "description": "Components to help build Quintype Node.js apps", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 4d6ea8ba7798e365714016aa62c13a6939c8e987 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 12:16:46 +0530 Subject: [PATCH 03/14] add width to srcSet --- src/components/impl/gumlet-image.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index 9257c35c..e8d1ee97 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -31,9 +31,9 @@ export function GumletImage(props) { const imageProps = { src: emptyWebGif, "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams), - srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)} 300w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)} 768w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)} 1080w,`, + srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}?w=300 300w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}?w=300 768w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}?w=300 1080w,`, key: hashString(slug) }; From c243603d72c68f9cf9becd98244db19c2ddfacad Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 12:17:53 +0530 Subject: [PATCH 04/14] chore(release): 2.31.4-enable-srcset.1 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 76dbeef4..265073e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.0", + "version": "2.31.4-enable-srcset.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ce348247..422c14ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.0", + "version": "2.31.4-enable-srcset.1", "description": "Components to help build Quintype Node.js apps", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 05b30533fd5660b757d8eb88182d8f21e21f486c Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 15:43:13 +0530 Subject: [PATCH 05/14] add width to srcSet --- src/components/impl/gumlet-image.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index e8d1ee97..cd2c634a 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -31,9 +31,9 @@ export function GumletImage(props) { const imageProps = { src: emptyWebGif, "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams), - srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}?w=300 300w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)}?w=300 768w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)}?w=300 1080w,`, + srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=300 300w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=768 768w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=1080 1080w,`, key: hashString(slug) }; From 10aecab06407455e6a929a1547ea24a8b69a8c0c Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 15:44:03 +0530 Subject: [PATCH 06/14] chore(release): 2.31.4-enable-srcset.2 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 265073e4..1579dcf6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.1", + "version": "2.31.4-enable-srcset.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 422c14ed..ce21b050 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.1", + "version": "2.31.4-enable-srcset.2", "description": "Components to help build Quintype Node.js apps", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 4e0a28f156b03ed057342789ea217d8e717290fd Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 16:38:23 +0530 Subject: [PATCH 07/14] add width to srcSet --- src/components/impl/gumlet-image.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index cd2c634a..93b6929f 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -31,9 +31,9 @@ export function GumletImage(props) { const imageProps = { src: emptyWebGif, "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams), - srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=300 300w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=768 768w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=1080 1080w,`, + srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=320 320w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=640 640w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=1024 1024w,`, key: hashString(slug) }; From c5f1daac22646afd6bca64f28b07125c85ba7a97 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 16:39:29 +0530 Subject: [PATCH 08/14] chore(release): 2.31.4-enable-srcset.3 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1579dcf6..0ad9fa2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.2", + "version": "2.31.4-enable-srcset.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ce21b050..3e6386f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.2", + "version": "2.31.4-enable-srcset.3", "description": "Components to help build Quintype Node.js apps", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 5675688fccbdc42eff0a3e5924bfa0d95af2bcf2 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 18:41:52 +0530 Subject: [PATCH 09/14] add width to srcSet --- src/components/impl/gumlet-image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index 93b6929f..84699ed8 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -31,8 +31,8 @@ export function GumletImage(props) { const imageProps = { src: emptyWebGif, "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams), - srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=320 320w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=640 640w, + srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=480 480w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=720 720w, https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=1024 1024w,`, key: hashString(slug) }; From ed35c4f0756e79e352d9c16e649c7a7704310435 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Mon, 2 Aug 2021 18:43:28 +0530 Subject: [PATCH 10/14] chore(release): 2.31.4-enable-srcset.4 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0ad9fa2c..5471386c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.3", + "version": "2.31.4-enable-srcset.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3e6386f1..254bf8cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.3", + "version": "2.31.4-enable-srcset.4", "description": "Components to help build Quintype Node.js apps", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 828e3a21a74c0d9a90cbb0a053cce193201a11d6 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Tue, 3 Aug 2021 16:14:33 +0530 Subject: [PATCH 11/14] add width to srcSet --- src/components/impl/gumlet-image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index 84699ed8..93b6929f 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -31,8 +31,8 @@ export function GumletImage(props) { const imageProps = { src: emptyWebGif, "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams), - srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=480 480w, - https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=720 720w, + srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=320 320w, + https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=640 640w, https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=1024 1024w,`, key: hashString(slug) }; From b5a16b179d5c7f1b0bdbb8f5cae39f2648164e24 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Tue, 3 Aug 2021 16:16:21 +0530 Subject: [PATCH 12/14] chore(release): 2.31.4-enable-srcset.5 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5471386c..5d3842c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.4", + "version": "2.31.4-enable-srcset.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 254bf8cd..a6cbd1bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quintype/components", - "version": "2.31.4-enable-srcset.4", + "version": "2.31.4-enable-srcset.5", "description": "Components to help build Quintype Node.js apps", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 2fbd388a910068e222143587e3059276f357e2d0 Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Tue, 3 Aug 2021 17:21:48 +0530 Subject: [PATCH 13/14] empty commit From eae0e07c3671e6691d6c079721aa20038b8516ba Mon Sep 17 00:00:00 2001 From: phaneendra <58028287+cricket-lover@users.noreply.github.com> Date: Tue, 3 Aug 2021 17:47:36 +0530 Subject: [PATCH 14/14] updated test cases --- .../__snapshots__/responsive-image.spec.js.snap | 3 +++ .../responsive-source.spec.js.snap | 3 +++ src/components/impl/gumlet-image.js | 17 +++++++++++++++-- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/__snapshots__/responsive-image.spec.js.snap b/src/components/__snapshots__/responsive-image.spec.js.snap index 2695e9bc..9f680318 100644 --- a/src/components/__snapshots__/responsive-image.spec.js.snap +++ b/src/components/__snapshots__/responsive-image.spec.js.snap @@ -15,6 +15,9 @@ exports[`ResponsiveImage Checks for a gumlet image 1`] = ` class="qt-image" data-src="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" + srcset="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=320 320w, + https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=640 640w, + https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=1024 1024w," /> `; diff --git a/src/components/__snapshots__/responsive-source.spec.js.snap b/src/components/__snapshots__/responsive-source.spec.js.snap index 902711f1..be962ad4 100644 --- a/src/components/__snapshots__/responsive-source.spec.js.snap +++ b/src/components/__snapshots__/responsive-source.spec.js.snap @@ -5,5 +5,8 @@ exports[`ResponsiveSource Checks for a gumlet image 1`] = ` alt="Alt Text" class="qt-image" data-src="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427" + srcset="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=320 320w, + https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=640 640w, + https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=1024 1024w," /> `; diff --git a/src/components/impl/gumlet-image.js b/src/components/impl/gumlet-image.js index 93b6929f..315f5f97 100644 --- a/src/components/impl/gumlet-image.js +++ b/src/components/impl/gumlet-image.js @@ -1,5 +1,6 @@ import omit from "@babel/runtime/helpers/objectWithoutProperties"; import emptyWebGif from "empty-web-gif"; +import { object, string } from "prop-types"; import { FocusedImage } from "quintype-js"; import React, { useEffect } from "react"; import { hashString, USED_PARAMS } from "./image-utils"; @@ -9,9 +10,10 @@ function loadGumlet() { if (window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) { return; } - if (process.env.NODE_ENV == "development") { + if (process.env.NODE_ENV === "development") { console.warn( - "Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration" + "Loading Gumlet Dynamically! This is really bad for page speed." + + "Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration" ); } forceLoadingGumlet = true; @@ -50,3 +52,14 @@ export function GumletImage(props) { ); } + +GumletImage.propTypes = { + slug: string, + metadata: object, + aspectRatio: string, + imageCDN: string, + imgParams: object, + reactTag: string, + className: string, + alt: string +};