[WIP] Feature/social preview

[iainkirkpatrick]

Adds social preview features to specific pages in the app (i.e. when shared on Twitter, Facebook, Linkedin, Slack etc). This is done through programmatic generation with three steps:

• generate html template files with a script (internals/scripts/generate-templates.js)
• the above script also adds the necessary rewrites into firebase.json so that requests for these pages are served the relevant html file with the relevant og: meta tags
• when running npm run build to build production files for upload to our hosting, webpack.prod.babel.js now calls on a separate file (internal/webpack/html-plugins.js) to generate the list of HtmlWebpackPlugin plugins needed to actually create the right HTML files at build-time.

The list of countries, rights and indicators that result in the pages are driven from the en.json language file - so this means in the future, if there are additional rights, indicators etc, as long as they are added in the same format to the language file then the script can be re-run and everything should just work 😄 .

I haven't adjusted the sharing 'description' for each page yet, currently it's still just "HRMI Rights Tracker" - this can be changed easily though depending on which content we want to be there.

N.B. Rights pages don't currently display the same sidebar images when previewing as they do in the app - for rights pages, these are SVG's, and the format for social previews doesn't allow SVG's. One option is we upload .PNG versions of these SVG's somewhere to be used for this sharing purpose.

N.B. No support yet for languages other than English in sharing - can discuss if we want this (it might be more important if we have descriptions in there?). Should be reasonably straightforward to generate.

@bsides44 FYI

Closes #162

TODO:

• [x] country pages
• [x] rights pages
• [x] indicators pages

[iainkirkpatrick]

Closing in favour of merging into staging in #204