Upgrade to latest Next.js (attempt 2) (#2805)

* Remove old site, create new Next app

* Site header

* Fix manypkg issues, copy in bootstrap-reboot.min.css

* Website progress

* Website progress

* Website progress

* yarn.lock

* Website progress

* Fix manypkg errors

* Website progress

* Website progress: markdown CSS

* Website progress

* Website progress

* Remove spectrum badge from README

* Add Carbon ads

* Add DocSearch

* Add favicon and set page <title>

* Website tweaks

* Update Netlify config and use next-export

* Remove unnecessary dependencies from root package.json

* Add custom 404 page

* Live editor works (no Babel yet)

* [wip] Babel compilation

* About to remove web worker stuff

* Website: Live code editor stuff

* Remove Mac-specific step from CONTRIBUTING

* Update CONTRIBUTING for new website development

* Done with live code editors

* Bring awesome-emotion into repo as an MDX doc

* Add redirects to netlify.toml

* Website styling, remove @jsx pragma from live code examples

* Remove incorrect slack link from community.mdx

* Review & tweak website styles

* Make tables responsive on mobile

* Set up @next/bundle-analyzer

* Get @emotion/babel-plugin to work in the browser (HACKS)

* Change Carbon ad when path changes

* Fix live editor issues

* Do LiveEditor compilation in web worker

* Fork react-live

* Working on live editors

* Fix LiveProvider useEffect

* Live editor tweaks

* Fix web worker @emotion/babel-plugin import

* Add website TS TODO

* Add more detail to comment

* Fix some but not all manypkg issues

* Fix Safari-specific styling issues

* Website: Use webpack alias for @emotion/babel-plugin

* Add comment explaining module aliasing hack

* site: Upgrade docsearch

* site: Upgrade some packages

* site: Upgrade some packages

* site: Upgrade next-mdx-remote

* Fix layout shift when carbon ads is loading

* Make CI use Node 14

This is required for next-mdx-remote v4

* Remove .nvmrc to fix Netlify build

* Add Ukraine banner to new website

* Fix minor issues in styled.mdx

* Minor mobile fixes

* Convert GFM tables to HTML so we don't need the remark-gfm plugin

* Upgrade all website packages

* Update docsearch appId and apiKey (see #2718)

* Fixed CacheProvider demo in the docs (see #2678)

* CodeSandbox CI node 16

* Simplify .gitignore

* Website cleanup after reviewing diff

* Fix multiple @types/react

* Add test:typescript script to emotion-site

* Make all code blocks have the same font-size

* Autolink headings

* Minor website fixes

* remark-responsive-tables

Author: srmagura

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
   "sandboxes": ["pk1qjqpw67"],
-  "node": "12"
+  "node": "16"
 }

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+
+[*.{js,ts,tsx,json,yml}]
+indent_size = 2

.eslintignore

@@ -4,5 +4,8 @@ coverage/
 node_modules/
 stylis.min.js
 /demo/dist
-/packages/site/build
-flow-typed/
+flow-typed/
+
+# This is to prevent ESLint parsing errors in the website which is written in
+# TypeScript. TODO: Reenable once the codebase is converted to TypeScript.
+/site/

.github/actions/ci-setup/action.yml

@@ -2,7 +2,7 @@ name: 'CI setup'
 runs:
   using: 'composite'
   steps:
-    - name: Set Node.js 16.x
+    - name: Setup Node.js 16.x
       uses: actions/setup-node@v3
       with:
         node-version: 16.x

.gitignore

@@ -4,12 +4,15 @@ dist/
 node_modules/
 *.log
 .idea
-site/build
 package-lock.json
 .DS_Store
 .cache
-public/
-!playgrounds/cra/public
 .env
 .vscode
-.parcel-cache/
+.parcel-cache/
+*.orig
+*.tsbuildinfo
+
+# Website
+site/out
+.next

.nvmrc

@@ -5,10 +5,6 @@
 
 ## Installation
 
-- (If using an M1 Mac) Install `vips` via Homebrew: `brew install vips`.
-  - This step can be removed from this document if we upgrade to the latest
-    version of Gatsby, which is compatible with sharp 0.28.0+ which does include
-    binaries for M1 Macs.
 - (If using Windows) Enable Developer Mode in the Windows settings app. On Windows 11, this can be done by searching the start menu for "Developer settings" and then enabling the Developer Mode toggle switch.
 - Run `yarn` in the repository's root directory to install everything you need for development.
 - Run `yarn build` in the root directory to build the modules.
@@ -27,9 +23,9 @@
 
 ## Documentation Website Development
 
-- Run above installation steps and then
-- Run `yarn start:site` to run a development server of gatsby.
-- Run `yarn build:site` to create a build of the assets for the documentation website.
+- Run above installation steps and then `cd` to the `site` directory.
+- Run `yarn dev` to run the Next.js development server.
+- Run `yarn build` to create a build of the assets for the documentation website.
 
 ## Changesets
 

CONTRIBUTING.md

@@ -16,7 +16,6 @@
 ![@emotion/styled size](https://img.shields.io/bundlephobia/min/@emotion/styled.svg?label=@emotion/styled%20size)
 ![@emotion/styled gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/styled.svg?label=@emotion/styled%20gzip%20size)
 [![slack](https://img.shields.io/badge/join-slack-green)](https://join.slack.com/t/emotion-slack/shared_invite/zt-rmtwsy74-2uvyFdz5uxa8OiMguJJeuQ)
-[![spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/emotion)
 
 Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
 

README.md

@@ -2,26 +2,26 @@
 title: 'Babel Plugin'
 ---
 
-`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin).
+`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](/docs/@emotion/babel-plugin).
 
-### Install
+## Install
 
 In `emotion` version 8 and above, installation is optional. In older versions, installation is required. See the [installation instructions](/docs/install.mdx).
 
-### Features which are enabled with the babel plugin
+## Features which are enabled with the babel plugin
 
-### Minification
+#### Minification
 
 Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.
 
-### Dead Code Elimination
+#### Dead Code Elimination
 
 Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination.
 
-### Source Maps
+#### Source Maps
 
 When enabled, navigate directly to the style declaration in your javascript file.
 
-### Components as selectors
+#### Components as selectors
 
 The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [styled docs](/docs/styled.mdx#targeting-another-emotion-component).

docs/babel.mdx

@@ -6,8 +6,7 @@ It can be useful to customize emotion's options - i.e. to add custom Stylis plug
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { CacheProvider, jsx, css } from '@emotion/react'
+import { CacheProvider, css } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { prefixer } from 'stylis'
 
@@ -17,9 +16,10 @@ const myCache = createCache({
   key: 'my-prefix-key',
   stylisPlugins: [
     customPlugin,
-    // has to be included manually when customizing `stylisPlugins` if you want to have vendor prefixes added automatically
+    // has to be included manually when customizing `stylisPlugins` if you want
+    // to have vendor prefixes added automatically
     prefixer
-  ],
+  ]
 })
 
 render(