Merge branch 'main' into @stanleyoos/docs-add-links-in-configuring-ts-page

Author: stanleyoos

docusaurus.config.js

@@ -97,9 +97,6 @@ export default {
         },
       ],
     },
-    footer: {
-      copyright: `Copyright © ${new Date().getFullYear()} React Navigation. Built with <a target="_blank" rel="noreferrer noopener" href="https://docusaurus.io/">Docusaurus</a>, <a target="_blank" rel="noreferrer noopener" href="https://pages.github.com/">GitHub Pages</a>, and <a target="_blank" rel="noreferrer noopener" href="https://www.netlify.com/">Netlify</a>.`,
-    },
   },
   plugins: [
     './src/plugins/react-navigation-versions.mjs',
@@ -128,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;

src/css/custom.css

@@ -170,20 +170,22 @@ p {
   line-height: 1.75;
 }
 
-@media (min-width: 82.5rem) {
+@media (min-width: 90rem) {
   .main-wrapper:not(.full-width),
   .navbar__inner,
   .footer .container {
-    max-width: 82.5rem;
+    max-width: 90rem;
     margin: auto;
   }
+}
 
+@media (min-width: 85rem) {
   .main-wrapper:not(.full-width) main {
     padding: 2rem 0 2rem 2rem;
   }
 
   .main-wrapper:not(.full-width) .container > .row > :first-child {
-    padding-right: 1rem;
+    padding-right: 3rem;
   }
 }
 
@@ -193,7 +195,7 @@ p {
   }
 
   .main-wrapper:not(.full-width) .container > .row > :first-child {
-    padding-right: 3rem;
+    padding-right: 5rem;
   }
 }
 
@@ -397,6 +399,10 @@ p {
   background-color: var(--ifm-menu-color-background-active);
 }
 
+.col:has(.table-of-contents) {
+  padding-left: 0;
+}
+
 .table-of-contents__link--active {
   position: relative;
 }
@@ -420,6 +426,10 @@ p {
   transform: scale(0.8);
 }
 
+article {
+  text-wrap: pretty;
+}
+
 article img,
 article video {
   vertical-align: top;

src/pages/home/Footer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const links = [
+  { title: 'Docusaurus', href: 'https://docusaurus.io/' },
+  { title: 'GitHub Pages', href: 'https://pages.github.com/' },
+  { title: 'Netlify', href: 'https://www.netlify.com/' },
+];
+
+export default function Footer() {
+  return (
+    <footer class="footer">
+      <div class="container container-fluid">
+        <div class="footer__bottom text--center">
+          <div class="footer__copyright">
+            Copyright © 2024 React Navigation. Built with{' '}
+            {links.map((link, index) => (
+              <React.Fragment key={link.href}>
+                {index > 0 && ', '}
+                <a target="_blank" rel="noreferrer noopener" href={link.href}>
+                  {link.title}
+                </a>
+              </React.Fragment>
+            ))}
+            .
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/pages/index.js

@@ -1,12 +1,10 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import sponsors from '../data/sponsors';
+import Layout from '@theme/Layout';
+import React from 'react';
 
-import Splash from './home/Splash';
 import Features from './home/Features';
+import Footer from './home/Footer';
+import Splash from './home/Splash';
 import Sponsors from './home/Sponsors';
 
 const features = [
@@ -52,6 +50,7 @@ function Home() {
       <Splash />
       <Features />
       <Sponsors />
+      <Footer />
     </Layout>
   );
 }

static/examples/5.x/stack-actions.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
 import { NavigationContainer, StackActions } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   return (
@@ -31,11 +31,11 @@ function ProfileScreen({ navigation, route }) {
       <Text>Profile!</Text>
       <Text>{route.params.user}'s profile</Text>
       <Button
-        title="Push same screen on the stack"
+        title="Pop one screen from stack"
         onPress={() => navigation.dispatch(StackActions.pop(1))}
       />
       <Button
-        title="Pop one screen from stack"
+        title="Push same screen on the stack"
         onPress={() =>
           navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
         }

static/examples/6.x/stack-actions.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
 import { NavigationContainer, StackActions } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   return (
@@ -31,11 +31,11 @@ function ProfileScreen({ navigation, route }) {
       <Text>Profile!</Text>
       <Text>{route.params.user}'s profile</Text>
       <Button
-        title="Push same screen on the stack"
+        title="Pop one screen from stack"
         onPress={() => navigation.dispatch(StackActions.pop(1))}
       />
       <Button
-        title="Pop one screen from stack"
+        title="Push same screen on the stack"
         onPress={() =>
           navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
         }