agile-ts · bennobuilder · Oct 2, 2021 · Oct 2, 2021
diff --git a/docs/main/Contributing.md b/docs/main/Contributing.md
@@ -1,8 +1,10 @@
 ---
 id: contributing
 title: Contributing
-sidebar_label: Contributing
+sidebar_label: Contributing to AgileTs
 slug: /contributing
+description: Contributions to AgileTs are not hard and very welcome.
+image: img/meta.png
 ---
 
 We are open and grateful for any contribution made by the community.

diff --git a/docs/main/Frameworks.md b/docs/main/Frameworks.md
@@ -3,6 +3,8 @@ id: frameworks
 title: Frameworks
 sidebar_label: Frameworks
 slug: /frameworks
+description: AgileTs can be used in various frameworks like React, React-Native, Vue, ..
+image: img/meta.png
 ---
 
 A quick overview of all frameworks that AgileTs supports

diff --git a/docs/main/Installation.md b/docs/main/Installation.md
@@ -3,6 +3,8 @@ id: installation
 title: Installation
 sidebar_label: Installation
 slug: /installation
+description: How to install AgileTs and its plugins in various environments like React, Vue.
+image: img/meta.png
 ---
 
 `AgileTs` is essentially a set of node modules 

diff --git a/docs/main/Introduction.md b/docs/main/Introduction.md
@@ -1,33 +1,12 @@
 ---
 id: introduction
-title: AgileTs
+title: Introducing AgileTs
 sidebar_label: Introduction
 slug: /introduction/
+description: A global State and Logic Library implemented in Typescript, offering a reimagined API that focuses on developer experience. The AgileTs state management functionality can be used in various frameworks like React, Vue and plain Javascript.
+image: img/meta.png
 ---
 
-> **Global State and Logic Library**
-
-<a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
-<a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
-<a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
-<a href="https://github.com/agile-ts/agile/actions?query=workflow%3ARelease">
-   <img src="https://github.com/agile-ts/agile/workflows/Release/badge.svg" alt="Build Status"/></a>
-<a href="https://github.com/agile-ts/agile/actions?query=workflow%3A%22Test+All+Packages%22">
-   <img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"/></a>
-
-<br />
-<br />
-
-:::info
-
-Want to get a quick overview of AgileTs?
-Checkout the [AgileTs Introduction Blogpost](https://dev.to/bennodev19/createstate-introducing-agilets-a-flexible-state-manager-91f).
-
-:::
-
 ## 👋 Introduction {#introduction}
 
 AgileTs is a global State and Logic Library implemented in Typescript.
@@ -332,8 +311,8 @@ In July, I came to the conclusion to contribute to PulseJs,
 in order to speed up the development process a bit.
 But before I could do anything, I had to figure out how PulseJs works internally.
 After hours, I still haven't figured out how it works. 
-This was due to the fact that I was a Typescript noob,
-and the codebase was not contributor friendly (No comments, variables called x, a, b, ..).
+This was mainly due to the fact that I was a Typescript noob,
+and the codebase was (in my opinion) not very contributor friendly (not many comments, variables called x, sc, ..).
 To learn how PulseJs works and to get a deeper understanding of Typescript,
 I decided to rewrite PulseJs from scratch in a separate project, later AgileTs.
 After a while, I got the hang and understood how PulseJs works under the hood.
@@ -344,7 +323,7 @@ was on the 16th August 2020, where I refactored the `PulseHOC`.
 Unfortunately, PulseJs was moving further and further away 
 from my idea of an ideal State Management Library.
 For instance, they introduced the `Pulse.Core`,
-which more or less forced me to define all States in a single source of truth object called `core`.
+which more or less forced you to define all States in a single source of truth object called `core`.
 I wouldn't say I liked that change since I switched, among other reasons,
 to PulseJs in order not to define all my States in a single object.
 Because of this relatively significant design change, 

diff --git a/docs/main/StyleGuides.md b/docs/main/StyleGuides.md
@@ -3,15 +3,10 @@ id: style-guide
 title: Style Guides
 sidebar_label: Style Guides
 slug: /style-guide
+description: Contributions to AgileTs can be made with little effort and are very welcome. We look forward to your input.
+image: img/meta.png
 ---
 
-:::important
-
-**AgileTs isn't bound to any specific Style-Guide**, 
-but there are some you may get inspired from.
-
-:::
-
 A good frontend architecture isn't installable via npm
 and even AgileTs cannot solve this problem on the go.
 Planning and building a well-structured application requires a lot of time and effort.
@@ -34,6 +29,13 @@ These guides give you a basic idea of possible structures for frontend applicati
 using AgileTs as State Management Framework.
 Feel free to choose one of them and adapt it to your needs.
 
+:::important
+
+**AgileTs isn't bound to any specific Style-Guide**,
+but there are some you may get inspired from.
+
+:::
+
 ## 🚀 Inspiration 1
 
 The `Style Guide 1` is intended for **smaller and medium size applications** 

diff --git a/docs/packages/api/Introduction.md b/docs/packages/api/Introduction.md
@@ -5,16 +5,6 @@ sidebar_label: Introduction
 slug: /api
 ---
 
-:::warning
-
-WIP Package!
-
-:::
-
-> Promise based HTTP request API
-
-<br />
-
 <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/api">
@@ -24,6 +14,17 @@ WIP Package!
 <a href="https://npm.im/@agile-ts/api">
   <img src="https://img.shields.io/npm/dt/@agile-ts/api.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 
+<br />
+<br />
+
+:::warning
+
+WIP Package!
+
+:::
+
+> Promise based HTTP request API
+
 ## ❓ `api` 
 
 The `api` package is a Promise based HTTP/s request API, with a simple syntax.

diff --git a/docs/packages/core/Introduction.md b/docs/packages/core/Introduction.md
@@ -5,10 +5,6 @@ sidebar_label: Introduction
 slug: /core
 ---
 
-> Global State and Logic Library
-
-<br />
-
 <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/core">
@@ -18,6 +14,10 @@ slug: /core
 <a href="https://npm.im/@agile-ts/core">
   <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 
+<br />
+<br />
+
+> Global State and Logic Library
 
 ## ❓ `core`
 

diff --git a/docs/packages/event/Introduction.md b/docs/packages/event/Introduction.md
@@ -5,16 +5,6 @@ sidebar_label: Introduction
 slug: /event
 ---
 
-:::warning
-
-WIP Package currently only supporting React!
-
-:::
-
-> Handy package for emitting UI updates
-
-<br />
-
 <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/event">
@@ -24,10 +14,20 @@ WIP Package currently only supporting React!
 <a href="https://npm.im/@agile-ts/event">
   <img src="https://img.shields.io/npm/dt/@agile-ts/event.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 
+<br />
+<br />
+
+:::warning
+
+WIP Package currently only supporting React!
+
+:::
+
+> Handy package for emitting UI updates
 
 Events are handy for emitting UI updates and passing data with them.
 ```ts
 const MY_EVENT = new Event(App);
 MY_EVENT.on((data) => {console.log("hello there " + data.name)}); // Print 'hello there jeff' if Event gets triggered
 MY_EVENT.trigger({name: "jeff"}); // Trigger Event
-```
+```
diff --git a/docs/packages/logger/Introduction.md b/docs/packages/logger/Introduction.md
@@ -5,10 +5,6 @@ sidebar_label: Introduction
 slug: /logger
 ---
 
-> Simple Javascript Logger
-
- <br />
-
  <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/logger">
@@ -18,6 +14,11 @@ slug: /logger
 <a href="https://npm.im/@agile-ts/logger">
   <img src="https://img.shields.io/npm/dt/@agile-ts/logger.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 
+<br />
+<br />
+
+> Simple Javascript Logger
+
 ## ❓ `logger`
 
 The `logger` package is a standalone extension for AgileTs that improves the logging experience,

diff --git a/docs/packages/multieditor/Introduction.md b/docs/packages/multieditor/Introduction.md
@@ -5,16 +5,6 @@ sidebar_label: Introduction
 slug: /multieditor
 ---
 
-:::warning
-
-WIP Package!
-
-:::
-
-> Simple Form Manager
-
-<br />
-
 <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/multieditor">
@@ -24,6 +14,17 @@ WIP Package!
 <a href="https://npm.im/@agile-ts/multieditor">
   <img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 
+<br />
+<br />
+
+:::warning
+
+WIP Package!
+
+:::
+
+> Simple Form Manager
+
 ## ❓ `multieditor` 
 
 The `multieditor` package is an extension for AgileTs, that makes creating reliable forms easy.
@@ -32,25 +33,33 @@ The `multieditor` package is an extension for AgileTs, that makes creating relia
 ```ts
 // Create Multieditior 
 const multiEditor = createMultieditor(editor => ({
-    data: {
+    initialData: {
         id: "myId", // Initial Id
         email: undefined, // Inital Email
         name: undefined, // Inital Name
     },
     onSubmit: async (data) => {
-        console.log("Submitted ", data);  // <---------------------------------  
-    }, //                                                                     |
-    fixedProperties: ["id"], // Properties that are always passed to the 'onSubmit()' method
-    validateMethods: {
-        email: agileResolver(isString, isEmail, isRequired), // Validation with tree shakable validation methods
-        name: yupResolver(Yup.string().max(10).min(2).required()), // Validation with external validatiors like Yup
-    },
-    editableProperties: ["email", "name"], // Properties that can be edited
+        console.log("Submitted ", data);  // <---------
+    }, //                                           |
+    // Properties that are always passed to the 'onSubmit()' method
+    fixedProperties: ["id"],
+    validationSchema: {
+        // Validation with inbuilt tree shakable validation methods
+        email: agileResolver(isString, isEmail, isRequired),
+        // Validation with external validatiors like Yup
+        name: yupResolver(Yup.string().required().max(10).min(2)),
+    }
 }));
 
-// Update Multieditor values in the UI-Form
-multiEditor.setValue("email", "[email protected]");
-multiEditor.setValue("name", "Jeff");
+// Use the Multieditor in any UI-Form
+// ..
+<label>First Name:</label>
+<input
+onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
+defaultValue={signUpEditor.getItemInitialValue("firstName")}
+/>
+<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
+// ..
 
 // Submit Multieditor and see what the 'onSubmit()' method will log
 multiEditor.submit();

diff --git a/docs/packages/react/Introduction.md b/docs/packages/react/Introduction.md
@@ -5,10 +5,6 @@ sidebar_label: Introduction
 slug: /react
 ---
 
-> Integration for [React](https://reactjs.org/) and [React-Native](https://reactnative.dev/)
-
- <br />
-
  <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/react">
@@ -18,6 +14,11 @@ slug: /react
 <a href="https://npm.im/@agile-ts/react">
   <img src="https://img.shields.io/npm/dt/@agile-ts/react.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
 
+ <br />
+ <br />
+
+> Integration for [React](https://reactjs.org/) and [React-Native](https://reactnative.dev/)
+
 ## ❓ `react`
 
 The `react` package is a set of utilities that simplifies the way AgileTs is integrated into a [React](https://reactjs.org/) environment.

diff --git a/docs/packages/vue/Introduction.md b/docs/packages/vue/Introduction.md
@@ -5,6 +5,18 @@ sidebar_label: Introduction
 slug: /vue
 ---
 
+ <a href="https://github.com/agile-ts/agile">
+  <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
+<a href="https://npm.im/@agile-ts/vue">
+  <img src="https://img.shields.io/npm/v/@agile-ts/vue.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
+<a href="https://npm.im/@agile-ts/vue">
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/vue.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
+<a href="https://npm.im/@agile-ts/vue">
+  <img src="https://img.shields.io/npm/dt/@agile-ts/vue.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
+
+<br />
+<br />
+
 :::warning
 
 WIP Documentation!
@@ -21,17 +33,6 @@ and we will fix it as soon as possible.
 
 > Integration for [Vue](https://vuejs.org/)
 
- <br />
-
- <a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
-<a href="https://npm.im/@agile-ts/vue">
-  <img src="https://img.shields.io/npm/v/@agile-ts/vue.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
-<a href="https://npm.im/@agile-ts/vue">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/vue.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
-<a href="https://npm.im/@agile-ts/vue">
-  <img src="https://img.shields.io/npm/dt/@agile-ts/vue.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
-
 ## ❓ `vue`
 
 The `vue` package helps us to integrate AgileTs into a [Vue](https://vuejs.org/) environment