update Docusaurus to latest version (facebook#2525)

* update Docusaurus to latest version * Prettier fix * fix menu active indicator color
2haein · Mar 2, 2021 · 48ad59c · 48ad59c
1 parent 48f831a
commit 48ad59c
Show file tree

Hide file tree

Showing 8 changed files with 2,011 additions and 1,897 deletions.
diff --git a/docs/alert.md b/docs/alert.md
@@ -207,7 +207,7 @@ static alert(title, message?, buttons?, options?)
 | ------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------- |
 | title <div class="label basic required">Required</div> | string                           | The dialog's title. Passing `null` or empty string will hide the title. |
 | message                                                | string                           | An optional message that appears below the dialog's title.              |
-| buttons                                                | [Buttons](alert#buttons)         | An optional array containing buttons configuration.                       |
+| buttons                                                | [Buttons](alert#buttons)         | An optional array containing buttons configuration.                     |
 | options <div class="label android">Android</div>       | [Options](alert#options-android) | An optional Alert configuration for the Android.                        |
 
 ---

diff --git a/sync-api-docs/package.json b/sync-api-docs/package.json
@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@motiz88/react-native-docgen": "0.0.3",
-    "fs-extra": "^9.0.1",
+    "fs-extra": "^9.1.0",
     "glob": "^7.1.6",
     "he": "^1.2.0",
     "path": "^0.12.7",

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -22,6 +22,10 @@ module.exports = {
     users,
     facebookAppId: '1677033832619985',
   },
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
   onBrokenLinks: 'throw',
   presets: [
     [

diff --git a/website/package.json b/website/package.json
@@ -31,16 +31,16 @@
     "lintv": "cd ../ && alex"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.66",
-    "@docusaurus/preset-classic": "2.0.0-alpha.66",
+    "@docusaurus/core": "2.0.0-alpha.70",
+    "@docusaurus/preset-classic": "2.0.0-alpha.70",
     "docusaurus-plugin-sass": "^0.1.11",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-github-btn": "^1.2.0"
   },
   "devDependencies": {
-    "alex": "^9.0.1",
-    "fs-extra": "^9.0.1",
+    "alex": "^9.1.0",
+    "fs-extra": "^9.1.0",
     "glob": "^7.1.6",
     "glob-promise": "^3.4.0",
     "path": "^0.12.7"

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
@@ -591,7 +591,9 @@ div[class^="docSidebarContainer"] {
   }
 
   .menu__link--active.active {
-    border-left: 4px solid var(--ifm-menu-color-active) !important;
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: var(--ifm-menu-color-active) !important;
     font-weight: 700 !important;
     padding-left: 8px;
   }

diff --git a/website/src/theme/DocItem/index.js b/website/src/theme/DocItem/index.js
@@ -6,25 +6,36 @@
  */
 import React from 'react';
 import Head from '@docusaurus/Head';
+import {useTitleFormatter} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionSuggestions from '@theme/DocVersionSuggestions';
 import TOC from '@theme/TOC';
+import IconEdit from '@theme/IconEdit';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import {
   useActivePlugin,
   useVersions,
   useActiveVersion,
 } from '@theme/hooks/useDocs';
+
 import DocsRating from '../../../core/DocsRating';
 
 function DocItem(props) {
-  const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle, titleDelimiter} = siteConfig;
+  const {siteConfig} = useDocusaurusContext();
+  const {url: siteUrl} = siteConfig;
   const {content: DocContent} = props;
-  const {metadata} = DocContent;
+  const {
+    metadata,
+    frontMatter: {
+      image: metaImage,
+      keywords,
+      hide_title: hideTitle,
+      hide_table_of_contents: hideTableOfContents,
+    },
+  } = DocContent;
   const {
     description,
     title,
@@ -34,28 +45,19 @@ function DocItem(props) {
     lastUpdatedBy,
     unversionedId,
   } = metadata;
-  const {
-    frontMatter: {
-      image: metaImage,
-      keywords,
-      hide_title: hideTitle,
-      hide_table_of_contents: hideTableOfContents,
-    },
-  } = DocContent;
   const {pluginId} = useActivePlugin({
     failfast: true,
   });
   const versions = useVersions(pluginId);
   const version = useActiveVersion(pluginId);
   const showVersionBadge = versions.length > 1 && !version.isLast;
-  const metaTitle = title
-    ? `${title} ${titleDelimiter} ${siteTitle}`
-    : siteTitle;
+
+  const metaTitle = useTitleFormatter(title);
   const metaImageUrl = useBaseUrl(metaImage, {
     absolute: true,
   });
   return (
-    <div className={clsx('container padding-vert--lg', styles.docItemWrapper)}>
+    <>
       <Head>
         <title>{metaTitle}</title>
         <meta property="og:title" content={metaTitle} />
@@ -67,7 +69,7 @@ function DocItem(props) {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
-        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${title}`} />
         )}
@@ -108,20 +110,7 @@ function DocItem(props) {
                         href={editUrl}
                         target="_blank"
                         rel="noreferrer noopener">
-                        <svg
-                          fill="currentColor"
-                          height="1.2em"
-                          width="1.2em"
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 40 40"
-                          style={{
-                            marginRight: '0.3em',
-                            verticalAlign: 'sub',
-                          }}>
-                          <g>
-                            <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
-                          </g>
-                        </svg>
+                        <IconEdit />
                         Edit this page
                       </a>
                     )}
@@ -151,13 +140,6 @@ function DocItem(props) {
                               by <strong>{lastUpdatedBy}</strong>
                             </>
                           )}
-                          {process.env.NODE_ENV === 'development' && (
-                            <div>
-                              <small>
-                                (Simulated during dev for better perf)
-                              </small>
-                            </div>
-                          )}
                         </small>
                       </em>
                     </div>
@@ -170,13 +152,13 @@ function DocItem(props) {
             </div>
           </div>
         </div>
-        {!hideTableOfContents && DocContent.rightToc && (
+        {!hideTableOfContents && DocContent.toc && (
           <div className="col col--3">
-            <TOC headings={DocContent.rightToc} />
+            <TOC toc={DocContent.toc} />
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 }
 

diff --git a/website/versioned_docs/version-0.63/intro-react-native-components.md b/website/versioned_docs/version-0.63/intro-react-native-components.md
@@ -23,7 +23,6 @@ React Native comes with a set of essential, ready-to-use Native Components you c
 
 React Native also lets you build your own Native Components for [Android](native-components-android.md) and [iOS](native-components-ios.md) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating.
 
-
 ## Core Components
 
 React Native has many Core Components for everything from form controls to activity indicators. You can find them all [documented in the API section](components-and-apis). You will mostly work with the following Core Components:
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,6 @@ React Native comes with a set of essential, ready-to-use Native Components you c

		React Native also lets you build your own Native Components for [Android](native-components-android.md) and [iOS](native-components-ios.md) to suit your app’s unique needs. We also have a thriving ecosystem of these community-contributed components. Check out [Native Directory](https://reactnative.directory) to find what the community has been creating.


		## Core Components

		React Native has many Core Components for everything from form controls to activity indicators. You can find them all [documented in the API section](components-and-apis). You will mostly work with the following Core Components:
Expand Down