There are a number of reasons I have decided to undertake this project:
I think it is really important that given the whole of nativescript is written in JS/TS and run on nodeJS, that the documentation site also runs on the same technology. This shows the core team are completely committed to the platform. Additionally, it smooths the learning curve for contributors in the docs repos to contribute to the core repos.
Hence the first piece of work on this project is to migrate from Jeckyll (ruby) to Hexo (nodeJS).
The documentation at the moment isn't presented in an easily browsable and inviting manor. The large cascading file trees with a single list of all docs (tutorials, cookbook, api reference, guides etc.) makes browsing difficult.
The folowing gif shows what the docs page looks like on my Surface Pro 3 with Google Chrome. Which has a small screen, but not unreasonably so (in my view). Notice that the spacing on the left-hand link menu means the doc names have split onto two lines. This has extended the length on menu making you have to scroll past quite a lot of white page to see all the options.
This is a much more intangible point, but of the major platform (Xamarin, React Native and Cordova) I believe the nativescript pages look the least professional/developed. I think that when I was first investigating a platform, I saw the nativescript website and decided against it because it looked less polished.
- Rather than using Jeckyll, I have proposed Hexo, a nodeJS based static blog platform. It conviniently supports theming and custom rendering scripts.
- The currently proposed theme allows for the tabbed seperation of Tutorials, Guides, API docs and signposts to Community communication channels
- As above, the theme has a seperate scrolling feature for the API docs, auto expands and collapses each file and helps link to specific sections.
- I am using a number of git submodules for:
- The Nativescript Theme
- The Document Source Files (not currently)
- There are a number of custom script block extentions, e.g.
nativescript
,angular
,snippet
- Add all the docs
- Build out the rest of docs site to avoid technology mix and to better segregate resources
- Build out the tutorial with this tool
- Use VHost to segregate hexo server static docs and regular node app
- Actually render the
snippet
blocks properly - where is this code coming from?4. Tabbed Code Blocks - based on the Materialize UI component5. Hook Up the pseudo env variables for Angular Vs. Nativescript display. - Use proper svg Assets for Slack and SO Docs on sidebar
- Look at the internal linking (I imagine some if not all of the links to other articles are now broken)
- Code highlighting isn't working.
The format for tabbed codeblocks is:
{% m_codeblock %}
<!-- tab JavaScript -->
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.doubleTap, function (args) {
console.log("Double Tap");
});
<!-- endtab -->
<!-- tab NativeScript -->
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) {
console.log("Double Tap");
});
<!-- endtab -->
{% endm_codeblock %}