feat: docusaurus v2 #669

eriveltonelias · 2020-02-18T10:52:36Z

Sorry for this long PR 😅, but a lot of changes were necessary to migrate Docusaurus v1 to v2.
on this link https://v2.docusaurus.io/docs/migrating-from-v1-to-v2 we can see the instructions to migrate, may it help for review.

satya164

Thanks a lot!

Seems like the stuff inside .docusaurus folder shouldn't be committed to git but they are present in the commit

eriveltonelias · 2020-02-18T11:47:39Z

@satya164 yeah, you're right. Just removed this one.

satya164

There seem to be 2 folders, website/ and website1. Why are both folders needed?

Also I would like to remove docs from website/docs and keep everything in versioned like in current repo because having duplicated docs in docs/ always confuses users.

eriveltonelias · 2020-02-18T13:35:09Z

There seem to be 2 folders, website/ and website1. Why are both folders needed?

thanks! I'll remove the website1

Also I would like to remove docs from website/docs and keep everything in versioned like in current repo because having duplicated docs in docs/ always confuses users.

if we remove the docs/ will "remove" the 'next' version, so can I remove this one too?

satya164 · 2020-02-18T13:51:08Z

if we remove the docs/ will "remove" the 'next' version, so can I remove this one too?

yea, we don't have a next right now

eriveltonelias · 2020-02-18T13:58:49Z

done :)

WoLewicki

Good job! I will test it tomorrow to see if the links etc. work correctly.

WoLewicki · 2020-02-18T15:27:55Z

website/versioned_docs/version-3.x/custom-android-back-button-handling.md

+
+Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
+
+```


Shouldn't it be there?

Suggested change

```

```js

WoLewicki · 2020-02-18T15:31:55Z

website/versioned_docs/version-3.x/custom-routers.md

+
+### `getStateForAction(action, state)`
+
+Defines the navigation state in response to a given action. This function will be run when an action gets passed into `props.navigation.dispatch(`, or when any of the helper functions are called, like `navigation.navigate(`.


Suggested change

Defines the navigation state in response to a given action. This function will be run when an action gets passed into `props.navigation.dispatch(`, or when any of the helper functions are called, like `navigation.navigate(`.

Defines the navigation state in response to a given action. This function will be run when an action gets passed into `props.navigation.dispatch()`, or when any of the helper functions are called, like `navigation.navigate()`.

WoLewicki · 2020-02-18T15:32:13Z

website/versioned_docs/version-3.x/custom-routers.md

+
+Typically this should return a navigation state, with the following form:
+
+```


Suggested change

```

```js

WoLewicki · 2020-02-18T15:37:45Z

website/versioned_docs/version-3.x/navigation-events.md

+
+### Example
+
+```jsx harmony


Suggested change

```jsx harmony

```js

WoLewicki · 2020-02-18T15:38:00Z

website/versioned_docs/version-3.x/navigation-events.md

+const MyScreen = () => (
+  <View>
+    <NavigationEvents
+      onWillFocus={payload => console.log('will focus',payload)}


Suggested change

onWillFocus={payload => console.log('will focus',payload)}

onWillFocus={payload => console.log('will focus', payload)}

same below

WoLewicki · 2020-02-18T15:52:12Z

website/versioned_docs/version-5.x/material-top-tab-navigator.md

@@ -71,9 +70,9 @@ Position of the tab bar in the tab view. Possible values are `'top'` and `'botto

 #### `lazy`

-Boolean indicating whether to lazily render the scenes. When this is set to `true`, screens will be rendered as they come into the viewport. By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of screens out of the viewport until the user sees them. To enable lazy rendering, set `lazy` to `true`.


Maybe updating the docs in this way should be in another PR to keep some kind of single responsibility PRs? Wdyt @satya164?

WoLewicki · 2020-02-18T15:53:46Z

website/versioned_docs/version-5.x/nesting-navigators.md

@@ -39,7 +38,7 @@ In the above example, the `Home` component contains a tab navigator. The `Home`
  - `Profile` (`Screen`)
  - `Settings` (`Screen`)

-Nesting navigators work very much like nesting regular components. To achieve the behavior you want, it's often necessary to nest multiple navigators.
+To achieve the behavior you want, it's often necessary to nest multiple navigators. For example, if you want.


Is it ended?

WoLewicki · 2020-02-18T16:04:07Z

website/versioned_docs/version-5.x/nesting-navigators.md

@@ -59,10 +58,6 @@ For example, if you have a stack inside a drawer navigator, the drawer's `openDr

 Similarly, if you have a tab navigator inside stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` prop.

-### Nested navigators don't receive parent's events
-
-For example, if you have a stack navigator nested inside a tab navigator, the screens in the stack navigator won't receive the events emitted by the parent tab navigator such as (`tabPress`) when using `navigation.addListener`. To receive events from parent navigator, you can explicitly listen to parent's events with `navigation.dangerouslyGetParent().addListener`.


Why delete this?

WoLewicki · 2020-02-18T16:07:20Z

website/versioned_docs/version-5.x/stack-navigator.md

@@ -126,21 +123,6 @@ headerStyle: {

 To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.

-If you want your custom header to animate with screen transitions and want to keep `headerMode` as `float`, you can interpolate on the `scene.progress.current` and `scene.progress.next` props. For example, following will cross-fade the header:


Why delete this too?

WoLewicki · 2020-02-18T16:09:25Z

website/versioned_docs/version-5.x/use-linking.md

@@ -43,7 +41,7 @@ export default function App() {
  }

  return (
-    <NavigationContainer initialState={initialState} ref={ref}>
+    <NavigationContainer initialState={initialState}>


Why remove ref? It is used in useLinking.

satya164 · 2020-02-18T16:47:12Z

I think these deletions/changes are because of bad merge. Let's make a pass to see the documentation is the same as master and then merge :)

eriveltonelias · 2020-02-18T23:46:20Z

yeah, @satya164 is right, @WoLewicki. Basically, some things were needed to change when migrating v1 to v2.
eg:

-- id: VERSION-FILE_NAME
-- original_id: FILE_NAME

the original_id was removed and the id was needed to remove the version reference and when I started working on this upgrade was on last week, so a lot of changes happened :D.

and docs now should be on /website so when I tried to merge this today some bad merges happen, but I don't think they were deleted

satya164 · 2020-02-19T05:33:46Z

I've fixed the merge related issues. I was running it locally, few things:

Seems clicking the blog link crashes the website and I see empty page
Clicking on some links doesn't work (e.g. Continue to "Hello React Navigation" to start writing some code.) in "Getting Started". I think need to replace the ".html" with ".md"
Hovering over the buttons in homepage has white text with light background, can we make the text purple?
We're missing this section "React Navigation is built and funded by Expo & Software Mansion, with contributions from the community."
The copyright text looks a bit weird due to small top margin, maybe add some margin there? or remove that text, idc
Regarding dark theme for code snippets in light background. I've astigmatism and it feels too harsh to my eyes. Can we change it to light theme?
The code snippets with diff don't have syntax highlighting, check the "upgrading from 4.x" doc for an example
Purple accent color may not be best with dark theme. Maybe we can lighten it up a bit for the dark theme
Since everything is inside the website folder now, maybe we can just move everything to root of the project? Is there any disadvantage? Currently I keep running yarn at root by mistake instead of cd website/ first
Not related to this PR, but can we remove "Next" from versions page? Since we don't have a "next" version right now

eriveltonelias · 2020-02-19T22:40:37Z

I've fixed the merge related issues. I was running it locally, few things:

thanks ❤️

Seems clicking the blog link crashes the website and I see empty page

Clicking on some links doesn't work (e.g. Continue to "Hello React Navigation" to start writing some code.) in "Getting Started". I think need to replace the ".html" with ".md"

Hovering over the buttons in homepage has white text with light background, can we make the text purple?

yes

We're missing this section "React Navigation is built and funded by Expo & Software Mansion, with contributions from the community."

The copyright text looks a bit weird due to small top margin, maybe add some margin there? or remove that text, idc

Regarding dark theme for code snippets in light background. I've astigmatism and it feels too harsh to my eyes. Can we change it to light theme?

for sure, I'll change

The code snippets with diff don't have syntax highlighting, check the "upgrading from 4.x" doc for an example

Purple accent color may not be best with dark theme. Maybe we can lighten it up a bit for the dark theme

Since everything is inside the website folder now, maybe we can just move everything to root of the project? Is there any disadvantage? Currently I keep running yarn at root by mistake instead of cd website/ first

yeah, we can move everything to root now.

Not related to this PR, but can we remove "Next" from versions page? Since we don't have a "next" version right now

yeah

Thanks for all feedback @satya164.

eriveltonelias · 2020-02-20T10:57:20Z

…act-navigation/react-navigation.github.io into @eriveltonelias/docusaurus-v2

eriveltonelias · 2020-02-21T12:33:06Z

@satya164
Can you check those topics again, please?

Seems clicking the blog link crashes the website and I see empty page
Clicking on some links doesn't work (e.g. Continue to "Hello React Navigation" to start writing some code.) in "Getting Started". I think need to replace the ".html" with ".md"
Purple accent color may not be best with a dark theme. Maybe we can lighten it up a bit for the dark theme ( Do you have a suggestion for what color in here 😅)?

satya164 · 2020-02-21T13:43:54Z

Can you check those topics again, please?

Do you have a suggestion for what color in here

#a697ce looks good contrast wise

satya164 · 2020-02-22T20:48:45Z

Just fixed videos not playing because docusaurus now uses MDX and it needs to be autoPlay instead of autoplay

satya164 · 2020-02-23T02:32:52Z

Turns out the blog doesn't load because the chunk name has "ad" in it which gets blocked by uBlock origin 🤦‍♂

satya164 · 2020-02-23T03:15:33Z

It's live https://reactnavigation.org/

Thanks so much for working on this :D

satya164 · 2020-02-23T04:25:38Z

Seems the new version breaks all the links because of removing .html suffix. There were some other issues which I tried to fix here https://github.com/react-navigation/react-navigation.github.io/commits/docusaurus-v2

But I didn't notice that translations don't work 😱

Until we figure that out, I've reverted to v1 and put the v2 branch here https://github.com/react-navigation/react-navigation.github.io/commits/docusaurus-v2

eriveltonelias · 2020-02-25T11:22:30Z

It's live https://reactnavigation.org/

Thanks so much for working on this :D

❤️😭

eriveltonelias · 2020-02-25T11:25:52Z

Seems the new version breaks all the links because of removing .html suffix. There were some other issues which I tried to fix here https://github.com/react-navigation/react-navigation.github.io/commits/docusaurus-v2

But I didn't notice that translations don't work 😱

😩haha

sure, let me work on that, btw our account on Crowdin was suspended, do you have an idea why?

eriveltonelias added 2 commits February 18, 2020 07:46

bump docusaurus v2

fbdd451

ignore .docusaurus

4862632

eriveltonelias changed the title ~~bump docusaurus v2~~ feature: docusaurus v2 Feb 18, 2020

eriveltonelias changed the title ~~feature: docusaurus v2~~ feat: docusaurus v2 Feb 18, 2020

satya164 reviewed Feb 18, 2020

View reviewed changes

remove .docusaurus

35b5006

satya164 requested changes Feb 18, 2020

View reviewed changes

eriveltonelias added 2 commits February 18, 2020 10:38

remove website1 foldr

f8ede32

Merge branch 'source' into @eriveltonelias/docusaurus-v2

0396ce9

removed docs from sidebar and duplicate assets

1f9f4ea

eriveltonelias added 2 commits February 18, 2020 11:38

Merge branch 'source' into @eriveltonelias/docusaurus-v2

c4d326b

update docs assets

a4a5114

WoLewicki reviewed Feb 18, 2020

View reviewed changes

satya164 added 2 commits February 19, 2020 06:07

Fix issues with merge

71288b2

Fix styles

d55addd

eriveltonelias added 3 commits February 20, 2020 06:52

removed Next version from versions page

b41c188

add missing funded

194c108

fix theme for diff and code snippets

5608cd8

removed copyright text

c76c814

satya164 force-pushed the source branch from 682bce5 to 826bd49 Compare February 21, 2020 05:10

Merge branch 'source' into @eriveltonelias/docusaurus-v2

96692ce

eriveltonelias added 2 commits February 21, 2020 09:29

fix btn style on getting started

d7662c3

Merge branch '@eriveltonelias/docusaurus-v2' of https://github.com/re…

c4816fa

…act-navigation/react-navigation.github.io into @eriveltonelias/docusaurus-v2

satya164 added 3 commits February 22, 2020 21:35

Merge branch 'source' into @eriveltonelias/docusaurus-v2

48cfbc3

Tweak the videos in docs

e46a46f

Fix videos not playing

f616294

satya164 added 3 commits February 22, 2020 21:53

Merge branch 'source' into @eriveltonelias/docusaurus-v2

7b23dce

Tweak the landing page

4d5bd3d

Add more metadata to blog

b01e639

Fix broken links

dfa6fb7

satya164 merged commit b762b30 into source Feb 23, 2020

satya164 deleted the @eriveltonelias/docusaurus-v2 branch February 23, 2020 02:45

satya164 pushed a commit that referenced this pull request Feb 25, 2020

feat: migrate to docusaurus v2 (#669)

d8b5057


		Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.

		```


		### `getStateForAction(action, state)`

		Defines the navigation state in response to a given action. This function will be run when an action gets passed into `props.navigation.dispatch(`, or when any of the helper functions are called, like `navigation.navigate(`.


		Typically this should return a navigation state, with the following form:

		```

	onWillFocus={payload => console.log('will focus',payload)}
	onWillFocus={payload => console.log('will focus', payload)}

		@@ -71,9 +70,9 @@ Position of the tab bar in the tab view. Possible values are `'top'` and `'botto

		#### `lazy`

		Boolean indicating whether to lazily render the scenes. When this is set to `true`, screens will be rendered as they come into the viewport. By default all scenes are rendered to provide a smoother swipe experience. But you might want to defer the rendering of screens out of the viewport until the user sees them. To enable lazy rendering, set `lazy` to `true`.

		@@ -126,21 +123,6 @@ headerStyle: {

		To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.

		If you want your custom header to animate with screen transitions and want to keep `headerMode` as `float`, you can interpolate on the `scene.progress.current` and `scene.progress.next` props. For example, following will cross-fade the header:

feat: docusaurus v2 #669

feat: docusaurus v2 #669

Uh oh!

Conversation

eriveltonelias commented Feb 18, 2020

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

eriveltonelias commented Feb 18, 2020

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

eriveltonelias commented Feb 18, 2020

Uh oh!

satya164 commented Feb 18, 2020

Uh oh!

eriveltonelias commented Feb 18, 2020

Uh oh!

WoLewicki left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

satya164 commented Feb 18, 2020

Uh oh!

eriveltonelias commented Feb 18, 2020

Uh oh!

satya164 commented Feb 19, 2020

Uh oh!

eriveltonelias commented Feb 19, 2020

Uh oh!

eriveltonelias commented Feb 20, 2020 • edited by satya164 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eriveltonelias commented Feb 21, 2020

Uh oh!

satya164 commented Feb 21, 2020

Uh oh!

satya164 commented Feb 22, 2020

Uh oh!

satya164 commented Feb 23, 2020

Uh oh!

satya164 commented Feb 23, 2020

Uh oh!

satya164 commented Feb 23, 2020

Uh oh!

eriveltonelias commented Feb 25, 2020

Uh oh!

eriveltonelias commented Feb 25, 2020

Uh oh!

Uh oh!

eriveltonelias commented Feb 20, 2020 •

edited by satya164

Loading