Dynamically generate navigation

docs/README.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Overview",
+    "category": {
+      "label": "Basics"
+    },
+    "metaData": {
+      "categoryPosition": 1,
+      "position": 0
+    }
+  }
+}
+meta -->
+
 # Luigi Documentation
 
 If you are new to Luigi, read the [Getting started guide](getting-started.md) to learn more about its structure and key features.

docs/application-setup.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Installation",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 1
+    }
+  }
+}
+meta -->
+
 # Application setup
 
 Prior to start developing with Luigi, you need to set up your application. This document shows you how to set up a web application using the Luigi micro frontend framework.

docs/authorization-configuration.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Authorization",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 6
+    }
+  }
+}
+meta -->
+
 # Authorization configuration
 
 To configure authorization in Luigi, go to the `auth:` section of your project's `basicConfiguration.js` file. To see how authorization works, you can also go to the [Luigi Fiddle](https://fiddle.luigi-project.io) site and configure a sample application.

docs/authorization-events.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Authorization events",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 6
+    }
+  }
+}
+meta -->
+
 # Authorization events
 
 >**NOTE:** For learning and testing purposes, use the [Luigi Fiddle](https://fiddle.luigi-project.io) page where you can configure a sample Luigi application.

docs/communication.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Custom messages",
+    "category": {
+      "label": "Luigi Client"
+    },
+    "metaData": {
+      "categoryPosition": 3,
+      "position": 3
+    }
+  }
+}
+meta -->
+
 # Communication
 
 >**NOTE:** For learning and testing purposes, use the [Luigi Fiddle](https://fiddle.luigi-project.io) page where you can configure a sample Luigi application.

docs/general-settings.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "General settings",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 7
+    }
+  }
+}
+meta -->
+
 # General settings
 
 <!-- add-attribute:class:success -->

docs/getting-started.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Getting started",
+    "category": {
+      "label": "Basics"
+    },
+    "metaData": {
+      "categoryPosition": 1,
+      "position": 1
+    }
+  }
+}
+meta -->
+
 # Getting started
 
 ## What is Luigi?

docs/lifecycle-hooks.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Lifecycle hooks",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 8
+    }
+  }
+}
+meta -->
+
 # Lifecycle hooks
 
 You can use any of the Luigi lifecycle hooks by adding additional setup to the root of the Luigi configuration object. Here is an example:

docs/luigi-client-api.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "API",
+    "category": {
+      "label": "Luigi Client"
+    },
+    "metaData": {
+      "categoryPosition": 3,
+      "position": 2
+    }
+  }
+}
+meta -->
+
 # Luigi Client API
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->

docs/luigi-client-setup.md

@@ -1,3 +1,19 @@
+<!-- meta
+{
+  "node": {
+    "label": "Client Setup",
+    "category": {
+      "label": "Luigi Client"
+    },
+    "metaData": {
+      "categoryPosition": 3,
+      "position": 2
+    },
+    "hideFromNav": true
+  }
+}
+meta -->
+
 # Luigi Client Installation
 
 Luigi Client contains a library that allows your application to use all features of the Luigi framework.

docs/luigi-core-api.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "API",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 9
+    }
+  }
+}
+meta -->
+
 # Luigi Core API
 
 ## Luigi Config

docs/luigi-ux-features.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "UI features",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 8
+    }
+  }
+}
+meta -->
+
 
 # Luigi UX features
 

docs/navigation-advanced.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Advanced navigation",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 4
+    }
+  }
+}
+meta -->
+
 # Advanced navigation
 
 This document shows you how to configure the following Luigi features:

docs/navigation-configuration-example.md

@@ -1,3 +1,19 @@
+<!-- meta
+{
+  "node": {
+    "label": "Configuration Example",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 2
+    },
+    "hideFromNav": true
+  }
+}
+meta -->
+
 # Navigation configuration example
 
 This example represents a sample Luigi navigation configuration including parameters described in the [navigation parameters reference](navigation-parameters-reference.md).

docs/navigation-configuration.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Basic navigation",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 2
+    }
+  }
+}
+meta -->
+
 #  Basic navigation configuration
 
 Read these guides to get started with configuring your navigation:

docs/navigation-parameters-reference.md

@@ -1,3 +1,18 @@
+<!-- meta
+{
+  "node": {
+    "label": "Routing",
+    "category": {
+      "label": "Luigi Core"
+    },
+    "metaData": {
+      "categoryPosition": 2,
+      "position": 5
+    }
+  }
+}
+meta -->
+
 # Navigation parameters reference
 
 <!-- add-attribute:class:success -->

website/docs/.gitignore

@@ -13,6 +13,7 @@ luigi-client
 public/*
 static/assets
 *coreStyles*
+navigation-generated.json
 
 # Debug
 yarn-error.log

website/docs/package.json

@@ -16,7 +16,7 @@
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "mock:develop-plugins": "NODE_ENV=debug node -r esm scripts/markdown.unified-preview.js",
-    "mock:develop-plugins:watch": "NODE_ENV=debug nodemon -r esm scripts/markdown.unified-preview.js"
+    "mock:develop-plugins:watch": "NODE_ENV=debug nodemon --ignore 'static/**' -r esm scripts/markdown.unified-preview.js"
   },
   "dependencies": {
     "@kyma-project/luigi-client": "^0.6.0",
@@ -44,6 +44,7 @@
     "css-loader": "^3.2.0",
     "esm": "^3.2.25",
     "fiori-fundamentals": "^1.7.1",
+    "lodash.orderby": "^4.6.0",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
@@ -55,6 +56,7 @@
     "rehype-slug": "^2.0.3",
     "rehype-stringify": "^6.0.0",
     "remark": "^11.0.1",
+    "remark-frontmatter": "^1.3.2",
     "remark-html": "^10.0.0",
     "remark-parse": "^7.0.1",
     "remark-preset-lint-markdown-style-guide": "^2.1.3",

website/docs/scripts/markdown.unified-preview.js

@@ -1,12 +1,15 @@
 import { MarkdownSvc } from '../src/services/markdown.service';
-import { readdirSync, readFileSync } from 'fs';
+import { readFileSync } from 'fs';
 
 const filesToProcess = [
   // 'plain.md',
   // 'links.md',
   // 'link.md',
   // 'codeblocks.md',
-  'custom-attributes.md',
+  // 'custom-attributes.md',
+  'frontmatter-3.md',
+  'frontmatter-2.md',
+  'frontmatter.md'
 ];
 
 filesToProcess.forEach(async (name) => {