Merge branch 'main' into fix-sidebar

Author: Abbondanzo

website/docusaurus.config.ts

@@ -13,6 +13,10 @@ import path from 'path';
 import users from './showcase.json';
 import versions from './versions.json';
 
+// See https://docs.netlify.com/configure-builds/environment-variables/
+const isProductionDeployment =
+  !!process.env.NETLIFY && process.env.CONTEXT === 'production';
+
 const lastVersion = versions[0];
 const copyright = `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`;
 
@@ -63,6 +67,8 @@ const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
 
 const config: Config = {
   future: {
+    // Turns Docusaurus v4 future flags on to make it easier to upgrade later
+    v4: true,
     // Make Docusaurus build faster - enabled by default
     // See https://github.com/facebook/docusaurus/issues/10556
     // See https://github.com/facebook/react-native-website/pull/4268
@@ -154,6 +160,21 @@ const config: Config = {
   ],
   plugins: [
     'docusaurus-plugin-sass',
+    function disableExpensiveBundlerOptimizationPlugin() {
+      return {
+        name: 'disable-expensive-bundler-optimizations',
+        configureWebpack(_config, isServer) {
+          // This optimization is expensive and only reduces by 3% the JS assets size
+          // Let's skip it for local and deploy preview builds
+          // See also https://github.com/facebook/docusaurus/discussions/11199
+          return {
+            optimization: {
+              concatenateModules: isProductionDeployment ? !isServer : false,
+            },
+          };
+        },
+      };
+    },
     [
       'content-docs',
       {

website/package.json

@@ -51,21 +51,21 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "3.6.3",
-    "@docusaurus/faster": "3.6.3",
-    "@docusaurus/plugin-google-gtag": "3.6.3",
-    "@docusaurus/plugin-pwa": "3.6.3",
-    "@docusaurus/preset-classic": "3.6.3",
+    "@docusaurus/core": "3.8.0",
+    "@docusaurus/faster": "3.8.0",
+    "@docusaurus/plugin-google-gtag": "3.8.0",
+    "@docusaurus/plugin-pwa": "3.8.0",
+    "@docusaurus/preset-classic": "3.8.0",
     "docusaurus-plugin-sass": "^0.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0",
     "sass": "1.76.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.6.3",
-    "@docusaurus/tsconfig": "3.6.3",
-    "@docusaurus/types": "3.6.3",
+    "@docusaurus/module-type-aliases": "3.8.0",
+    "@docusaurus/tsconfig": "3.8.0",
+    "@docusaurus/types": "3.8.0",
     "@react-native-website/lint-examples": "0.0.0",
     "@react-native-website/update-redirects": "0.0.0",
     "@types/google.analytics": "^0.0.46",

website/src/css/customTheme.scss

@@ -43,7 +43,6 @@
   --ifm-table-border-color: var(--ifm-toc-border-color);
   --ifm-table-cell-padding: 10px;
   --ifm-table-stripe-background: rgba(0, 0, 0, 0.02);
-  --docusaurus-blog-social-icon-size: 16px;
 
   @media (min-width: 340px) {
     --ifm-navbar-sidebar-width: 340px;
@@ -223,8 +222,14 @@ html[data-theme="dark"] {
   }
 }
 
-main[class^="docMainContainer"] > .container {
-  padding-top: 2rem !important;
+/*
+Layer needed to override utility rules using !important in the Infima layer
+See also https://css-tricks.com/css-cascade-layers/#aa-important-layers
+*/
+@layer docusaurus.infima.importantOverrides {
+  main[class^="docMainContainer"] > .container {
+    padding-top: 2rem !important;
+  }
 }
 
 div[class^="generatedIndexPage"] {
@@ -268,6 +273,10 @@ hr {
   }
 
   blockquote {
+    > :last-child {
+      margin-bottom: 0;
+    }
+
     background-color: var(--rn-note-background);
     border-left: 8px solid var(--ifm-color-warning);
     padding: 15px 30px 15px 15px;
@@ -568,8 +577,10 @@ html[data-theme="dark"] .alert--secondary {
     text-decoration-thickness: 1px !important;
   }
 
-  .margin-top--md {
-    margin-top: 0.33rem !important;
+  @layer docusaurus.infima.importantOverrides {
+    .margin-top--md {
+      margin-top: 0.33rem !important;
+    }
   }
 }
 
@@ -1854,6 +1865,10 @@ html[data-theme="dark"] .docsRating {
   border-radius: var(--ifm-global-radius);
 }
 
+.tabs-container .snack-player:last-child {
+  margin-bottom: 0;
+}
+
 /* Two columns code block */
 
 .two-columns {
@@ -1888,10 +1903,15 @@ html[data-theme="dark"] .docsRating {
     color: var(--ifm-font-color-secondary);
   }
 
+  @layer docusaurus.infima.importantOverrides {
+    .container.margin-vert--lg {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+
   .container.margin-vert--lg {
     max-width: calc(100% - (var(--ifm-spacing-horizontal)) * 4);
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
 
     .col.text--right a {
       @extend %button-link-style;
@@ -1934,8 +1954,10 @@ html[data-theme="dark"] .docsRating {
     }
   }
 
-  article.margin-bottom--xl {
-    margin-bottom: 2.5rem !important;
+  @layer docusaurus.infima.importantOverrides {
+    article.margin-bottom--xl {
+      margin-bottom: 2.5rem !important;
+    }
   }
 
   aside nav {

website/src/pages/showcase.tsx

@@ -18,9 +18,7 @@ const renderApp = (app, i) => <AppBox app={app} key={`app-${app.name}-${i}`} />;
 function Section({
   children,
   background = 'light',
-}: React.PropsWithChildren<{
-  background?: 'light' | 'dark';
-}>) {
+}: React.PropsWithChildren<{background?: 'light' | 'dark'}>) {
   return <section className={`Section ${background}`}>{children}</section>;
 }
 
@@ -244,13 +242,13 @@ const Showcase = () => {
             Apply to the Showcase by filling out this form
           </a>
           <p>
-            A curated list of{' '}
+            For a curated list of open source React Native apps, check out{' '}
             <a
               key="demo-apps"
               href="https://github.com/ReactNativeNews/React-Native-Apps">
-              open source React Native apps
+              this list
             </a>{' '}
-            is maintained by <a href="https://infinite.red">Infinite Red</a>.
+            maintained by <a href="https://infinite.red">Infinite Red</a>.
           </p>
         </div>
       </Section>