update Docusaurus and other deps, fix broken styles

facebook · Apr 6, 2022 · 9267ca6 · 9267ca6
1 parent bd4383c
commit 9267ca6
Show file tree

Hide file tree

Showing 9 changed files with 2,557 additions and 1,294 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -5,6 +5,7 @@ const lastVersion = versions[0];
 const copyright = `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`;
 
 const commonDocsOptions = {
+  breadcrumbs: false,
   showLastUpdateAuthor: false,
   showLastUpdateTime: true,
   editUrl:
@@ -91,6 +92,12 @@ module.exports = {
             require.resolve('./src/css/versions.scss'),
           ],
         },
+        googleAnalytics: {
+          trackingID: 'UA-41298772-2',
+        },
+        gtag: {
+          trackingID: 'UA-41298772-2',
+        },
       }),
     ],
   ],
@@ -353,16 +360,11 @@ module.exports = {
         copyright,
       },
       algolia: {
-        apiKey: '2c98749b4a1e588efec53b2acec13025',
+        appId: '8TDSE0OHGQ',
+        apiKey: '83cd239c72f9f8b0ed270a04b1185288',
         indexName: 'react-native-v2',
         contextualSearch: true,
       },
-      googleAnalytics: {
-        trackingID: 'UA-41298772-2',
-      },
-      gtag: {
-        trackingID: 'UA-41298772-2',
-      },
       metadata: [
         {
           property: 'og:image',

diff --git a/website/package.json b/website/package.json
@@ -42,20 +42,20 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.14",
-    "@docusaurus/plugin-pwa": "^2.0.0-beta.14",
-    "@docusaurus/preset-classic": "^2.0.0-beta.14",
-    "docusaurus-plugin-sass": "^0.2.1",
-    "esbuild-loader": "2.13.1",
+    "@docusaurus/core": "^2.0.0-beta.18",
+    "@docusaurus/plugin-pwa": "^2.0.0-beta.18",
+    "@docusaurus/preset-classic": "^2.0.0-beta.18",
+    "docusaurus-plugin-sass": "^0.2.2",
+    "esbuild-loader": "^2.18.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-github-btn": "^1.2.1",
-    "sass": "^1.46.0"
+    "react-github-btn": "^1.2.2",
+    "sass": "^1.49.11"
   },
   "devDependencies": {
-    "@docusaurus/types": "^2.0.0-beta.14",
+    "@docusaurus/types": "^2.0.0-beta.18",
     "alex": "^9.1.1",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
     "glob-promise": "^4.2.2",
     "path": "^0.12.7"

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
@@ -35,7 +35,6 @@
   --ifm-alert-border-radius: 0;
   --ifm-alert-color: var(--ifm-font-color-base);
   --ifm-pagination-nav-color-hover: var(--ifm-color-emphasis-300);
-  --doc-sidebar-width: 100%;
   --ifm-table-border-width: 0.005rem;
   --ifm-navbar-sidebar-width: 100%;
 
@@ -68,6 +67,10 @@ html[data-theme="dark"] {
   }
 }
 
+:root {
+  --doc-sidebar-width: 266px !important;
+}
+
 ::marker {
   color: var(--ifm-font-color-secondary);
 }
@@ -356,10 +359,10 @@ html[data-theme="dark"] {
   }
 }
 
-.markdown .hash-link,
+.mdx-page .hash-link,
 .community-page .hash-link,
-html[data-theme="dark"] .markdown .hash-link,
-html[data-theme="dark"] .community-page .hash-link {
+html[data-theme="dark"].mdx-page .hash-link,
+html[data-theme="dark"].community-page .hash-link {
   @extend %hash-link-style;
 }
 
@@ -409,8 +412,6 @@ html[data-theme="dark"] article .badge {
 /* Community page */
 
 .community-page {
-  max-width: 1280px;
-
   h1 {
     font-size: 2.8rem;
   }
@@ -440,7 +441,7 @@ html[data-theme="dark"] article .badge {
   }
 }
 
-html[data-theme="dark"] .community-page {
+html[data-theme="dark"].community-page {
   .row .col p a {
     @extend %link-style-dark;
   }
@@ -577,33 +578,8 @@ a[class*="tagRegular"] {
     transform: rotate(180deg) scale(0.9);
   }
 
-  .react-toggle {
-    margin: 0 8px;
-
-    .react-toggle-track {
-      background: #3d3f47;
-      font-size: 15px;
-    }
-
-    .react-toggle-thumb {
-      border: 2px solid #4d4d4d;
-    }
-
-    &:hover {
-      .react-toggle-thumb {
-        border-color: var(--ifm-color-primary);
-      }
-    }
-  }
-
-  .react-toggle--focus {
-    .react-toggle-thumb {
-      box-shadow: 0 0 2px 3px #0099e085;
-    }
-  }
-
-  .navbar__toggle {
-    color: #fff;
+  .clean-btn:hover {
+    background: var(--ifm-color-emphasis-800);
   }
 
   .DocSearch-Button {
@@ -725,8 +701,14 @@ So we need to "revert" some CSS vars to not enforce dark mode
   }
 }
 
-html[data-theme="dark"] .navbar-sidebar {
-  background: var(--ifm-background-color);
+html[data-theme="dark"] {
+  .navbar-sidebar {
+    background: var(--ifm-background-color);
+  }
+
+  .clean-btn:hover {
+    background: var(--ifm-color-emphasis-200);
+  }
 }
 
 @media (max-width: 1200px) {
@@ -754,30 +736,34 @@ html[data-theme="dark"] .navbar-sidebar {
 
 /* Sidebar */
 
-aside[class^="docSidebarContainer"] {
-  --doc-sidebar-width: 266px;
+aside[class^="theme-doc-sidebar-container"] {
   margin-right: 16px;
 
   .thin-scrollbar {
     @extend %scrollbar-style;
   }
 
   .menu__list .menu__link--sublist,
-  a[class*="menuLinkText"] {
+  a[class*="menu__link--sublist-caret"] {
     font-size: 16px !important;
     font-weight: 700 !important;
     padding: 5px 12px !important;
     color: var(--ifm-color-content-secondary) !important;
 
     &:after {
+      display: none;
+    }
+
+    &[aria-expanded]:after {
+      display: block;
       background-size: 1.66rem 1.66rem;
       margin-right: -6px;
       margin-top: -1px;
     }
   }
 
   .menu__list .menu__list .menu__link--sublist,
-  a[class*="menuLinkText"] {
+  a[class*="menu__link--sublist-caret"] {
     font-weight: 700 !important;
     font-size: 15px !important;
   }
@@ -786,6 +772,10 @@ aside[class^="docSidebarContainer"] {
     padding-left: 8px !important;
   }
 
+  .menu__link {
+    justify-content: space-between;
+  }
+
   .theme-doc-sidebar-item-category .menu__list .menu__list-item-collapsible {
     margin-top: 6px;
   }
@@ -796,15 +786,15 @@ aside[class^="docSidebarContainer"] {
 }
 
 @media only screen and (min-width: 997px) {
-  aside[class^="docSidebarContainer"] {
+  aside[class^="theme-doc-sidebar-container"] {
     .menu {
       padding: 12px;
     }
   }
 }
 
 @media only screen and (max-width: 996px) {
-  aside[class^="docSidebarContainer"] {
+  aside[class^="theme-doc-sidebar-container"] {
     width: 0 !important;
     min-width: 0 !important;
     margin-right: 0;
@@ -1664,7 +1654,7 @@ html[data-theme="dark"] .docsRating {
 
 /* Blog */
 
-.main-wrapper.blog-wrapper {
+.blog-wrapper .main-wrapper {
   h3[class*="sidebarItemTitle"] {
     color: var(--ifm-font-color-secondary);
   }
@@ -1744,23 +1734,16 @@ html[data-theme="dark"] .docsRating {
   }
 }
 
-html[data-theme="dark"] {
-  .main-wrapper.blog-wrapper {
+html[data-theme="dark"].blog-wrapper {
+  .main-wrapper {
     .row .col.col--3 div[class^="sidebar"] {
       @extend %scrollbar-style-dark;
     }
-
-    .container.margin-vert--lg {
-      a.margin-horiz--sm,
-      a.padding-right--md {
-        @extend %link-style-dark;
-      }
-    }
   }
 }
 
-html[data-theme="light"] {
-  .main-wrapper.blog-wrapper {
+html[data-theme="light"].blog-wrapper {
+  .main-wrapper {
     .container.margin-vert--lg {
       .col.text--right a:hover {
         color: var(--ifm-link-color);
@@ -1779,7 +1762,7 @@ html[data-theme="light"] {
     padding: 24px 16px !important;
   }
 
-  .main-wrapper:not(.community-page) {
+  html:not(.community-page) .main-wrapper {
     .container.margin-vert--lg {
       max-width: 96% !important;
     }

diff --git a/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js b/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
@@ -11,8 +11,10 @@ import {
   useVersions,
   useLatestVersion,
   useActiveDocContext,
-} from '@theme/hooks/useDocs';
-import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+} from '@docusaurus/plugin-content-docs/client';
+import {
+  useDocsPreferredVersion
+} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
 
 const getVersionMainDoc = version =>

diff --git a/website/versioned_docs/version-0.60/geolocation.md b/website/versioned_docs/version-0.60/geolocation.md
@@ -41,7 +41,7 @@ To request access to location, you need to add the following line to your app's
 Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider.
 
 <p>
-  Android API >= 23 Requires an additional step to check for, and request
+  Android API &gt;= 23 Requires an additional step to check for, and request
   the ACCESS_FINE_LOCATION permission using
   the <a href="/docs/permissionsandroid" target="_blank">PermissionsAndroid API</a>.
   Failure to do so may result in a hard crash.

diff --git a/website/versioned_docs/version-0.61/geolocation.md b/website/versioned_docs/version-0.61/geolocation.md
@@ -41,7 +41,7 @@ To request access to location, you need to add the following line to your app's
 Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider.
 
 <p>
-  Android API >= 23 Requires an additional step to check for, and request
+  Android API &gt;= 23 Requires an additional step to check for, and request
   the ACCESS_FINE_LOCATION permission using
   the <a href="/docs/permissionsandroid" target="_blank">PermissionsAndroid API</a>.
   Failure to do so may result in a hard crash.

diff --git a/website/versioned_docs/version-0.62/geolocation.md b/website/versioned_docs/version-0.62/geolocation.md
@@ -41,7 +41,7 @@ To request access to location, you need to add the following line to your app's
 Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider.
 
 <p>
-  Android API >= 23 Requires an additional step to check for, and request
+  Android API &gt;= 23 Requires an additional step to check for, and request
   the ACCESS_FINE_LOCATION permission using
   the <a href="/docs/permissionsandroid" target="_blank">PermissionsAndroid API</a>.
   Failure to do so may result in a hard crash.

diff --git a/website/versioned_docs/version-0.63/geolocation.md b/website/versioned_docs/version-0.63/geolocation.md
@@ -41,7 +41,7 @@ To request access to location, you need to add the following line to your app's
 Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position was created from a mock provider.
 
 <p>
-  Android API >= 23 Requires an additional step to check for, and request
+  Android API &gt;= 23 Requires an additional step to check for, and request
   the ACCESS_FINE_LOCATION permission using
   the <a href="/docs/permissionsandroid" target="_blank">PermissionsAndroid API</a>.
   Failure to do so may result in a hard crash.