Merge branch 'main' into pr/644

.github/labeler.yml

@@ -0,0 +1,2 @@
+beta:
+- beta/**/*

.github/workflows/analyze.yml

@@ -0,0 +1,96 @@
+name: Analyze Bundle
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  workflow_dispatch:
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.x"
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1.7.10
+        with:
+          working-directory: 'beta'
+
+      - name: Restore next build
+        uses: actions/cache@v2
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          path: beta/.next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        # change this if your site requires a custom build command
+        run: ./node_modules/.bin/next build
+        working-directory: beta
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+        working-directory: beta
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          path: beta/.next/analyze/__bundle_analysis.json
+          name: bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: analyze.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          name: bundle_analysis.json
+          path: beta/.next/analyze/base/bundle
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+        working-directory: beta
+
+      - name: Upload analysis comment
+        uses: actions/upload-artifact@v2
+        with:
+          name: analysis_comment.txt
+          path: beta/.next/analyze/__bundle_analysis_comment.txt
+
+      - name: Save PR number
+        run: echo ${{ github.event.number }} > ./pr_number
+
+      - name: Upload PR number
+        uses: actions/upload-artifact@v2
+        with:
+          name: pr_number
+          path: ./pr_number
+
+      # The actual commenting happens in the other action, matching the guidance in
+      # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/

.github/workflows/analyze_comment.yml

@@ -0,0 +1,72 @@
+name: Analyze Bundle (Comment)
+
+on:
+  workflow_run:
+    workflows: ["Analyze Bundle"]
+    types:
+      - completed
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: analyze.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: analysis_comment.txt
+          path: analysis_comment.txt
+
+      - name: Download PR number
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: analyze.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: pr_number
+          path: pr_number
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success()
+        run: |
+          pr_number=$(cat pr_number/pr_number)
+          body=$(cat analysis_comment.txt/__bundle_analysis_comment.txt)
+          body="## Size Changes
+          <details>
+
+          ${body}
+          
+          </details>"
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+          echo ::set-output name=pr-number::$pr_number
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success()
+        id: fc
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/beta_site_lint.yml

@@ -0,0 +1,30 @@
+name: Beta Site Lint / Heading ID check
+
+on:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    name: Lint on node 12.x and ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1.7.10
+        with:
+          working-directory: 'beta'
+
+
+      - name: Lint codebase
+        run: cd beta && yarn ci-check

.github/workflows/label.yml

@@ -0,0 +1,22 @@
+# This workflow will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# To use this workflow, you will need to set up a .github/labeler.yml
+# file with configuration.  For more information, see:
+# https://github.com/actions/labeler
+
+name: Labeler
+on: [pull_request_target]
+
+jobs:
+  label:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+    - uses: actions/labeler@v2
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/nodejs.yml

@@ -1,6 +1,9 @@
-name: Build
+name: Lint / Flow check
 
 on:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -18,7 +21,7 @@ jobs:
           node-version: 12.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/npm-install@v1.7.10
 
       - name: Lint codebase
         run: yarn ci-check

.nvmrc

@@ -1 +1 @@
-12.16.1
+12.22.0

README.md

@@ -141,7 +141,7 @@ The documentation is divided into several sections with a different tone and pur
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
-1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.
+1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
 
 ## Translation
 

beta/.env.development

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411683
-NEXT_PUBLIC_HJ_SITE_V = 6

beta/.env.production

@@ -1,2 +1 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411651
-NEXT_PUBLIC_HJ_SITE_V = 6
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'

beta/.eslintrc

@@ -1,14 +1,9 @@
 {
-  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
-  "plugins": ["jsx-a11y"],
-  "overrides": [
-    {
-      "files": ["**/*.ts?(x)"],
-      "rules": {
-        "jsx-a11y/anchor-is-valid": 0
-      }
-    }
-  ],
+  "root": true,
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-unused-vars": "warn"
+  },
   "env": {
     "node": true,
     "commonjs": true,

beta/.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+tsconfig.tsbuildinfo
 
 # debug
 npm-debug.log*
@@ -32,3 +33,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# external fonts
+public/fonts/Optimistic_Display_W_Lt.woff2
+public/fonts/Optimistic_Display_W_Md.woff2
+public/fonts/Optimistic_Display_W_Bd.woff2

beta/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd beta
+yarn lint-staged

beta/.prettierrc

@@ -1,7 +1,21 @@
 {
   "bracketSpacing": false,
   "singleQuote": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "trailingComma": "es5",
-  "printWidth": 80
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ]
 }

beta/CONTRIBUTING.md

@@ -20,7 +20,7 @@ The documentation is divided into sections to cater to different learning styles
 
 **[Learn React](https://beta.reactjs.org/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
 
-**[API Reference](https://reactjs.org/reference)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
+**[API Reference](https://reactjs.org/apis)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
 
 **Try to follow your own instructions.**
 

beta/README.md

@@ -16,10 +16,12 @@ This repo contains the source code and documentation powering [reactjs.org](http
 ### Installation
 
 1. `cd reactjs.org` to go into the project root
-1. `yarn` to install the website's npm dependencies
+1. `cd beta` to open the beta website
+3. `yarn` to install the website's npm dependencies
 
 ### Running locally
 
+1. Make sure you're in the `beta` folder
 1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/))
 1. `open http://localhost:3000` to open the site in your favorite browser
 
@@ -46,15 +48,15 @@ The documentation is divided into several sections with a different tone and pur
 ### Test the change
 
 1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
-1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.)
+2. Run `yarn check-all` from the `beta` folder. (This will run Prettier, ESLint and validate types.)
 
 ### Push it
 
 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
-1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.
+1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
 
 ## Translation
 

beta/colors.js

@@ -23,6 +23,7 @@ module.exports = {
   'secondary-button-dark': '#404756', // gray-70
 
   // Gray
+  'gray-95': '#16181D',
   'gray-90': '#23272F',
   'gray-80': '#343A46',
   'gray-70': '#404756',