Upgrade to Docusaurus v2.4.1

[slorber]

Hey, Docusaurus maintainer here 👋

---

Docusaurus v3 soon?

I'll soon attempt an upgrade of this site to Docusaurus v3.

As a first step, I'd like to upgrade the site to the latest stable v2 version, so that the other PR can focus only on the v2 => v3 breaking changes.

---

Convenient scripts

I'm also adding some convenient package scripts that you'll eventually find useful to run from the repo root.

If you don't want that, I can remove them but would appreciate to at least keep the ability to run yarn docusaurus xyz from the repo root.

For example, this is a good way to test a production build of the website locally, using a limited number of versions like on Netlify previews (builds much faster):

yarn website:build:fast
yarn website:serve

---

Argos CI - visual regression diffing

I'm also using this PR to introduce you to a tool called Argos CI that I have used successfully on the Docusaurus repository to prevent visual regressions during package upgrades. I'll edit this PR once the setup is ready to be demonstrated.

Sometimes when upgrading Docusaurus from one version to another, some UI elements and custom CSS breaks, and we notice it after merge. A tool like Argos can compare visually the main site to the deployment preview, and tell you how they differ.

My setup on Docusaurus involves taking screenshots of all the URLs found in sitemap.xml. Here's the kind of link each new docs PR could generate: https://app.argos-ci.com/meta-open-source/docusaurus/builds/134/50874925

(new tool, their UI is kind of rough but it's working nicely)

Edit: visual test results

For the demo, I ran the visual tests in a hacky non-std way for now, using a separate repo and this PR: slorber/rnw-visual-tests#1

Results: https://app.argos-ci.com/slorber/rnw-visual-tests/builds/7/51006267

305 URLs screenshotted (I did not include all docs version, to expensive) => Argos reported 6 UI differences, and those differences are all false positives due to flakiness / animations.

It also reported the showcase page that apparently shows apps in a random order on purpose:

I'll update the Argos setup so that these false positives are not reported anymore, and eventually, you can install this officially if you find it useful. For me it will be useful notably for the v3 upgrade where unexpected UI changes could be reported, so even if you don't want to adopt Argos I'll continue to run it myself on my separate hacky repo.

---

Fixing build non-blocking errors

Note, due to a commit from yesterday (#3776), your site builds with errors because it uses both Docusaurus 2.4.1 and 2.3.1 package, while official package versions are supposed to be aligned. This little upgrade also fixes the issue ;)

CF the Netlify build: https://app.netlify.com/sites/react-native/deploys/649c06ab24479c000817b0e2

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	8d71bdc
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/649da6f497df8100081c113a
😎 Deploy Preview	https://deploy-preview-3778--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[slorber]

@Simek PR is ready to review, the UI tests look good to me.

I didn't really expect any UI change for this small upgrade, so it was more of an opportunity to show how Argos can be useful.

[Simek]

Thanks @slorber for performing the update! 🙏

Tested the branch locally, no regressions spotted, LGTM! 👍

[slorber]

Hi

Do you want me to do anything else before merging this PR? It looks good to me.

[Simek]

Nope, we can ship it, thanks for the ping. 🙂