Upgrade website to latest Next.js

[srmagura]

• Closes Upgrade Emotion website to the latest Gatsby or Next.js #2536.
• Closes Move BLM banner into a link / make it less intrusive/distracting #2420.
• Closes Horizontal scrolling reduces readability of website code snippets #2640.
• Please close Update SiteHeader.js #2468.
• Please close Remove BLM banner #2515.
• Please merge Add "no longer maintained" message awesome-emotion#17.

Changes

• Switch from old version of Gatsby to latest Next.js
• Remove dependency on the unmaintained styled-system library
• Bring in Bootstrap Reboot CSS (not all of Bootstrap)
• Upgrade to new major version of Algolia DocSearch
• Various style improvements
• Remove various pieces of code that no longer seem necessary

Checklist

• Documentation N/A
• Tests N/A
• Code complete
• Changeset N/A

Minor Issues

• You will see a hydration warning coming from @docsearch/react. I have reported it to them, and it only happens in dev.

Live Editors

• There is a seemingly harmless warning that I don't understand. 🤷‍♀️ warn - ../node_modules/@babel/standalone/babel.js Critical dependency: the request of a dependency is an expression
• There is a seemingly harmless warning coming from babel-plugin-macros that started appearing when I did the module stubbing stuff to get @emotion/babel-plugin to work without the fs module.

Visual Changes

I rewrote much of the website's CSS, copying from the original CSS as needed. Here is a summary of the changes.

1. Use Bootstrap Reboot.
2. Increase the width of the container that holds the website's content.
3. Increase the height of SiteHeader, add gray background and box-shadow. (The logo is awesome so I wanted it to be bigger)
4. Right sidebar:
   • Improve text appearance.
   • In the old website, the sidebar was hidden by default on portrait mode tablets and down. Now, the sidebar is hidden by default on phones only. (Roughly speaking — of course it all depends on the screen width)
   • Use the default DocSearch styles. So it's not pink anymore, but it means we don't have to maintain that CSS.
5. Markdown styles:
   • Heading font sizes have changed. They are at the default values from Bootstrap Reboot.
   • Margins around most of the markdown elements have changed (e.g. headings, paragraphs, code blocks, block quotes).
   • Links use a normal underline instead of the animated underline.
   • Use latest version of PrismJS, which caused some changes to code highlighting. E.g. the npm in npm i @emotion/css is now green.
6. Documentation changes:
   • Some documents were using h1 within the body of the document. I think it is better to just use h1 for the main title for accessibility/usability/SEO/styling reasons. So I "downgraded" headings where needed.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2b329ba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2b329ba:

Sandbox	Source
Emotion	Configuration

[srmagura]

This should be ready to merge apart from the manypkg issue described below.

• I copied the react-live code into the repository so I could make the necessary improvements. Also, this removes the dependency on Buble which was a nontrivial contributor to bundle size.
• I tested in Firefox and Safari and fixed some small style things (I develop in Chrome.)
• I ran into this issue while trying to import @emotion/babel-plugin in babel-worker.ts. Apparently there is something weird about imports from workers, but I wasn't able to create a minimal reproduction. Anyway, I worked around it like this — it forces Yarn to copy @emotion/babel-plugin into site/node_modules. Now this has caused all the workflows to fail due to manypkg check. Any ideas for fixing this?

[srmagura]

Superseded by #2805.