React-native-navigation: Docs on Docasaurus

[kgshv]

N.B. This issue is a WIP and related to https://github.com/wix/react-native-navigation/issues/5399.

Using this to track work on the new and improved documentation. Originally started here, but there is currently a need for a somewhat fresh start.

The new documentation website is powered by Docusaurus.io instead of Docsify, and has a new structure. Work is done in the docusaurus branch.

New documentation structure

N.B.

• [X] 1-st level items are in the left-side navigation
  
  
  
  • [X] so are the 2-nd level items
  
  
  • [X] 3-rd level items are in the right sidebar.
  
  

---

• [ ] Home page - clicking on "React Native Navigation" at the top should lead to /before-you/start
• [x] Getting started
  
  
  
  • [x] Before you start
  
  
  • [x] Installation
  
  
  • [x] Playground app
  
  
  • [x] Showcases
  
  
• [x] Using the app
  
  
  
  • [x] Launching the app
  
  
  • [x] Basic navigation
  
  
  • [x] Advanced navigation
  
  
  • [x] Screen lifecycle
  
  
  • [x] Passing data to components
  
  
• [x] Layouts
  
  
  
  • [x] Stack
  
  
  • [x] BottomTabs
  
  
  • [x] SideMenu
  
  
  • [x] ExternalComponent
  
  
• [ ] Hierarchy
  
  
  
  • [x] Root
  
  
  • [x] Modal
  
  
  • [x] Overlay
  
  
• [ ] Styling
  
  
  
  • [x] Themes
  
  
  • [x] StatusBar
  
  
  • [x] Orientation
  
  
  • [ ] Screen Animations - has uncompleted TODO
  
  
  • [x] Changing fonts
  
  
  • [x] Constants
  
  
• [x] Meta
  
  
  
  • [x] Contributing
  
  

---

Various TO-DO:

• [ ] Make sure all info in docusaurus.config.js is correct and not the default one. Same goes for index.js.
• [x] Make sure syntax highlighting works for every language (I'm concerned about the diff mostly) - this is low priority and not a blocker.
• [ ] more items might be added or subtracted in this list...

[kgshv]

@guyca the syntax highlighter isn't making the embedded diff pretty for me, so just a suggestion to check if we include the diff syntax highlighting module - https://v2.docusaurus.io/docs/markdown-features/#syntax-highlighting

[guyca]

Right, I looked into this yesterday and it should work. diff is included in docusaurus... we'll look into it later. not a blocker.

[jinshin1013]

Is there a way for us to contribute to this as well? I'd like to help documenting the installation and minimal setup part if I could

[guyca]

Hey @jinshin1013 Of course you can contribute. We're working on docusaurus branch and are coordinating work in discord. Once you join discord, send us a message in the docs channel 👍

[kgshv]

"External" anchor links don't seem to work for me for some reason. Not sure why. Steps to reproduce:

• run the docs website and navigate to Playground (.../docs/playground-app)
• try clicking on the "available here" link in "You can run tests if / when you need to (list of scripts available here)"
• lands on /docs/meta-contributing#scripts but does not scroll down to the page anchor. Loading this URL directly in browser does nothing either.
  Note that the right-sidebar navigation works just fine.

I feel like I'm missing something really basic here...

[kgshv]

@guyca FYI - just updated the issue to reflect current state of the docs structure

[guyca]

New docs are up - amazing work everyone 😻
Lets continue the discussion in https://github.com/wix/react-native-navigation/issues/6103 where I've listed the remaining articles we still need to write.