diff --git a/packages/docusaurus-plugin-ideal-image/README.md b/packages/docusaurus-plugin-ideal-image/README.md new file mode 100644 index 0000000000..ac73b0122a --- /dev/null +++ b/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 + + +// or + +``` + +### 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 | \ No newline at end of file diff --git a/packages/docusaurus-plugin-ideal-image/package.json b/packages/docusaurus-plugin-ideal-image/package.json new file mode 100644 index 0000000000..23cbbabfd7 --- /dev/null +++ b/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" + } +} diff --git a/packages/docusaurus-plugin-ideal-image/src/index.js b/packages/docusaurus-plugin-ideal-image/src/index.js new file mode 100644 index 0000000000..2b40046b21 --- /dev/null +++ b/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, + }, + }, + ], + }, + ], + }, + }; + }, + }; +}; diff --git a/packages/docusaurus/src/client/exports/Image.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js similarity index 89% rename from packages/docusaurus/src/client/exports/Image.js rename to packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js index da041e7a0f..8f28e7e4ac 100644 --- a/packages/docusaurus/src/client/exports/Image.js +++ b/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} /> ); } diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 7ae43eeeb5..634185de78 100644 --- a/packages/docusaurus/package.json +++ b/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", diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts index b0e97f21ec..42eda6f9fd 100644 --- a/packages/docusaurus/src/webpack/base.ts +++ b/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: [ diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 1eb3bd6e06..0f6eb20182 100644 --- a/website/docusaurus.config.js +++ b/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', diff --git a/website/package.json b/website/package.json index 15a9b21434..698e87d568 100644 --- a/website/package.json +++ b/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" diff --git a/website/src/data/showcase/channeljs.png b/website/src/data/showcase/channeljs.png index 30be82d103..32146bc968 100644 Binary files a/website/src/data/showcase/channeljs.png and b/website/src/data/showcase/channeljs.png differ diff --git a/website/src/data/showcase/componentkit.png b/website/src/data/showcase/componentkit.png index feb8033680..4e414152fc 100644 Binary files a/website/src/data/showcase/componentkit.png and b/website/src/data/showcase/componentkit.png differ diff --git a/website/src/data/showcase/flux.png b/website/src/data/showcase/flux.png index f1fa8f45b6..1798a5623b 100644 Binary files a/website/src/data/showcase/flux.png and b/website/src/data/showcase/flux.png differ diff --git a/website/src/data/showcase/hermes.png b/website/src/data/showcase/hermes.png index dc1b909eb3..2d39c6ddd2 100644 Binary files a/website/src/data/showcase/hermes.png and b/website/src/data/showcase/hermes.png differ diff --git a/website/src/data/showcase/uniforms.png b/website/src/data/showcase/uniforms.png index 1a72924b44..1ca008288e 100644 Binary files a/website/src/data/showcase/uniforms.png and b/website/src/data/showcase/uniforms.png differ diff --git a/website/src/pages/hector-ramos.png b/website/src/pages/hector-ramos.png index 3ca723f9cb..bc0b9957d1 100644 Binary files a/website/src/pages/hector-ramos.png and b/website/src/pages/hector-ramos.png differ diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 1e4d60ecd8..db1bb1de5d 100644 --- a/website/src/pages/index.js +++ b/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 ( + description={'Easy to Maintain Open Source Documentation Websites'}>

diff --git a/website/src/pages/showcase/index.js b/website/src/pages/showcase/index.js index 15e293d98f..96bfc3eaa6 100644 --- a/website/src/pages/showcase/index.js +++ b/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() {

{TITLE}

{DESCRIPTION}

- {chunkArray(users, ITEMS_PER_ROW).map(row => ( -
+ {chunkArray(users, ITEMS_PER_ROW).map((row, i) => ( +
{row.map(user => ( -
+
{user.title}
-
-
-

{user.title}

- +
+
+

{user.title}

+ {user.description}
@@ -57,7 +58,7 @@ function Showcase() {
{(user.website || user.source) && (
-
+
{user.website && (