Take learnings from Web Almanac site and apply to main httparchive site

[tunetheweb]

We learned a lot from making the Web Almanac site and it follows a lot of best practices, particularly in terms of Accessibility, Performance, SEO and automation to ensure we stay at the top of that.

We should bring those learnings here and align the web sites, which will also make them easier to maintain together.

Making a list so I don't forget anything:

• [x] - Move Virtual Env to .venv to prevent linking problems - #241
• [x] - Add robots.txt and sitemap.xml - #243
• [x] - Add GitHub SuperLinter - #244
• [x] - Rename master branch to main - #245
• [x] - Add CodeQL scanning for JS and Python files to supplement Super Linter - #246 and #247
• [x] - Add test script and run it in an action #248
• [x] - Update all dev dependencies and automate #249
• [x] - Look at whether to remove Babel? Is it really needed as quite chunky and adds a lot of dependencies #443
• [ ] - Look at whether to remove Bootstrap - do we really need it?
• [ ] - Might need another normalize CSS script if we do remove Bootstrap.
• [x] - Add metadata for SEO reason (see also #34 ) - #252
• [x] - Set rel="canonical" on reports to avoid query param versions getting indexed. - #252
• [x] - Set noindex when not using httparchive.org domain to avoid GCP version getting indexed - #252
• [x] - Fix bug where by reports are only loaded when report URL is loaded - #252
• [x] - Add Lighthouse tests on pull request - #253
• [x] - Lighthouse review - #253
• [x] - Upgrade highcharts to latest version as current version has a vulnerability - #255
• [x] - Look at CSP
• [x] - Look at colour contrast - #256
• [ ] - Move to em/rem based sizes to allow rescaling.
• [x] - Accessibility review - #256
• [ ] - Move to same menus as web almanac? Have made the current menus keyboard accessible (though think we should change hover/focus to click) so might not be needed now.
• [ ] - Performance review
• [x] - Self-host Google Fonts - #258
• [x] - SEO review
• [x] - Add Security Headers - #257
• [x] - Add Cache control headers - #257
• [x] - Add redirects for trailing slashes and other commonly mistyped names - #516
• [x] - Add web-vitals script? - #515
• [x] - Refactor Python scripts to organise into a server directory - #513
• [x] - Add pytest (ideally with 100% coverage!) - #512
• [x] - Add deploy scripts - #260

Feel free to add to this as you see fit, and grab some if they seem of interest. I'll start will work my way through them anyway.

[tunetheweb]

Made quite a bit of progress with this, however the Accessibility improvements in particular have necessitated some changes:

• Some of the text had bad colour contrast, including the sub-headings:

and the table headings:

And our links:

Made them dark enough to pass colour-contrast checkers, which maybe doesn't follow the original style - the sub headings are now the same colour but I couldn't get a grey that passed:

The links also blend in a bit more to the text when darker, but I brought back the underlines (except for menu links) which helps:

Also a lot of the links had the same names ("View reports", "Learn more"...etc.) so made them a bit more descriptive.

Also added a few missing <h1>s which sometimes resulted in a slight style change.

Other than those, most of the above changes shouldn't result in any noticeable change (except to AT users and search engine crawlers!).

@rviscomi once we decide on #256 could you give this a a good going over (as quite a lot of change!) and then let's do a release?

[rviscomi]

Sounds good. Thanks for working on this—these are some long-overdue improvements! 🙌

[tunetheweb]

OK merged everything I'm gonna merge for now. If you could have a good look over it @rviscomi that would be good.