merging all conflicts

.eslintignore

@@ -1,5 +1,8 @@
 node_modules/*
 
+# Skip beta
+beta/*
+
 # Ignore markdown files and examples
 content/*
 

.flowconfig

@@ -1,5 +1,6 @@
 [ignore]
 
+<PROJECT_ROOT>/beta/.*
 <PROJECT_ROOT>/content/.*
 <PROJECT_ROOT>/node_modules/.*
 <PROJECT_ROOT>/public/.*

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,10 @@
-
-
 <!--
 
 Thank you for the PR! Contributors like you keep React awesome!
 
 Please see the Contribution Guide for guidelines:
 
-https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
+https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md
 
 If your PR references an existing issue, please add the issue number below
 

.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/[email protected]
+        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/[email protected]
+        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/[email protected]
+        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/[email protected]
+        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

@@ -0,0 +1,27 @@
+name: Lint / Flow 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/[email protected]
+
+      - name: Lint codebase
+        run: yarn ci-check

.gitignore

@@ -2,5 +2,5 @@
 .DS_STORE
 .idea
 node_modules
-public
+/public
 yarn-error.log

.nvmrc

@@ -1 +1 @@
-lts/carbon
+12.22.0

README.md

@@ -7,8 +7,8 @@ This repo contains the source code and documentation powering [reactjs.org](http
 ### Prerequisites
 
 1. Git
-1. Node: any 8.x version starting with 8.4.0 or greater
-1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
+1. Node: any 12.x version starting with v12.0.0 or greater
+1. Yarn v1: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
 1. A fork of the repo (for any contributions)
 1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
 
@@ -26,17 +26,17 @@ This repo contains the source code and documentation powering [reactjs.org](http
 
 ### Guidelines
 
-The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
+The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
 
 ### Create a branch
 
-1. `git checkout master` from any folder in your local `reactjs.org` repository
-1. `git pull origin master` to ensure you have the latest main code
+1. `git checkout main` from any folder in your local `reactjs.org` repository
+1. `git pull origin main` to ensure you have the latest main code
 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
 
 ### Make the change
 
-1. Follow the "Running locally" instructions
+1. Follow the ["Running locally"](#running-locally) instructions
 1. Save the files and check in the browser
   1. Changes to React components in `src` will hot-reload
   1. Changes to markdown files in `content` will hot-reload
@@ -53,11 +53,11 @@ 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 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
 
-If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
+If you are interested in translating `reactjs.org`, please see the current translation efforts at [translations.reactjs.org](https://translations.reactjs.org/).
 
 
 If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).
@@ -67,4 +67,4 @@ If your language does not have a translation and you would like to create one, p
 - `yarn reset` to clear the local cache
 
 ## License
-Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
+Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](LICENSE-DOCS.md) file.

beta/.env.development

@@ -0,0 +1 @@
+SANDPACK_BARE_COMPONENTS=true 

beta/.env.production

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+SANDPACK_BARE_COMPONENTS=true 

beta/.eslintignore

@@ -0,0 +1,3 @@
+scripts
+plugins
+next.config.js

beta/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals",
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn"
+  },
+  "env": {
+    "node": true,
+    "commonjs": true,
+    "browser": true,
+    "es6": true
+  }
+}