Upgrade website to latest Next.js

.codesandbox/ci.json

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

.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/workflows/main.yml

@@ -21,10 +21,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set Node.js 12.x
+      - name: Set Node.js 14.x
         uses: actions/setup-node@main
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -56,10 +56,10 @@ jobs:
     steps:
       - uses: actions/checkout@main
 
-      - name: Set Node.js 12.x
+      - name: Set Node.js 14.x
         uses: actions/setup-node@main
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -87,10 +87,10 @@ jobs:
     steps:
       - uses: actions/checkout@main
 
-      - name: Set Node.js 12.x
+      - name: Set Node.js 14.x
         uses: actions/setup-node@main
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -118,10 +118,10 @@ jobs:
     steps:
       - uses: actions/checkout@main
 
-      - name: Set Node.js 12.x
+      - name: Set Node.js 14.x
         uses: actions/setup-node@main
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -149,10 +149,10 @@ jobs:
     steps:
       - uses: actions/checkout@main
 
-      - name: Set Node.js 12.x
+      - name: Set Node.js 14.x
         uses: actions/setup-node@main
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -199,10 +199,10 @@ jobs:
     steps:
       - uses: actions/checkout@main
 
-      - name: Set Node.js 12.x
+      - name: Set Node.js 14.x
         uses: actions/setup-node@main
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/release.yml

@@ -18,10 +18,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node.js 12.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@master
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Install Yarn
         run: npm install --global yarn

.gitignore

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

CONTRIBUTING.md

@@ -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
 

README.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.
 

docs/babel.mdx

@@ -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/cache-provider.mdx

@@ -5,9 +5,7 @@ title: 'CacheProvider'
 It can be useful to customize emotion's options - i.e. to add custom Stylis plugins, customize prefix of inserted class names, render style tags into specific element and more. You can look up full list of options [here](/packages/cache#options).
 
 ```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 +15,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(

docs/community.mdx

@@ -0,0 +1,52 @@
+---
+title: 'Community'
+---
+
+> A curated list of awesome stuff related to Emotion.
+
+## Contents
+
+- [Libraries](#libraries)
+- [Component Libraries](#component-libraries)
+- [Examples In the Wild](#examples-in-the-wild)
+
+## Libraries
+
+- [facepaint](https://github.com/emotion-js/facepaint) - Responsive style values for css-in-js
+- [ember-emotion](https://github.com/alexlafroscia/ember-emotion) - Use emotion in Ember.js
+- [vue-emotion](https://github.com/egoist/vue-emotion) - Use emotion in Vue.js
+- [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)
+- [ShevyJS](https://github.com/kyleshevlin/shevyjs) - Configurable Vertical Rhythm & Typography in CSS-in-JS
+- [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.
+- [styled-map](https://github.com/scf4/styled-map) - Super simple lib to map props to styles
+- [polished](https://github.com/styled-components/polished) - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript
+- [styled-conditions](https://github.com/karolisgrinkevicius/styled-conditions) - Ultra-lightweight flag utility to conditionally apply css depending on React props
+- [manipulative](https://github.com/paulshen/manipulative) - React devtool to style emotion components from the browser
+- [emotion-tailwind-preflight](https://github.com/flogy/emotion-tailwind-preflight) - Merge the shiny TailwindCSS base styles into your CSS-in-JS project
+
+## Component Libraries
+
+- [react-select](https://github.com/JedWatson/react-select) ([Website](http://jedwatson.github.io/react-select/))
+- [reactivesearch](https://github.com/appbaseio/reactivesearch) ([Website](https://opensource.appbase.io/reactivesearch/))
+- [circuit-ui](https://github.com/sumup/circuit-ui) ([Storybook](https://sumup.github.io/circuit-ui/))
+- [govuk-react](https://github.com/govuk-react/govuk-react) ([Storybook](https://govuk-react.github.io/govuk-react/))
+- [smooth-ui](https://github.com/smooth-code/smooth-ui) ([Website](https://smooth-ui.smooth-code.com/))
+- [material-ui](https://github.com/mui-org/material-ui) ([Website](https://mui.com/))
+- [mineral-ui](https://mineral-ui.com) ([Website](https://mineral-ui.com))
+- [sancho-ui](https://sancho-ui.com) ([Website](https://sancho-ui.com))
+
+## Examples In the Wild
+
+- [healthline.com](https://www.healthline.com/health/body-aches)
+- [nytimes.com](https://www.nytimes.com)
+- [vault.crucible.gg](http://vault.crucible.gg/)
+- [saldotuc.com](https://saldotuc.com)
+- [gatsbythemes.com](https://gatsbythemes.com/)
+- [blazity.com](https://blazity.com/)
+- [postmates.com](https://postmates.com/)
+- [thedisconnect.co](https://thedisconnect.co/one)
+- [zefenify.com](https://zefenify.com/about.html)
+- [strelkamag.com](https://strelkamag.com/)
+- [rookout.com](https://www.rookout.com)
+- [figma.com](https://www.figma.com/)
+- [designsystems.com](https://www.designsystems.com/)

docs/composition.mdx

@@ -6,8 +6,7 @@ Composition is one of the most powerful and useful patterns in Emotion. You can
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { jsx, css } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const base = css`
   color: hotpink;
@@ -54,8 +53,7 @@ With Emotion though, you can create styles and combine them.
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const danger = css`
   color: red;

docs/css-prop.mdx

@@ -105,9 +105,6 @@ The `css` prop accepts object styles directly and does not require an additional
 
 ```jsx
 // @live
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
 render(
   <div
     css={{
@@ -130,9 +127,7 @@ To pass string styles, you must use `css` which is exported by `@emotion/react`,
 
 ```jsx
 // @live
-// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const color = 'darkgreen'
 
@@ -165,10 +160,7 @@ The precedence order may seem counter-intuitive, but it allows components with s
 
 The `P` component in this example has its default styles overridden in the `ArticleText` component.
 
-```js
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
+```jsx
 const P = props => (
   <p
     css={{
@@ -196,10 +188,7 @@ const ArticleText = props => (
 
 The `ArticleText` component can be customized and the styles composed with its default styles. The result is passed `P` and the process repeats.
 
-```js
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
+```jsx
 const P = props => (
   <p
     css={{

docs/docs.yaml

@@ -20,7 +20,7 @@
     - labels
     - class-names
     - cache-provider
-    #- benchmarks
+    - community # There is code to hide this from the menu since it has its own navbar link
 
 - title: Tooling
   items: