Website: add plugin versions (#1952)

* Move stats to plugin list, add table with versions of all plugins

* Update Hexo to 4.0, and other deps too

* update hexo-filter-github-emojis dependecy, run lerna bootstrap

* re-create package-lock.json

* crap, it adds body/html to any document now, and this is a partial :(

* companion: temporary fix for ts compile error

* fix netlify maybe

* node 12 is lts

* revert attempted netlify command fix

* update package-lock.json

netlify.toml

@@ -6,5 +6,5 @@ ID = "uppy"
 
 [context.deploy-preview]
 command = "npm run build && npm run web:inject-disc && npm run web:build"
-environment = { NODE_VERSION = "10" }
+environment = { NODE_VERSION = "12" }
 publish = "website/public"

package.json

@@ -230,15 +230,15 @@
     "web:build-examples": "cd website && node build-examples.js",
     "web:build": "npm-run-all web:inject-bundles-misc web:generate web:build-examples web:inject-frontpagecodesample",
     "web:bundle-watch-inject": "onchange 'packages/uppy/dist/**/*.css' 'packages/uppy/dist/**/*.js' --initial --verbose -- npm run web:inject-bundles-misc",
-    "web:clean": "cd website && touch db.json && ../node_modules/.bin/hexo clean",
+    "web:clean": "cd website && touch db.json && ./node_modules/.bin/hexo clean",
     "web:deploy": "npm-run-all build web:clean web:inject-disc web:build && ./bin/web-deploy",
-    "web:generate": "cd website && touch db.json && ../node_modules/.bin/hexo generate",
+    "web:generate": "cd website && touch db.json && ./node_modules/.bin/hexo generate",
     "web:inject-bundles-misc": "cd website && node inject.js",
     "web:inject-disc": "npm run build:lib && node ./bin/disc.js",
     "web:inject-frontpagecodesample": "npm run web:generate && cp -f website/public/frontpage-code-sample.html website/themes/uppy/layout/partials/frontpage-code-sample.html && touch website/themes/uppy/layout/index.ejs",
     "web:start": "npm-run-all build:lib --parallel watch:css web:watch-examples web:bundle-watch-inject web:watch",
     "web:watch-examples": "cd website && node build-examples.js watch",
-    "web:watch": "cd website && touch db.json && ../node_modules/.bin/hexo server"
+    "web:watch": "cd website && touch db.json && ./node_modules/.bin/hexo server"
   },
   "jest": {
     "automock": false,

packages/@uppy/companion/src/server/Uploader.js

@@ -84,6 +84,9 @@ class Uploader {
         this._paused = true
         if (this.tus) {
           const shouldTerminate = !!this.tus.url
+          // @todo remove the ts-ignore when the tus-js-client type definitions
+          // have been updated with this change https://github.com/DefinitelyTyped/DefinitelyTyped/pull/40629
+          // @ts-ignore
           this.tus.abort(shouldTerminate)
         }
         this.cleanUp()

website/inject.js

@@ -67,6 +67,10 @@ inject().catch((err) => {
 
 async function getMinifiedSize (pkg, name) {
   const b = browserify(pkg)
+
+  const packageJSON = fs.readFileSync(path.join(pkg, 'package.json'))
+  const version = JSON.parse(packageJSON).version
+
   if (name !== '@uppy/core' && name !== 'uppy') {
     b.exclude('@uppy/core')
     // Already unconditionally included through @uppy/core
@@ -82,7 +86,8 @@ async function getMinifiedSize (pkg, name) {
 
   return {
     minified: bundle.length,
-    gzipped
+    gzipped,
+    version
   }
 }
 

website/package.json

@@ -2,7 +2,7 @@
   "name": "uppy.io",
   "private": true,
   "hexo": {
-    "version": "3.8.0"
+    "version": "4.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.4.4",
@@ -15,32 +15,32 @@
     "cssnano": "^4.1.10",
     "drag-drop": "^4.2.0",
     "glob": "^7.1.2",
-    "he": "^1.1.1",
-    "hexo": "3.8.0",
+    "he": "^1.2.0",
+    "hexo": "4.0.0",
+    "hexo-cli": "3.1.0",
     "hexo-browsersync": "^0.3.0",
-    "hexo-filter-github-emojis": "^2.1.0",
+    "hexo-filter-github-emojis": "arturi/hexo-filter-github-emojis",
     "hexo-generator-alias": "^0.1.3",
-    "hexo-generator-archive": "^0.1.5",
-    "hexo-generator-category": "^0.1.3",
-    "hexo-generator-feed": "^1.2.2",
-    "hexo-generator-index": "^0.2.1",
-    "hexo-generator-tag": "^0.2.0",
+    "hexo-generator-archive": "^1.0.0",
+    "hexo-generator-category": "^1.0.0",
+    "hexo-generator-feed": "^2.1.1",
+    "hexo-generator-index": "^1.0.0",
+    "hexo-generator-tag": "^1.0.0",
     "hexo-include-markdown": "^1.0.2",
-    "hexo-renderer-ejs": "^0.3.1",
-    "hexo-renderer-marked": "^0.3.2",
+    "hexo-renderer-marked": "2.0.0",
+    "hexo-renderer-ejs": "^1.0.0",
     "hexo-renderer-scss": "^1.2.0",
-    "hexo-server": "^0.3.2",
-    "hexo-tag-emojis": "^2.0.1",
-    "hexo-util": "^0.6.3",
+    "hexo-server": "^1.0.0",
+    "hexo-util": "^1.5.0",
     "js-yaml": "^3.13.1",
     "locale-code": "^2.0.2",
-    "marked": "^0.6.2",
+    "marked": "^0.7.0",
     "mdast-util-inject": "1.1.0",
     "mkdirp": "0.5.1",
     "multi-glob": "^1.0.2",
     "node-notifier": "^5.2.1",
     "postcss-inline-svg": "^3.1.1",
-    "prismjs": "^1.15.0",
+    "prismjs": "^1.17.1",
     "watchify": "^3.11.0"
   }
 }

website/src/docs/plugins.md

@@ -10,3 +10,5 @@ category: "Docs"
 ---
 
 Everything in Uppy is a Plugin. This lets us offer a wealth of features, but avoid bloating your JS bundle sizes if you don't need all of them.
+
+See [list of packages and sizes](#package-list) below to install what you need.

website/src/frontpage-code-sample.ejs

@@ -1,5 +1,6 @@
 ---
 layout: false
+no-emoji: true
 ---
 <!--
 You can `npm run web:inject-frontpagecodesample` to render this code snippet and

website/src/stats.ejs

@@ -1,11 +0,0 @@
----
-title: Stats
-type: docs
-layout: stats
-category: 'Contributing'
-permalink: docs/stats/
-alias:
-  - guide/stats/
-  - stats/
-order: 9
----

website/themes/uppy/layout/page.ejs

@@ -7,7 +7,8 @@
     
     <% if (page.subtype === 'plugin-list') { %>
       <%- partial('partials/docs_menu', { only_modules: true, add_taglines: true, type: page.type, index: page.index, add_category_ids: true }) %>
-    <% } %>    
+      <%- partial('partials/plugin_list') %>
+    <% } %>
 
     <% if (page.type === 'guide') { %>
       <div class="guide-links">

website/themes/uppy/layout/partials/frontpage-code-sample.html

@@ -1,4 +1,7 @@
-<figure class="highlight bash"><table><tbody><tr><td class="code"><pre>$ <span class="token function">npm</span> <span class="token function">install</span> @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus </pre></td></tr></tbody></table></figure>
+<!--
+You can `npm run web:inject-frontpagecodesample` to render this code snippet and
+save it as a layout partial
+--><html><head></head><body><figure class="highlight bash"><table><tbody><tr><td class="code"><pre>$ <span class="token function">npm</span> <span class="token function">install</span> @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus </pre></td></tr></tbody></table></figure>
 
 <figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="token keyword">import</span> Uppy <span class="token keyword">from</span> <span class="token string">'@uppy/core'</span>
 <span class="token keyword">import</span> Dashboard <span class="token keyword">from</span> <span class="token string">'@uppy/dashboard'</span>
@@ -36,4 +39,4 @@
             });
             document.body.appendChild(img);
           });
-      </script>
+      </script></body></html>

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

@@ -0,0 +1,48 @@
+<h2 id="package-list">List of Uppy Packages</h2>
+<p>Below is the list of Uppy packages, and their minified and gzipped sizes.</p>
+<small>
+   ⚠️ Note that this includes the dependencies for each package, some of which are shared when you install multiple plugins. For example, the <code>@uppy/dropbox</code> and <code>@uppy/instagram</code> package are both over 11kB including dependencies, but only sum up to about 15kB when they are used together.
+</small>
+<table class="Stats-bundleSizes">
+  <thead>
+    <tr>
+      <th class="Stats-bundleSizeHeader">Package</th>
+      <th class="Stats-bundleSizeHeader">Version</th>
+      <th class="Stats-bundleSizeHeader">Minified</th>
+      <th class="Stats-bundleSizeHeader">Gzip</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% for (const [name, sizes] of Object.entries(theme.uppy_bundle_kb_sizes)) { %>
+      <% const { minified, gzipped, prettyMinified, prettyGzipped, version } = sizes %>
+      <tr>
+        <td><a class="Stats-package" target="_blank" href="https://npmjs.com/package/<%= name %>"><%= name %></a></td>
+        <td><%= version %></td>
+        <td><%= prettyMinified %></td>
+        <td class="
+          <% if (gzipped > 30 * 1000) { %>Stats-large<% } %>
+          <% if (gzipped < 10 * 1000) { %>Stats-small<% } %>
+        ">
+          <%= prettyGzipped %>
+        </td>
+      </tr>
+    <% } %>
+  </tbody>
+</table>
+
+<iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
+<p>
+  This graph is built with
+  <a href="https://twitter.com/hughskennedy">Hugh Kennedy</a>’s excellent
+  <a href="http://hughsk.io/disc/">disc</a>.
+</p>
+
+<h2 id="browser-support">Browser Support</h2>
+
+<p>
+  <a href="https://saucelabs.com/u/transloadit-uppy">
+    <img src="https://saucelabs.com/browser-matrix/transloadit-uppy.svg" alt="Sauce Test Status"/>
+  </a>
+</p>
+<p>We currently aim to support IE11+ and recent versions of Safari, Edge, Chrome, Firefox and Opera.</p>
+<p>We still run end to end tests with IE10, but we are not actively supporting it or fixing visual / minor issues.</p>

website/themes/uppy/layout/stats.ejs

@@ -1,65 +0,0 @@
-<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
-
-<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
-  <h1><%- page.title %></h1>
-
-  <p class="Stats-infoText">
-    To keep Uppy lightweight, we’re aiming to carefully select what packages we include.
-    The graph below will help us discover low hanging fruit. Sizes and dependencies shown here
-    are for the bundled version of Uppy, which includes all plugins we offer. In production,
-    when you <a href="https://uppy.io/docs/#With-a-module-bundler">pick and choose just the ones you need</a>, the size will be much smaller:
-
-    <ul>
-      <li>Drag & Drop + Multipart uploads ≈ <code>18 Kb mingz</code></li>
-      <li>Full-featured Dashboard with image previews and progress indicators + tus resumable uploads ≈ <code>36 Kb mingz</code></li>
-    </ul>
-  </p>
-  <iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
-  This graph is built with
-  <a href="https://twitter.com/hughskennedy">Hugh Kennedy</a>’s excellent
-  <a href="http://hughsk.io/disc/">disc</a>.
-  <hr />
-
-  <h2 id="bundle-sizes">Bundle Sizes</h2>
-  <p>
-    Below are the minified and gzipped sizes for each Uppy package. Note that this includes the dependencies for each package, some of which are shared when you install multiple plugins—for example, the <code>@uppy/dropbox</code> and <code>@uppy/instagram</code> package are both over 11kB including dependencies, but only sum up to about 15kB when they are used together.
-  </p>
-  <table class="Stats-bundleSizes">
-    <thead>
-      <tr>
-        <th class="Stats-bundleSizeHeader">Package</th>
-        <th class="Stats-bundleSizeHeader">Minified</th>
-        <th class="Stats-bundleSizeHeader">Gzip</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% for (const [name, sizes] of Object.entries(theme.uppy_bundle_kb_sizes)) { %>
-        <% const { minified, gzipped, prettyMinified, prettyGzipped } = sizes %>
-        <tr>
-          <td><a class="Stats-package" target="_blank" href="https://npmjs.com/package/<%= name %>"><%= name %></a></td>
-          <td><%= prettyMinified %></td>
-          <td class="
-            <% if (gzipped > 30 * 1000) { %>Stats-large<% } %>
-            <% if (gzipped < 10 * 1000) { %>Stats-small<% } %>
-          ">
-            <%= prettyGzipped %>
-          </td>
-        </tr>
-      <% } %>
-    </tbody>
-  </table>
-
-  <h2>Browser support</h2>
-
-  <p>This reflects the current state of Uppy and is updated with every change.</p>
-
-  <a href="https://saucelabs.com/u/transloadit-uppy">
-    <img src="https://saucelabs.com/browser-matrix/transloadit-uppy.svg" alt="Sauce Test Status" width="100%">
-  </a>
-
-  <div class="footer">Caught a mistake or want to contribute to the documentation?
-    <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" rel="noreferrer noopener" target="_blank">
-      Edit/fork this page directly on Github
-    </a>!
-  </div>
-</div>

website/themes/uppy/source/css/_page.scss

@@ -363,7 +363,7 @@
   overflow: visible;
 }
 .page-docs-locales .highlight table {
-  overflow: scroll;
+  overflow: auto;
 }
 .page-docs-locales table td {
   white-space: nowrap;

website/themes/uppy/source/css/_stats.scss

@@ -10,6 +10,7 @@
 }
 
 .Stats-bundleSizes {
+  margin-top: 1em;
   margin-bottom: 1em;
   width: 100%;