Upgrade to docusaurus 3

Author: satya164

docusaurus.config.js

@@ -1,29 +1,19 @@
-const path = require('path');
+import path from 'path';
+import remarkNpm2Yarn from '@docusaurus/remark-plugin-npm2yarn';
 
-module.exports = {
+export default {
   title: 'React Navigation',
   tagline: 'Routing and navigation for your React Native apps',
   url: 'https://reactnavigation.org/',
   baseUrl: '/',
   favicon: 'img/favicon.ico',
   organizationName: 'react-navigation',
   projectName: 'react-navigation.github.io',
-  scripts: [
-    'https://buttons.github.io/buttons.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
-    '/js/code-block-buttons.js',
-  ],
+  scripts: ['/js/snack-helpers.js'],
   themeConfig: {
-    announcementBar: {
-      id: 'support_ukraine',
-      content:
-        'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
-      backgroundColor: '#e4e0f0',
-      textColor: '#000',
-    },
     prism: {
-      theme: require('prism-react-renderer/themes/github'),
-      darkTheme: require('prism-react-renderer/themes/dracula'),
+      theme: require('prism-react-renderer').themes.github,
+      darkTheme: require('prism-react-renderer').themes.dracula,
     },
     algolia: {
       appId: 'QCWXRU195A',
@@ -52,13 +42,6 @@ module.exports = {
         {
           type: 'docsVersionDropdown',
           position: 'left',
-          dropdownActiveClassDisabled: true,
-          dropdownItemsAfter: [
-            {
-              to: '/versions',
-              label: 'All versions',
-            },
-          ],
         },
       ],
     },
@@ -141,7 +124,6 @@ module.exports = {
     },
   },
   plugins: [
-    path.resolve(__dirname, './src/plugins/docusaurus-plugin-redirect-html'),
     [
       '@docusaurus/plugin-client-redirects',
       {
@@ -159,13 +141,17 @@ module.exports = {
       '@docusaurus/preset-classic',
       {
         docs: {
-          docLayoutComponent: require.resolve('./src/pages/layouts/DocPage.js'),
-          docItemComponent: require.resolve('./src/pages/layouts/DocItem.js'),
           editUrl:
             'https://github.com/react-navigation/react-navigation.github.io/edit/main/',
-          remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
           includeCurrentVersion: false,
           lastVersion: '6.x',
+          remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],
+        },
+        blog: {
+          remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],
+        },
+        pages: {
+          remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

package.json

@@ -14,20 +14,20 @@
     "fetch-sponsors": "node scripts/fetch-sponsors.js"
   },
   "dependencies": {
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/plugin-client-redirects": "2.3.1",
-    "@docusaurus/plugin-google-analytics": "2.3.1",
-    "@docusaurus/preset-classic": "2.3.1",
-    "@docusaurus/remark-plugin-npm2yarn": "2.3.1",
-    "@octokit/graphql": "^4.8.0",
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/plugin-client-redirects": "3.0.0",
+    "@docusaurus/plugin-google-analytics": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/remark-plugin-npm2yarn": "3.0.0",
+    "@octokit/graphql": "^7.0.2",
     "@react-navigation/core": "^7.0.0-alpha.2",
     "escape-html": "^1.0.3",
-    "mkdirp": "^1.0.4",
+    "mkdirp": "^3.0.1",
     "netlify-plugin-cache": "^1.0.3",
-    "prism-react-renderer": "^1.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-simple-code-editor": "^0.11.0"
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-simple-code-editor": "^0.13.1"
   },
   "browserslist": {
     "production": [
@@ -42,8 +42,8 @@
     ]
   },
   "devDependencies": {
-    "markdownlint": "^0.27.0",
-    "markdownlint-cli2": "^0.6.0"
+    "markdownlint": "^0.32.1",
+    "markdownlint-cli2": "^0.11.0"
   },
   "packageManager": "[email protected]"
 }

src/components/LinkingTester.js

@@ -1,18 +1,15 @@
-import * as React from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
 import { getActionFromState, getStateFromPath } from '@react-navigation/core';
-import escape from 'escape-html';
+import { Highlight, themes } from 'prism-react-renderer';
+import * as React from 'react';
 import Editor from 'react-simple-code-editor';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import github from 'prism-react-renderer/themes/github';
-import dracula from 'prism-react-renderer/themes/dracula';
-import {useColorMode} from '@docusaurus/theme-common';
 import RouteMap from './RouteMap';
 
 const parse = (value) => eval(`(function() { return ${value}; }())`);
 
 function Code({ code, theme, language }) {
   return (
-    <Highlight {...defaultProps} code={code} theme={theme} language={language}>
+    <Highlight code={code} theme={theme} language={language}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={className} style={{ ...style, ...styles.json }}>
           {tokens.map((line, i) => (
@@ -29,8 +26,8 @@ function Code({ code, theme, language }) {
 }
 
 export default function LinkingTester() {
-  const {colorMode} = useColorMode();
-  const theme = colorMode === 'dark' ? dracula : github;
+  const { colorMode } = useColorMode();
+  const theme = colorMode === 'dark' ? themes.dracula : themes.github;
 
   const [rawConfig, setRawConfig] = React.useState(
     `{
@@ -91,7 +88,7 @@ export default function LinkingTester() {
           }
         }}
         highlight={(code) => (
-          <Highlight {...defaultProps} code={code} theme={theme} language="jsx">
+          <Highlight code={code} theme={theme} language="jsx">
             {({ tokens, getLineProps, getTokenProps }) =>
               tokens.map((line, i) => (
                 <div {...getLineProps({ line, key: i })}>

src/pages/help.js

@@ -0,0 +1,13 @@
+---
+title: Need help?
+description: Resources to get help with React Navigation.
+hide_table_of_contents: true
+---
+
+# Need help?
+
+If you've encountered a bug with React Navigation, please [post an issue](https://github.com/react-navigation/react-navigation/issues) and be sure to fill out the issue template.
+
+If you believe there is a feature missing, please [create a feature request on Canny](https://react-navigation.canny.io/feature-requests), or if you're feeling up for the task of proposing an API for the feature, [create a discussion](https://github.com/react-navigation/react-navigation/discussions).
+
+If you just need some help, try joining the `#help-react-native` channel on [Reactiflux Discord](https://www.reactiflux.com) or [post a question to StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation). Also be sure to check our [troubleshooting](https://reactnavigation.org/docs/troubleshooting) page for common issues and how to fix them.

src/pages/help.md

@@ -8,7 +8,6 @@ import sponsors from '../data/sponsors';
 import Splash from './home/Splash';
 import Features from './home/Features';
 import Sponsors from './home/Sponsors';
-import BLM from './home/BLM';
 
 const features = [
   {
@@ -49,7 +48,6 @@ function Home() {
       <Splash />
       <Features />
       <Sponsors />
-      <BLM />
     </Layout>
   );
 }