Merge branch 'main' into @stanleyoos/docs-update-react-context-link

Author: stanleyoos

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": ["source.organizeImports", "source.fixAll"]
 }

docusaurus.config.js

@@ -9,7 +9,7 @@ export default {
   favicon: 'img/favicon.ico',
   organizationName: 'react-navigation',
   projectName: 'react-navigation.github.io',
-  scripts: ['/js/snack-helpers.js'],
+  scripts: ['/js/snack-helpers.js', '/js/toc-fixes.js'],
   themeConfig: {
     prism: {
       theme: require('prism-react-renderer').themes.github,
@@ -37,96 +37,63 @@ export default {
         src: 'img/spiro.svg',
       },
       items: [
-        { to: 'docs/getting-started', label: 'Docs', position: 'left' },
-        { to: 'blog', label: 'Blog', position: 'left' },
         {
-          href: 'https://github.com/react-navigation',
-          label: 'GitHub',
+          type: 'docsVersionDropdown',
           position: 'right',
         },
         {
-          to: 'help',
-          label: 'Help',
+          to: 'docs/getting-started',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'right',
         },
         {
-          type: 'docsVersionDropdown',
-          position: 'left',
+          to: 'blog',
+          label: 'Blog',
+          position: 'right',
         },
-      ],
-    },
-    footer: {
-      links: [
         {
-          title: 'Docs',
+          type: 'dropdown',
+          label: 'Help',
           items: [
             {
-              label: 'Getting Started',
-              to: 'docs/getting-started',
-            },
-            {
-              label: 'Building your own Navigator',
-              to: 'docs/custom-navigators',
+              label: 'Issues',
+              href: 'https://github.com/react-navigation/react-navigation/issues',
             },
             {
-              label: 'Contributing',
-              to: 'docs/contributing',
+              label: 'Feature Requests',
+              href: 'https://react-navigation.canny.io/feature-requests',
             },
-          ],
-        },
-        {
-          title: 'Support',
-          items: [
             {
-              label: 'Chat in our Discord channel',
-              href: 'https://discord.gg/reactiflux',
+              label: 'Reactiflux Discord',
+              href: 'https://www.reactiflux.com',
             },
             {
-              label: 'Get help on Stack Overflow',
+              label: 'Stack Overflow',
               href: 'https://stackoverflow.com/questions/tagged/react-navigation',
             },
             {
-              label: 'Request a feature on Canny',
-              href: 'https://react-navigation.canny.io/feature-requests',
+              label: 'Troubleshooting',
+              to: 'docs/troubleshooting',
             },
             {
-              label: 'Report a bug on GitHub',
-              href: 'https://github.com/react-navigation/react-navigation/issues/new/choose',
+              label: 'Contributing',
+              to: 'docs/contributing',
             },
           ],
+          position: 'right',
         },
         {
-          title: 'Social',
-          items: [
-            {
-              label: 'Blog',
-              to: 'blog',
-            },
-            {
-              label: 'GitHub',
-              href: 'https://github.com/react-navigation/react-navigation',
-            },
-            {
-              label: 'Twitter',
-              href: 'https://twitter.com/reactnavigation',
-            },
-          ],
+          href: 'https://x.com/reactnavigation',
+          className: 'navbar-social-link navbar-social-link-x',
+          'aria-label': 'X',
+          position: 'right',
         },
         {
-          title: 'Built with',
-          items: [
-            {
-              label: 'Docusaurus',
-              to: 'https://docusaurus.io/',
-            },
-            {
-              label: 'GitHub Pages',
-              href: 'https://pages.github.com/',
-            },
-            {
-              label: 'Netlify',
-              href: 'https://www.netlify.com/',
-            },
-          ],
+          href: 'https://github.com/react-navigation/react-navigation',
+          className: 'navbar-social-link navbar-social-link-github',
+          'aria-label': 'GitHub',
+          position: 'right',
         },
       ],
     },
@@ -158,7 +125,10 @@ export default {
           sidebarCollapsed: false,
           remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],
           rehypePlugins: [
-            [rehypeCodeblockMeta, { match: { snack: true, lang: true } }],
+            [
+              rehypeCodeblockMeta,
+              { match: { snack: true, lang: true, tabs: true } },
+            ],
           ],
         },
         blog: {

src/components/Pre.js

@@ -3,12 +3,22 @@ import { useColorMode } from '@docusaurus/theme-common';
 import { usePluginData } from '@docusaurus/useGlobalData';
 import MDXPre from '@theme-original/MDXComponents/Pre';
 import React from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+const SUPPORTED_TABS = {
+  config: [
+    { value: 'static', label: 'Static', default: true },
+    { value: 'dynamic', label: 'Dynamic' },
+  ],
+};
 
 export default function Pre({
   children,
   'data-name': name,
   'data-snack': snack,
   'data-dependencies': deps,
+  'data-tabs': tabs,
   'data-lang': lang,
   ...rest
 }) {
@@ -18,6 +28,62 @@ export default function Pre({
 
   const child = React.Children.only(children);
 
+  // If we encounter tabs, we need to render 2 code blocks
+  if (tabs && tabs in SUPPORTED_TABS) {
+    return (
+      <Tabs groupId="config" queryString="config">
+        {SUPPORTED_TABS[tabs].map((tab) => {
+          const code = child.props.children;
+
+          if (typeof code !== 'string') {
+            throw new Error(
+              'Code to display in tabs must be a string, but received ' +
+                typeof code
+            );
+          }
+
+          const lines = code.split('\n');
+
+          let content = '';
+          let exclude = false;
+          let indent;
+
+          for (const line of lines) {
+            if (line.trim().startsWith('// codeblock-tabs=')) {
+              exclude = line.trim() !== `// codeblock-tabs=${tab.value}`;
+            } else if (line.trim() === '// codeblock-tabs-end') {
+              exclude = false;
+            } else if (!exclude) {
+              content += line + '\n';
+            }
+          }
+
+          return (
+            <TabItem
+              key={tab.value}
+              value={tab.value}
+              label={tab.label}
+              default={tab.default}
+            >
+              <Pre
+                {...rest}
+                data-name={name}
+                data-snack={snack}
+                data-dependencies={deps}
+                data-lang={lang}
+              >
+                {React.cloneElement(children, {
+                  ...child.props,
+                  children: content.trim(),
+                })}
+              </Pre>
+            </TabItem>
+          );
+        })}
+      </Tabs>
+    );
+  }
+
   // Handle diffs with language
   if (child.props.className === 'language-diff' && lang) {
     const code = child.props.children;