feat(v2): @docusaurus/plugin-ideal-image (#1665)

* chore(v2): tweak image opt before moving to docusaurus-plugin-image

* lint

* feat(v2): convert to docusaurus-plugin-ideal-image

* tweak

* dont need many img

* fix dev err

* tweak

* opt png

* lower qual

packages/docusaurus-plugin-ideal-image/README.md

@@ -0,0 +1,46 @@
+# `@docusaurus/plugin-ideal-image`
+
+Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)
+
+## Installation
+
+```sh
+yarn add @docusaurus/plugin-ideal-image
+```
+
+Modify your `docusaurus.config.js`
+
+```diff
+module.exports = {
+  ...
++ plugins: ['@docusaurus/plugin-ideal-image'],
+  ...
+}
+```
+
+## Usage
+
+Support png, gif and jpg only
+
+```jsx
+import Image from '@theme/IdealImage';
+import thumbnail from './path/to/img.png';
+
+// your react code
+<Image img={thumbnail} />
+
+// or
+<Image img={require('./path/to/img.png')} />
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `name` | `string` | `ideal-img/[name].[hash:hex:7].[width].[ext]` | Filename template for output files. |
+| `sizes` | `array` | *original size* | Specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default `sizes` array in the loader options in your `webpack.config.js`. |
+| `size` | `integer` | *original size* | Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) |
+| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
+| `max` | `integer` | | See `min` above |
+| `steps` | `integer` |`4` | Configure the number of images generated between `min` and `max` (inclusive) |
+| `quality` | `integer` | `85` | JPEG compression quality |

packages/docusaurus-plugin-ideal-image/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@docusaurus/plugin-ideal-image",
+  "version": "2.0.0-alpha.21",
+  "description": "Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "react-waypoint": "8.1.0",
+    "@endiliey/responsive-loader": "^1.3.1",
+    "lqip-loader": "^2.2.0",
+    "sharp": "^0.22.1",
+    "react-ideal-image": "^0.0.5"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  }
+}

packages/docusaurus-plugin-ideal-image/src/index.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+
+module.exports = function(context, options) {
+  const isProd = process.env.NODE_ENV === 'production';
+  return {
+    name: 'docusaurus-plugin-ideal-image',
+
+    getThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    configureWebpack(config, isServer) {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.(png|jpe?g|gif)$/,
+              use: [
+                'lqip-loader',
+                {
+                  loader: '@endiliey/responsive-loader',
+                  options: {
+                    emitFile: !isServer, // don't emit for server-side rendering
+                    disable: !isProd,
+                    // eslint-disable-next-line
+                    adapter: require('@endiliey/responsive-loader/sharp'),
+                    name: 'ideal-img/[name].[hash:hex:7].[width].[ext]',
+                    ...options,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      };
+    },
+  };
+};

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js

@@ -14,14 +14,14 @@ function Image(props) {
       {...props}
       alt={alt}
       className={className}
-      height={img.src.height}
+      height={img.src.height || 100}
+      width={img.src.width || 100}
       placeholder={{lqip: img.preSrc}}
       src={img.src.src}
       srcSet={img.src.images.map(image => ({
         ...image,
         src: image.path,
       }))}
-      width={img.src.width}
     />
   );
 }

packages/docusaurus/package.json

@@ -49,10 +49,8 @@
     "fs-extra": "^7.0.0",
     "globby": "^9.2.0",
     "html-webpack-plugin": "^4.0.0-beta.5",
-    "image-webpack-loader": "^5.0.0",
     "import-fresh": "^3.0.0",
     "lodash": "^4.17.14",
-    "lqip-loader": "^2.2.0",
     "mini-css-extract-plugin": "^0.7.0",
     "nprogress": "^0.2.0",
     "null-loader": "^3.0.0",
@@ -60,16 +58,12 @@
     "portfinder": "^1.0.20",
     "react-dev-utils": "^9.0.1",
     "react-helmet": "^6.0.0-beta",
-    "react-ideal-image": "^0.0.5",
     "react-loadable": "^5.5.0",
     "react-loadable-ssr-addon": "^0.1.8",
     "react-router": "^5.0.1",
     "react-router-config": "^5.0.1",
     "react-router-dom": "^5.0.1",
-    "react-waypoint": "8.0.3",
-    "responsive-loader": "^1.2.0",
     "semver": "^6.1.1",
-    "sharp": "^0.22.1",
     "shelljs": "^0.8.3",
     "static-site-generator-webpack-plugin": "^3.4.2",
     "std-env": "^2.2.1",

packages/docusaurus/src/webpack/base.ts

@@ -156,20 +156,6 @@ export function createBaseConfig(
             exportOnlyLocals: isServer,
           }),
         },
-        {
-          test: /\.(gif|png|jpe?g)$/i,
-          use: [
-            'lqip-loader',
-            {
-              loader: 'responsive-loader',
-              options: {
-                adapter: require('responsive-loader/sharp'),
-                sizes: [300, 600, 900, 1200],
-              },
-            },
-            'image-webpack-loader',
-          ],
-        },
       ],
     },
     plugins: [

website/docusaurus.config.js

@@ -7,13 +7,25 @@
 
 module.exports = {
   title: 'Docusaurus',
-  tagline: '⚡️ Easy to Maintain React Static Site Generator',
+  tagline: 'Easy to Maintain Open Source Documentation Websites',
   organizationName: 'facebook',
   projectName: 'docusaurus',
   baseUrl: '/',
   url: 'https://v2.docusaurus.io',
   favicon: 'img/docusaurus.ico',
   themes: ['@docusaurus/theme-live-codeblock'],
+  plugins: [
+    ,
+    [
+      '@docusaurus/plugin-ideal-image',
+      {
+        quality: 70,
+        max: 1030, // max resized image's size.
+        min: 640, // min resized image's size. if original is lower, use that size.
+        steps: 2, // the max number of images generated between min and max (inclusive)
+      },
+    ],
+  ],
   presets: [
     [
       '@docusaurus/preset-classic',

website/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.0.0-alpha.21",
     "@docusaurus/preset-classic": "^2.0.0-alpha.21",
+    "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.21",
     "classnames": "^2.2.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"

website/src/pages/index.js

@@ -9,8 +9,8 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import withBaseUrl from '@docusaurus/withBaseUrl';
-import Image from '@docusaurus/Image';
 
+import Image from '@theme/IdealImage';
 import Layout from '@theme/Layout';
 
 import classnames from 'classnames';
@@ -68,9 +68,7 @@ function Home() {
   return (
     <Layout
       permalink={'/'}
-      description={
-        'Docusaurus makes it easy and painless for you to build websites'
-      }>
+      description={'Easy to Maintain Open Source Documentation Websites'}>
       <div className={styles['index-hero']}>
         <div className={styles['index-hero-inner']}>
           <h1 className={styles['index-hero-project-tagline']}>

website/src/pages/showcase/index.js

@@ -6,7 +6,8 @@
  */
 
 import React, {useEffect} from 'react';
-import Image from '@docusaurus/Image';
+
+import Image from '@theme/IdealImage';
 import Layout from '@theme/Layout';
 
 import classnames from 'classnames';
@@ -37,19 +38,19 @@ function Showcase() {
           <h1>{TITLE}</h1>
           <p>{DESCRIPTION}</p>
         </div>
-        {chunkArray(users, ITEMS_PER_ROW).map(row => (
-          <div className="row margin-vert--lg">
+        {chunkArray(users, ITEMS_PER_ROW).map((row, i) => (
+          <div key={`row${i}`} className="row margin-vert--lg">
             {row.map(user => (
-              <div className="col col--4">
+              <div key={user.title} className="col col--4">
                 <div className={classnames('card', styles.showcaseUser)}>
                   <div className="card__image">
                     <Image img={user.preview} alt={user.title} />
                   </div>
                   <div className="card__body">
-                    <div class="avatar">
-                      <div class="avatar__intro margin-left--none">
-                        <h4 class="avatar__name">{user.title}</h4>
-                        <small class="avatar__subtitle">
+                    <div className="avatar">
+                      <div className="avatar__intro margin-left--none">
+                        <h4 className="avatar__name">{user.title}</h4>
+                        <small className="avatar__subtitle">
                           {user.description}
                         </small>
                       </div>
@@ -57,7 +58,7 @@ function Showcase() {
                   </div>
                   {(user.website || user.source) && (
                     <div className="card__footer">
-                      <div class="button-group button-group--block">
+                      <div className="button-group button-group--block">
                         {user.website && (
                           <a
                             className="button button--small button--secondary button--block"

yarn.lock

@@ -846,6 +846,13 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@endiliey/responsive-loader@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@endiliey/responsive-loader/-/responsive-loader-1.3.1.tgz#842aa9e836945536f76467083faa658fa877efa0"
+  integrity sha512-hXWR/bC484wDoH+B5CQvfZwE8isKHFwTBIcty+7wnl/zIVIWpsV5+hiTUFYE4inSZeQcrxjJRjs5kMAc8AgWGg==
+  dependencies:
+    loader-utils "^1.2.3"
+
 "@hapi/address@2.x.x":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
@@ -3338,7 +3345,7 @@ bin-version@^3.0.0:
     execa "^1.0.0"
     find-versions "^3.0.0"
 
-bin-wrapper@^4.0.0, bin-wrapper@^4.0.1:
+bin-wrapper@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bin-wrapper/-/bin-wrapper-4.1.0.tgz#99348f2cf85031e3ef7efce7e5300aeaae960605"
   integrity sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==
@@ -4928,15 +4935,6 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
-cwebp-bin@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/cwebp-bin/-/cwebp-bin-5.1.0.tgz#d5bea87c127358558e7bf7a90a6d440d42dcb074"
-  integrity sha512-BsPKStaNr98zfxwejWWLIGELbPERULJoD2v5ijvpeutSAGsegX7gmABgnkRK7MUucCPROXXfaPqkLAwI509JzA==
-  dependencies:
-    bin-build "^3.0.0"
-    bin-wrapper "^4.0.1"
-    logalot "^2.1.0"
-
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -6027,19 +6025,6 @@ exec-sh@^0.3.2:
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
   integrity sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg==
 
-execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -6417,7 +6402,7 @@ file-type@^3.1.0, file-type@^3.8.0:
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
   integrity sha1-JXoHg4TR24CHvESdEH1SpSZyuek=
 
-file-type@^4.2.0, file-type@^4.3.0:
+file-type@^4.2.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-4.4.0.tgz#1b600e5fca1fbdc6e80c0a70c71c8dba5f7906c5"
   integrity sha1-G2AOX8ofvcboDApwxxyNul95BsU=
@@ -7710,23 +7695,7 @@ ignore@^4.0.3:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-image-webpack-loader@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/image-webpack-loader/-/image-webpack-loader-5.0.0.tgz#51c0a04415c72f66171277b4ba3bed5f4e0f847d"
-  integrity sha512-Ov7xyNTpeKqF31UTnFPNxLohsYVGUJA4lKU0Tjld5iIGfqzUMtkaU3/3MDE/QGPV6jfm0ai+vekJHp+VujUpFw==
-  dependencies:
-    imagemin "^6.1.0"
-    loader-utils "^1.2.3"
-    object-assign "^4.1.1"
-  optionalDependencies:
-    imagemin-gifsicle "^6.0.0"
-    imagemin-mozjpeg "^8.0.0"
-    imagemin-optipng "^6.0.0"
-    imagemin-pngquant "^6.0.0"
-    imagemin-svgo "^7.0.0"
-    imagemin-webp "^5.0.0"
-
-imagemin-gifsicle@^6.0.0, imagemin-gifsicle@^6.0.1:
+imagemin-gifsicle@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/imagemin-gifsicle/-/imagemin-gifsicle-6.0.1.tgz#6abad4e95566d52e5a104aba1c24b4f3b48581b3"
   integrity sha512-kuu47c6iKDQ6R9J10xCwL0lgs0+sMz3LRHqRcJ2CRBWdcNmo3T5hUaM8hSZfksptZXJLGKk8heSAvwtSdB1Fng==
@@ -7744,15 +7713,6 @@ imagemin-jpegtran@^6.0.0:
     is-jpg "^2.0.0"
     jpegtran-bin "^4.0.0"
 
-imagemin-mozjpeg@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/imagemin-mozjpeg/-/imagemin-mozjpeg-8.0.0.tgz#d2ca4e8c982c7c6eda55069af89dee4c1cebcdfd"
-  integrity sha512-+EciPiIjCb8JWjQNr1q8sYWYf7GDCNDxPYnkD11TNIjjWNzaV+oTg4DpOPQjl5ZX/KRCPMEgS79zLYAQzLitIA==
-  dependencies:
-    execa "^1.0.0"
-    is-jpg "^2.0.0"
-    mozjpeg "^6.0.0"
-
 imagemin-optipng@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/imagemin-optipng/-/imagemin-optipng-6.0.0.tgz#a6bfc7b542fc08fc687e83dfb131249179a51a68"
@@ -7762,16 +7722,6 @@ imagemin-optipng@^6.0.0:
     is-png "^1.0.0"
     optipng-bin "^5.0.0"
 
-imagemin-pngquant@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/imagemin-pngquant/-/imagemin-pngquant-6.0.1.tgz#07b4c80e327ac60ef5246758029b1e8aecd879b9"
-  integrity sha512-Stk+fZCLxZznV8MFNA/T3AY/VRKevsiP9uZOLV0RCXoi0vUUFriySYuz/83IGp9D254EW8miGyyQ69zKouFr7w==
-  dependencies:
-    execa "^0.10.0"
-    is-png "^1.0.0"
-    is-stream "^1.1.0"
-    pngquant-bin "^5.0.0"
-
 imagemin-svgo@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/imagemin-svgo/-/imagemin-svgo-7.0.0.tgz#a22d0a5917a0d0f37e436932c30f5e000fa91b1c"
@@ -7780,16 +7730,7 @@ imagemin-svgo@^7.0.0:
     is-svg "^3.0.0"
     svgo "^1.0.5"
 
-imagemin-webp@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/imagemin-webp/-/imagemin-webp-5.1.0.tgz#ddb1307ad97aff97293c5a600e384e40c07f68a7"
-  integrity sha512-BsPTpobgbDPFBBsI3UflnU/cpIVa15qInEDBcYBw16qI/6XiB4vDF/dGp9l4aM3pfFDDYqR0mANMcKpBD7wbCw==
-  dependencies:
-    cwebp-bin "^5.0.0"
-    exec-buffer "^3.0.0"
-    is-cwebp-readable "^2.0.1"
-
-imagemin@^6.0.0, imagemin@^6.1.0:
+imagemin@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/imagemin/-/imagemin-6.1.0.tgz#62508b465728fea36c03cdc07d915fe2d8cf9e13"
   integrity sha512-8ryJBL1CN5uSHpiBMX0rJw79C9F9aJqMnjGnrd/1CafegpNuA81RBAAru/jQQEOWlOJJlpRnlcVFF6wq+Ist0A==
@@ -8154,13 +8095,6 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
-is-cwebp-readable@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-cwebp-readable/-/is-cwebp-readable-2.0.1.tgz#afb93b0c0abd0a25101016ae33aea8aedf926d26"
-  integrity sha1-r7k7DAq9CiUQEBauM66ort+SbSY=
-  dependencies:
-    file-type "^4.3.0"
-
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -9666,7 +9600,7 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-logalot@^2.0.0, logalot@^2.1.0:
+logalot@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/logalot/-/logalot-2.1.0.tgz#5f8e8c90d304edf12530951a5554abb8c5e3f552"
   integrity sha1-X46MkNME7fElMJUaVVSruMXj9VI=
@@ -10250,15 +10184,6 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
-mozjpeg@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/mozjpeg/-/mozjpeg-6.0.1.tgz#56969dddb5741ef2bcb1af066cae21e61a91a27b"
-  integrity sha512-9Z59pJMi8ni+IUvSH5xQwK5tNLw7p3dwDNCZ3o1xE+of3G5Hc/yOz6Ue/YuLiBXU3ZB5oaHPURyPdqfBX/QYJA==
-  dependencies:
-    bin-build "^3.0.0"
-    bin-wrapper "^4.0.0"
-    logalot "^2.1.0"
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -11544,16 +11469,6 @@ pngjs@^3.0.0, pngjs@^3.3.3:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-pngquant-bin@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/pngquant-bin/-/pngquant-bin-5.0.2.tgz#6f34f3e89c9722a72bbc509062b40f1b17cda460"
-  integrity sha512-OLdT+4JZx5BqE1CFJkrvomYV0aSsv6x2Bba+aWaVc0PMfWlE+ZByNKYAdKeIqsM4uvW1HOSEHnf8KcOnykPNxA==
-  dependencies:
-    bin-build "^3.0.0"
-    bin-wrapper "^4.0.1"
-    execa "^0.10.0"
-    logalot "^2.0.0"
-
 portfinder@^1.0.17, portfinder@^1.0.20:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -12402,7 +12317,7 @@ react-ideal-image@^0.0.5:
   resolved "https://registry.yarnpkg.com/react-ideal-image/-/react-ideal-image-0.0.5.tgz#92a1d6e7e6d5a32b2a6a41e82ffb7f122ed9bddf"
   integrity sha512-Xc/uyfigjE9nt5RPnEnvVVCxdrkVNRpvh1+WaCLTEk28jrshB1mM5/iA0Adxp2zqITT4aqx/C8CFNs02EskK0Q==
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
@@ -12504,13 +12419,14 @@ react-toggle@^4.0.2:
   dependencies:
     classnames "^2.2.5"
 
-react-waypoint@8.0.3:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-8.0.3.tgz#860db860d3301c6f449800f7a330856028730af5"
-  integrity sha512-2tfq6PU8meAOpZ+ZqyGO1YCa9n2kEhq6+UI5tOpgMUra2iJmpva9QvwReamO3eozVMxFQ495wR9pkMbLnXvI/w==
+react-waypoint@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-8.1.0.tgz#91d926a2fd1be4cbd0351cb8c3d494fac0ef1699"
+  integrity sha512-HoOItWTHObgz7bstmz9p3wuTVDRdsyNspnkAOFz9eE4z8LRj1bbNP9Nzye2k9zsFiujlz8lmp13UFmuXPWXPYw==
   dependencies:
     consolidated-events "^1.1.0 || ^2.0.0"
     prop-types "^15.0.0"
+    react-is "^16.6.3"
 
 react@^16.5.0, react@^16.8.4:
   version "16.8.6"
@@ -13107,13 +13023,6 @@ responselike@1.0.2:
   dependencies:
     lowercase-keys "^1.0.0"
 
-responsive-loader@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/responsive-loader/-/responsive-loader-1.2.0.tgz#89b98a11d0cb27fe6c17b0831350e1455c14ba31"
-  integrity sha512-ZbeiKySyCMkMLm747DlwvpRS6mk7MiJZiXmOY6KxE5P7d08av3jy2fbEpDDnuxWDruVUePoMzMg9hYGtBWFNxg==
-  dependencies:
-    loader-utils "^1.1.0"
-
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"