Upgrade docusaurus and other dependencies

.github/actions/setup/action.yml

@@ -8,7 +8,6 @@ runs:
       uses: actions/setup-node@v3
       with:
         node-version-file: .nvmrc
-        cache: 'npm'
 
     - name: Cache dependencies
       id: yarn-cache
@@ -17,8 +16,9 @@ runs:
         path: |
           **/node_modules
           .yarn/install-state.gz
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
         restore-keys: |
+          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
           ${{ runner.os }}-yarn-
 
     - name: Install dependencies

.nvmrc

@@ -1 +1 @@
-16.19.1
+lts/*

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

README.md

@@ -1,4 +1,4 @@
-<h1 align="center"><a href="https://reactnavigation.org/"> <img src="static/img/react_navigation_header.png" width="400" /> </a></h1>
+<h1 align="center"><a href="https://reactnavigation.org/"> <img src="static/img/react_navigation_header.png" width="400" alt="React Navigation Logo" /> </a></h1>
 
 Want to help improve the documentation? That would be so very much appreciated. Some information on that below.
 

blog/2019-10-17-react-navigation-native.md

@@ -35,8 +35,8 @@ After years of growing development, we need to admit that we’re not always abl
 
 Thanks to the great work of Krzysztof Magiera for [React Native Screens](https://github.com/kmagiera/react-native-screens) library now we can use truly native components instead of JS replicas.
 
-<img src="/assets/blog/android-native-stack.gif" height="530" />
-<img src="/assets/blog/ios-native-stack.gif" height="530" />
+<img src="/assets/blog/android-native-stack.gif" height="530" alt="Native Stack on Android" />
+<img src="/assets/blog/ios-native-stack.gif" height="530" alt="Native Stack on iOS" />
 
 We believe you will find it useful in your projects and strongly encourage you to get acquainted with our [documentation](https://github.com/kmagiera/react-native-screens/native-stack). Things that I’m the most excited about are iOS header animations!
 

blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md

@@ -20,7 +20,7 @@ The new React Navigation comes with several significant improvements such as [im
 
 The UI Kitten team started actively using React Navigation alpha and we're proud to announce the full compatibility to the new React Navigation API. In this guide, we won't consider how to implement all of the boilerplate stuff like auth screens. Instead, we will learn how to navigate between screens using Drawer, Bottom Tabs, Top Tabs, and Stack navigators to build a TODO-App. Furthermore, we'll demonstrate using React Navigation with UI Kitten components.
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/overview.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/overview.gif" height="480" alt="React Navigation with UI Kitten Overview" />
 
 ## Overview
 
@@ -93,7 +93,7 @@ export const AppNavigator = (): React.ReactElement => (
 );
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/stack-navigator.gif" height="420" />
+<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/stack-navigator.gif" height="420" alt="UI Kitten with Stack Navigator" />
 
 ### Step 2. Top tabs
 
@@ -185,7 +185,7 @@ export const AppNavigator = (props): React.ReactElement => (
 );
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/material-top-tab-navigator.gif" height="480" />
+<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/material-top-tab-navigator.gif" height="480" alt="UI Kitten with Material Top Tabs" />
 
 ### Step 3. Bottom tabs
 
@@ -299,7 +299,7 @@ export const AppNavigator = (props): React.ReactElement => (
 );
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/bottom-tab-navigator.gif" height="480" />
+<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/bottom-tab-navigator.gif" height="480" alt="UI Kitten with Bottom Tabs" />
 
 ### Step 4. Drawer menu
 
@@ -435,7 +435,7 @@ export const TodoTabBar = (props): SafeAreaLayoutElement => {
 };
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/drawer-navigator.gif" height="420" />
+<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/drawer-navigator.gif" height="420" alt="UI Kitten with Drawer" />
 
 ### TypeScript
 
@@ -472,7 +472,7 @@ export interface ResetPasswordScreenProps {
 
 Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](/docs/typescript) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).
 
-<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif" />
+<img src="/assets/blog/using-react-navigation-5-with-ui-kitten/typescript.gif" alt="UI Kitten & TypeScript" />
 
 ### Useful links
 

blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

@@ -27,7 +27,7 @@ In this guide, we would like to show you how to integrate React Navigation with
 
 In the following gif, you can see what is the final version of the app gonna looks like:
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/final-app.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/final-app.gif" height="480" alt="Final Result" />
 
 ## Overview of the App
 
@@ -142,7 +142,7 @@ export const RootNavigator = () => {
 
 That's what we see on a screen:
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/simple-drawer.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/simple-drawer.gif" height="480" alt="Simple Drawer" />
 
 We can open a drawer with a swipe gesture, it looks very smooth. However, the UI doesn't look very impressive so let's add more content to the drawer to make it look just like in the final version.
 
@@ -305,7 +305,7 @@ const styles = StyleSheet.create({
 
 The final version of a drawer looks like this:
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/final-drawer.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/final-drawer.gif" height="480" alt="Drawer with components from React Native Paper"  />
 
 ## Stack Navigator + Paper's Appbar
 
@@ -460,7 +460,7 @@ We have covered only the basics of navigating between screens. If you want to le
 
 Now, let's see what does the app looks like with Stack Navigator and Paper's Appbar.
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/stack.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/stack.gif" height="480" alt="Stack Navigator with React Native Paper's Appbar" />
 
 We still miss the last piece of our navigation flow - **Tab Navigator**. Let's move to the next section where we will take care of it.
 
@@ -530,7 +530,7 @@ export const BottomTabs = () => {
 When we check the screen of the phone now, we will see a nice looking, material bottom navigation. What's more, Stack Navigator integrates nicely with Tab.Navigator and we can still navigate to the tweet `Details` screen.
 
 <br />
-<img src="/assets/blog/using-react-navigation-5-with-paper/bottom-navigation.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/bottom-navigation.gif" height="480" alt="Stack Navigator with Material Bottom Tabs" />
 
 ## FAB and Portal
 
@@ -749,7 +749,7 @@ export const BottomTabs = props => {
 };
 ```
 
-<img src="/assets/blog/using-react-navigation-5-with-paper/fab.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/fab.gif" height="480" alt="React Native Paper's FAB with Bottom Tabs" />
 
 As you can see on the gif, the FAB button works in the same way as in a Twitter app.
 What's more, it even animates icon change properly even though we haven't implemented it. That's the behavior we get from React Native Paper's FAB out of the box.
@@ -927,7 +927,7 @@ Firstly, we get a current theme using `useTheme` hook from Paper. This means we
 You should be able to toggle a switch now and both `Provider` from Paper and `NativeNavigationContainer` from React Navigation will automatically apply correct colors to the components.
 
 <br />
-<img src="/assets/blog/using-react-navigation-5-with-paper/theming.gif" height="480"/>
+<img src="/assets/blog/using-react-navigation-5-with-paper/theming.gif" height="480" alt="Theming with React Navigation and React Native Paper" />
 
 ## Summary
 

blog/2020-02-06-react-navigation-5.0.md

@@ -112,8 +112,8 @@ You don't need to use Redux in your apps for this to work and it works without a
 
 Traditionally, we have written our navigators in JavaScript for greater customizability. It fits a lot of use cases, but sometimes you want the exact native feel and the performance of native navigation. Now, we have added a new native stack navigator that uses native navigation primitives for navigation using the [`react-native-screens`](https://github.com/kmagiera/react-native-screens) library. Under the hood, it just uses native components which might be obvious choice for native development and might be a good pick in the most cases.
 
-<img src="/assets/blog/android-native-stack.gif" height="530" />
-<img src="/assets/blog/ios-native-stack.gif" height="530" />
+<img src="/assets/blog/android-native-stack.gif" height="530" alt="Native Stack on Android" />
+<img src="/assets/blog/ios-native-stack.gif" height="530" alt="Native Stack on iOS" />
 
 ### Native backends for Material top tab navigator
 

blog/2020-05-16-web-support.md

@@ -81,7 +81,7 @@ URL integration isn't enough to have proper web support. The navigators also nee
 
 The first change is using anchor tags. When you use built-in navigators such as drawer navigator and tab navigator, they render anchor tags for the drawer and tab items respectively when you have linking configured. This means that they behave the same as normal links on the web.
 
-<img src="/assets/blog/web-support/link-right-click.png" height="427"/>
+<img src="/assets/blog/web-support/link-right-click.png" height="427" alt="Demo for Right Click on links" />
 
 ### No gestures and animations
 

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,7 +42,8 @@
     ]
   },
   "devDependencies": {
-    "markdownlint": "^0.27.0",
-    "markdownlint-cli2": "^0.6.0"
-  }
+    "markdownlint": "^0.32.1",
+    "markdownlint-cli2": "^0.11.0"
+  },
+  "packageManager": "yarn@4.0.2"
 }

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 })}>