Upgrade to Docusaurus v3.2 #4072

slorber · 2024-03-29T10:28:24Z

TLDR

Upgrading to Docusaurus v3.2 gives the immediate following benefits:

Faster cold/incremental build times
Faster dev server hot reloads
Reports broken anchor links (RN website has many of them to fix)
Unlocks new Docusaurus features mentioned in release blog posts
Other minor improvements

Is it safe to upgrade?

It should, it's a minor version that does not include any breaking changes.

And I ran visual regression tests comparing prod vs deploy preview to ensure nothing visual is impacted by the upgrade.

The latest diff only contains 22 minor visual changes that are either expected, or improvements: https://app.argos-ci.com/slorber/rnw-visual-tests/builds/71/84659261

Detailed improvements

Faster build times

The React Native website builds significantly faster:

🔥 Cold builds: 95s ➡️ 66s (30% faster)
🔥 Incremental builds: 55s ➡️ 22s (60% faster)

Perf benchmarks

Before

Cold builds

git co main && yarn install
hyperfine --runs 5 'yarn workspace react-native-website clear && yarn workspace react-native-website build'

Benchmark 1: yarn workspace react-native-website clear && yarn workspace react-native-website build
  Time (mean ± σ):     95.216 s ±  1.802 s    [User: 174.233 s, System: 14.848 s]
  Range (min … max):   93.490 s … 97.592 s    5 runs

Incremental builds

git co main && yarn install
yarn workspace react-native-website clear && yarn workspace react-native-website build && hyperfine --runs 5 'yarn workspace react-native-website build'

Benchmark 1: yarn workspace react-native-website build
  Time (mean ± σ):     55.323 s ±  0.924 s    [User: 57.343 s, System: 8.653 s]
  Range (min … max):   54.087 s … 56.184 s    5 runs

After

Cold builds

git co slorber/docusaurus-v3.2-upgrade && yarn install
hyperfine --runs 5 'yarn workspace react-native-website clear && yarn workspace react-native-website build'

Benchmark 1: yarn workspace react-native-website clear && yarn workspace react-native-website build
  Time (mean ± σ):     66.197 s ±  1.776 s    [User: 150.206 s, System: 11.875 s]
  Range (min … max):   63.978 s … 68.557 s    5 runs

Incremental builds

git co slorber/docusaurus-v3.2-upgrade && yarn install
yarn workspace react-native-website clear && yarn workspace react-native-website build && hyperfine --runs 5 'yarn workspace react-native-website build'

Benchmark 1: yarn workspace react-native-website build
  Time (mean ± σ):     22.564 s ±  0.227 s    [User: 32.231 s, System: 5.742 s]
  Range (min … max):   22.287 s … 22.812 s    5 runs

Faster dev server hot reloads

Docusaurus hot reloads on Markdown file edits were not very granular previously. Now they should be faster, and if you edit a blog post, only the blog post plugin will reload instead of the whole site. More fine-grained reload optimizations will come later.

Broken anchors detection

Docusaurus 3.1 can detect broken anchor links. Sometimes a link targets a page that exists, but the #anchor does not match a valid anchor in that page.

In turns out, like many other sites, the React Native Website has many broken anchors to fix. Those currently do not block the build, and only emit a warning, but it's configurable.

List of broken anchors detected on RNW

[WARNING] Docusaurus found broken anchors!

Please check the pages of your site in the list below, and make sure you don't reference any anchor that does not exist.
Note: it's possible to ignore broken anchors with the 'onBrokenAnchors' Docusaurus configuration, and let the build pass.

Exhaustive list of all broken anchors found:
- Broken anchor on source page path = /blog:
   -> linking to /docs/hermes#enabling-hermes
- Broken anchor on source page path = /blog/2018/06/14/state-of-react-native-2018:
   -> linking to /docs/debugging#chrome-developer-tools
- Broken anchor on source page path = /blog/2019/03/12/releasing-react-native-059:
   -> linking to /docs/performance#inline-requires
- Broken anchor on source page path = /blog/2019/06/12/react-native-open-source-update:
   -> linking to /docs/performance#ram-bundles-inline-requires
- Broken anchor on source page path = /blog/2020/03/26/version-0.62:
   -> linking to /blog#lean-core
- Broken anchor on source page path = /blog/2021/08/17/version-065:
   -> linking to /docs/hermes#enabling-hermes
- Broken anchor on source page path = /blog/2022/03/30/version-068:
   -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases
- Broken anchor on source page path = /blog/2022/07/08/hermes-as-the-default:
   -> linking to /docs/hermes#enabling-hermes
- Broken anchor on source page path = /blog/2023/12/06/0.73-debugging-improvements-stable-symlinks:
   -> linking to /docs/next/other-debugging-methods#remote-js-debugging
- Broken anchor on source page path = /blog/page/2:
   -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases
- Broken anchor on source page path = /blog/page/3:
   -> linking to /docs/hermes#enabling-hermes
- Broken anchor on source page path = /blog/page/4:
   -> linking to /blog#lean-core
   -> linking to /docs/performance#ram-bundles-inline-requires
   -> linking to /docs/performance#inline-requires
- Broken anchor on source page path = /blog/page/5:
   -> linking to /docs/debugging#chrome-developer-tools
- Broken anchor on source page path = /blog/tags/announcement:
   -> linking to /docs/hermes#enabling-hermes
- Broken anchor on source page path = /blog/tags/announcement/page/2:
   -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases
   -> linking to /docs/hermes#enabling-hermes
- Broken anchor on source page path = /blog/tags/announcement/page/3:
   -> linking to /blog#lean-core
- Broken anchor on source page path = /blog/tags/announcement/page/4:
   -> linking to /docs/performance#ram-bundles-inline-requires
   -> linking to /docs/performance#inline-requires
- Broken anchor on source page path = /blog/tags/engineering:
   -> linking to /docs/debugging#chrome-developer-tools
- Broken anchor on source page path = /blog/tags/release:
   -> linking to /docs/hermes#enabling-hermes
   -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases
- Broken anchor on source page path = /blog/tags/release/page/2:
   -> linking to /blog#lean-core
   -> linking to /docs/performance#inline-requires
- Broken anchor on source page path = /architecture/fabric-renderer:
   -> linking to /architecture/glossary#fabric-render
- Broken anchor on source page path = /docs/0.70/animated:
   -> linking to animated#interpolate (resolved as: /docs/0.70/animated#interpolate)
- Broken anchor on source page path = /docs/0.70/animations:
   -> linking to animated#interpolate (resolved as: /docs/0.70/animated#interpolate)
- Broken anchor on source page path = /docs/0.70/communication-ios:
   -> linking to native-modules-ios#content (resolved as: /docs/0.70/native-modules-ios#content)
- Broken anchor on source page path = /docs/0.70/custom-webview-android:
   -> linking to /docs/0.70/native-modules-android#register-the-module
- Broken anchor on source page path = /docs/0.70/fast-refresh:
   -> linking to /docs/debugging#accessing-the-in-app-developer-menu
- Broken anchor on source page path = /docs/0.70/handling-text-input:
   -> linking to textinput#content (resolved as: /docs/0.70/textinput#content)
- Broken anchor on source page path = /docs/0.70/image:
   -> linking to transforms#props (resolved as: /docs/0.70/transforms#props)
- Broken anchor on source page path = /docs/0.70/javascript-environment:
   -> linking to /docs/0.70/network#content
   -> linking to /docs/0.70/timers#content
- Broken anchor on source page path = /docs/0.70/profile-hermes:
   -> linking to /docs/0.70/profile-hermes#open-the-downloaded-profile-on-chrome-devtools
- Broken anchor on source page path = /docs/0.70/running-on-device:
   -> linking to /docs/0.70/debugging#in-app-errors-and-warnings
- Broken anchor on source page path = /docs/0.70/sectionlist:
   -> linking to sectionlist#renderitem (resolved as: /docs/0.70/sectionlist#renderitem)
- Broken anchor on source page path = /docs/0.70/shadow-props:
   -> linking to view-style-props#elevation (resolved as: /docs/0.70/view-style-props#elevation)
- Broken anchor on source page path = /docs/0.70/switch:
   -> linking to /docs/0.70/switch#ios_backgroundColor
- Broken anchor on source page path = /docs/0.70/text:
   -> linking to /docs/0.70/accessibility#accessibilitytraits-ios
   -> linking to accessibility#accessible-ios-android (resolved as: /docs/0.70/accessibility#accessible-ios-android)
- Broken anchor on source page path = /docs/0.70/touchablewithoutfeedback:
   -> linking to /docs/0.70/accessibility#accessibilitystate-ios-android
   -> linking to /docs/0.70/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/0.70/troubleshooting:
   -> linking to /docs/0.70/linking-libraries-ios#content
- Broken anchor on source page path = /docs/0.70/view:
   -> linking to /docs/0.70/accessibility#accessibilityignoresinvertcolors
   -> linking to /docs/0.70/accessibility#accessibilitystate-ios-android
   -> linking to /docs/0.70/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/0.71/alert:
   -> linking to alert#alertButton (resolved as: /docs/0.71/alert#alertButton)
- Broken anchor on source page path = /docs/0.71/animated:
   -> linking to animated#interpolate (resolved as: /docs/0.71/animated#interpolate)
- Broken anchor on source page path = /docs/0.71/animations:
   -> linking to animated#interpolate (resolved as: /docs/0.71/animated#interpolate)
- Broken anchor on source page path = /docs/0.71/communication-ios:
   -> linking to native-modules-ios#content (resolved as: /docs/0.71/native-modules-ios#content)
- Broken anchor on source page path = /docs/0.71/custom-webview-android:
   -> linking to /docs/0.71/native-modules-android#register-the-module
- Broken anchor on source page path = /docs/0.71/fast-refresh:
   -> linking to /docs/debugging#accessing-the-in-app-developer-menu
- Broken anchor on source page path = /docs/0.71/handling-text-input:
   -> linking to textinput#content (resolved as: /docs/0.71/textinput#content)
- Broken anchor on source page path = /docs/0.71/image:
   -> linking to transforms#props (resolved as: /docs/0.71/transforms#props)
- Broken anchor on source page path = /docs/0.71/javascript-environment:
   -> linking to /docs/0.71/network#content
   -> linking to /docs/0.71/timers#content
- Broken anchor on source page path = /docs/0.71/profile-hermes:
   -> linking to /docs/0.71/profile-hermes#open-the-downloaded-profile-on-chrome-devtools
- Broken anchor on source page path = /docs/0.71/react-native-gradle-plugin:
   -> linking to #using-variants (resolved as: /docs/0.71/react-native-gradle-plugin#using-variants)
- Broken anchor on source page path = /docs/0.71/running-on-device:
   -> linking to /docs/0.71/debugging#in-app-errors-and-warnings
- Broken anchor on source page path = /docs/0.71/sectionlist:
   -> linking to sectionlist#renderitem (resolved as: /docs/0.71/sectionlist#renderitem)
- Broken anchor on source page path = /docs/0.71/shadow-props:
   -> linking to view-style-props#elevation (resolved as: /docs/0.71/view-style-props#elevation)
- Broken anchor on source page path = /docs/0.71/switch:
   -> linking to /docs/0.71/switch#ios_backgroundColor
- Broken anchor on source page path = /docs/0.71/text:
   -> linking to /docs/0.71/accessibility#accessibilitytraits-ios
   -> linking to accessibility#accessible-ios-android (resolved as: /docs/0.71/accessibility#accessible-ios-android)
- Broken anchor on source page path = /docs/0.71/touchablewithoutfeedback:
   -> linking to /docs/0.71/accessibility#accessibilitystate-ios-android
   -> linking to #accessibilityviewismodal-ios (resolved as: /docs/0.71/touchablewithoutfeedback#accessibilityviewismodal-ios)
   -> linking to /docs/0.71/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/0.71/troubleshooting:
   -> linking to /docs/0.71/linking-libraries-ios#content
- Broken anchor on source page path = /docs/0.71/view:
   -> linking to /docs/0.71/accessibility#accessibilityignoresinvertcolors
   -> linking to /docs/0.71/accessibility#accessibilitystate-ios-android
   -> linking to /docs/0.71/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/0.72/alert:
   -> linking to alert#alertButton (resolved as: /docs/0.72/alert#alertButton)
- Broken anchor on source page path = /docs/0.72/animated:
   -> linking to animated#interpolate (resolved as: /docs/0.72/animated#interpolate)
- Broken anchor on source page path = /docs/0.72/animations:
   -> linking to animated#interpolate (resolved as: /docs/0.72/animated#interpolate)
- Broken anchor on source page path = /docs/0.72/communication-ios:
   -> linking to native-modules-ios#content (resolved as: /docs/0.72/native-modules-ios#content)
- Broken anchor on source page path = /docs/0.72/custom-webview-android:
   -> linking to /docs/0.72/native-modules-android#register-the-module
- Broken anchor on source page path = /docs/0.72/fast-refresh:
   -> linking to /docs/debugging#accessing-the-in-app-developer-menu
- Broken anchor on source page path = /docs/0.72/handling-text-input:
   -> linking to textinput#content (resolved as: /docs/0.72/textinput#content)
- Broken anchor on source page path = /docs/0.72/hermes:
   -> linking to debugging#debugging-using-a-custom-javascript-debugger (resolved as: /docs/0.72/debugging#debugging-using-a-custom-javascript-debugger)
- Broken anchor on source page path = /docs/0.72/image:
   -> linking to transforms#props (resolved as: /docs/0.72/transforms#props)
- Broken anchor on source page path = /docs/0.72/javascript-environment:
   -> linking to /docs/0.72/network#content
   -> linking to /docs/0.72/timers#content
- Broken anchor on source page path = /docs/0.72/profile-hermes:
   -> linking to /docs/0.72/profile-hermes#open-the-downloaded-profile-on-chrome-devtools
- Broken anchor on source page path = /docs/0.72/react-native-gradle-plugin:
   -> linking to #using-variants (resolved as: /docs/0.72/react-native-gradle-plugin#using-variants)
- Broken anchor on source page path = /docs/0.72/running-on-device:
   -> linking to /docs/0.72/debugging#in-app-errors-and-warnings
- Broken anchor on source page path = /docs/0.72/sectionlist:
   -> linking to sectionlist#renderitem (resolved as: /docs/0.72/sectionlist#renderitem)
- Broken anchor on source page path = /docs/0.72/switch:
   -> linking to /docs/0.72/switch#ios_backgroundColor
- Broken anchor on source page path = /docs/0.72/text:
   -> linking to /docs/0.72/accessibility#accessibilitytraits-ios
   -> linking to accessibility#accessible-ios-android (resolved as: /docs/0.72/accessibility#accessible-ios-android)
- Broken anchor on source page path = /docs/0.72/touchablewithoutfeedback:
   -> linking to /docs/0.72/accessibility#accessibilitystate-ios-android
   -> linking to #accessibilityviewismodal-ios (resolved as: /docs/0.72/touchablewithoutfeedback#accessibilityviewismodal-ios)
   -> linking to /docs/0.72/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/0.72/troubleshooting:
   -> linking to /docs/0.72/linking-libraries-ios#content
- Broken anchor on source page path = /docs/0.72/view:
   -> linking to /docs/0.72/accessibility#accessibilityignoresinvertcolors
   -> linking to /docs/0.72/accessibility#accessibilitystate-ios-android
   -> linking to /docs/0.72/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/next/alert:
   -> linking to alert#alertButton (resolved as: /docs/next/alert#alertButton)
- Broken anchor on source page path = /docs/next/animated:
   -> linking to animated#interpolate (resolved as: /docs/next/animated#interpolate)
- Broken anchor on source page path = /docs/next/animations:
   -> linking to animated#interpolate (resolved as: /docs/next/animated#interpolate)
- Broken anchor on source page path = /docs/next/communication-ios:
   -> linking to native-modules-ios#content (resolved as: /docs/next/native-modules-ios#content)
- Broken anchor on source page path = /docs/next/custom-webview-android:
   -> linking to /docs/next/native-modules-android#register-the-module
- Broken anchor on source page path = /docs/next/fast-refresh:
   -> linking to /docs/debugging#accessing-the-in-app-developer-menu
- Broken anchor on source page path = /docs/next/handling-text-input:
   -> linking to textinput#content (resolved as: /docs/next/textinput#content)
- Broken anchor on source page path = /docs/next/hermes:
   -> linking to debugging#remote-debugging (resolved as: /docs/next/debugging#remote-debugging)
- Broken anchor on source page path = /docs/next/image:
   -> linking to transforms#props (resolved as: /docs/next/transforms#props)
- Broken anchor on source page path = /docs/next/images:
   -> linking to /docs/next/publishing-to-app-store#1-enable-app-transport-security
- Broken anchor on source page path = /docs/next/javascript-environment:
   -> linking to /docs/next/network#content
   -> linking to /docs/next/timers#content
- Broken anchor on source page path = /docs/next/network:
   -> linking to /docs/next/publishing-to-app-store#1-enable-app-transport-security
- Broken anchor on source page path = /docs/next/optimizing-javascript-loading:
   -> linking to #use-hermes (resolved as: /docs/next/optimizing-javascript-loading#use-hermes)
- Broken anchor on source page path = /docs/next/profile-hermes:
   -> linking to /docs/next/profile-hermes#open-the-downloaded-profile-on-chrome-devtools
- Broken anchor on source page path = /docs/next/react-native-gradle-plugin:
   -> linking to #using-variants (resolved as: /docs/next/react-native-gradle-plugin#using-variants)
- Broken anchor on source page path = /docs/next/running-on-device:
   -> linking to /docs/next/debugging#in-app-errors-and-warnings
- Broken anchor on source page path = /docs/next/sectionlist:
   -> linking to sectionlist#renderitem (resolved as: /docs/next/sectionlist#renderitem)
- Broken anchor on source page path = /docs/next/switch:
   -> linking to /docs/next/switch#ios_backgroundColor
- Broken anchor on source page path = /docs/next/text:
   -> linking to /docs/next/accessibility#accessibilitytraits-ios
   -> linking to accessibility#accessible-ios-android (resolved as: /docs/next/accessibility#accessible-ios-android)
- Broken anchor on source page path = /docs/next/touchablewithoutfeedback:
   -> linking to /docs/next/accessibility#accessibilitystate-ios-android
   -> linking to #accessibilityviewismodal-ios (resolved as: /docs/next/touchablewithoutfeedback#accessibilityviewismodal-ios)
   -> linking to /docs/next/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/next/troubleshooting:
   -> linking to /docs/next/linking-libraries-ios#content
- Broken anchor on source page path = /docs/next/view:
   -> linking to /docs/next/accessibility#accessibilityignoresinvertcolors
   -> linking to /docs/next/accessibility#accessibilitystate-ios-android
   -> linking to /docs/next/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/alert:
   -> linking to alert#alertButton (resolved as: /docs/alert#alertButton)
- Broken anchor on source page path = /docs/animated:
   -> linking to animated#interpolate (resolved as: /docs/animated#interpolate)
- Broken anchor on source page path = /docs/animations:
   -> linking to animated#interpolate (resolved as: /docs/animated#interpolate)
- Broken anchor on source page path = /docs/communication-ios:
   -> linking to native-modules-ios#content (resolved as: /docs/native-modules-ios#content)
- Broken anchor on source page path = /docs/custom-webview-android:
   -> linking to /docs/native-modules-android#register-the-module
- Broken anchor on source page path = /docs/fast-refresh:
   -> linking to /docs/debugging#accessing-the-in-app-developer-menu
- Broken anchor on source page path = /docs/handling-text-input:
   -> linking to textinput#content (resolved as: /docs/textinput#content)
- Broken anchor on source page path = /docs/hermes:
   -> linking to debugging#remote-debugging (resolved as: /docs/debugging#remote-debugging)
- Broken anchor on source page path = /docs/image:
   -> linking to transforms#props (resolved as: /docs/transforms#props)
- Broken anchor on source page path = /docs/images:
   -> linking to /docs/publishing-to-app-store#1-enable-app-transport-security
- Broken anchor on source page path = /docs/javascript-environment:
   -> linking to /docs/network#content
   -> linking to /docs/timers#content
- Broken anchor on source page path = /docs/network:
   -> linking to /docs/publishing-to-app-store#1-enable-app-transport-security
- Broken anchor on source page path = /docs/profile-hermes:
   -> linking to /docs/profile-hermes#open-the-downloaded-profile-on-chrome-devtools
- Broken anchor on source page path = /docs/react-native-gradle-plugin:
   -> linking to #using-variants (resolved as: /docs/react-native-gradle-plugin#using-variants)
- Broken anchor on source page path = /docs/running-on-device:
   -> linking to /docs/debugging#in-app-errors-and-warnings
- Broken anchor on source page path = /docs/sectionlist:
   -> linking to sectionlist#renderitem (resolved as: /docs/sectionlist#renderitem)
- Broken anchor on source page path = /docs/switch:
   -> linking to /docs/switch#ios_backgroundColor
- Broken anchor on source page path = /docs/text:
   -> linking to /docs/accessibility#accessibilitytraits-ios
   -> linking to accessibility#accessible-ios-android (resolved as: /docs/accessibility#accessible-ios-android)
- Broken anchor on source page path = /docs/touchablewithoutfeedback:
   -> linking to /docs/accessibility#accessibilitystate-ios-android
   -> linking to #accessibilityviewismodal-ios (resolved as: /docs/touchablewithoutfeedback#accessibilityviewismodal-ios)
   -> linking to /docs/accessibility#accessibilityvalue-ios-android
- Broken anchor on source page path = /docs/troubleshooting:
   -> linking to /docs/linking-libraries-ios#content
- Broken anchor on source page path = /docs/view:
   -> linking to /docs/accessibility#accessibilityignoresinvertcolors
   -> linking to /docs/accessibility#accessibilitystate-ios-android
   -> linking to /docs/accessibility#accessibilityvalue-ios-android

Other minor improvements

I run visual regression tests on the website to see the visual impact of the upgrade, and some other little details it caught were:

Improved syntax highlighting for JSDoc

https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619585

Improved syntax highlighting for Bash

https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619699

Deduplicated blog archive year

https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619499

Centered column in table

https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619720

Postmortel blog post heading fixes

https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619742

Diff reported because I fixed Markdown to use h2 for internal headings instead of h1, which is semantically better

netlify · 2024-03-29T10:30:59Z

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	`af6fc16`
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6606f145a4b78600089b778c
😎 Deploy Preview	https://deploy-preview-4072--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

slorber · 2024-03-29T14:31:00Z

docs/shadow-props.md

+---
+


This change is due to the weird structure the RN website use for many bases, using a # Reference heading in the middle of an existing doc that already has a h1 heading.

This is not semantically correct, and if it's only to apply a larger font it would be better to apply a different solution.

I've made a little tweak to the heuristic Docusaurus uses to decide (or not) to add the front matter title at the top of the page (facebook/docusaurus#9999), so that I don't have to refactor the other docs as well, but this specific page wasn't covered because it's not consistent with the others and # Reference was not prefixed by ---.

Note other docs are inconsistent:

Some do not have a ## Example heading

Some use a h3 ### Example heading instead of h2

Some do not have a --- before the # Reference heading

I only fixed this case because it prevented the insertion of the # Shadow Prop heading at the very top of the doc (ie the doc had no title anymore), and will let you figure out further refactors to make RNW more consistent.

I agree that we should avoid using an additional h1, in other words # [title] headers, in pages content. Can make a follow up PR which will cleanup te semantic a bit. Hope that those usage are not blocker for the upgrade.

slorber · 2024-03-29T14:31:39Z

docs/profile-hermes.md

@@ -8,7 +8,7 @@ You can visualize JavaScript's performance in a React Native app using [Hermes](
 In this section, you will learn how to profile your React Native app running on Hermes and how to visualize the profile using [the Performance tab on Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference)

 :::caution
-Be sure to [enable Hermes in your app](Hermes) before you get started!


The broken link checker is now case sensitive because some hosting platforms are case sensitive too and can't serve hermes.html from /HeRMeS

slorber · 2024-03-29T14:32:01Z

website/blog/2023-01-27-71rc1-android-outage-postmortem.md

@@ -11,15 +11,15 @@ The contributors who helped tackle the incident recently attended a post-mortem

 <!--truncate-->

-# What happened


Old blog post using h1 everywhere instead of h2

slorber · 2024-03-29T14:32:45Z

website/docusaurus.config.js

+          'diff',
+          'bash',
+          'json',


required by v3.0+ (non beta)

slorber · 2024-03-29T14:33:01Z

website/src/css/customTheme.scss

@@ -625,7 +625,7 @@ a[class*="tagRegular"] {
    }
  }

-  .navbar__items div[class^="searchBox"] {


little CSS class rename on our side

slorber · 2024-03-29T16:52:59Z

@Simek v3.2 is released on npm and I updated the deps. This PR can be reviewed now ;)

Simek

That a nice set of new features and fixes, thanks for working on this Sebastien! 🙏

Tested the upgraded app on the preview, and locally. Was not able to spot any obvious regressions, everything seems to work and look correctly, LGTM!

cortinico

LGTM from the diff point of view 👍

cortinico

LGTM from the diff point of view 👍

slorber · 2024-04-04T13:49:55Z

Thanks for the review

Let me know if I can do anything else

cortinico · 2024-04-05T07:38:51Z

Is there anything blocking this PR from being merged?

slorber · 2024-04-05T12:34:19Z

I don't know, aren't you the one who's supposed to merge it? 😄

Simek · 2024-04-05T13:16:25Z

Pressing the button! 😄

slorber added 4 commits March 29, 2024 11:18

upgrade dependencies

fa9049f

fix blog post headings

c889fda

Fix css rule change

52a30ef

fix prism additional languages support

af5bf51

facebook-github-bot added the CLA Signed label Mar 29, 2024

slorber mentioned this pull request Mar 29, 2024

WIP - Upgrade Docusaurus v3 #3903

Closed

Fix case-sensitive broken links

8065a80

slorber mentioned this pull request Mar 29, 2024

Visual tests for react-native-website + Docusaurus v3.2 slorber/rnw-visual-tests#2

Open

lockfile

a1e2185

slorber mentioned this pull request Mar 29, 2024

fix(mdx-loader): Ignore contentTitle coming after Markdown thematicBreak facebook/docusaurus#9999

Merged

slorber added 2 commits March 29, 2024 15:15

upgrade canary

a0fa632

Fix shadow-props reference heading edge case

c449740

slorber commented Mar 29, 2024

View reviewed changes

Upgrade to v3.2

af6fc16

slorber marked this pull request as ready for review March 29, 2024 16:52

Simek approved these changes Mar 30, 2024

View reviewed changes

cortinico reviewed Apr 2, 2024

View reviewed changes

cortinico approved these changes Apr 2, 2024

View reviewed changes

Simek merged commit 9ceb051 into facebook:main Apr 5, 2024
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Docusaurus v3.2 #4072

Upgrade to Docusaurus v3.2 #4072

slorber commented Mar 29, 2024 •

edited

netlify bot commented Mar 29, 2024 •

edited

slorber Mar 29, 2024

Simek Mar 30, 2024

slorber Mar 29, 2024

slorber Mar 29, 2024

slorber Mar 29, 2024

slorber Mar 29, 2024

slorber commented Mar 29, 2024

Simek left a comment

cortinico left a comment

cortinico left a comment

slorber commented Apr 4, 2024

cortinico commented Apr 5, 2024

slorber commented Apr 5, 2024

Simek commented Apr 5, 2024

		@@ -11,15 +11,15 @@ The contributors who helped tackle the incident recently attended a post-mortem

		<!--truncate-->

		# What happened

		---

Upgrade to Docusaurus v3.2 #4072

Upgrade to Docusaurus v3.2 #4072

Conversation

slorber commented Mar 29, 2024 • edited

TLDR

Is it safe to upgrade?

Detailed improvements

Faster build times

Before

Cold builds

Incremental builds

After

Cold builds

Incremental builds

Faster dev server hot reloads

Broken anchors detection

Other minor improvements

netlify bot commented Mar 29, 2024 • edited

✅ Deploy Preview for react-native ready!

slorber Mar 29, 2024

Choose a reason for hiding this comment

Simek Mar 30, 2024

Choose a reason for hiding this comment

slorber Mar 29, 2024

Choose a reason for hiding this comment

slorber Mar 29, 2024

Choose a reason for hiding this comment

slorber Mar 29, 2024

Choose a reason for hiding this comment

slorber Mar 29, 2024

Choose a reason for hiding this comment

slorber commented Mar 29, 2024

Simek left a comment

Choose a reason for hiding this comment

cortinico left a comment

Choose a reason for hiding this comment

cortinico left a comment

Choose a reason for hiding this comment

slorber commented Apr 4, 2024

cortinico commented Apr 5, 2024

slorber commented Apr 5, 2024

Simek commented Apr 5, 2024

slorber commented Mar 29, 2024 •

edited

netlify bot commented Mar 29, 2024 •

edited