Upgrade website to Docusaurus using webpack 5

[slorber]

Summary

Test upgrade to latest canary of Docusaurus using Webpack 5 (facebook/docusaurus#4089)

This should speed up build times significantly thanks to the new persistent caching system

Test plan

preview

---

Seems to improve rebuild times significantly:

[Simek]

Is PWA temporarily disabled for testing or there is an other reason for that?

[slorber]

There is a bug I should fix 😉 will re-enable it later Le sam. 3 avr. 2021 à 11:43, Bartosz Kaszubowski ***@***.***> a écrit :

…

***@***.**** commented on this pull request. Is PWA temporarily disabled for testing or there is an other reason for that? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2573 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PWL3BLQFNN3QKEWP3TTG3PLJANCNFSM42JFOHYA> .

[slorber]

Also noticed something on the RN website, as you have pages with 2 h1 titles (usually page title + "Reference").

We have a new warning but wondering if we should not just remove it, or at least provide a way to ignore it.

Starting the development server...
Duplicate title detected in `actionsheetios.md` file
Duplicate title detected in `image-style-props.md` file
Duplicate title detected in `layout-props.md` file
Duplicate title detected in `shadow-props.md` file
Duplicate title detected in `share.md` file
Duplicate title detected in `systrace.md` file
Duplicate title detected in `text-style-props.md` file

Asking here: https://twitter.com/sebastienlorber/status/1379416531235405832

[Simek]

Also noticed something on the RN website, as you have pages with 2 h1 titles (usually page title + "Reference").

@slorber AFAIK, since V1, it was a workaround to skip the heading entry in page ToC, but retaining the size difference between Reference and reference sections heading like Props or Methods.

[netlify]

Deploy preview for react-native ready!

Built with commit 62de6f6

https://deploy-preview-2573--react-native.netlify.app

[slorber]

let me know if you see any issue :)

[Simek]

@slorber There are two visible issues at the first glance:

• oversized sidebar and horizontal scrolling
  
• monospace entries of ToC (right sidebar) now have a border
  

Will let you know if I spot more problems.

[slorber]

Fixed the custom CSS that mess-up with the sidebar. It is better to use css vars to override the sidebar width, as we do some calc() CSS computations on it

About the TOC, yes that seems a side-effect of facebookincubator/infima#106
At the same time, wouldn't it make sense to have a border here, as the toc headers are inline code blocks anyway? Is it a problem to have this new border in practice?

[Simek]

About the TOC, yes that seems a side-effect of facebookincubator/infima#106

@slorber This border also appears on all other <code> elements on the whole website, even in content:

For me, it looks like way too general CSS rule was applied without a visible reason (and as a side-change in other bugfix). Hope the PR author will explain the addition. Ideally I would prefer to see Infima styles fixed, rather than adding a bunch of overwrites to the React Native website custom CSS code.

[Simek]

LGTM, thank you for the update @slorber! 👍

[slorber]

Thanks for merging

For me, it looks like way too general CSS rule was applied without a visible reason (and as a side-change in other bugfix). Hope the PR author will explain the addition. Ideally I would prefer to see Infima styles fixed, rather than adding a bunch of overwrites to the React Native website custom CSS code.

Unfortunately, not sure what to do, any CSS change we do can lead to people not being happy with the change, but we have to change CSS to make progress. I understand however that it is frustrating for users with customizations like RN on each upgrade to have to fix the CSS.

We'll focus on improving this in the next phase of Docusaurus. I really want to make it easier to customize, and most importantly, make it clear what is safe to customize and what is not