Upgrade React-Native website to Docusaurus v3 #3780
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,9 +18,7 @@ Together with the rapid iteration cycle of the web, we've been able to build som | |
| <footer> | ||
| <a | ||
| href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/" | ||
| className="btn">Read more</a> | ||
|
Contributor
There was a problem hiding this comment. Was this change made by a formatter or manually?
Contributor
Author
There was a problem hiding this comment. These changes are manual and intentional. With MDX v2, using new lines now create extra paragraphs, cf the MDX playground:
And RN website adds padding-bottom to all paragraphs of the website, so this extra I'm not sure the intent is to create a There are only 4 similar cases and they are only found in very old blog posts, so I thought it was better to adjust those 4 blog posts rather than fixing it with CSS. Somehow it's the exact same case as the But there are much more recent multiline usage cases of <figure>
<img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
<figcaption>
You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
</figcaption>
</figure>That's the reason I decided to use CSS for /*
Prevent useless bottom margin for multiline <figcaption> tags in MDX:
<figcaption>
some paragraph text
</figcaption>
*/
figcaption > p:last-child {
margin-bottom: 0;
} |
||
| </footer> | ||
|
|
||
| > This is an excerpt. Read the rest of the post on [Facebook Code](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/). | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -94,7 +94,7 @@ return <S3Album track/> | |
|
|
||
| AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an [aws-exports file](https://aws.amazon.com/blogs/mobile/enhanced-javascript-development-with-aws-mobile-hub/). However, developers can also use the library independently with existing resources. | ||
|
|
||
| For a deep dive into the philosophy and to see a full demo, check out the video from [AWS re\:Invent](https://www.youtube.com/watch?v=vAjf3lyjf8c). | ||
|
Contributor
There was a problem hiding this comment. Why does this need to be escaped?
Contributor
Author
There was a problem hiding this comment. Docusaurus v3 now uses https://github.com/remarkjs/remark-directive to provide support for admonitions, and other things using syntax such as
This is what happens in the MDX playground if you turn the remark-directive option on: 
This regression was captured by the visual regression tests: https://app.argos-ci.com/slorber/rnw-visual-tests/builds/32/56012838
Technically it should probably be possible to add some code in Docusaurus v3 so that this escaping becomes un-necessary, and the unhandled AST directive nodes get serialized back as raw text. For now it's not implemented, and not even sure who should implement that 😅. Will think about it. I hope in the meantime it's not a blocker for you to merge this PR. |
||
|
|
||
| ## AWS AppSync | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,11 +5,12 @@ | |
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import React, {useState} from 'react'; | ||
| import useIsBrowser from '@docusaurus/useIsBrowser'; | ||
|
|
||
| const DocsRating = ({label}) => { | ||
| const isBrowser = useIsBrowser(); | ||
| if (!isBrowser) { | ||
|
Comment on lines
-12
to
+13
Contributor
Author
There was a problem hiding this comment. This fixes a little React hydration issue. The issue was already there, and is not a blocker, but is now logged thanks to React 18 new hydration callback The SSR/SSG render and the first CSR render outputs should match, so things such as |
||
| return null; | ||
| } | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
| import CodeBlock from '@theme/CodeBlock'; | ||
| import InlineCode from './InlineCode'; | ||
|
|
||
| export default function MDXCode(props) { | ||
| const shouldBeInline = React.Children.toArray(props.children).every( | ||
| el => typeof el === 'string' && !el.includes('\n') | ||
| ); | ||
|
|
||
| return shouldBeInline ? <InlineCode {...props} /> : <CodeBlock {...props} />; | ||
| } |
Uh oh!
There was an error while loading. Please reload this page.