Merge branch 'main' of https://github.com/reactjs/reactjs.org into sy…

…nc-49a552c1
reactjs · Nov 15, 2021 · 390b6f9 · 390b6f9
2 parents d08857c + 49a552c
commit 390b6f9
Show file tree

Hide file tree

Showing 19 changed files with 597 additions and 498 deletions.
diff --git a/.github/workflows/beta_site_lint.yml b/.github/workflows/beta_site_lint.yml
@@ -0,0 +1,27 @@
+name: Beta Site Lint
+
+on:
+  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
diff --git a/beta/.eslintrc b/beta/.eslintrc
@@ -1,18 +1,10 @@
 {
-  "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",
   "env": {
     "node": true,
     "commonjs": true,
     "browser": true,
     "es6": true
   }
-}
+}
diff --git a/beta/.husky/pre-commit b/beta/.husky/pre-commit
@@ -4,3 +4,5 @@
 cd beta
 yarn generate-ids
 git add -u src/pages/**/*.md
+yarn prettier
+yarn lint:fix
diff --git a/beta/.prettierrc b/beta/.prettierrc
@@ -1,7 +1,7 @@
 {
   "bracketSpacing": false,
   "singleQuote": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "trailingComma": "es5",
   "printWidth": 80
 }
diff --git a/beta/package.json b/beta/package.json
@@ -7,7 +7,8 @@
     "analyze": "ANALYZE=true next build",
     "dev": "next",
     "build": "next build && node ./scripts/generateRSS.js",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
     "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
     "prettier": "yarn format:source",
@@ -52,7 +53,8 @@
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.3.1",
     "babel-eslint": "10.x",
-    "eslint": "6.x",
+    "eslint": "7.x",
+    "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",

diff --git a/beta/plugins/remark-header-custom-ids.js b/beta/plugins/remark-header-custom-ids.js
@@ -36,27 +36,27 @@ module.exports = ({
       // A bit weird: this is to support MDX 2 comments in expressions,
       // while we’re still on MDX 1, which doesn’t support them.
       if (!tail || tail.type !== 'text' || tail.value !== '/}') {
-        return
+        return;
       }
 
-      tail = children[children.length - 2]
+      tail = children[children.length - 2];
 
       if (!tail && tail.type !== 'emphasis') {
-        return
+        return;
       }
 
-      const id = toString(tail)
+      const id = toString(tail);
 
-      tail = children[children.length - 3]
+      tail = children[children.length - 3];
 
       if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
-        return
+        return;
       }
 
       // Remove the emphasis and trailing `/}`
-      children.splice(children.length - 2, 2)
+      children.splice(children.length - 2, 2);
       // Remove the `{/`
-      tail.value = tail.value.replace(/[ \t]*\{\/$/, '')
+      tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
 
       const data = patch(node, 'data', {});
 

diff --git a/beta/src/components/Button.tsx b/beta/src/components/Button.tsx
@@ -32,8 +32,10 @@ export function Button({
         className,
         'text-base leading-tight font-bold border rounded-lg py-2 px-4 focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:border-link active:text-white active:ring-0 active:ring-offset-0 outline-none inline-flex items-center my-1',
         {
-          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link': active,
-          'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent': !active,
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent':
+            !active,
         }
       )}>
       {children}

diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx
@@ -74,7 +74,8 @@ function TabButton({
   const classes = cn(
     'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link hover:gray-5',
     {
-      'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': isActive,
+      'text-link dark:text-link-dark dark:border-link-dark border-link font-bold':
+        isActive,
       'border-transparent': !isActive,
     }
   );

diff --git a/beta/src/components/Layout/Nav/NavButtonLink.tsx b/beta/src/components/Layout/Nav/NavButtonLink.tsx
diff --git a/beta/src/components/Layout/Nav/NavLink.tsx b/beta/src/components/Layout/Nav/NavLink.tsx
@@ -16,7 +16,8 @@ interface NavLinkProps {
 export default function NavLink({href, children, isActive}: NavLinkProps) {
   const classes = cn(
     {
-      'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': isActive,
+      'text-link border-link dark:text-link-dark dark:border-link-dark font-bold':
+        isActive,
     },
     {'border-transparent': !isActive},
     'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap'

diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -65,7 +65,8 @@ export function SidebarLink({
             'dark:text-primary-dark text-primary': heading,
             'text-base text-secondary dark:text-secondary-dark':
               !selected && !heading,
-            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': selected,
+            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+              selected,
           }
         )}>
         {title}

diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -21,94 +21,90 @@ interface InlineHiglight {
   endColumn: number;
 }
 
-const CodeBlock = React.forwardRef(
-  (
-    {
-      children,
-      className = 'language-js',
-      metastring,
-      noMargin,
-      noMarkers,
-    }: {
-      children: string;
-      className?: string;
-      metastring: string;
-      noMargin?: boolean;
-      noMarkers?: boolean;
-    },
-    ref?: React.Ref<HTMLDivElement>
-  ) => {
-    const getDecoratedLineInfo = () => {
-      if (!metastring) {
-        return [];
-      }
+const CodeBlock = React.forwardRef(function CodeBlock(
+  {
+    children,
+    className = 'language-js',
+    metastring,
+    noMargin,
+    noMarkers,
+  }: {
+    children: string;
+    className?: string;
+    metastring: string;
+    noMargin?: boolean;
+    noMarkers?: boolean;
+  },
+  ref?: React.Ref<HTMLDivElement>
+) {
+  const getDecoratedLineInfo = () => {
+    if (!metastring) {
+      return [];
+    }
 
-      const linesToHighlight = getHighlightLines(metastring);
-      const highlightedLineConfig = linesToHighlight.map((line) => {
-        return {
-          className: 'bg-github-highlight dark:bg-opacity-10',
-          line,
-        };
-      });
+    const linesToHighlight = getHighlightLines(metastring);
+    const highlightedLineConfig = linesToHighlight.map((line) => {
+      return {
+        className: 'bg-github-highlight dark:bg-opacity-10',
+        line,
+      };
+    });
 
-      const inlineHighlightLines = getInlineHighlights(metastring, children);
-      const inlineHighlightConfig = inlineHighlightLines.map(
-        (line: InlineHiglight) => ({
-          ...line,
-          elementAttributes: {'data-step': `${line.step}`},
-          className: cn(
-            'code-step bg-opacity-10 relative rounded-md p-1 ml-2',
-            {
-              'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4': !noMarkers,
-              'bg-blue-40 before:bg-blue-40': line.step === 1,
-              'bg-yellow-40 before:bg-yellow-40': line.step === 2,
-              'bg-green-40 before:bg-green-40': line.step === 3,
-              'bg-purple-40 before:bg-purple-40': line.step === 4,
-            }
-          ),
-        })
-      );
+    const inlineHighlightLines = getInlineHighlights(metastring, children);
+    const inlineHighlightConfig = inlineHighlightLines.map(
+      (line: InlineHiglight) => ({
+        ...line,
+        elementAttributes: {'data-step': `${line.step}`},
+        className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', {
+          'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
+            !noMarkers,
+          'bg-blue-40 before:bg-blue-40': line.step === 1,
+          'bg-yellow-40 before:bg-yellow-40': line.step === 2,
+          'bg-green-40 before:bg-green-40': line.step === 3,
+          'bg-purple-40 before:bg-purple-40': line.step === 4,
+        }),
+      })
+    );
 
-      return highlightedLineConfig.concat(inlineHighlightConfig);
-    };
+    return highlightedLineConfig.concat(inlineHighlightConfig);
+  };
 
-    // e.g. "language-js"
-    const language = className.substring(9);
-    const filename = '/index.' + language;
-    const decorators = getDecoratedLineInfo();
-    return (
-      <div
-        translate="no"
-        className={cn(
-          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
-          !noMargin && 'my-8'
-        )}>
-        <SandpackProvider
-          customSetup={{
-            entry: filename,
-            files: {
-              [filename]: {
-                code: children.trimEnd(),
-              },
+  // e.g. "language-js"
+  const language = className.substring(9);
+  const filename = '/index.' + language;
+  const decorators = getDecoratedLineInfo();
+  return (
+    <div
+      translate="no"
+      className={cn(
+        'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
+        !noMargin && 'my-8'
+      )}>
+      <SandpackProvider
+        customSetup={{
+          entry: filename,
+          files: {
+            [filename]: {
+              code: children.trimEnd(),
             },
-          }}>
-          <SandpackThemeProvider theme={CustomTheme}>
-            <ClasserProvider
-              classes={{
-                'sp-cm': styles.codeViewer,
-              }}>
-              <SandpackCodeViewer
-                ref={ref}
-                showLineNumbers={false}
-                decorators={decorators}
-              />
-            </ClasserProvider>
-          </SandpackThemeProvider>
-        </SandpackProvider>
-      </div>
-    );
-  }
-);
+          },
+        }}>
+        <SandpackThemeProvider theme={CustomTheme}>
+          <ClasserProvider
+            classes={{
+              'sp-cm': styles.codeViewer,
+            }}>
+            <SandpackCodeViewer
+              ref={ref}
+              showLineNumbers={false}
+              decorators={decorators}
+            />
+          </ClasserProvider>
+        </SandpackThemeProvider>
+      </SandpackProvider>
+    </div>
+  );
+});
 
 export default CodeBlock;
 

diff --git a/beta/src/components/MDX/ExpandableExample.tsx b/beta/src/components/MDX/ExpandableExample.tsx
@@ -60,8 +60,10 @@ function ExpandableExample({
         <Button
           active={true}
           className={cn({
-            'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50': isDeepDive,
-            'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50': isExample,
+            'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50':
+              isDeepDive,
+            'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
+              isExample,
           })}
           onClick={() => setIsExpanded((current) => !current)}>
           <span className="mr-1">