Update page title with dataset and include metadata title as description

[trvrb]

Currently, our pages look like this to Google:

This updates the page title to be auspice / ebola or Nextstrain / ebola. I like this format (it's what I use for https://bedford.io). Here, I mainly want to make it easy to tell which tab is which when there are multiple auspice tabs or Nextstrain tabs open.

The injection of the metadata title, ie "Real-time tracking" as should aid in Google giving less vague search results.

I first started with just setting document.title, but description was more difficult and Stackoverflow recommended React Helmet. This worked really smoothly.

I believe that the extension set up with Nextstrain and https://github.com/nextstrain/nextstrain.org/blob/master/auspice/client/config.json#L13 should still work, but I wasn't able to test this (I couldn't figure out how to get a global auspice CLI from my local auspice src code).

[tsibley]

+1 for this!

One small change worth considering is maybe swapping the order of the title pieces, that is, putting "auspice" or "Nextstrain" last instead of first. For example, instead of "auspice / zika" or "auspice / mumps / na" using something similar to "zika / auspice" or "na / mumps / auspice". The idea here is that putting the detail first is useful when you have multiple Auspice/Nextstrain tabs open and want to know which is which. The first part of the title is least likely to be truncated by a small tab width. The site favicon shown on the tab of many browsers also already indicates the site (auspice/Nextstrain).

[jameshadfield]

Thanks @trvrb -- a nice improvement here. We use React Helmet for nextstrain.org as well.

I've tested it on nextstrain.org locally and (i) moved the component higher up the tree and (ii) connected it to redux state. Why?

1. We want this to run for the Splash page, as well as for datasets. This allows nextstrain.org/groups/blab to show a title of nextstrain / groups / blab.
2. We modify the URL in certain situations (e.g. /flu/avian -> /flu/avian/h5n1/ha) and we want the head to change accordingly here. Note that this URL changes without the <Main> (dataset display) component rerunning.

but I wasn't able to test [nextstrain.org]

This is harder to do now that we import auspice as a normal dep in nextstrain.org, and hopefully we can improve this over time. You can do it following https://github.com/nextstrain/nextstrain.org#using-a-different-version-of-auspice:

# nextstrain.org directory
npm link ${path_to_auspice_src}
npm link ${path_to_auspice_src}/node_modules/react
npm run build -- auspice # rebuild auspice
npm run server -- --verbose # start nextstrain.org server

Note that this breaks my global install of auspice -- i.e. I can no longer run auspice -- and so I have to run these commands to restore that, but doing so will break the nextstrain.org setup 😱

# auspice src directory
npm i --global .

One small change worth considering is maybe swapping the order of the title pieces

Agreed that this would be better for multiple tabs (although multiple flu / seasonal / ... ones would still be somewhat indistinguishable). I think it's important to keep nextstrain (or auspice) front and center, especially for search results, and so I've decided to keep it as is.

[trvrb]

Thanks James. I agree with all the changes you've made. I also think that keeping Nextstrain / zika, etc.. is better for Google results display.

[jameshadfield]

Yup. This is a nice improvement 👍
Just added one final commit to just centralise all the usage of (no change in behavior) as I missed it's usage in the component to set the description.