Merge pull request #70 from agile-ts/develop

Develop

Author: bennobuilder

.changeset/sour-ravens-warn.md

@@ -0,0 +1,6 @@
+---
+'@agile-ts/core': patch
+'@agile-ts/react': patch
+---
+
+Improved ReadMe

CONTRIBUTING.md

@@ -50,7 +50,7 @@ AgileTs has two primary branches: `master` and `develop`
 
 `develop` is where development takes place
 
-<img src="static/branch_organization.png" alt="Banner">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/branch_organization.png" alt="Branch Organisation"/>
 
 The root of all your branches have to be the `develop` branch!
 

README.md

@@ -1,52 +1,57 @@
- <img src="static/header_background.png" alt="Banner">
+ <img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
 
  > **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://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>
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"/></a>
+
+<br />
+
 <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>
+   <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>
+   <img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"/></a>
+<a href="https://codeclimate.com/github/agile-ts/agile/coverage">
+   <img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/></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>
+  <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>
+  <img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"/></a>
 
 
 
 <br />
 
 
 <br />
-<img src="static/how_to_create_state_header.png" alt="How to create State Header">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/how_to_create_state_header.png" alt="How to create a State?"/>
 
 ```tsx
 // -- core.js ------------------------------------------
 
-// At first we need an Instance of Agile
+// Let's start by creating an Instance of AgileTs
 const App = new Agile();
 
-// Than we can create our first State
+// Than we can build our first State
 const MY_FIRST_STATE = App.State("Hello Stranger!");
 
 // -- myComponent.whatever ------------------------------------------
 
-// Now we can bind our State to nearly any UI-Component
+// Now we are able to 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!"
+const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")
 ```
 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.
+Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.
 - [React](https://codesandbox.io/s/agilets-first-state-f12cz)
 - Vue (coming soon)
 - Angular (coming soon)
@@ -56,17 +61,17 @@ Test AgileTs yourself, it's just a click away. Select your preferred Framework b
 
 
 <br />
-<img src="static/why_should_i_use_agile.png" alt="Why should I use AgileTs">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/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
+- Store State in the Local Storage
   ```ts
   MY_STATE.persist("storage-key")
   ```
-- Create a reactive Collection of States
+- Create reactive Collection of States
   ```ts
   const MY_COLLECTION = App.Collection();
   MY_COLLECTION.collect({id: 1, name: "Frank"});
@@ -79,7 +84,7 @@ Write minimalistic, boilerplate free code that captures your intent.
   ```
 
 ### 🤸‍ Flexible
-- Works in nearly every UI-Framework. Check [here](TODO) if the Framework you are using is supported, too.
+- Works in nearly every UI-Framework. Check [here](https://agile-ts.org/docs/frameworks) 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
@@ -101,16 +106,17 @@ and [0 dependencies](https://www.npmjs.com/package/@agile-ts/core).
 
 
 <br />
-<img src="static/installation_header.png" alt="Installation">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/installation_header.png" alt="Installation"/>
 
-To use AgileTs properly, in an UI-Framework we have to install 2 packages.
+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).
+  Check [here](https://agile-ts/docs/framework) your Framework is supported, too.
   ```
   npm install @agile-ts/react
   ```
@@ -120,27 +126,28 @@ To use AgileTs properly, in an UI-Framework we have to install 2 packages.
 
 
 <br />
-<img src="static/documentation_header.png" alt="Documentation">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/documentation_header.png" alt="Documentation"/>
 
-If AgileTs sounds interesting to you and you want to find out more.
+If AgileTs sounds interesting to you.
 Checkout our **[docs](https://agile-ts.org/docs/)**. 
-If you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
+And I am sure you will be able to use it in no time.
+In case 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">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/contribute_header.png" alt="Contribute"/>
 
-Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](./CONTRIBUTING.md).
+Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
 
 
 <br />
 
 
 <br />
-<img src="static/packages_of_agile.png" alt="Packages of Agile">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/packages_of_agile.png" alt="Packages of Agile"/>
 
 | Name                                                                     |                                                                               Latest Version                                                                                | Description                               |
 | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
@@ -154,6 +161,6 @@ Get a part of AgileTs and start contributing. To find out more read the [CONTRIB
 
 
 <br />
-<img src="static/credits_header.png" alt="Packages of Agile">
+<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
 
 AgileTs is inspired by [PulseJs](https://github.com/pulse-framework/pulse)

packages/api/README.md

@@ -3,15 +3,15 @@
 > Promise based HTTP request API for Node.js
 
 <a href="https://npm.im/@agile-ts/api">
-  <img src="https://img.shields.io/npm/v/@agile-ts/api.svg" alt="npm version"></a>
+  <img src="https://img.shields.io/npm/v/@agile-ts/api.svg" alt="npm version"/></a>
  <a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
+  <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/api">
-  <img src="https://img.shields.io/npm/dm/@agile-ts/api.svg" alt="npm monthly downloads"></a>
+  <img src="https://img.shields.io/npm/dm/@agile-ts/api.svg" alt="npm monthly downloads"/></a>
 <a href="https://npm.im/@agile-ts/api">
-  <img src="https://img.shields.io/npm/dt/@agile-ts/api.svg" alt="npm total downloads"></a>
+  <img src="https://img.shields.io/npm/dt/@agile-ts/api.svg" alt="npm total downloads"/></a>
 <a href="https://npm.im/@agile-ts/api">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/api.svg" alt="npm minified size"></a>
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/api.svg" alt="npm minified size"/></a>
 
 ## ⏰ Short Example
 ```ts

packages/multieditor/README.md

@@ -3,15 +3,15 @@
 > Simple Form Manager for UI-Frameworks
 
 <a href="https://npm.im/@agile-ts/multieditor">
-  <img src="https://img.shields.io/npm/v/@agile-ts/multieditor.svg" alt="npm version"></a>
+  <img src="https://img.shields.io/npm/v/@agile-ts/multieditor.svg" alt="npm version"/></a>
  <a href="https://github.com/agile-ts/agile">
-  <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
+  <img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"/></a>
 <a href="https://npm.im/@agile-ts/multieditor">
-  <img src="https://img.shields.io/npm/dm/@agile-ts/multieditor.svg" alt="npm monthly downloads"></a>
+  <img src="https://img.shields.io/npm/dm/@agile-ts/multieditor.svg" alt="npm monthly downloads"/></a>
 <a href="https://npm.im/@agile-ts/multieditor">
-  <img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg" alt="npm total downloads"></a>
+  <img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg" alt="npm total downloads"/></a>
 <a href="https://npm.im/@agile-ts/multieditor">
-  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/multieditor.svg" alt="npm minified size"></a>
+  <img src="https://img.shields.io/bundlephobia/min/@agile-ts/multieditor.svg" alt="npm minified size"/></a>
 
 ## ⏰ Short Example
 ```ts