Readme improvements

README.md

@@ -1,110 +1,147 @@
  <img src="static/header_background.png" alt="Banner">
 
- > **Spacy**, **Simple**, **Scalable** State Management Framework
+ > **Spacy, Simple, Scalable State Management Framework**
 
  <br />
 
  <a href="https://github.com/agile-ts/agile">
   <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
+<a href="https://npm.im/@agile-ts/core">
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"></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?style=flat-square" 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 />
+
 <a href="https://npm.im/@agile-ts/core">
   <img src="https://img.shields.io/npm/dm/@agile-ts/core.svg" alt="npm monthly downloads"></a>
 <a href="https://npm.im/@agile-ts/core">
   <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"></a>
-<a href="https://npm.im/@agile-ts/core">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"></a>
-<a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/languages/code-size/agile-ts/agile.svg" alt="GitHub Code Size"></a>
-<a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/repo-size/agile-ts/agile.svg" alt="GitHub Repo Size"></a>
+
 
 
-## 🚀 Look how easy it is 
-Below example is based on React
+<br />
+
+
+<br />
+<img src="static/how_to_create_state_header.png" alt="How to create State Header">
+
 ```tsx
-// At first we have to create an Instance of Agile
+// -- core.js ------------------------------------------
+
+// At first we need an Instance of Agile
 const App = new Agile();
 
-// Now we can create a State which has an initial Value of "Hello Stranger!"
+// Than we can create our first State
 const MY_FIRST_STATE = App.State("Hello Stranger!");
 
-// Our cool React Component
-const RandomComponent = () => {
-    // With the Hook 'useAgile' we bind the State to our 'RandomComponent'
-    const myFirstState = useAgile(MY_FIRST_STATE); // Returns "Hello Stranger!"
-                                                              //       ^
-    return (                                                  //       |
-        <div>                                                 //       |  Through the 'set' action the State Value 
-            <p>{myFirstState}</p>                             //       |  gets changed to "Hello Friend!" 
-            <button                                           //       |  and causes a rerender on this Component.
-                onClick={() => {                              //       |  -> myFirstState has the Value "Hello Friend!"
-                    // Lets's update the State Value          //       |
-                    MY_FIRST_STATE.set("Hello Friend!") // -------------
-                }}
-            >
-                Update State
-            </button>
-        </div>
-    );
-}
+// -- myComponent.whatever ------------------------------------------
+
+// Now we can bind our State to nearly any UI-Component
+// And wolla its reactive. Everytime the State mutates the Component gets rerendered
+const myFirstState = useAgile(MY_FIRST_STATE); // returns "Hello Stranger!"
 ```
-_You can't believe the simplicity?! Convince yourself [here](https://codesandbox.io/s/agilets-first-state-f12cz)._
+To find out more checkout our [documentation](https://agile-ts.org/docs).
 
+### ⛳️ Sandbox
+Test AgileTs yourself, it's just a click away. Select your preferred Framework below.
+- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
+- Vue (coming soon)
+- Angular (coming soon)
 
-## ❓ Why AgileTs
 
-#### 🚅 Straightforward
-Write minimalistic, boilerplate free code that captures your intent. <br />
-**For instance**
-- Store State in Local Storage
+<br />
+
+
+<br />
+<img src="static/why_should_i_use_agile.png" alt="Why should I use AgileTs">
+
+### 🚅 Straightforward
+Write minimalistic, boilerplate free code that captures your intent. 
+
+**Some straightforward syntax examples:**
+- Store a State in the Local Storage
   ```ts
   MY_STATE.persist("storage-key")
   ```
-- Reactive Collection of States
+- Create a reactive Collection of States
   ```ts
   const MY_COLLECTION = App.Collection();
   MY_COLLECTION.collect({id: 1, name: "Frank"});
   MY_COLLECTION.collect({id: 2, name: "Dieter"});
   ```
-- Cool State checks and mutations
+- Mutate or Check States with simple Functions
   ```ts
   MY_STATE.undo(); // Undo last change
   MY_STATE.is({hello: "jeff"}); // Check if State has the Value {hello: "jeff"}
   ```
 
-#### 🤸‍ Flexible
-Agile can be used in nearly every UI-Framework 
-and surly works with the workflow that suits you best, 
-since Agile isn't bound to _dispatches_, _reducers_, ..
+### 🤸‍ Flexible
+- Works in nearly every UI-Framework. Check [here](TODO) if the Framework you are using is supported, too.
+- Surly behaves with the workflow that suits you best.
+  No need for _reducers_, _actions_, ..
+- Has **no** external dependencies
 
-#### 🎯 Easy to Use
-Learn the powerful and simple tools of Agile in a short amount of time.
+### 🌌 Centralize
+Manage your Application Logic in a central place outside any UI-Framework.
+This makes your code more decoupled, portable, and above all, easily testable.
 
-#### ⛳️ Centralize
-Manage your Application Logic outside of any UI-Framework in a central place.
-This makes your code more decoupled, portable, and above all, easily testable. 
+### 🎯 Easy to Use
+Learn the powerful tools of AgileTs in a short amount of time.
+A good place to start is in our [documentation](https://agile-ts.org/docs).
 
-#### 🍃 Lightweight
-Agile has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6) 
+### 🍃 Lightweight
+AgileTs has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6) 
 and [0 dependencies](https://www.npmjs.com/package/@agile-ts/core).
 
 
-## ⬇️ Installation
-```
-npm install @agile-ts/core
-```
-To use Agile we have to install the _core_ package, it's the brain and handles your States, Collections, ..
 <br />
-```
-npm install @agile-ts/react
-```
-In addition, we need to install a _fitting integration_ for the Framework we are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
 
 
-## 📄 Documentation
-The Agile Docs are located [here](https://agile-ts.org/docs/)
+<br />
+<img src="static/installation_header.png" alt="Installation">
 
+To use AgileTs properly, in an UI-Framework we have to install 2 packages.
+
+- The _Core Package_, which is the brain of AgileTs and handles your States, Collections, ..
+  ```
+  npm install @agile-ts/core
+  ```
+
+- A _fitting integration_ for the UI-Framework you are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
+  ```
+  npm install @agile-ts/react
+  ```
+
+
+<br />
+
+
+<br />
+<img src="static/documentation_header.png" alt="Documentation">
+
+If AgileTs sounds interesting to you and you want to find out more.
+Checkout our **[docs](https://agile-ts.org/docs/)**. 
+If you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
+
+
+<br />
+
+
+<br />
+<img src="static/contribute_header.png" alt="Contribute">
+
+Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+
+<br />
+
+
+<br />
+<img src="static/packages_of_agile.png" alt="Packages of Agile">
 
-## 🗂 Packages of Agile
 | Name                                                                     |                                                                               Latest Version                                                                                | Description                               |
 | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
 | [@agile-ts/core](/packages/core)                                         |               [![badge](https://img.shields.io/npm/v/@agile-ts/core.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/core)                                   | Brain of Agile                            |
@@ -113,9 +150,10 @@ The Agile Docs are located [here](https://agile-ts.org/docs/)
 | [@agile-ts/multieditor](/packages/multieditor)                           |               [![badge](https://img.shields.io/npm/v/@agile-ts/multieditor.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/multieditor)                     | Simple Form Manager                       |
 
 
-## 👨‍💻 Contribute
-Feel free to contribute
+<br />
+
 
+<br />
+<img src="static/credits_header.png" alt="Packages of Agile">
 
-## 🌠 Credits
 AgileTs is inspired by [PulseJs](https://github.com/pulse-framework/pulse)