Develop

docs/examples/Indroduction.md

@@ -1,13 +1,13 @@
 ---
 id: introduction
-title: Introduction
+title: Examples
 sidebar_label: Introduction
 slug: /examples
 ---
 
 Most of the time you can learn something better by seeing it in action.
 That's why we've put together a few examples for you. 
-If that's not enough for you, we have more examples in the [AgileTs repository](https://github.com/agile-ts/agile/tree/master/examples).
+If that's not enough, you can find even more examples in the [AgileTs repository](https://github.com/agile-ts/agile/tree/master/examples).
 
 ## 🚀 Quick Links
 - [React](./react/All.mdx)

docs/packages/core/features/agile-instance/Introduction.md

@@ -47,8 +47,8 @@ new Agile({
     localStorage: false
 });
 ```
-Here is a Typescript Interface for quick reference, however
-each property will be explained in more detail below.
+Here is a Typescript Interface for quick reference. However,
+each property is explained in more detail below.
 ```ts
 export interface CreateAgileConfigInterface {
   logConfig?: CreateLoggerConfigInterface;

docs/packages/core/features/collection/Introduction.md

@@ -193,8 +193,8 @@ There are two different ways of configuring a Collection. Both have their advant
      }))
      ```
 
-Here is a Typescript Interface of the configuration object for quick reference,
-however each property will be explained in more detail below.
+Here is a Typescript Interface for quick reference. However,
+each property is explained in more detail below.
 ```ts
 export interface CreateCollectionConfigInterface<DataType = DefaultItem> {
   groups?: { [key: string]: Group<any> } | string[];

docs/packages/core/features/collection/Methods.md

@@ -63,7 +63,7 @@ The `itemKeys` which the Group initially represents are passed as a first parame
 ```ts
 collection.Group(["item1", "item2"]);
 ```
-The object key will be used as `groupKey`, if we don't pass a separate key into the Group `config`.
+The object key is used as `groupKey`, if we don't pass a separate key into the Group `config`.
 ```ts {3,9}
 App.createCollection((collection) => ({
     groups: {
@@ -122,7 +122,7 @@ The `itemKey` of the Item which the Selector initially represents is passed as a
 ```ts
 collection.Selector("item1");
 ```
-The object key will be used as `selectorKey`, if we don't pass a separate key into the Selector `config`.
+The object key is used as `selectorKey`, if we don't pass a separate key into the Selector `config`.
 ```ts {3,9}
 App.createCollection((collection) => ({
     selectors: {
@@ -214,12 +214,12 @@ Be aware that each data needs one `primaryKey` to be correctly identified later.
 MY_COLLECTION.collect({id: 1, name: "jeff"});
 ```
 In the above example, the `primaryKey` property is `id`,
-so '1' will be the unique identifier (`primaryKey`) of the collected data.
+so '1' is the unique identifier (`primaryKey`) of the collected data.
 We can also collect multiple data objects at once.
 ```ts
 MY_COLLECTION.collect([{id: 9, name: "hans"}, {id: 22, name: "frank"}]);
 ```
-Each collected data will be transformed to an extension of the `State Class` called [`Item`](./Introduction.md/#-Item).
+Each collected data is transformed to an extension of the `State Class` called [`Item`](./Introduction.md/#-Item).
 All Items are directly stored in the Collection.
 ```ts
 {
@@ -240,7 +240,7 @@ If we pass a key that belongs to a not existing Group,
 the `collect()` method takes care of creating this Group.
 For example, if we assume that the Group with the `groupKey` 'group1' doesn't exist yet.
 Then a Group with the initial `itemKeys` '[1]'
-and the `groupKey` 'group1' will be created by the Collection.
+and the `groupKey` 'group1' is created by the Collection.
 ```ts
 // Groups of Collection
 {
@@ -308,16 +308,16 @@ MY_COLLECTION.update(1, {name: "frank"});
 MY_COLLECTION.getItem(1); // Returns '{id: 1, name: "frank"}'
 ```
 Therefore, we pass the `primary Key` of the Item, which should be updated as the first parameter.
-And specify as the second parameter the data object that will be merged into the found Item data by default.
+And specify as the second parameter the data object that is merged into the found Item data by default.
 
 ### 🌪 Overwrite Data
 In order to overwrite the entire Item data with the passed data object, we set `patch` to `false` in the configuration object.
 The configuration object can be passed as a third parameter.
 ```ts
 MY_COLLECTION.update(1, {id: 1, name: 'hans'}, {patch: false});
 ```
-Because the changes are not merged into the Item data, we have to redefine the `primaryKey` in the given data object.
-Otherwise, the `primary Key` is missing, which leads to problems.
+Because the changes are not merged into the Item data anymore, we have to redefine the `primaryKey` in the given data object.
+Otherwise, the `primary Key` gets missing, which can lead to problems.
 
 ### ❓ Deepmerge
 Unfortunately, the `update()` method doesn't support `deep merges` yet.
@@ -1146,7 +1146,7 @@ We can also add multiple `itemKeys` to multiple Groups at once.
 ```ts
 MY_COLLECTION.put(['itemKey1', 'itemKey2', 'itemKey3'], ['groupKey1', 'groupKey2']);
 ```
-Now `itemKey1`, `itemKey2`, `itemKey3` will be added to the Groups at `groupKey1` and `groupKey2`.
+Now `itemKey1`, `itemKey2`, `itemKey3` are added to the Groups at `groupKey1` and `groupKey2`.
 
 ### 📭 Props
 

docs/packages/core/features/collection/group/Introduction.md

@@ -159,13 +159,13 @@ const MY_GROUP = App.createGroup([1, 2, 3], {
 
 MY_GROUP.exists(); // false
 ```
-Groups are, for example, `placeholder` when AgileTs needs to hold a reference to them,
+Groups are `placeholder` when AgileTs needs to hold a reference to them,
 even though they aren't instantiated yet.
-This may be the case if we use the `getGroupWithReference()` method,
-which returns a `placeholder` Group, if the Group doesn't exist, to hold a reference.
+This can be the case if we use the `getGroupWithReference()` method,
+which returns a `placeholder` Group if the Group we are looking for doesn't exist yet.
 ```ts
 const myGroup = useAgile(MY_COLLECTION.getGroupWithReference("group1")); // Causes rerender if Group got created
-const myGroup2 = useAgile(MY_COLLECTION.getGroup("group2")); // Doesn't Causes rerender if Group got created
+const myGroup2 = useAgile(MY_COLLECTION.getGroup("group2")); // Doesn't causes rerender if Group got created
 ```
 This reference is essential to rerender the Component,
 whenever the Group got instantiated.

docs/packages/core/features/collection/selector/Introduction.md

@@ -137,13 +137,13 @@ const MY_SELECTOR = App.creaateSelector(1, {
 
 MY_SELECTOR.exists(); // false
 ```
-Selectors are, for example, `placeholder` when AgileTs needs to hold a reference to them,
+Selectors are `placeholder` when AgileTs needs to hold a reference to them,
 even though they aren't instantiated yet.
-This may be the case if we use the `getSelectorWithReference()` method,
-which returns a `placeholder` Selector, if the Selector doesn't exist, to hold a reference.
+This can be the case if we use the `getSelectorWithReference()` method,
+which returns a `placeholder` Selector if the Selector we are looking for doesn't exist yet.
 ```ts
 const mySeleector = useAgile(MY_COLLECTION.getSelectorWithReference("selector1")); // Causes rerender if Selector got created
-const mySeleector2 = useAgile(MY_COLLECTION.getSelector("selector2")); // Doesn't Causes rerender if Selector got created
+const mySeleector2 = useAgile(MY_COLLECTION.getSelector("selector2")); // Doesn't causes rerender if Selector got created
 ```
 This reference is essential to rerender the Component,
 whenever the Selector got instantiated.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "agile-docs",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -21,11 +21,11 @@
     "@agile-ts/core": "^0.0.14",
     "@agile-ts/event": "^0.0.4",
     "@agile-ts/react": "^0.0.15",
-    "@docusaurus/core": "^2.0.0-alpha.73",
-    "@docusaurus/module-type-aliases": "^2.0.0-alpha.73",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.73",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-alpha.73",
-    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.73",
+    "@docusaurus/core": "^2.0.0-alpha.74",
+    "@docusaurus/module-type-aliases": "^2.0.0-alpha.74",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.74",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-alpha.74",
+    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.74",
     "@mdx-js/react": "^1.6.21",
     "@tsconfig/docusaurus": "^1.0.2",
     "clsx": "^1.1.1",

src/css/custom.scss

@@ -354,18 +354,6 @@ body {
   }
 }
 
-// ==============================================================================
-// Navbar
-// ==============================================================================
-
-.navbar__link::after {
-  transform: translate(0) !important; // Fixes the not centered drop down icon
-}
-
-.navbar__item:not(:last-child) {
-  margin-right: 10px;
-}
-
 /* https://codyhouse.co/blog/post/dark-light-switch-css-javascript */
 [data-theme='dark'] {
   // ==============================================================================