update with latest upstream

Author: KurtGokhan

.env.development

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_HJ_SITE_ID=
-NEXT_PUBLIC_HJ_SITE_V=
+SANDPACK_BARE_COMPONENTS=true
+PORT=3000

.env.production

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

.eslintrc

@@ -1,31 +1,12 @@
 {
-  "extends": [
-    "react-app",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "plugins": [
-    "jsx-a11y"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "**/*.ts?(x)"
-      ],
-      "rules": {
-        "jsx-a11y/anchor-is-valid": 0,
-        "react-hooks/exhaustive-deps": [
-          "warn",
-          {
-            "additionalHooks": "(useObservable)"
-          }
-        ],
-        "quotes": [
-          "error",
-          "single"
-        ]
-      }
-    }
-  ],
+  "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,

.github/workflows/build.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Build
         run: yarn build
         env:
-          NEXT_PUBLIC_GA_ID: ${{ secrets.ANALYTICS_ID }}
+          NEXT_PUBLIC_GA_TRACKING_ID: ${{ secrets.ANALYTICS_ID }}
 
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@4.1.1

.gitignore

@@ -1,3 +1,5 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
 # dependencies
 node_modules
 
@@ -27,6 +29,7 @@ node_modules
 # misc
 .DS_Store
 *.pem
+tsconfig.tsbuildinfo
 
 # debug
 npm-debug.log*
@@ -41,3 +44,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

.prettierignore

@@ -0,0 +1 @@
+src/content/**/*.md

.prettierrc

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

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/react)** 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.**
 

README.md

@@ -1,6 +1,71 @@
 # reactjs.org
 
-This repo contains the source code fo documentation at [reactunity.github.io](https://reactunity.github.io/).
+This repo contains the source code and documentation powering [beta.reactjs.org](https://beta.reactjs.org/).
+
+
+## Getting started
+
+### Prerequisites
+
+1. Git
+1. Node: any 12.x version starting with v12.0.0 or greater
+1. Yarn: 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
+
+### Installation
+
+`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
+
+## Contributing
+
+### 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/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
+
+### Create a branch
+
+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"](#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
+  1. If working with plugins, you may need to remove the `.cache` directory and restart the server
+
+### Test the change
+
+1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
+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 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 [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).
+
+## Troubleshooting
+
+- `yarn reset` to clear the local cache
 
 ## Acknowledgements
 

next.config.js

@@ -2,34 +2,21 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-const path = require('path');
-const { remarkPlugins } = require('./plugins/markdownToHtml');
-const redirects = require('./src/redirects.json');
-
 /**
  * @type {import('next').NextConfig}
  **/
 const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
+  reactStrictMode: true,
   experimental: {
     plugins: true,
     scrollRestoration: true,
     legacyBrowsers: false,
     browsersListForSwc: true,
   },
-  async redirects() {
-    return redirects.redirects;
+  env: {
+    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
   },
-  // TODO: this causes extra router.replace() on every page.
-  // Let's disable until we figure out what's going on.
-  // rewrites() {
-  //   return [
-  //     {
-  //       source: '/feed.xml',
-  //       destination: '/_next/static/feed.xml',
-  //     },
-  //   ];
-  // },
   webpack: (config, { dev, isServer, ...options }) => {
     if (process.env.ANALYZE) {
       const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
@@ -46,8 +33,20 @@ const nextConfig = {
     // Don't bundle the shim unnecessarily.
     config.resolve.alias['use-sync-external-store/shim'] = 'react';
 
-    const { IgnorePlugin } = require('webpack');
+    const { IgnorePlugin, NormalModuleReplacementPlugin } = require('webpack');
     config.plugins.push(
+      new NormalModuleReplacementPlugin(
+        /^@stitches\/core$/,
+        require.resolve('./src/utils/emptyShim.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^raf$/,
+        require.resolve('./src/utils/rafShim.js')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^process$/,
+        require.resolve('./src/utils/processShim.js')
+      ),
       new IgnorePlugin({
         checkResource(resource, context) {
           if (
@@ -64,22 +63,6 @@ const nextConfig = {
       })
     );
 
-    // Add our custom markdown loader in order to support frontmatter
-    // and layout
-    config.module.rules.push({
-      test: /.mdx?$/, // load both .md and .mdx files
-      use: [
-        options.defaultLoaders.babel,
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            remarkPlugins,
-          },
-        },
-        path.join(__dirname, './plugins/md-layout-loader'),
-      ],
-    });
-
     return config;
   },
 };