Add patch script for docusaurus routing issue

website/PendingNavigationPatch.js

@@ -0,0 +1,123 @@
+/** see https://github.com/facebook/docusaurus/issues/2392
+ * this should have been fixed via https://github.com/facebook/docusaurus/pull/2393
+ * but for whatever reason, didn't make it into alpha.56...
+*/
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {Route, withRouter} from 'react-router-dom';
+import nprogress from 'nprogress';
+
+import clientLifecyclesDispatcher from './client-lifecycles-dispatcher';
+import preload from './preload';
+import normalizeLocation from './normalizeLocation';
+
+import 'nprogress/nprogress.css';
+
+nprogress.configure({showSpinner: false});
+
+class PendingNavigation extends React.Component {
+  constructor(props) {
+    super(props);
+
+    // previousLocation doesn't affect rendering, hence not stored in state.
+    this.previousLocation = null;
+    this.progressBarTimeout = null;
+    this.state = {
+      nextRouteHasLoaded: true,
+    };
+  }
+
+  // Intercept location update and still show current route until next route
+  // is done loading.
+  shouldComponentUpdate(nextProps, nextState) {
+    const routeDidChange = nextProps.location !== this.props.location;
+    const {routes, delay = 1000} = this.props;
+
+    // If `routeDidChange` is true, means the router is trying to navigate to a new
+    // route. We will preload the new route.
+    if (routeDidChange) {
+      const nextLocation = normalizeLocation(nextProps.location);
+      this.startProgressBar(delay);
+      // Save the location first.
+      this.previousLocation = normalizeLocation(this.props.location);
+      this.setState({
+        nextRouteHasLoaded: false,
+      });
+
+      // Load data while the old screen remains.
+      preload(routes, nextLocation.pathname)
+        .then(() => {
+          clientLifecyclesDispatcher.onRouteUpdate({
+            previousLocation: this.previousLocation,
+            location: nextLocation,
+          });
+          // Route has loaded, we can reset previousLocation.
+          this.previousLocation = null;
+          this.setState(
+            {
+              nextRouteHasLoaded: true,
+            },
+            this.stopProgressBar,
+          );
+          const {hash} = nextLocation;
+          if (!hash) {
+            window.scrollTo(0, 0);
+          } else {
+            const id = hash.substring(1);
+            const element = document.getElementById(id);
+            if (element) {
+              element.scrollIntoView();
+            }
+          }
+        })
+        .catch(e => console.warn(e));
+      return false;
+    }
+
+    // There's a pending route transition. Don't update until it's done.
+    if (!nextState.nextRouteHasLoaded) {
+      return false;
+    }
+
+    // Route has loaded, we can update now.
+    return true;
+  }
+
+  clearProgressBarTimeout() {
+    if (this.progressBarTimeout) {
+      clearTimeout(this.progressBarTimeout);
+      this.progressBarTimeout = null;
+    }
+  }
+
+  startProgressBar(delay) {
+    this.clearProgressBarTimeout();
+    this.progressBarTimeout = setTimeout(() => {
+      clientLifecyclesDispatcher.onRouteUpdateDelayed({
+        location: normalizeLocation(this.props.location),
+      });
+      nprogress.start();
+    }, delay);
+  }
+
+  stopProgressBar() {
+    this.clearProgressBarTimeout();
+    nprogress.done();
+  }
+
+  render() {
+    const {children, location} = this.props;
+    return (
+      <Route location={normalizeLocation(location)} render={() => children} />
+    );
+  }
+}
+
+export default withRouter(PendingNavigation);

website/README.md

@@ -26,8 +26,10 @@ This command generates static content into the `build` directory and can be serv
 
 ### Deployment
 
-```
-$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
-```
+Fix a bug in `@docusaurus/core@^2.0.0-alpha.56`. 
+
+`npm run patch-route-bug`
+
+Build and upload build to storage bucket.
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+`npm run deploy`

website/package.json

@@ -6,10 +6,10 @@
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
     "clean": "rm -rf build && npm run build && gsutil -m rm -r \"gs://pan-dev.ukbb.broadinstitute.org/*\"",
     "rsync": "gsutil -m rsync -R build gs://pan-dev.ukbb.broadinstitute.org",
-    "update": "npm run clean && npm run rsync"
+    "patch-route-bug": "cp PendingNavigationPatch.js node_modules/@docusaurus/core/lib/client/PendingNavigation.js",
+    "deploy": "npm run clean && npm run rsync"
   },
   "dependencies": {
     "@docusaurus/core": "^2.0.0-alpha.56",