chore: update website dependencies (#12381)

docs/TutorialReact.md

@@ -97,9 +97,9 @@ export default function Link({page, children}) {
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 it('changes the class when hovered', () => {
   const component = renderer.create(
@@ -128,7 +128,7 @@ it('changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`changes the class when hovered 1`] = `
 <a
   className="normal"

website/package.json

@@ -38,13 +38,13 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-github-btn": "^1.2.0",
-    "react-markdown": "^5.0.3"
+    "react-markdown": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@crowdin/cli": "^3.5.2",
     "@types/react": "^17.0.3",
-    "graphql": "^15.3.0",
-    "graphql-request": "^3.1.0"
+    "graphql": "^16.3.0",
+    "graphql-request": "^4.0.0"
   }
 }

website/src/components/v1/MarkdownBlock.js

@@ -11,7 +11,7 @@ import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
 
 const renderers = {
-  link: ({node: _node, ...props}) => <Link {...props} />,
+  a: ({node: _node, ...props}) => <Link {...props} />,
 };
 
 /*
@@ -36,7 +36,7 @@ export default function MarkdownBlock({children}) {
   return (
     <div>
       <span>
-        <ReactMarkdown renderers={renderers}>{markdown}</ReactMarkdown>
+        <ReactMarkdown components={renderers}>{markdown}</ReactMarkdown>
       </span>
     </div>
   );

website/versioned_docs/version-25.x/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"

website/versioned_docs/version-26.x/SnapshotTesting.md

@@ -14,7 +14,7 @@ A similar approach can be taken when it comes to testing your React components.
 ```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 it('renders correctly', () => {
   const tree = renderer

website/versioned_docs/version-26.x/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"

website/versioned_docs/version-27.0/SnapshotTesting.md

@@ -14,7 +14,7 @@ A similar approach can be taken when it comes to testing your React components.
 ```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 it('renders correctly', () => {
   const tree = renderer

website/versioned_docs/version-27.0/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"

website/versioned_docs/version-27.1/SnapshotTesting.md

@@ -14,7 +14,7 @@ A similar approach can be taken when it comes to testing your React components.
 ```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 it('renders correctly', () => {
   const tree = renderer

website/versioned_docs/version-27.1/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"

website/versioned_docs/version-27.2/SnapshotTesting.md

@@ -14,7 +14,7 @@ A similar approach can be taken when it comes to testing your React components.
 ```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 it('renders correctly', () => {
   const tree = renderer

website/versioned_docs/version-27.2/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"

website/versioned_docs/version-27.4/SnapshotTesting.md

@@ -14,7 +14,7 @@ A similar approach can be taken when it comes to testing your React components.
 ```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 it('renders correctly', () => {
   const tree = renderer

website/versioned_docs/version-27.4/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"

website/versioned_docs/version-27.5/TutorialReact.md

@@ -96,10 +96,10 @@ export default Link;
 
 Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
 
-```tsx title="Link.react.test.js"
+```tsx title="Link.test.js"
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Link from '../Link.react';
+import Link from '../Link';
 
 test('Link changes the class when hovered', () => {
   const component = renderer.create(
@@ -124,7 +124,7 @@ test('Link changes the class when hovered', () => {
 
 When you run `yarn test` or `jest`, this will produce an output file like this:
 
-```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+```javascript title="__tests__/__snapshots__/Link.test.js.snap"
 exports[`Link changes the class when hovered 1`] = `
 <a
   className="normal"