Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration #3830

Merged
merged 14 commits into from
Sep 1, 2023
Merged

chore: prepare docs for Docusaurus v3 upgrade - 2nd iteration #3830

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2e5c5bb
Add quotes
slorber Aug 25, 2023
7f63f7d
Fix useless bold chars
slorber Aug 25, 2023
8194d1d
fix useless extra spacing
slorber Aug 25, 2023
ee6f7c0
fix useless extra spacing
slorber Aug 25, 2023
7501fae
avoid remark-directive syntax
slorber Aug 25, 2023
bda8552
fix scrollTo codeblock
slorber Aug 25, 2023
4667a2e
Avoid remark-directive syntax
slorber Aug 25, 2023
56797fd
code blocks, use space instead of tabs
slorber Aug 25, 2023
277a5a8
code blocks, use space instead of tabs
slorber Aug 25, 2023
9b45cc8
code blocks, use space instead of tabs
slorber Aug 25, 2023
4d7f8e9
code blocks, use space instead of tabs
slorber Aug 25, 2023
2311ae8
code blocks, use space instead of tabs
slorber Aug 25, 2023
0a2b794
Use React fragment for 2 consecutive images
slorber Aug 25, 2023
0e545b2
update prismjs
slorber Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/native-components-ios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace tab with space + reduce indentation for consistency

Avoid this extra spacing when upgrading:

CleanShot 2023-08-25 at 13 07 16@2x

Before: https://reactnative.dev/docs/native-components-ios#events
After: https://deploy-preview-3830--react-native.netlify.app/docs/native-components-ios#events

}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion docs/profile-hermes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unwanted extra space change list + image layout

CleanShot 2023-08-25 at 12 46 31@2x

Before: https://reactnative.dev/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools
After: https://deploy-preview-3830--react-native.netlify.app/docs/profile-hermes#open-the-downloaded-profile-in-chrome-devtools


## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions docs/pushnotificationios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`
Comment on lines -405 to +407
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:xyz, ::xyz and :::xyz are "Markdown Directives" and we turn them on by default in Docusaurus v3 to bring admonition support.

This means you should avoid that in your code (unless escaped) otherwise those annotations will magically disappear when upgrading.

CleanShot 2023-08-25 at 12 47 37@2x

I think it's reasonable to make the boolean part of the inline code block

Before: https://reactnative.dev/docs/pushnotificationios#checkpermissions
After: https://deploy-preview-3830--react-native.netlify.app/docs/pushnotificationios#checkpermissions


---

Expand Down
2 changes: 1 addition & 1 deletion docs/scrollview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo

);
```

Expand Down
2 changes: 1 addition & 1 deletion docs/touchablenativefeedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another "Markdown Directive", we want to avoid them, escape them or wrap them in code blocks.

Otherwise the upgrade will lead to:

CleanShot 2023-08-25 at 12 52 23@2x


---

Expand Down
2 changes: 1 addition & 1 deletion website/architecture/render-pipeline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ React Native renderer leverages structural sharing to minimize the overhead of i

In the above example, React creates the new tree using these operations:

1. CloneNode(**Node 3**, {backgroundColor: 'yellow'}) → **Node 3'**
1. CloneNode(**Node 3**, `{backgroundColor: 'yellow'}`) → **Node 3'**
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable to wrap in code block

{ will mess up with MDX 2 and require to be escaped

2. CloneNode(**Node 2**) → **Node 2'**
3. AppendChild(**Node 2'**, **Node 3'**)
4. AppendChild(**Node 2'**, **Node 4**)
Expand Down
9 changes: 5 additions & 4 deletions website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ This involved changing [css-layout](https://github.com/facebook/css-layout), the

To battle test the RTL support in production, the latest version of the **Facebook Ads Manager** app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both [iOS](https://itunes.apple.com/app/id964397083) and [Android](https://play.google.com/store/apps/details?id=com.facebook.adsmanager). Here is how it looks like in those RTL languages:

<>
<img src="/blog/assets/rtl-ama-ios-arabic.png" width={280} style={{ margin: 10 }} />

<img src="/blog/assets/rtl-ama-android-hebrew.png" width={280} style={{ margin: 10 }} />
</>
Comment on lines +18 to +21
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a fragment here permits to avoid having an extra useless \n char when upgrading to MDX v2.

CleanShot 2023-08-25 at 14 51 24@2x

https://twitter.com/badsyntax/status/1695041116893036746

In practice it's not super impactful, but this change will ensure the 2 images look exactly the same before/after the MDX v2 upgrade.


## Overview Changes in RN for RTL support

Expand Down Expand Up @@ -53,15 +54,15 @@ With this update, when you allow RTL layout for your app:

```objc
// in AppDelegate.m
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] allowRTL:YES];
```

Android:

```java
// in MainActivity.java
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
Comment on lines -56 to +65
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with spaces for consistency + avoid extra spacing appearing when upgrading:

CleanShot 2023-08-25 at 13 02 33@2x

```

3. For Android, you need add `android:supportsRtl="true"` to the [`<application>`](https://developer.android.com/guide/topics/manifest/application-element.html) element in `AndroidManifest.xml` file.
Expand Down
50 changes: 25 additions & 25 deletions website/blog/2016-12-05-easier-upgrades.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,40 +65,40 @@ index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+ <key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<dict>
<key>localhost</key>
<dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+ <key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]
```

All we need now is to apply this patch to your source files. While the old `react-native upgrade` process would have prompted you for any small difference, Git is able to merge most of the changes automatically using its 3-way merge algorithm and eventually leave us with familiar conflict delimiters:

```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```
Comment on lines -68 to 102
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace tabs with space for consistency

Avoid this unwanted extra spacing when upgrading:

CleanShot 2023-08-25 at 13 05 42@2x

Before: https://reactnative.dev/blog/2016/12/05/easier-upgrades#how-does-it-work
After: https://deploy-preview-3830--react-native.netlify.app/blog/2016/12/05/easier-upgrades#how-does-it-work


These conflicts are generally easy to reason about. The delimiter **ours** stands for "your team" whereas **theirs** could be seen as "the React Native team".
Expand Down
2 changes: 1 addition & 1 deletion website/blog/2021-09-01-preparing-your-app-for-iOS-15-and-android-12.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Android 12 introduces new [overscroll effect](https://developer.android.com/abou

#### Permission Updates

Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission**.** Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Android 12 allows users of your app to only provide access to the approximate location if you request it with **`ACCESS_FINE_LOCATION`** permission. Learn more about it [here](https://developer.android.com/about/versions/12/approximate-location).
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a typo


Check out Google’s [detailed behavior changes](https://developer.android.com/about/versions/12/behavior-changes-all) for all apps running on Android 12.

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/native-components-ios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/profile-hermes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.70/pushnotificationios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,9 +386,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/scrollview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,7 +745,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: { x?: number, y?: number, animated?: boolean } | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.70/touchablenativefeedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ TV next focus up (see documentation for the View component).
static SelectableBackground(rippleRadius: ?number)
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/native-components-ios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/profile-hermes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.71/pushnotificationios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/scrollview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.71/touchablenativefeedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/native-components-ios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/profile-hermes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ To open the profile in Chrome DevTools:
2. Select the **Performance** tab.
3. Right click and choose **Load profile...**

<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />
<img src="/docs/assets/openChromeProfile.png" alt="Loading a performance profile on Chrome DevTools" />

## How does the Hermes Profile Transformer work?

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.72/pushnotificationios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,9 +402,9 @@ See what push permissions are currently enabled.

`callback` will be invoked with a `permissions` object:

- `alert` :boolean
- `badge` :boolean
- `sound` :boolean
- `alert: boolean`
- `badge: boolean`
- `sound: boolean`

---

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/scrollview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,7 +751,7 @@ Displays the scroll indicators momentarily.
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
deprecatedAnimated?: boolean,
);
```

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.72/touchablenativefeedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ static SelectableBackground(
): ThemeAttributeBackgroundPropType;
```

Creates an object that represents android theme's default background for selectable elements (?android:attr/selectableItemBackground). `rippleRadius` parameter controls the radius of the ripple effect.
Creates an object that represents android theme's default background for selectable elements (`?android:attr/selectableItemBackground`). `rippleRadius` parameter controls the radius of the ripple effect.

---

Expand Down