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

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/src/client/exports/Image.js → 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,27 +49,21 @@
     "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",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "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,27 +38,27 @@ 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>
                     </div>
                   </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"