Upgrade documentation to latest Nacara

.gitignore

@@ -339,3 +339,5 @@ ASALocalRun/
 fableBuild
 examples/output/
 temp/
+docs_deploy/
+.nacara/

docs/changelog/Fable.Form.Simple.Bulma.md

@@ -1,6 +1,5 @@
 ---
 title: Fable.Form.Simple.Bulma
 layout: changelog
-extra:
-    changelog_path: ./../../../packages/Fable.Form.Simple.Bulma/CHANGELOG.md
+changelog_path: ./../../packages/Fable.Form.Simple.Bulma/CHANGELOG.md
 ---

docs/changelog/Fable.Form.Simple.md

@@ -1,6 +1,5 @@
 ---
 title: Fable.Form.Simple
 layout: changelog
-extra:
-    changelog_path: ./../../../packages/Fable.Form.Simple/CHANGELOG.md
+changelog_path: ./../../packages/Fable.Form.Simple/CHANGELOG.md
 ---

docs/changelog/Fable.Form.md

@@ -1,6 +1,5 @@
 ---
 title: Fable.Form
 layout: changelog
-extra:
-    changelog_path: ./../../../packages/Fable.Form/CHANGELOG.md
+changelog_path: ./../../packages/Fable.Form/CHANGELOG.md
 ---

docs/changelog/fable-form-simple-bulma.md

@@ -1,6 +1,5 @@
 ---
 title: fable-form-simple-bulma
 layout: changelog
-extra:
-    changelog_path: ./../../../packages/fable-form-simple-bulma/CHANGELOG.md
+changelog_path: ./../../packages/fable-form-simple-bulma/CHANGELOG.md
 ---

docs/Fable.Form.Simple.Bulma/components/fieldset.md → docs/fable-form-simple-bulma/components/fieldset.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: Fieldset / Groups
 ---
 

docs/Fable.Form.Simple.Bulma/components/form-list.md → docs/fable-form-simple-bulma/components/form-list.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: Form list
 ---
 

docs/Fable.Form.Simple.Bulma/installation.md → docs/fable-form-simple-bulma/installation.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: Installation
 ---
 

docs/fable-form-simple-bulma/menu.json

@@ -0,0 +1,11 @@
+[
+    "fable-form-simple-bulma/installation",
+    {
+        "type": "section",
+        "label": "Components",
+        "items": [
+            "fable-form-simple-bulma/components/fieldset",
+            "fable-form-simple-bulma/components/form-list"
+        ]
+    }
+]

docs/Fable.Form.Simple/customisation.md → docs/fable-form-simple/customisation.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: Custom view templates
 ---
 

docs/Fable.Form.Simple/features.md → docs/fable-form-simple/features.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: Features
 ---
 

docs/fable-form-simple/menu.json

@@ -0,0 +1,4 @@
+[
+    "fable-form-simple/features",
+    "fable-form-simple/customisation"
+]

docs/getting_started/how_to_use.md → docs/fable-form/how_to_use.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: How to use ?
 ---
 

docs/fable-form/menu.json

@@ -0,0 +1,10 @@
+[
+    {
+        "type": "section",
+        "label": "Getting started",
+        "items": [
+            "fable-form/how_to_use",
+            "fable-form/use_what_you_need"
+        ]
+    }
+]

docs/getting_started/use_what_you_need.md → docs/fable-form/use_what_you_need.md

@@ -1,4 +1,5 @@
 ---
+layout: standard
 title: Use what you need
 ---
 
@@ -24,10 +25,10 @@ Only `Fable.Form` is mandatory, see below how to choose what you should use depe
 
 <span class="has-text-centered">
 
-*[Click here to see the list of supported field by Fable.Form.Simple](/Fable.Form/Fable.Form.Simple/features.html)*
+*[Click here to see the list of supported field by Fable.Form.Simple](/Fable.Form/docs/Fable.Form.Simple/features.html)*
 
 </span>
 
 <br />
 
-![What to use schema](../assets/what_to_use_schema.jpg)
+![What to use schema](../../assets/what_to_use_schema.svg)

docs/index.md

@@ -1,7 +1,12 @@
 ---
+layout: navbar-only
 title: Introduction
 ---
 
+<div class="container content section">
+    <div class="columns">
+        <div class="column is-8-widescreen is-offset-2-widescreen">
+
 Fable.Form allows you to build forms that are:
 
 - **Composable:** they can be extended and embedded into other forms
@@ -50,3 +55,14 @@ let form : Form.Form<Values, Msg> =
         |> Form.append emailField
         |> Form.append passwordField
 ```
+<br />
+
+<div class="is-flex is-justify-content-center">
+    <a href="/Fable.Form/fable-form/how_to_use.html" class="button is-primary is-medium">
+        Gettting Started
+    </a>
+</div>
+
+</div>
+</div>
+</div>

docs/sponsors.md

@@ -0,0 +1,12 @@
+---
+layout: standard
+title: Sponsors & Backers
+---
+
+The development of this project is made possible thanks to the support of these awesome sponsors & backers.
+
+[Become a backer or sponsor on Patreon](https://www.patreon.com/MangelMaxime)
+
+If you prefer one time donation, you can do it via [Paypal](https://www.paypal.me/MangelMaxime)
+
+<object data="https://mangelmaxime.github.io/sponsors/backers.svg"></object>

docs/style.scss

@@ -1,27 +1,58 @@
 @import "./../node_modules/bulma/sass/utilities/initial-variables";
 
 $primary: #176663;
+$primary-light: lighten($primary, 8%);
+$primary-dark: white;
 $success: #66bd77;
 $warning: #ffa17a;
 $info: #6672b4;
 $danger: #b3507a;
 
+@import "./../node_modules/bulma/sass/utilities/derived-variables";
+
+/////////////////////////////////
+/// nacara-layout-standard customizations
+/// Do not touch unless you know what you are doing
+/////////////////////////////////
+$navbar-breakpoint: 0px;
+$navbar-padding-vertical: 0.5rem;
+$navbar-padding-horizontal: 1rem;
+/////////////////////////////////
+
+// Specific to gatsby-remark-vscode usage
+$content-pre-padding: unset;
+
+/////////////////////////////////
+/// Customize Bulma
+/////////////////////////////////
+
 $navbar-item-color: $white;
 $navbar-background-color: $primary;
+$navbar-item-active-color: $white;
+$navbar-item-active-background-color: lighten($primary, 8%);
 $navbar-item-hover-color: $white;
 $navbar-item-hover-background-color: lighten($primary, 8%);
+$navbar-dropdown-item-active-background-color: lighten($primary, 8%);
+$navbar-dropdown-item-hover-background-color: lighten($primary, 8%);
+$navbar-dropdown-item-hover-color: $white;
+$navbar-dropdown-item-active-color: $white;
 
 $menu-item-active-background-color: transparent;
 $menu-item-active-color: $primary;
 $menu-item-hover-color: $primary;
 $menu-item-hover-background-color: transparent;
 
-$toc-item-active-font-weight: $weight-semibold;
+$menu-item-active-background-color: $primary;
+$menu-item-active-color: $white;
+$menu-item-hover-color: $primary;
+$menu-item-hover-background-color: transparent;
+$menu-label-font-size: $size-6;
+$menu-item-radius: $radius-large $radius-large;
 
 $body-size: 15px;
 
 @import "./../node_modules/bulma/bulma.sass";
-@import "./../node_modules/nacara/scss/nacara.scss";
+@import "./../node_modules/nacara-layout-standard/scss/nacara.scss";
 
 // Begin: fable-form-simple-bulma
 
@@ -30,59 +61,13 @@ $fieldset-shadow: unset;
 
 // End: fable-form-simple-bulma
 
-a:hover {
-    text-decoration: underline;
-}
+// a:hover {
+//     text-decoration: underline;
+// }
 
 // Doesn't underline link inside tabs element
 .tabs {
     a:hover {
         text-decoration: none;
     }
 }
-
-// Ensure minimal size of the doc content
-// This allows to not have the 'Previous' & 'Next' button in the middle of the screen
-// when their are not a lot of content on the page
-.is-main-content > .section {
-    min-height: calc(
-        100vh - 7.5em
-    ); // 7.5em = 3em (section margin top) - 3em (section margin bottom) - 1.5em (to not stick too low)
-}
-
-// Add a border to the menu-container making it easier to see the different section of the page
-// Menu | Content | Toc
-.menu-container {
-    .menu {
-        border-right: 1px solid #e0e0e0;
-        padding-right: 1rem;
-
-        a.is-active {
-            text-decoration: underline;
-            font-weight: $weight-bold;
-        }
-    }
-}
-
-.toc-container {
-    margin-top: 1.5rem;
-}
-
-ul.textual-steps > li {
-    font-weight: $weight-normal;
-}
-
-.full-height-scrollable-content {
-    scrollbar-width: thin;
-    scrollbar-color: $grey-light $white-ter;
-
-    &::-webkit-scrollbar {
-        width: 6px;
-        height: 8px;
-        background-color: $white-ter;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: $grey-light;
-    }
-}

nacara.config.json

@@ -0,0 +1,108 @@
+{
+    "serverPort": 8081,
+    "siteMetadata": {
+        "title": "Fable.Form",
+        "url": "https://mangelmaxime.github.io",
+        "baseUrl": "/Fable.Form/",
+        "editUrl" : "https://github.com/MangelMaxime/Fable.Form/edit/main/docs"
+    },
+    "navbar": {
+        "start": [
+            {
+                "pinned": true,
+                "label": "Docs",
+                "items": [
+                    {
+                        "section": "fable-form",
+                        "label": "Fable.Form",
+                        "description": "Extensible core library used to build forms",
+                        "url": "/Fable.Form/fable-form/how_to_use.html"
+                    },
+                    "divider",
+                    {
+                        "section": "fable-form-simple",
+                        "label": "Fable.Form.Simple",
+                        "description": "Simple form implementation, you can write your own view on top of it",
+                        "url": "/Fable.Form/fable-form-simple/features.html"
+                    },
+                    "divider",
+                    {
+                        "section": "fable-form-simple-bulma",
+                        "label": "Fable.Form.Simple.Bulma",
+                        "description": "View implementation for Fable.Form.Simple based on Bulma",
+                        "url": "/Fable.Form/fable-form-simple-bulma/installation.html"
+                    }
+                ]
+            },
+            {
+                "section": "examples",
+                "label": "Examples",
+                "url": "/Nacara/reference/Nacara.Core/index.html"
+            },
+            {
+                "section": "changelogs",
+                "label": "Changelogs",
+                "items": [
+                    {
+                        "label": "Nacara",
+                        "url": "/Nacara/changelogs/nacara.html"
+                    },
+                    {
+                        "label": "Nacara.Core",
+                        "url": "/Nacara/changelogs/nacara-core.html"
+                    },
+                    {
+                        "label": "Nacara.Standard.Layout",
+                        "url": "/Nacara/changelogs/nacara-layout-standard.html"
+                    },
+                    {
+                        "label": "Nacara.ApiGen",
+                        "url": "/Nacara/changelogs/nacara-apigen.html"
+                    }
+                ]
+            },
+            {
+                "url": "https://gitter.im/fable-compiler/Fable",
+                "label": "Support"
+            },
+            {
+                "section": "sponsors",
+                "label": "Sponsors",
+                "url": "/Fable.Form/sponsors.html"
+            }
+        ],
+        "end": [
+            {
+                "url": "https://github.com/MangelMaxime/Fable.Form",
+                "icon": "fab fa-github",
+                "label": "GitHub"
+            },
+            {
+                "url": "https://twitter.com/MangelMaxime",
+                "icon": "fab fa-twitter",
+                "label": "Twitter"
+            }
+        ]
+    },
+    "remarkPlugins": [
+        {
+            "resolve": "gatsby-remark-vscode",
+            "property": "remarkPlugin",
+            "options": {
+                "theme": "Atom One Light",
+                "extensions": [
+                    "vscode-theme-onelight"
+                ]
+            }
+        },
+        {
+            "resolve": "remark-github",
+            "options": {
+                "repository": "MangelMaxime/Fable.Form"
+            }
+        }
+    ],
+    "layouts": [
+        "nacara-layout-standard"
+    ]
+}