website: add blog post 2.4-2.7 (#3557)

* Add 2.4-2.7 post draft

* ignore just and simply

* Update website/src/_posts/2022-03-2.4-2.7.md

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update website/src/_posts/2022-03-2.4-2.7.md

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update website/src/_posts/2022-03-2.4-2.7.md

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update private/remark-lint-uppy/retext-preset.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Add Box and Compressor to /examples/dashboard

* set cover image

* Update 2022-03-2.4-2.7.md

* Update website/src/_posts/2022-03-2.4-2.7.md

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update website/src/_posts/2022-03-2.4-2.7.md

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update index.ejs

* Update 2022-03-2.4-2.7.md

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

website/src/_posts/2022-03-2.4-2.7.md

@@ -0,0 +1,72 @@
+---
+title: "Uppy 2.4-2.7: Image Compressor, Transloadit Rate Limiting, ESM" 
+date: 2022-03-11
+author: 
+  - aduh95
+  - arturi
+  - mifi
+  - murderlon
+image: "https://uppy.io/images/blog/2.4-2.7/compressor.jpg"
+published: true
+---
+
+Recent Uppy updates brings image compression, improved Transloadit rate limiting and lighter Dashboard plugin. We’ve also moved our end to end tests to Cypress, and are slowly converting plugins to ESM modules.
+
+<img class="border" alt="Uppy Compressor plugin showing compressed images notification" src="/images/blog/2.4-2.7/compressor.jpg">
+
+<!--more-->
+
+## Compressor
+
+Some of the most commonly uploaded files on the internet are images — photos, stock images, screenshots, documents scans. Uppy now includes a new plugin, `@uppy/compressor` that optimizes images (JPEG, PNG), saving on average up to 60% in size (roughly 18 MB for 10 images). It uses [Compressor.js](https://github.com/fengyuanchen/compressorjs) under the hood.
+
+[Read the docs](https://uppy.io/docs/compressor/) and [try Compressor in action](https://uppy.io/examples/dashboard/).
+
+```js
+import Uppy from '@uppy/core'
+import Compressor from '@uppy/compressor'
+
+const uppy = new Uppy()
+uppy.use(Compressor)
+```
+
+`@uppy/compressor` is also the first plugin that we are releasing as ESM, backwards compatible as CJS, to test out how this works. Please report any issues.
+
+## Hosted Companion Custom Credentials
+
+It’s no secret [Transloadit hosted Companion](https://transloadit.com/docs/sdks/uppy/) is the easiest secure way to allow your users pick files from cloud sources like Google Drive, Instagram, Box, etc via Uppy. Up until now, however, that meant your users had to authenticate their cloud account with Transloadit, while you might want to show your own logo instead. That’s now possible: head to `Transloadit Console` / `Credentials`, scroll to `Third-party Credentials`, click on `Add new Credentials`, select `Companion OAuth`, and voilà!
+
+<img class="border" alt="Transloadit Companion 3rd party credentials" src="/images/blog/2.4-2.7/companion-3rd-party-oauth.jpg">
+
+Try it out with [Free Transloadit Community plan — 5GB / month and Companion](https://transloadit.com/pricing/).
+
+## Transloadit Rate Limiting
+
+We’ve added rate limiting to Transloadit [assembly creation and status polling](https://github.com/transloadit/uppy/pull/3429) and [tus retries](https://github.com/transloadit/uppy/pull/3394):
+
+> When the remote server responds with HTTP 429, all requests are paused for a while in the hope that it can resolve the rate limiting. Failed requests are also now queued up after the retry delay. Before that, they were scheduled for retry without being queued up, which would sometimes end up overflowing the limit option.
+
+Now uploading many files at once is even more robust.
+
+## Move to ESM
+
+The JavaScript ecosystem is moving towards ESM, and we want to follow suit. We are slowly starting to adopt ESM in Uppy packages, and to do that we integrated into our build system a plugin that transpiles ESM source code to CommonJS syntax which is distributed with the npm package. Nothing changes from your side, we know that not everyone is using tooling that support ESM, so we’re holding on to CommonJS for the time being. Our plan is to refactor all official Uppy plugins to ESM before Uppy 3.0 is released, and drop CommonJS in favor of ESM in the npm packages then.
+
+For details, see [PR 3468](https://github.com/transloadit/uppy/pull/3468).
+
+## End to End: Move to Cypress
+
+We’ve had end to end from the start in Uppy, but the developer experience was less than ideal with custom Webdriver.io + Selenium. The transition to [Cypress](https://github.com/transloadit/uppy/pull/3444) allows us to write tests with ease and comfort, backed by great documentation.
+
+## Lighter Bundle
+
+We continue to look for ways to reduce Uppy bundle size and modernize our build toolchain. This time, we’ve replaced [Exifr.js](https://github.com/exif-js/exif-js) legacy bundle with the modern one without IE polyfills. Our Browserify bundler has been replaced with a modern and more efficient ESBuild.
+
+## Companion Improvements
+
+* Improved private ip check (#3403)
+* Implement periodic ping functionality (#3246)
+* Fix broken thumbnails for box and dropbox (#3460)
+* Fix unpslash author meta, sanitize metadata to strings and improve companion tests (#3478)
+
+That’s it for today! See full [changelog](https://github.com/transloadit/uppy/blob/master/CHANGELOG.md#1300) for more details.

website/src/examples/dashboard/app.es6

@@ -7,7 +7,7 @@ const Facebook = require('@uppy/facebook')
 const OneDrive = require('@uppy/onedrive')
 const Zoom = require('@uppy/zoom')
 const Unsplash = require('@uppy/unsplash')
-// const Box = require('@uppy/box')
+const Box = require('@uppy/box')
 const ImageEditor = require('@uppy/image-editor')
 const Url = require('@uppy/url')
 const Webcam = require('@uppy/webcam')
@@ -16,6 +16,7 @@ const ScreenCapture = require('@uppy/screen-capture')
 const Tus = require('@uppy/tus')
 const DropTarget = require('@uppy/drop-target')
 const GoldenRetriever = require('@uppy/golden-retriever')
+const Compressor = require('@uppy/compressor')
 const localeList = require('../locale_list.json')
 
 const COMPANION = require('../env')
@@ -156,13 +157,13 @@ function uppySetOptions () {
     window.uppy.removePlugin(zoomInstance)
   }
 
-  //   const boxInstance = window.uppy.getPlugin('Box')
-  //   if (opts.Box && !boxInstance) {
-  //     window.uppy.use(Box, { target: Dashboard, companionUrl: COMPANION })
-  //   }
-  //   if (!opts.Box && boxInstance) {
-  //     window.uppy.removePlugin(boxInstance)
-  //   }
+  const boxInstance = window.uppy.getPlugin('Box')
+  if (opts.Box && !boxInstance) {
+    window.uppy.use(Box, { target: Dashboard, companionUrl: COMPANION })
+  }
+  if (!opts.Box && boxInstance) {
+    window.uppy.removePlugin(boxInstance)
+  }
 
   const webcamInstance = window.uppy.getPlugin('Webcam')
   if (opts.Webcam && !webcamInstance) {
@@ -217,6 +218,14 @@ function uppySetOptions () {
   if (!opts.GoldenRetriever && goldenRetrieverInstance) {
     window.uppy.removePlugin(goldenRetrieverInstance)
   }
+
+  const compressorInstance = window.uppy.getPlugin('Compressor')
+  if (opts.Compressor && !compressorInstance) {
+    window.uppy.use(Compressor)
+  }
+  if (!opts.Compressor && compressorInstance) {
+    window.uppy.removePlugin(compressorInstance)
+  }
 }
 
 function whenLocaleAvailable (localeName, callback) {

website/src/examples/dashboard/app.html

@@ -10,6 +10,7 @@
     <li><label for="opts-darkMode"><input type="checkbox" id="opts-darkMode" /> Dark Mode</label></li>
     <li><label for="opts-disabled"><input type="checkbox" id="opts-disabled" checked/> Disabled</label></li>
     <li><label for="opts-GoldenRetriever"><input type="checkbox" id="opts-GoldenRetriever" checked/> Recover incomplete uploads</label></li>
+    <li><label for="opts-Compressor"><input type="checkbox" id="opts-Compressor" checked/> Compress images</label></li>
   </ul>
   <ul>
     <li><label for="opts-Webcam"><input type="checkbox" id="opts-Webcam" checked/> Webcam</label></li>
@@ -18,7 +19,7 @@
     <li><label for="opts-GoogleDrive"><input type="checkbox" id="opts-GoogleDrive" checked/> Google Drive</label></li>
     <li><label for="opts-Dropbox"><input type="checkbox" id="opts-Dropbox" checked/> Dropbox</label></li>
     <li><label for="opts-Unsplash"><input type="checkbox" id="opts-Unsplash" checked/> Unsplash</label></li>
-    <!-- <li><label for="opts-Box"><input type="checkbox" id="opts-Box" checked/> Box</label></li> -->
+    <li><label for="opts-Box"><input type="checkbox" id="opts-Box" checked/> Box</label></li>
     <li><label for="opts-Instagram"><input type="checkbox" id="opts-Instagram" checked/> Instagram</label></li>
     <li><label for="opts-Facebook"><input type="checkbox" id="opts-Facebook" checked/> Facebook</label></li>
     <li><label for="opts-OneDrive"><input type="checkbox" id="opts-OneDrive" checked/> OneDrive</label></li>
@@ -51,7 +52,7 @@
     GoogleDrive: document.querySelector('#opts-GoogleDrive'),
     Dropbox: document.querySelector('#opts-Dropbox'),
     Unsplash: document.querySelector('#opts-Unsplash'),
-    // Box: document.querySelector('#opts-Box'),
+    Box: document.querySelector('#opts-Box'),
     Instagram: document.querySelector('#opts-Instagram'),
     Facebook: document.querySelector('#opts-Facebook'),
     OneDrive: document.querySelector('#opts-OneDrive'),
@@ -63,7 +64,8 @@
     imageEditor: document.querySelector('#opts-imageEditor'),
     disabled: document.querySelector('#opts-disabled'),
     DropTarget: document.querySelector('#opts-DropTarget'),
-    GoldenRetriever: document.querySelector('#opts-GoldenRetriever')
+    GoldenRetriever: document.querySelector('#opts-GoldenRetriever'),
+    Compressor: document.querySelector('#opts-Compressor'),
   }
 
   var defaultOpts = {
@@ -74,7 +76,7 @@
     Instagram: true,
     Dropbox: true,
     Unsplash: true,
-    // Box: true,
+    Box: true,
     OneDrive: true,
     Facebook: false,
     Url: true,
@@ -85,6 +87,7 @@
     disabled: false,
     DropTarget: true,
     GoldenRetriever: false,
+    Compressor: true,
   }
 
   // try to get options from localStorage, if its empty, set to defaultOpts

website/src/examples/dashboard/index.ejs

@@ -38,6 +38,7 @@ const Tus = require('@uppy/tus')
 const Url = require('@uppy/url')
 const DropTarget = require('@uppy/drop-target')
 const GoldenRetriever = require('@uppy/golden-retriever')
+const Compressor = require('@uppy/compressor')
 
 const uppy = new Uppy({
   debug: true,
@@ -77,6 +78,7 @@ const uppy = new Uppy({
 .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
 .use(DropTarget, {target: document.body })
 .use(GoldenRetriever)
+.use(Compressor)
 
 uppy.on('complete', result => {
   console.log('successful files:', result.successful)