Introduce Nacara + Rework the structure

[MangelMaxime]

Hello @isaacabraham,

Like discussed during a SAFE call and on Twitter I am sending this PR to show how Nacara can be used for the documentation of your bindings.

This PR ending up changing a lot of stuff, mostly because I tried to clean up the repository architecture as I didn't really understood what was used for what.

The goal, is to show you how a bindings repository could be structured with Nacara for the documentation.

Preview

Repository structure

There are now 4 main folders:

• fable which contains the bindings definition. I didn't touch this folder
• docs which contains your documentation file and static files to serve with the docs
  • In this folder, the important file is index.md
• demo which contains the Demo project which is used to generate the Demo and also can be used to test the bindings.
• layouts which contains a custom nacara layout created specifically for "Compositional IT bindings". I used JSX and not F# to write it because it simpler to setup but if preferred you can use F#.

Note: To review the repository structure, I think it will be easier to clone the PR instead of looking at the diff because of the others changes.

Compositional IT layouts

This layout has been created to generate a page which follows your current structure.

I took inspiration from:

• https://compositionalit.github.io/feliz-tippy/
• https://compositionalit.github.io/feliz-ag-grid/

For that, this layout is asking for the following properties:

# Title used for the website
title: Feliz.Tippy
# Specify which layout used to render the page
layout: simple-binding-layout
# Link to the NuGet package
nuget_link: https://www.nuget.org/packages/Feliz.Tippy/
# Link to the NPM package
npm_link: https://www.npmjs.com/package/@tippyjs/react
# Link to the Github repository (making it easier to find the source)
github_link: https://github.com/CompositionalIT/feliz-tippy
# Markdown text used as the introduction (can be a multi line string)
introduction: Feliz style bindings for tippyjs/react
# Markdown text used for the installation instruction (can be a multi line string)
installation_instruction: |
  ```sh
  cd ./project
  femto install Feliz.Tippy
  ```
# Relative path to the demo code to include
# This "path" follow the specification of [remark-code-import](https://github.com/kevin940726/remark-code-import)
sample_file: ./../demo/src/Demo.fs#L6-

The layout checks if the required properties are provided otherwise, it will print an error.

Another important thing is that the code shown in the "Sample code" is coming from the actual demo code meaning. Thanks to that, we can make sure that the sample code works because it is compiled using Fable and would fail if the code is invalid.

Also, anything below the front-matter is included at the bottom of the page. So if needed, you can had more content and also this is how I included the demo.js file.

CI

I also added a Github workflow which will publish the docs from master.

Future

If you like the proposition of using Nacara for several of your bindings, I recommand that you publish the layout as an NPM package. This will make it much easier to setup Nacara and improving the layout if needed.

Indeed, by using it via NPM when installed the layout will automatically include it's required dependencies.

This means, that to use it you will just need 4 steps:

npm install -D nacara  @compositional-it/simple-binding-layout

and then configure the nacara.config.json with something like that:

{
    "siteMetadata": {
        "url": "https://compositionalit.github.io",
        "baseUrl": "/feliz-tippy/",
        "title": "CIT"
    },
    "layouts": [
        "@compositional-it/simple-binding-layout"
    ]
}

and setup the index.md and style.scss files.

This will allows you to shared the layout JSX, the style and auto install the dependencies. We can even include the CIT logos in it to avoid the need to copy them in each repository making it even slimer to use Nacara.

If needed, I can help set up the layout as a stand-alone package.

[MangelMaxime]

Hello @isaacabraham @Akash-Mair

I am pinging you as perhaps this PR has gone under your radar.

[isaacabraham]

@MangelMaxime doh. I'm so sorry that we missed this. @Akash-Mair, can we spend some time this Friday reviewing this?