Merge pull request #947 from transloadit/doc/postlerna

post-lerna documentation updates & improvements

website/src/docs/api.md

@@ -1,6 +1,6 @@
-\----		
-type: docs		
-order: 30	
+\----
+type: docs
+order: 99
 
 ## title: "Generated API"
 

website/src/docs/aws-s3-multipart.md

@@ -1,11 +1,12 @@
 ---
 type: docs
-order: 33
-title: "AwsS3Multipart"
+order: 43
+title: "AWS S3 Multipart"
+module: "@uppy/aws-s3-multipart"
 permalink: docs/aws-s3-multipart/
 ---
 
-The `AwsS3Multipart` plugin can be used to upload files directly to an S3 bucket using S3's Multipart upload strategy. With this strategy, files are chopped up in parts of 5MB+ each, so they can be uploaded concurrently. It's also very reliable: if a single part fails to upload, only that 5MB has to be retried.
+The `@uppy/aws-s3-multipart` plugin can be used to upload files directly to an S3 bucket using S3's Multipart upload strategy. With this strategy, files are chopped up in parts of 5MB+ each, so they can be uploaded concurrently. It's also very reliable: if a single part fails to upload, only that 5MB has to be retried.
 
 ```js
 const AwsS3Multipart = require('@uppy/aws-s3-multipart')
@@ -23,6 +24,12 @@ This plugin is published as the `@uppy/aws-s3-multipart` package.
 npm install @uppy/aws-s3-multipart
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const AwsS3Multipart = Uppy.AwsS3Multipart
+```
+
 ## Options
 
 ### limit: 0

website/src/docs/aws-s3.md

@@ -1,11 +1,12 @@
 ---
 type: docs
-order: 32
-title: "AwsS3"
+order: 42
+title: "AWS S3"
+module: "@uppy/aws-s3"
 permalink: docs/aws-s3/
 ---
 
-The `AwsS3` plugin can be used to upload files directly to an S3 bucket.
+The `@uppy/aws-s3` plugin can be used to upload files directly to an S3 bucket.
 Uploads can be signed using [Uppy Server][uppy-server docs] or a custom signing function.
 
 ```js
@@ -21,7 +22,7 @@ uppy.use(AwsS3, {
 
 There are broadly two ways to upload to S3 in a browser. A server can generate a presigned URL for a [PUT upload](https://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPUT.html), or a server can generate form data for a [POST upload](https://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html). uppy-server uses a POST upload. See [POST uPloads](#post-uploads) for some caveats if you would like to use POST uploads without uppy-server. See [Generating a presigned upload URL server-side](#example-presigned-url) for an example of a PUT upload.
 
-There is also a separate plugin for S3 Multipart uploads. Multipart in this sense is Amazon's proprietary chunked, resumable upload mechanism for large files. See the [AwsS3Multipart](/docs/aws-s3-multipart) documentation.
+There is also a separate plugin for S3 Multipart uploads. Multipart in this sense is Amazon's proprietary chunked, resumable upload mechanism for large files. See the [`@uppy/aws-s3-multipart`](/docs/aws-s3-multipart) documentation.
 
 ## Installation
 
@@ -31,6 +32,12 @@ This plugin is published as the `@uppy/aws-s3` package.
 npm install @uppy/aws-s3
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const AwsS3 = Uppy.AwsS3
+```
+
 ## Options
 
 ### `id: 'AwsS3'`
@@ -171,7 +178,7 @@ In-depth documentation about CORS rules is available on the [AWS documentation s
 
 uppy-server uses POST uploads by default, but you can also use them with your own endpoints. There are a few things to be aware of when doing so:
 
- - The AwsS3 plugin attempts to read the `<Location>` XML tag from POST upload responses. S3 does not respond with an XML document by default. When generating the form data for POST uploads, you must set the `success_action_status` field to `201`.
+ - The `@uppy/aws-s3` plugin attempts to read the `<Location>` XML tag from POST upload responses. S3 does not respond with an XML document by default. When generating the form data for POST uploads, you must set the `success_action_status` field to `201`.
    ```js
    // `s3` is an instance of the AWS JavaScript SDK's S3 client
    s3.createPresignedPost({
@@ -185,7 +192,7 @@ uppy-server uses POST uploads by default, but you can also use them with your ow
 
 ## S3 Alternatives
 
-Many other object storage providers have an identical API to S3, so you can use the AwsS3 plugin with them. To use them with Uppy Server, you can set the `UPPYSERVER_AWS_ENDPOINT` variable to the endpoint of your preferred service.
+Many other object storage providers have an identical API to S3, so you can use the `@uppy/aws-s3` plugin with them. To use them with Uppy Server, you can set the `UPPYSERVER_AWS_ENDPOINT` variable to the endpoint of your preferred service.
 
 ### DigitalOcean Spaces
 
@@ -202,7 +209,7 @@ For a working example that you can run and play around with, see the [digitaloce
 
 ### Google Cloud Storage
 
-For Google Cloud Storage, you need to take a few more steps. For the AwsS3 plugin to be able to upload to a GCS bucket, it needs the Interoperability setting enabled. You can enable the Interoperability setting and [generate interoperable storage access keys](https://cloud.google.com/storage/docs/migrating#keys) by going to [Google Cloud Storage](https://console.cloud.google.com/storage) » Settings » Interoperability. Then set the environment variables for Uppy Server like below:
+For Google Cloud Storage, you need to take a few more steps. For the `@uppy/aws-s3` plugin to be able to upload to a GCS bucket, it needs the Interoperability setting enabled. You can enable the Interoperability setting and [generate interoperable storage access keys](https://cloud.google.com/storage/docs/migrating#keys) by going to [Google Cloud Storage](https://console.cloud.google.com/storage) » Settings » Interoperability. Then set the environment variables for Uppy Server like below:
 
 ```bash
 export UPPYSERVER_AWS_ENDPOINT="https://storage.googleapis.com"

website/src/docs/dashboard.md

@@ -2,10 +2,11 @@
 type: docs
 order: 20
 title: "Dashboard"
+module: "@uppy/dashboard"
 permalink: docs/dashboard/
 ---
 
-Dashboard is a universal UI plugin for Uppy, offering several useful features:
+`@uppy/dashboard` is a universal UI plugin for Uppy, offering several useful features:
 
 - Drag and drop, paste, select from local disk / my device
 - UI for the Webcam plugin and remote sources, such as Google Drive, Dropbox, Instagram (all optional, added via plugins)
@@ -34,6 +35,20 @@ Install from NPM:
 npm install @uppy/dashboard
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Dashboard = Uppy.Dashboard
+```
+
+## CSS
+
+The Dashboard plugin includes CSS for the Dashboard itself, and the plugins the Dashboard uses ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+
+The CSS file lives at `@uppy/dashboard/dist/style.css`. A minified version is at `@uppy/dashboard/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The Dashboard can be extensively customized by configuring the options below to your liking:

website/src/docs/dragdrop.md

@@ -1,12 +1,13 @@
 ---
 type: docs
 order: 21
-title: "DragDrop"
+title: "Drag & Drop"
+module: "@uppy/drag-drop"
 permalink: docs/drag-drop/
 alias: docs/dragdrop/
 ---
 
-DragDrop renders a simple drag and drop area for file selection. it can be useful when you only want the local device as a file source, don’t need file previews and a UI for metadata editing, and the [Dashboard](/docs/dashboard/) feels like overkill.
+The `@uppy/drag-drop` plugin renders a simple drag and drop area for file selection. it can be useful when you only want the local device as a file source, don’t need file previews and a UI for metadata editing, and the [Dashboard](/docs/dashboard/) feels like overkill.
 
 ```js
 const DragDrop = require('@uppy/drag-drop')
@@ -28,6 +29,20 @@ Install from NPM:
 npm install @uppy/drag-drop
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const DragDrop = Uppy.DragDrop
+```
+
+## CSS
+
+The `@uppy/drag-drop` plugin includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead.
+
+The CSS file lives at `@uppy/drag-drop/dist/style.css`. A minified version is at `@uppy/drag-drop/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The DragDrop plugin has the following configurable options:
@@ -46,7 +61,7 @@ uppy.use(DragDrop, {
 
 ### `id: 'DragDrop'`
 
-A unique identifier for this DragDrop. It defaults to `'DragDrop'`. Use this if you need to add multiple DragDrop instances.
+A unique identifier for this plugin. It defaults to `'DragDrop'`. Use this if you need to add multiple DragDrop instances.
 
 ### `target: null`
 

website/src/docs/dropbox.md

@@ -1,11 +1,12 @@
 ---
 type: docs
-order: 51
+order: 31
 title: "Dropbox"
+module: "@uppy/dropbox"
 permalink: docs/dropbox/
 ---
 
-The Dropbox plugin lets users import files their Dropbox account.
+The `@uppy/dropbox` plugin lets users import files their Dropbox account.
 
 An Uppy Server instance is required for the Dropbox plugin to work. Uppy Server handles authentication with Dropbox, downloads the files, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
@@ -27,6 +28,12 @@ This plugin is published as the `@uppy/dropbox` package.
 npm install @uppy/dropbox
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Dropbox = Uppy.Dropbox
+```
+
 ## Options
 
 ```js

website/src/docs/fileinput.md

@@ -1,13 +1,14 @@
 ---
 type: docs
-order: 25
-title: "FileInput"
+order: 22
+title: "File Input"
+module: "@uppy/file-input"
 permalink: docs/file-input/
 alias: docs/fileinput/
 
 ---
 
-`FileInput` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browser's file selector.
+`@uppy/file-input` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browser's file selector.
 
 ```js
 const FileInput = require('@uppy/file-input')
@@ -17,7 +18,7 @@ uppy.use(FileInput, {
 })
 ```
 
-[Try it live](/examples/xhrupload) - The XHRUpload example uses a `FileInput`.
+[Try it live](/examples/xhrupload) - The `@uppy/xhr-upload` example uses `@uppy/file-input` with the [`pretty`](#pretty-true) option enabled.
 
 ## Installation
 
@@ -29,6 +30,20 @@ Install from NPM:
 npm install @uppy/file-input
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const FileInput = Uppy.FileInput
+```
+
+## CSS
+
+The FileInput plugin includes some simple styles for use with the [`pretty`](#pretty-true) option, like shown in the [example](/examples/xhrupload). You can also choose not to use it and provide your own styles instead.
+
+The CSS file lives at `@uppy/file-input/dist/style.css`. A minified version is at `@uppy/file-input/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The FileInput plugin has the following configurable options:
@@ -47,7 +62,7 @@ uppy.use(FileInput, {
 
 ### `id: 'FileInput'`
 
-A unique identifier for this FileInput. It defaults to `'FileInput'`. Use this if you need to add multiple FileInput instances.
+A unique identifier for this File Input. It defaults to `'FileInput'`. Use this if you need to add multiple FileInput instances.
 
 ### `target: null`
 

website/src/docs/form.md

@@ -1,11 +1,15 @@
 ---
 type: docs
-order: 30
+order: 70
 title: "Form"
+module: "@uppy/form"
 permalink: docs/form/
 ---
 
-The Form plugin collects metadata from any specified `<form>` element, right before Uppy begins uploading/processing files, and then optionally appends results back to the form. Currently, the appended result is a stringified version of a [`result`](docs/uppy/#uppy-upload) returned from `uppy.upload()` or `complete` event.
+The `@uppy/form` plugin has several features to integrate with HTML `<form>` elements.
+
+- It collects user-specified metadata from form fields, right before Uppy begins uploading/processing files.
+- It can append upload results back to the form as a hidden field. Currently the appended result is a stringified version of a [`result`](docs/uppy/#uppy-upload) returned from `uppy.upload()` or `complete` event.
 
 ```js
 const Form = require('@uppy/form')
@@ -25,6 +29,12 @@ Install from NPM:
 npm install @uppy/form
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Form = Uppy.Form
+```
+
 ## Options
 
 The Form plugin has the following configurable options:

website/src/docs/golden-retriever.md

@@ -1,11 +1,14 @@
 ---
-title: "GoldenRetriever"
+title: "Golden Retriever"
+module: "@uppy/golden-retriever"
 type: docs
 permalink: docs/golden-retriever/
-order: 40
+order: 71
 ---
 
-The GoldenRetriever plugin saves selected files in your browser cache (Local Storage for metadata, then Service Worker for all blobs + IndexedDB for small blobs), so that if the browser crashes, Uppy can restore everything and continue uploading like nothing happened. Read more about it [on the blog](https://uppy.io/blog/2017/07/golden-retriever/).
+The `@uppy/golden-retriever` plugin saves selected files in your browser cache, so that if the browser crashes, Uppy can restore everything and continue uploading like nothing happened. Read more about it [on the blog](https://uppy.io/blog/2017/07/golden-retriever/).
+
+The Golden Retriever uses LocalStorage to store file metadata and Uppy state, and IndexedDB for small files. It also uses a Service Worker for _all_ files—unlike IndexedDB, a Service Worker can keep very large files. Service Worker storage is _very_ temporary though, and doesn't persist across browser crashes or restarts. It works very well for accidental refreshes or closed tabs.
 
 ## Installation
 
@@ -15,6 +18,12 @@ This plugin is published as the `@uppy/golden-retriever` package.
 npm install @uppy/golden-retriever
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const GoldenRetriever = Uppy.GoldenRetriever
+```
+
 ## Usage
 
 1\. Bundle your own service worker `sw.js` file with Uppy GoldenRetriever’s service worker. If you’re using Browserify, just bundle it separately, for Webpack there is a plugin [serviceworker-webpack-plugin](https://github.com/oliviertassinari/serviceworker-webpack-plugin).

website/src/docs/google-drive.md

@@ -1,13 +1,14 @@
 ---
 type: docs
-order: 52
-title: "GoogleDrive"
+order: 32
+title: "Google Drive"
+module: "@uppy/google-drive"
 permalink: docs/google-drive/
 ---
 
-The GoogleDrive plugin lets users import files from their Google Drive account.
+The `@uppy/google-drive` plugin lets users import files from their Google Drive account.
 
-An Uppy Server instance is required for the GoogleDrive plugin to work. Uppy Server handles authentication with Google, downloads files from the Drive and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
+An Uppy Server instance is required for the `@uppy/google-drive` plugin to work. Uppy Server handles authentication with Google, downloads files from the Drive and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
 const GoogleDrive = require('@uppy/google-drive')
@@ -27,6 +28,12 @@ This plugin is published as the `@uppy/google-drive` package.
 npm install @uppy/google-drive
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const GoogleDrive = Uppy.GoogleDrive
+```
+
 ## Options
 
 ```js
@@ -42,7 +49,7 @@ A unique identifier for this plugin. Defaults to `'GoogleDrive'`.
 
 ### `target: null`
 
-DOM element, CSS selector, or plugin to mount the GoogleDrive provider into. This should normally be the Dashboard.
+DOM element, CSS selector, or plugin to mount the Google Drive provider into. This should normally be the the [`@uppy/dashboard`](/docs/dashboard) plugin.
 
 ### `serverUrl: null`
 

website/src/docs/index.md

@@ -10,7 +10,7 @@ Uppy is a sleek, modular file uploader that integrates seamlessly with any frame
 
 Uppy consists of a core module and [various plugins](/docs/plugins/) for selecting, manipulating and uploading files. Here’s how it works:
 
-```shell
+```bash
 # install dependencies
 npm install @uppy/core @uppy/dashboard @uppy/tus
 ```
@@ -39,17 +39,47 @@ Adding [Uppy Server](/docs/server/) to the mix enables remote sources such as In
 
 ## Installation
 
+Uppy can be used with a module bundler such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/), or by including it in a script tag.
+
+> You may need polyfills if your application supports Internet Explorer or other older browsers. See [Browser Support](#browser-support).
+
+### With a module bundler
+
+Install the `@uppy/core` package from npm:
+
 ``` bash
+$ npm install @uppy/core
+```
+
+And install the plugins you need separately. The documentation pages for plugins in the sidebar show the necessary `npm install` commands. You can then import Uppy like so:
+
+```js
+const Uppy = require('@uppy/core')
+const XHRUpload = require('@uppy/xhr-upload')
+const DragDrop = require('@uppy/drag-drop')
+```
+
+Many plugins include a CSS file for the necessary styles in their `dist/` folder. The plugin documentation pages will tell you which to use and when. When using multiple plugin CSS files, some code is duplicated. A CSS minifier like [clean-css](https://www.npmjs.com/package/clean-css) is recommended to remove the duplicate selectors.
+
+You can also use the combined `uppy` package, which includes all plugins that are maintained by the Uppy team. Only use it if you have tree-shaking set up in your module bundler, otherwise you may end up sending a lot of unused code to your users.
+
+```bash
 $ npm install uppy
 ```
 
-We recommend installing from NPM and then using a module bundler such as [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/) or [Rollup.js](http://rollupjs.org/).
+Then you can import Uppy and plugins like so:
 
-> You may need polyfills if your application supports Internet Explorer or other older browsers. See [Browser Support](#browser-support).
+```js
+import Uppy, { XHRUpload, DragDrop } from 'uppy'
+```
+
+And add the `uppy/dist/uppy.min.css` file to your page.
 
-Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly. In that case, `Uppy` will attach itself to the global `window.Uppy` object.
+### With a script tag
 
-> ⚠️ The bundle currently consists of most Uppy plugins. This method is therefore not recommended for production, as your users will have to download all plugins, even if you are only using a few of them.
+You can also use a pre-built bundle from Transloadit's CDN: Edgly. `Uppy` will attach itself to the global `window.Uppy` object.
+⚠️
+> The bundle consists of all plugins maintained by the Uppy team. This method is therefore not recommended for production, as your users will have to download all plugins, even if you are only using a few of them.
 
 1\. Add a script to the bottom of `<body>`:
 
@@ -77,7 +107,7 @@ Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly
 - [Uppy](/docs/uppy/) — full list of options, methods and events.
 - [Plugins](/docs/plugins/) — list of Uppy plugins and their options.
 - [Server](/docs/server/) — setting up and running an uppy-server instance, which adds support for Instagram, Dropbox, Google Drive, direct links, and other remote sources.
-- [React](/docs/react/) — components to integrate uppy UI plugins with React apps.
+- [React](/docs/react/) — components to integrate Uppy UI plugins with React apps.
 - [Writing Plugins](/docs/writing-plugins) — how to write a plugin for Uppy [documentation in progress].
 
 ## Browser Support

website/src/docs/informer.md

@@ -1,11 +1,12 @@
 ---
 type: docs
-order: 24
+order: 52
 title: "Informer"
+module: "@uppy/informer"
 permalink: docs/informer/
 ---
 
-The Informer plugin is a pop-up bar for showing notifications. When plugins have some exciting news (or error) to share, they can show a notification here.
+The `@uppy/informer` plugin is a pop-up bar for showing notifications. When plugins have some exciting news (or error) to share, they can show a notification here.
 
 ```js
 const Informer = require('@uppy/informer')
@@ -29,6 +30,20 @@ Install from NPM:
 npm install @uppy/informer
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Informer = Uppy.Informer
+```
+
+## CSS
+
+The Informer plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Informer, because the Dashboard already includes it.
+
+The CSS file lives at `@uppy/informer/dist/style.css`. A minified version is at `@uppy/informer/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The Informer plugin has the following configurable options:
@@ -39,7 +54,7 @@ A unique identifier for this Informer. It defaults to `'Informer'`. Use this if
 
 ### `target: null`
 
-DOM element, CSS selector, or plugin to mount the informer into.
+DOM element, CSS selector, or plugin to mount the Informer into.
 
 ### `typeColors: {}`
 

website/src/docs/instagram.md

@@ -1,13 +1,14 @@
 ---
 type: docs
-order: 53
+order: 33
 title: "Instagram"
+module: "@uppy/instagram"
 permalink: docs/instagram/
 ---
 
-The Instagram plugin lets users import files their Instagram account.
+The `@uppy/instagram` plugin lets users import files their Instagram account.
 
-An Uppy Server instance is required for the Instagram plugin to work. Uppy Server handles authentication with Instagram, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
+An Uppy Server instance is required for the `@uppy/instagram` plugin to work. Uppy Server handles authentication with Instagram, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
 const Instagram = require('@uppy/instagram')
@@ -29,6 +30,12 @@ This plugin is published as the `@uppy/instagram` package.
 npm install @uppy/instagram
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Instagram = Uppy.Instagram
+```
+
 ## Options
 
 ```js

website/src/docs/plugins.md

@@ -7,29 +7,32 @@ order: 10
 
 Plugins are what makes Uppy useful: they help select, manipulate and upload files.
 
-- **Acquirers (various ways of picking files):**
-  - [Dashboard](/docs/dashboard) — full-featured sleek UI with file previews, metadata editing, upload/pause/resume/cancel buttons and more. Includes `StatusBar` and `Informer` plugins by default
-  - [DragDrop](/docs/dragdrop) — plain and simple drag-and-drop area
-  - [FileInput](/docs/fileinput) — even more plain and simple, just a button
-  - [Webcam](/docs/webcam) — upload selfies or audio / video recordings
-  - [Provider Plugins](/docs/providers) (remote sources that work through [Uppy Server](/docs/server/))
-    - [Dropbox](/docs/dropbox) – import files from Dropbox
-    - [GoogleDrive](/docs/google-drive) – import files from Google Drive
-    - [Instagram](/docs/instagram) – import files from Instagram
-    - [Url](/docs/url) – import files from any public URL
+- **Local Sources:**
+  - [@uppy/dashboard](/docs/dashboard) — full-featured sleek UI with file previews, metadata editing, upload/pause/resume/cancel buttons and more. Includes `StatusBar` and `Informer` plugins by default
+  - [@uppy/drag-drop](/docs/drag-drop) — plain and simple drag-and-drop area
+  - [@uppy/file-input](/docs/file-input) — even more plain and simple, just a button
+  - [@uppy/webcam](/docs/webcam) — upload selfies or audio / video recordings
+- **[Remote Providers](/docs/providers):** (remote sources that work through [Uppy Server](/docs/server/))
+  - [@uppy/dropbox](/docs/dropbox) – import files from Dropbox
+  - [@uppy/google-drive](/docs/google-drive) – import files from Google Drive
+  - [@uppy/instagram](/docs/instagram) – import files from Instagram
+  - [@uppy/url](/docs/url) – import files from any public URL
 - **Uploaders:**
-  - [Tus](/docs/tus) — uploads using the [tus](https://tus.io) resumable upload protocol
-  - [XHRUpload](/docs/xhrupload) — classic multipart form uploads or binary uploads using XMLHTTPRequest
-  - [AwsS3](/docs/aws-s3) — uploader for AWS S3
-- **Progress:**
-  - [ProgressBar](/docs/progressbar) — add a small YouTube-style progress bar at the top of the page
-  - [StatusBar](/docs/statusbar) — advanced upload progress status bar
-  - [Informer](/docs/informer) — show notifications
-- **Helpers:**
-  - [GoldenRetriever](/docs/golden-retriever) — restore files and continue uploading after a page refresh or a browser crash
-  - [Form](/docs/form) — collect metadata from `<form>` right before the Uppy upload, then optionally append results back to the form
+  - [@uppy/tus](/docs/tus) — uploads using the [tus](https://tus.io) resumable upload protocol
+  - [@uppy/xhr-upload](/docs/xhr-upload) — classic multipart form uploads or binary uploads using XMLHTTPRequest
+  - [@uppy/aws-s3](/docs/aws-s3) — uploader for AWS S3
+  - [@uppy/aws-s3-multipart](/docs/aws-s3-multipart) — uploader for AWS S3 using its resumable Multipart protocol
+- **UI Elements:**
+  - [@uppy/progress-bar](/docs/progress-bar) — add a small YouTube-style progress bar at the top of the page
+  - [@uppy/status-bar](/docs/status-bar) — advanced upload progress status bar
+  - [@uppy/informer](/docs/informer) — show notifications
 - **Encoding Services:**
-  - [Transloadit](/docs/transloadit) — manipulate and transcode uploaded files using the [transloadit.com](https://transloadit.com) service
+  - [@uppy/transloadit](/docs/transloadit) — manipulate and transcode uploaded files using the [transloadit.com](https://transloadit.com) service
+- **Miscellaneous:**
+  - [@uppy/form](/docs/form) — collect metadata from `<form>` right before the Uppy upload, then optionally append results back to the form
+  <!-- TODO document? -->
+  - @uppy/thumbnail-generator — generate preview thumbnails for images to be uploaded [documentation not yet available]
+  - [@uppy/golden-retriever](/docs/golden-retriever) — restore files and continue uploading after a page refresh or a browser crash
 
 ## Common options
 
@@ -51,11 +54,11 @@ uppy.use(DragDrop, { target: 'body' })
 // or: uppy.use(DragDrop, { target: document.body })
 ```
 
-While in this one, we are using the `Dashboard` plugin, which can act as a host target for other plugins:
+While in this one, we are using the `@uppy/dashboard` plugin, which can act as a host target for other plugins:
 
 ```js
 const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
+const Dashboard = require('@uppy/dashboard')
 const GoogleDrive = require('@uppy/google-drive')
 const uppy = Uppy()
 uppy.use(Dashboard, {
@@ -81,6 +84,8 @@ Same as with Uppy.Core’s setting above, this allows you to override plugin’s
 
 See plugin documentation pages for other plugin-specific options.
 
+<!-- Keep this heading, it is here to avoid breaking existing URLs -->
+<!-- Previously the content that is now at /docs/providers was here -->
 ## Provider Plugins
 
 See the [Provider Plugins](/docs/providers) documentation page for information on provider plugins.

website/src/docs/progressbar.md

@@ -1,12 +1,13 @@
 ---
 type: docs
-order: 23
-title: "ProgressBar"
+order: 51
+title: "Progress Bar"
+module: "@uppy/progress-bar"
 permalink: docs/progress-bar/
 alias: docs/progressbar/
 ---
 
-ProgressBar is a minimalist plugin that shows the current upload progress in a thin bar element, similar to the ones used by YouTube and GitHub when navigating between pages.
+`@uppy/progress-bar` is a minimalist plugin that shows the current upload progress in a thin bar element, similar to the ones used by YouTube and GitHub when navigating between pages.
 
 ```js
 const ProgressBar = require('@uppy/progress-bar')
@@ -16,7 +17,7 @@ uppy.use(ProgressBar, {
 })
 ```
 
-[Try it live](/examples/dragdrop/) - The DragDrop example uses ProgressBars to show progress.
+[Try it live](/examples/dragdrop/) - The `@uppy/drag-drop` example uses a Progress Bar to show progress.
 
 ## Installation
 
@@ -28,6 +29,12 @@ Install from NPM:
 npm install @uppy/progress-bar
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const ProgressBar = Uppy.ProgressBar
+```
+
 ## Options
 
 The Progressbar plugin has the following configurable options:
@@ -42,7 +49,7 @@ uppy.use(ProgressBar, {
 
 ### `id: 'ProgressBar'`
 
-A unique identifier for this ProgressBar. It defaults to `'ProgressBar'`. Use this if you need to add multiple ProgressBar instances.
+A unique identifier for this Progress Bar. It defaults to `'ProgressBar'`. Use this if you need to add multiple ProgressBar instances.
 
 ### `target: null`
 
@@ -65,4 +72,4 @@ When true, hides the progress bar after the upload has finished. If false, it re
 
 ### `replaceTargetContent: false`
 
-Remove all children of the `target` element before mounting the ProgressBar. By default, Uppy will append any UI to the `target` DOM element. This is the least dangerous option. However, you may have some fallback HTML inside the `target` element in case JavaScript or Uppy is not available. In that case, you can set `replaceTargetContent: true` to clear the `target` before appending.
+Remove all children of the `target` element before mounting the Progress Bar. By default, Uppy will append any UI to the `target` DOM element. This is the least dangerous option. However, you may have some fallback HTML inside the `target` element in case JavaScript or Uppy is not available. In that case, you can set `replaceTargetContent: true` to clear the `target` before appending.

website/src/docs/providers.md

@@ -2,7 +2,7 @@
 title: "Provider Plugins"
 type: docs
 permalink: docs/providers/
-order: 50
+order: 30
 ---
 
 The Provider plugins help you connect to your accounts with remote file providers such as [Dropbox](https://dropbox.com), [Google Drive](https://drive.google.com), [Instagram](https://instagram.com) and remote urls (import a file by pasting a direct link to it). Because this requires server to server communication, they work tightly with [uppy-server](https://github.com/transloadit/uppy-server) to manage the server to server authorization for your account. Almost all of the communication (file download/upload) is done on the server-to-server end, so this saves you the stress and bills of data consumption on the client.

website/src/docs/react-dashboard-modal.md

@@ -2,10 +2,10 @@
 title: "<DashboardModal />"
 type: docs
 permalink: docs/react/dashboard-modal/
-order: 65
+order: 85
 ---
 
-The `<DashboardModal />` component wraps the [Dashboard][] plugin, allowing control over the modal `open` state using a prop.
+The `<DashboardModal />` component wraps the [`@uppy/dashboard`][] plugin, allowing control over the modal `open` state using a prop.
 
 ## Installation
 
@@ -22,12 +22,12 @@ import { DashboardModal } from '@uppy/react'
 <a id="Options"></a>
 ## Props
 
-On top of all the [Dashboard][] options, the `<DashboardModal />` plugin adds two additional props:
+On top of all the [`@uppy/dashboard`][] options, the `<DashboardModal />` plugin adds two additional props:
 
  - `open` - Boolean true or false, setting this to `true` opens the modal and setting it to `false` closes it.
  - `onRequestClose` - Callback called when the user attempts to close the modal, either by clicking the close button or by clicking outside the modal (if the `closeModalOnClickOutside` prop is set).
 
-To use other plugins like [Webcam][] with the `<DashboardModal />` component, add them to the Uppy instance and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
+To use other plugins like [`@uppy/webcam`][] with the `<DashboardModal />` component, add them to the Uppy instance and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
 
 ```js
 // Do this wherever you initialize Uppy, eg. in a React component's constructor method.
@@ -82,5 +82,5 @@ class MusicUploadButton extends React.Component {
 }
 ```
 
-[Dashboard]: /docs/dashboard/
-[Webcam]: /docs/webcam/
+[`@uppy/dashboard`]: /docs/dashboard/
+[`@uppy/webcam`]: /docs/webcam/

website/src/docs/react-dashboard.md

@@ -2,10 +2,10 @@
 title: "<Dashboard />"
 type: docs
 permalink: docs/react/dashboard/
-order: 64
+order: 84
 ---
 
-The `<Dashboard />` component wraps the [Dashboard][] plugin. It only renders the Dashboard inline. To use the Dashboard modal (`inline: false`), use the [`<DashboardModal />`](/docs/react/dashboard-modal) component.
+The `<Dashboard />` component wraps the [`@uppy/dashboard`][] plugin. It only renders the Dashboard inline. To use the Dashboard modal (`inline: false`), use the [`<DashboardModal />`](/docs/react/dashboard-modal) component.
 
 ## Installation
 
@@ -20,9 +20,9 @@ import { Dashboard } from '@uppy/react'
 
 ## Props
 
-The `<Dashboard />` component supports all [Dashboard][] options as props.
+The `<Dashboard />` component supports all [`@uppy/dashboard`][] options as props.
 
-The `<Dashboard />` cannot be passed to a `target:` option of a remote provider or plugins like [Webcam][]. To use other plugins like [Webcam][] with the `<Dashboard />` component, first add them to the Uppy instance, and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
+The `<Dashboard />` cannot be passed to a `target:` option of a remote provider or plugins like [`@uppy/webcam`][]. To use other plugins like [`@uppy/webcam`][] with the `<Dashboard />` component, first add them to the Uppy instance, and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
 
 ```js
 // Do this wherever you initialize Uppy, eg. in a React component's constructor method.
@@ -40,5 +40,5 @@ Then in `render()` do:
 />
 ```
 
-[Dashboard]: /docs/dashboard/
-[Webcam]: /docs/webcam/
+[`@uppy/dashboard`]: /docs/dashboard/
+[`@uppy/webcam`]: /docs/webcam/

website/src/docs/react-dragdrop.md

@@ -3,10 +3,10 @@ title: "<DragDrop />"
 type: docs
 permalink: docs/react/drag-drop/
 alias: docs/react/dragdrop/
-order: 62
+order: 82
 ---
 
-The `<DragDrop />` component wraps the [DragDrop][] plugin.
+The `<DragDrop />` component wraps the [`@uppy/drag-drop`][] plugin.
 
 ## Installation
 
@@ -31,4 +31,4 @@ The `<DragDrop />` component supports all [DragDrop][] options as props.
 />
 ```
 
-[DragDrop]: /docs/dragdrop/
+[`@uppy/drag-drop`]: /docs/drag-drop/

website/src/docs/react-progressbar.md

@@ -3,10 +3,10 @@ title: "<ProgressBar />"
 type: docs
 permalink: docs/react/progress-bar/
 alias: docs/react/progressbar/
-order: 63
+order: 83
 ---
 
-The `<ProgressBar />` component wraps the [ProgressBar][] plugin.
+The `<ProgressBar />` component wraps the [`@uppy/progress-bar`][] plugin.
 
 ## Installation
 
@@ -21,7 +21,7 @@ import { ProgressBar } from '@uppy/react'
 
 ## Props
 
-The `<ProgressBar />` component supports all [ProgressBar][] options as props.
+The `<ProgressBar />` component supports all [`@uppy/progress-bar`][] options as props.
 
 ```js
 <ProgressBar
@@ -30,4 +30,4 @@ The `<ProgressBar />` component supports all [ProgressBar][] options as props.
 />
 ```
 
-[ProgressBar]: /docs/progressbar/
+[`@uppy/progress-bar`]: /docs/progress-bar/

website/src/docs/react-statusbar.md

@@ -3,10 +3,10 @@ title: "<StatusBar />"
 type: docs
 permalink: docs/react/status-bar/
 alias: docs/react/statusbar/
-order: 61
+order: 81
 ---
 
-The `<StatusBar />` component wraps the [StatusBar][] plugin.
+The `<StatusBar />` component wraps the [`@uppy/status-bar`][] plugin.
 
 ## Installation
 
@@ -21,7 +21,7 @@ import { StatusBar } from '@uppy/react'
 
 ## Props
 
-The `<StatusBar />` component supports all [StatusBar][] options as props.
+The `<StatusBar />` component supports all [`@uppy/status-bar`][] options as props.
 
 ```js
 <StatusBar
@@ -31,4 +31,4 @@ The `<StatusBar />` component supports all [StatusBar][] options as props.
 />
 ```
 
-[StatusBar]: /docs/statusbar/
+[`@uppy/status-bar`]: /docs/status-bar/

website/src/docs/react.md

@@ -2,7 +2,7 @@
 title: "Introduction"
 type: docs
 permalink: docs/react/
-order: 60
+order: 80
 ---
 
 Uppy provides [React][] components for the included UI plugins.
@@ -62,20 +62,20 @@ const AvatarPicker = ({ currentAvatar }) => {
 
 The plugins that are available as React component wrappers are:
 
- - [<Dashboard />][] - renders an inline [Dashboard][]
- - [<DashboardModal />][] - renders a [Dashboard][] modal
- - [<DragDrop />][] - renders a [DragDrop][] area
- - [<ProgressBar />][] - renders a [ProgressBar][]
- - [<StatusBar />][] - renders a [StatusBar][]
+ - [<Dashboard />][] - renders an inline [`@uppy/dashboard`][]
+ - [<DashboardModal />][] - renders a [`@uppy/dashboard`][] modal
+ - [<DragDrop />][] - renders a [`@uppy/drag-drop`][] area
+ - [<ProgressBar />][] - renders a [`@uppy/progress-bar`][]
+ - [<StatusBar />][] - renders a [`@uppy/status-bar`][]
 
 [React]: https://facebook.github.io/react
 [Preact]: https://preactjs.com/
 [<Dashboard />]: /docs/react/dashboard
 [<DragDrop />]: /docs/react/dragdrop
-[<ProgressBar />]: /docs/react/progressbar
-[<StatusBar />]: /docs/react/statusbar
+[<ProgressBar />]: /docs/react/progress-bar
+[<StatusBar />]: /docs/react/status-bar
 [<DashboardModal />]: /docs/react/dashboard-modal
-[Dashboard]: /docs/dashboard
-[DragDrop]: /docs/dragdrop
-[ProgressBar]: /docs/progressbar
-[StatusBar]: /docs/statusbar
+[`@uppy/dashboard`]: /docs/dashboard
+[`@uppy/drag-drop`]: /docs/drag-drop
+[`@uppy/progress-bar`]: /docs/progress-bar
+[`@uppy/status-bar`]: /docs/status-bar

website/src/docs/redux.md

@@ -2,7 +2,7 @@
 title: "Redux"
 type: docs
 permalink: docs/redux
-order: 67
+order: 87
 ---
 
 Uppy supports popular [Redux](https://redux.js.org/) state management library in two ways:

website/src/docs/statusbar.md

@@ -1,13 +1,14 @@
 ---
 type: docs
-order: 22
-title: "StatusBar"
+order: 50
+title: "Status Bar"
+module: "@uppy/status-bar"
 permalink: docs/status-bar/
 alias: docs/statusbar/
 ---
 
-The StatusBar shows upload progress and speed, ETAs, pre- and post-processing information, and allows users to control (pause/resume/cancel) the upload.
-Best used in combination with with a simple file source plugin, such as [FileInput][] or [DragDrop][], or a custom implementation.
+The `@uppy/status-bar` plugin shows upload progress and speed, ETAs, pre- and post-processing information, and allows users to control (pause/resume/cancel) the upload.
+Best used in combination with with a simple file source plugin, such as [`@uppy/file-input`][] or [`@uppy/drag-drop`][], or a custom implementation.
 
 ```js
 const StatusBar = require('@uppy/status-bar')
@@ -29,6 +30,20 @@ Install from NPM:
 npm install @uppy/status-bar
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const StatusBar = Uppy.StatusBar
+```
+
+## CSS
+
+The StatusBar plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the StatusBar, because the Dashboard already includes it.
+
+The CSS file lives at `@uppy/status-bar/dist/style.css`. A minified version is at `@uppy/status-bar/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The StatusBar plugin has the following configurable options:
@@ -45,19 +60,19 @@ uppy.use(StatusBar, {
 
 ### `id: 'StatusBar'`
 
-A unique identifier for this StatusBar. It defaults to `'StatusBar'`. Use this if you need to add multiple StatusBar instances.
+A unique identifier for this Status Bar. It defaults to `'StatusBar'`. Use this if you need to add multiple StatusBar instances.
 
 ### `target: null`
 
-DOM element, CSS selector, or plugin to mount the StatusBar into.
+DOM element, CSS selector, or plugin to mount the Status Bar into.
 
 ### `hideAfterFinish: true`
 
-Hide StatusBar after the upload is complete.
+Hide the Status Bar after the upload is complete.
 
 ### `showProgressDetails: false`
 
-By default, progress in StatusBar is shown as simple percentage. If you would like to also display remaining upload size and time, set this to `true`.
+By default, progress in the Status Bar is shown as simple percentage. If you would like to also display remaining upload size and time, set this to `true`.
 
 `showProgressDetails: false`: Uploading: 45%
 `showProgressDetails: true`: Uploading: 45%・43 MB of 101 MB・8s left
@@ -118,7 +133,7 @@ strings: {
 
 ### `replaceTargetContent: false`
 
-Remove all children of the `target` element before mounting the StatusBar. By default, Uppy will append any UI to the `target` DOM element. This is the least dangerous option. However, you may have some fallback HTML inside the `target` element in case JavaScript or Uppy is not available. In that case, you can set `replaceTargetContent: true` to clear the `target` before appending.
+Remove all children of the `target` element before mounting the Status Bar. By default, Uppy will append any UI to the `target` DOM element. This is the least dangerous option. However, you may have some fallback HTML inside the `target` element in case JavaScript or Uppy is not available. In that case, you can set `replaceTargetContent: true` to clear the `target` before appending.
 
-[FileInput]: https://github.com/transloadit/uppy/blob/master/src/plugins/FileInput.js
-[DragDrop]: /docs/dragdrop
+[`@uppy/file-input`]: /docs/file-input
+[`@uppy/drag-drop`]: /docs/drag-drop

website/src/docs/stores.md

@@ -13,8 +13,8 @@ If your app uses a state management library such as [Redux](https://redux.js.org
 
 Uppy comes with two state management solutions (stores):
 
- - `DefaultStore`, a simple object-based store.
- - `ReduxStore`, a store that uses a key in a Redux store.
+ - `@uppy/store-default`, a simple object-based store.
+ - `@uppy/store-redux`, a store that uses a key in a Redux store.
 
 There are also some third-party stores:
 

website/src/docs/transloadit.md

@@ -1,11 +1,12 @@
 ---
 type: docs
-order: 34
+order: 60
 title: "Transloadit"
+module: "@uppy/transloadit"
 permalink: docs/transloadit/
 ---
 
-The Transloadit plugin can be used to upload files to [Transloadit](https://transloadit.com/) for all kinds of processing, such as transcoding video, resizing images, zipping/unzipping, [and more](https://transloadit.com/services/).
+The `@uppy/transloadit` plugin can be used to upload files to [Transloadit](https://transloadit.com/) for all kinds of processing, such as transcoding video, resizing images, zipping/unzipping, [and more](https://transloadit.com/services/).
 
 [Try it live](/examples/transloadit/)
 
@@ -34,6 +35,12 @@ This plugin is published as the `@uppy/transloadit` package.
 npm install @uppy/transloadit
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Transloadit = Uppy.Transloadit
+```
+
 ## Properties
 
 ### `Transloadit.UPPY_SERVER`

website/src/docs/tus.md

@@ -1,11 +1,12 @@
 ---
 type: docs
-order: 30
+order: 40
 title: "Tus"
+module: "@uppy/tus"
 permalink: docs/tus/
 ---
 
-The Tus plugin brings resumable file uploading by [tus.io](http://tus.io) to Uppy by wrapping the [tus-js-client][].
+The `@uppy/tus` plugin brings resumable file uploading by [tus.io](http://tus.io) to Uppy by wrapping the [tus-js-client][].
 
 ```js
 const Tus = require('@uppy/tus')
@@ -28,9 +29,15 @@ Install from NPM:
 npm install @uppy/tus
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Tus = Uppy.Tus
+```
+
 ## Options
 
-The Tus plugin supports all of [tus-js-client][]’s options. In addition tot that, it has the following configurable options:
+The `@uppy/tus` plugin supports all of [tus-js-client][]’s options. In addition tot that, it has the following configurable options:
 
 ### `id: 'Tus'`
 

website/src/docs/uppy.md

@@ -2,10 +2,11 @@
 type: docs
 order: 1
 title: "Uppy"
+module: "@uppy/core"
 permalink: docs/uppy/
 ---
 
-This is the core module that orchestrates everything in Uppy, exposing `state`, `events` and `methods`.
+This is the core module that orchestrates everything in Uppy, managing state and events and providing methods.
 
 ```js
 const Uppy = require('@uppy/core')
@@ -19,6 +20,12 @@ const uppy = Uppy()
 npm install @uppy/core
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Core = Uppy.Core
+```
+
 ## Options
 
 ```js

website/src/docs/url.md

@@ -1,13 +1,14 @@
 ---
 type: docs
-order: 54
-title: "Url"
+order: 34
+title: "Import From URL"
+module: "@uppy/url"
 permalink: docs/url/
 ---
 
-The Url plugin lets users import files from the Internet. Paste any URL and it'll be added!
+The `@uppy/url` plugin lets users import files from the Internet. Paste any URL and it'll be added!
 
-An Uppy Server instance is required for the Url plugin to work. Uppy Server will download the files and upload them to their destination. This saves bandwidth for the user (especially on mobile connections) and helps avoid CORS restrictions.
+An Uppy Server instance is required for the `@uppy/url` plugin to work. Uppy Server will download the files and upload them to their destination. This saves bandwidth for the user (especially on mobile connections) and helps avoid CORS restrictions.
 
 ```js
 const Url = require('@uppy/url')
@@ -27,6 +28,12 @@ This plugin is published as the `@uppy/url` package.
 npm install @uppy/url
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Url = Uppy.Url
+```
+
 ## Options
 
 ```js

website/src/docs/webcam.md

@@ -2,10 +2,11 @@
 type: docs
 order: 26
 title: "Webcam"
+module: "@uppy/webcam"
 permalink: docs/webcam/
 ---
 
-The Webcam plugin lets you take photos and record videos with a built-in camera on desktop and mobile devices.
+The `@uppy/webcam` plugin lets you take photos and record videos with a built-in camera on desktop and mobile devices.
 
 > To use the Webcam plugin in Chrome, [your site should be served over https](https://developers.google.com/web/updates/2015/10/chrome-47-webrtc#public_service_announcements). This restriction does not apply on `localhost`, so you don't have to jump through many hoops during development.
 
@@ -29,6 +30,12 @@ Install from NPM:
 npm install @uppy/webcam
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const Webcam = Uppy.Webcam
+```
+
 ## Options
 
 The Webcam plugin has the following configurable options:

website/src/docs/xhrupload.md

@@ -1,12 +1,13 @@
 ---
 type: docs
-order: 31
-title: "XHRUpload"
+order: 41
+title: "XHR Upload"
+module: "@uppy/xhr-upload"
 permalink: docs/xhr-upload/
 alias: docs/xhrupload/
 ---
 
-The XHRUpload plugin handles classic HTML multipart form uploads, as well as uploads using the HTTP `PUT` method.
+The `@uppy/xhr-upload` plugin handles classic HTML multipart form uploads, as well as uploads using the HTTP `PUT` method.
 
 ```js
 const XHRUpload = require('@uppy/xhr-upload')
@@ -28,6 +29,12 @@ Install from NPM:
 npm install @uppy/xhr-upload
 ```
 
+In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
+
+```js
+const XHRUpload = Uppy.XHRUpload
+```
+
 ## Options
 
 The XHRUpload plugin has the following configurable options:

website/themes/uppy/layout/partials/sidebar.ejs

@@ -1,3 +1,23 @@
+<%
+var categories = [
+  // order: 1x
+  { path: 'docs/plugins/', name: 'Plugins', link: true },
+  // order: 2x
+  { path: 'docs/dashboard/', name: 'Local Sources', link: false },
+  // order: 3x
+  { path: 'docs/providers/', name: 'Remote Providers', link: true },
+  // order: 4x
+  { path: 'docs/tus/', name: 'Uploaders', link: false },
+  // order: 5x
+  { path: 'docs/status-bar/', name: 'UI Elements', link: false },
+  // order: 6x
+  { path: 'docs/transloadit/', name: 'File Processing', link: false },
+  // order: 7x
+  { path: 'docs/form/', name: 'Miscellaneous', link: false },
+  // order: 8x
+  { path: 'docs/react/', name: 'React Components', link: true },
+]
+%>
 <div class="Sidebar js-Sidebar">
   <ul class="main-menu">
     <%- partial('partials/main_menu') %>
@@ -9,26 +29,17 @@
       <% } %>
     </h2>
     <ul class="menu-root">
-      <% site.pages.find({type: type}).sort('order').each(function (p) { %>
+      <% site.pages.find({ type }).sort('order').each((p) => { %>
         <% var path = p.path.replace(/index\.html$/, ''); %>
+        <% var category = categories.find((c) => c.path === path) %>
         <% // see https://github.com/vuejs/vuejs.org/blob/master/themes/vue/layout/partials/toc.ejs %>
-        <% if (path === 'docs/plugins/') { %>
+        <% if (category) { %>
           <li>
-            <h3><a href="/docs/plugins/">Plugins</a></h3>
-          </li>
-          <li>
-            <a href="/<%- path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
-          </li>
-        <% } else if (path === 'docs/providers/') { %>
-          <li>
-            <h3><a href="/docs/providers/">Remote Providers</a></h3>
-          </li>
-          <li>
-            <a href="/<%- path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
-          </li>
-        <% } else if (path === 'docs/react/') { %>
-          <li>
-            <h3><a href="/docs/react/">React Components</a></h3>
+            <% if (category.link) { %>
+              <h3><a href="/<%- category.path %>"><%- category.name %></a></h3>
+            <% } else { %>
+              <h3><%- category.name %></h3>
+            <% } %>
           </li>
           <li>
             <a href="/<%- path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>