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/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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import IdealImage from 'react-ideal-image';
+
+function Image(props) {
+  const {alt, className, img} = props;
+  return (
+    <IdealImage
+      {...props}
+      alt={alt}
+      className={className}
+      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,
+      }))}
+    />
+  );
+}
+
+export default Image;