docs: refactor to migrate some elements from KDK/kApp docs to skeleto…

…n [skip app]

docs/.vitepress/config.mjs

@@ -60,7 +60,7 @@ function getGuidesSidebar () {
         { text: 'Deploy your app', link: '/guides/development/deploy' },
         { text: 'Publish your app', link: '/guides/development/publish' },
         { text: 'Document your app', link: '/guides/development/documentation' },
-        { text: 'Use our cli', link: '/guides/development/kli' },
+        { text: 'Use our CLI', link: '/guides/development/kli' },
         { text: 'Tips & troubleshooting', link: '/guides/development/tips' }
       ]
     },

docs/.vitepress/public/hooks-diagram-template.mmd

@@ -0,0 +1,42 @@
+graph TB
+    beforeAll{before all}
+    bahook(ba-hook) --> beforeAll
+
+    afterAll{after all}
+    afterAll --> aahook(aa-hook)
+
+    beforeAll --> bfhook(bf-hook)
+    bfhook -->|before| FIND[FIND]
+    FIND -->|after| afhook(af-hook)
+    afhook --> afterAll
+
+    beforeAll --> bghook(bg-hook)
+    bghook -->|before| GET[GET]
+    GET -->|after| aghook(ag-hook)
+    aghook --> afterAll
+
+    beforeAll --> bchook(bc-hook)
+    bchook -->|before| CREATE[CREATE]
+    CREATE -->|after| achook(ac-hook)
+    achook --> afterAll
+
+    beforeAll --> buhook(bu-hook)
+    buhook -->|before| UPDATE[UPDATE]
+    UPDATE -->|after| auhook(au-hook)
+    auhook --> afterAll
+
+    beforeAll --> bphook(bp-hook)
+    bphook -->|before| PATCH[PATCH]
+    PATCH -->|after| aphook(ap-hook)
+    aphook --> afterAll
+
+    beforeAll --> brhook(br-hook)
+    brhook -->|before| REMOVE[REMOVE]
+    REMOVE -->|after| arhook(ar-hook)
+    arhook --> afterAll
+
+    linkStyle default stroke-width:2px,fill:none,stroke:black
+    classDef hookClass fill:#f96,stroke:#333,stroke-width:2px
+    class bahook,aahook,bfhook,afhook,bghook,aghook,bchook,achook,buhook,auhook,bphook,aphook,brhook,arhook hookClass
+    classDef operationClass fill:#9c6,stroke:#333,stroke-width:2px
+    class FIND,GET,CREATE,UPDATE,PATCH,REMOVE operationClass

docs/guides/development/documentation.md

@@ -69,7 +69,7 @@ Have a look at our workflow for an example.
 ## Working with diagrams
 
 We use two distinct tools to work with diagrams:
-* [draw.io](http://draw.io)] a complete editor to create well known diagrams
+* [draw.io](http://draw.io) a complete editor to create well known diagrams
 * [mermaid](https://github.com/knsv/mermaid) which allows you to generate diagrams from a simple text definition. We mainly use mermaid to create the hooks diagrams.
 
 To be able to include the diagrams within the documentation, we adopted the following methodology:
@@ -83,9 +83,13 @@ To be able to include the diagrams within the documentation, we adopted the foll
 ### mermaid
 
 1. install the [mermaid CLI](https://github.com/mermaidjs/mermaid.cli)
-2. start from the [hooks diagram template file](./hooks-diagram-template.mmd)
+2. start from the hooks diagram template file
+::: details .github/workflows/main.yaml
+
+<<< @/.vitepress/public/hooks-diagram-template.mmd
+:::
 3. output the SVG/PNG file in the root **assets** folder using `mmdc -i ./my-hooks-diagram.mmd -t neutral -b transparent -o my-hooks-diagram.svg`
 4. reference it in the documentation using a link like this `![My legend](https://raw.githubusercontent.com/kalisio/kdk/master/images/my-diagram.png)`
 
 The template looks like this:
-![Hooks Diagram Template](../.vitepress/public/images/hooks-diagram-template.png)
+![Hooks Diagram Template](../../.vitepress/public/images/hooks-diagram-template.png)