Migrate gatsby from v1 to v2

README.md

@@ -16,13 +16,7 @@ This repository provides the tools you need to [build nextstrain.org locally](#b
 ## Build nextstrain.org locally
 
 ### Install prerequisites
-
-We recommend using a conda environment to manade the dependencies as both node version 10 and python v2 are needed.
-These can be installed into a new environment via:
-```
-conda create -n nextstrain.org nodejs=10 python=2.7
-```
-Next we need to install the node dependencies by running
+Install the node dependencies by running
 ```
 npm install
 ```
@@ -40,7 +34,6 @@ If you add a new profile to `~/.aws/credentials`, you can then tell the local ne
 
 ---
 ## Splash & documentation pages
-
 These are found in `./static-site/`.
 See [static-site/README.md](./static-site/README.md) for instructions on how to add content (e.g. docs) and develop this portion of the site in isolation.
 In production, this is built using Gatsby (`npm run build`) and served via the nextstrain.org server (`npm run server`).
@@ -56,7 +49,6 @@ The auspice customisations specific to nextstrain.org are found in `./auspice/cl
 Please see [the auspice documentation](https://nextstrain.github.io/auspice/customisations/introduction) for more information on customising auspice.
 
 ### Testing locally
-
 Make sure you've installed dependencies with `npm install` first (and activated your conda environment if using one).
 Then run:
 
@@ -82,7 +74,6 @@ npx auspice develop --verbose --extend ./client/config.json --handlers ./server/
 
 
 ### Using a different version of Auspice
-
 Sometimes it is useful to change the version of Auspice that is used.
 Perhaps you're upgrading the version nextstrain.org uses or you want to test changes in a local copy of Auspice against nextstrain.org.
 

package.json

@@ -8,8 +8,8 @@
   "repository": "github:nextstrain/nextstrain.org",
   "homepage": "https://nextstrain.org",
   "engines": {
-    "node": "10.8.x",
-    "npm": "6.2.x"
+    "node": "13.6.x",
+    "npm": "6.13.x"
   },
   "scripts": {
     "build": "./build.sh",

static-site/.babelrc

@@ -1,3 +1,11 @@
 {
-    "plugins": ["lodash"]
+    "plugins": [
+      "lodash",
+      "babel-plugin-styled-components"
+    ],
+    "presets": [
+      [
+        "babel-preset-gatsby"
+      ]
+    ]
 }

static-site/README.md

@@ -10,14 +10,14 @@ For general `nextstrain.org` documentation including the nextstrain server (incl
 
 ## Installing
 
-See [the readme](../README.md#build-nextstrainorg-locally) in the parent directory for instructions on how to install prerequisites and install nextstrain.org locally. 
+See [the readme](../README.md#build-nextstrainorg-locally) in the parent directory for instructions on how to install prerequisites and install nextstrain.org locally.
 
 ### Developing locally
 
 To develop just the static-site part of nextstrain.org, you may run:
 
 ```
-npm install # this needs python 2
+npm install
 npm run develop
 ```
 
@@ -26,7 +26,7 @@ npm run develop
 If you wish to test the production build of just the static-site portion of nextstrain.org, you may run:
 
 ```
-npm install # this needs python 2
+npm install
 npm run build
 npm run serve
 ```

static-site/gatsby-config.js

@@ -68,6 +68,6 @@ module.exports = {
       }
     },
     "gatsby-plugin-sharp",
-    "gatsby-plugin-catch-links" // See https://github.com/nextstrain/nextstrain.org/issues/34
+    // "gatsby-plugin-catch-links" // See https://github.com/nextstrain/nextstrain.org/issues/34
   ]
 };

static-site/gatsby-node.js

@@ -10,7 +10,7 @@ Here we predominantly use it to set the slug (the URL)
 and the order ([chaper, page])
 NOTE that for static pages, the slug is set in createPages (below)
 NOTE this should probably be moved into createPages */
-exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
+exports.onCreateNode = ({node, actions, getNode}) => {
   /* for markdown files, turn (e.g.)
    * /content/reports/01-flu-vaccine-selection/2015-september into
    * /content/reports/flu-vaccine-selection/2015-september
@@ -43,31 +43,31 @@ exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
     }
     /* step two: modify the node data */
     if (chapter.name) {
-      boundActionCreators.createNodeField({
+      actions.createNodeField({
         node,
         name: "slug",
         value: `/${section}/${chapter.name}/${post.name}`
       });
       // console.log(`${parsedFilePath.dir}/${parsedFilePath.name} (CHAPTERS)-> /${section}/${chapter.name}/${post.name}. Chapter order: ${chapter.order}. Post Order: ${post.order}`)
-      boundActionCreators.createNodeField({
+      actions.createNodeField({
         node,
         name: "chapterOrder",
         value: chapter.order
       });
     } else {
-      boundActionCreators.createNodeField({
+      actions.createNodeField({
         node,
         name: "slug",
         value: `/${section}/${post.name}`
       });
       // console.log(`${parsedFilePath.dir}/${parsedFilePath.name} -> /${section}/${post.name}. Post Order: ${post.order}`)
-      boundActionCreators.createNodeField({
+      actions.createNodeField({
         node,
         name: "chapterOrder",
         value: "00" // this means we don't have chapters! */
       });
     }
-    boundActionCreators.createNodeField({
+    actions.createNodeField({
       node,
       name: "postOrder",
       value: post.order
@@ -77,8 +77,8 @@ exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
 };
 
 /* createPages essentially defines all the URLs and which component gets called to display them */
-exports.createPages = ({graphql, boundActionCreators}) => {
-  const {createPage, createRedirect} = boundActionCreators;
+exports.createPages = ({graphql, actions}) => {
+  const {createPage, createRedirect} = actions;
 
   /* statically defined pages (i.e. not generated from GraphQL & markdown) */
   /* The context is passed as props to the component as well as into the component's GraphQL query. */
@@ -180,20 +180,21 @@ exports.createPages = ({graphql, boundActionCreators}) => {
             });
           }
         });
-
         // Create users page
         createPage({
           path: "/users",
-          matchPath: "/users/:username",
-          component: path.resolve("src/pages/users.jsx")
+          matchPath: "/users/*",
+          component: path.resolve("src/sections/users.jsx")
         });
       })
     );
   });
 };
 
-exports.modifyWebpackConfig = ({config, stage}) => {
+exports.onCreateWebpackConfig = ({stage, actions}) => {
   if (stage === "build-javascript") {
-    config.plugin("Lodash", webpackLodashPlugin, null);
+    actions.setWebpackConfig({
+      plugins: [webpackLodashPlugin],
+    });
   }
 };