Merge pull request #364 from jdegand/typos-2

fix: more typos

docs/src/components/ActionButtonFooter.astro

@@ -36,13 +36,13 @@ import MyIcon from './MyIcon.astro';
         display: flex;
         flex-direction: column;
         gap: 0.7rem;
-         margin-bottom: 10px;
+        margin-bottom: 10px;
     }
 
     .button-sponsor {
         background-color: red;
         border-color: red;
-        color: write;
+        color: white;
     }
 
 </style>

docs/src/content/docs/challenges/angular/22-router-input.md

@@ -20,7 +20,6 @@ In this application, we retrieve three pieces of information inside our `TestCom
 In Angular versions 15 or earlier, we use `ActivatedRoute` to obtain all this information and receive them through observables to listen for URL changes.
 
 In version 16, Angular introduced a new `Input` that can listen to route data. You can read more about it [here](https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617).
-.
 
 ## Statement
 

docs/src/content/docs/challenges/angular/33-decoupling.md

@@ -17,11 +17,11 @@ WIP: The following documentation will be reviewed and improved. However, you can
 
 ## Information
 
-The goal of this challenge is to separate the behavior of a component from its style. For the purpose of this challenge, we will be working on a button element. When we click on it, we will toggle a _disabled_ property which will change the style of the element. This is quite useless in real life but the challenge aims to demonstate a useful concept.
+The goal of this challenge is to separate the behavior of a component from its style. For the purpose of this challenge, we will be working on a button element. When we click on it, we will toggle a _disabled_ property which will change the style of the element. This is quite useless in real life but the challenge aims to demonstrate a useful concept.
 
-The behavior of the component (referred to as the _brain_ in the Spartan stack) is located in the brain library. The styling part (referred to as the _helmet_) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separatly. To help us address the issue, we are using the Nx enforce eslint rule. You can find more details [here](https://nx.dev/core-features/enforce-module-boundaries);
+The behavior of the component (referred to as the _brain_ in the Spartan stack) is located in the brain library. The styling part (referred to as the _helmet_) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separately. To help us address the issue, we are using the Nx enforce eslint rule. You can find more details [here](https://nx.dev/core-features/enforce-module-boundaries);
 
-However the button's helmet needs to access the state of the component to style the button differently based on its state. As mention above, we cannot import the `BtnDisabledDirective` directly into the helmet library as done currently. If you go to [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), you will encounter a linting error. **A project tagged with "type:hlm" can only depend on libs tagged with "type:core"**.
+However the button's helmet needs to access the state of the component to style the button differently based on its state. As mention above, we cannot import the `BtnDisabledDirective` directly into the helmet library as done currently. If you go to [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), you will encounter a linting error. **A project tagged with `type:hlm` can only depend on libs tagged with `type:core`**.
 
 ## Statement
 

docs/src/content/docs/challenges/angular/4-context-outlet-typed.md

@@ -17,7 +17,7 @@ WIP: The following documentation will be reviewed and improved. However, you can
 
 Angular offer the static function **ngTemplateContextGuard** to strongly type structural directive.
 
-However the context of **NgTemplateOutlet** type is **Object**. But which the help of the above guard, we can improve that behavior.
+However the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior.
 
 ## Statement
 
@@ -41,4 +41,4 @@ Currently we have the following piece of code.
 
 As we can see, student is of type "any". We want to infer the correct type.
 
-But in this part, we can pass to ListComponent, a list of **any object**. And we still want the correct type to be infered.
+But in this part, we can pass to ListComponent, a list of **any object**. And we still want the correct type to be inferred.

docs/src/content/docs/challenges/angular/5-crud.md

@@ -14,21 +14,21 @@ WIP: The following documentation will be reviewed and improved. However, you can
 
 ## Information
 
-Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application.
+Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master these following best practises to build strong and reliable Angular Applications.
 
 ## Statement
 
-In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todo.
+In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
 
-Currently we have a working exemple but filled with lots of bad practices.
+Currently we have a working example but filled with lots of bad practices.
 
 ### Step 1: refactor with best practices
 
 What you will need to do:
 
 - Avoid **any** as a type. Using Interface to leverage Typescript type system prevent errors
 - Use a **separate service** for all your http calls and use a **BehaviourSubject** for your todoList
-- Use **AsyncPipe** to suscribe to your todo list. _(Let you handle subscription, unsuscription and refresh of the page when data has changed)_, avoir manual subscribe when it's not needed
+- Use **AsyncPipe** to subscribe to your todo list. _(Lets you handle subscription, unsubscription and refresh of the page when data has changed)_, avoid manual subscribe when it's not needed
 - Don't **mutate** data
 
 ```typescript
@@ -39,12 +39,12 @@ this.todos[todoUpdated.id - 1] = todoUpdated;
 this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
 ```
 
-- Use **ChangeDectection.OnPush**
+- Use **ChangeDetection.OnPush**
 
 ### Step 2: Improve
 
 - Add a **Delete** button: _<a href="https://jsonplaceholder.typicode.com/" target="_blank">Doc of fake API</a>_
-- Handle **errors** correctly. _(Globaly)_
+- Handle **errors** correctly. _(Globally)_
 - Add a Global **loading** indicator. _You can use MatProgressSpinnerModule_
 
 ### Step 3: Maintainability!! add some test
@@ -54,4 +54,4 @@ this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated]
 ### Step 4: Awesomeness!!! master your state.
 
 - Use the **component store of ngrx** as a local state of your component. _(or any other 3rd Party lib)_
-- Have a **localize** Loading/Error indicator, e.g. only on the Todo being processed and **disable** all buttons of the processed Todo. _(Hint: you will need to create an ItemComponent)_
+- Have a **localized** Loading/Error indicator, e.g. only on the Todo being processed and **disable** all buttons of the processed Todo. _(Hint: you will need to create an ItemComponent)_

docs/src/content/docs/challenges/ngrx/2-effect-selector.md

@@ -19,7 +19,7 @@ For this exercice, you will have a dashboard of activities displaying the name,
 
 In NgRx, **selectors** is a very powerful tool often **misused**. You should use them as soon as you need to transform an already existing data in the store.
 
-- You shouldn't store **derived state**. This is error prone because when your data change, you will have to change it at multiple places => you should have only one place of truth with that data, and every transformation should be done in a **selector**.
+- You shouldn't store **derived state**. This is error prone because when your data changes, you will have to change it at multiple places => you should have only one place of truth with that data, and every transformation should be done in a **selector**.
 
 - Inside a component, you shouldn't transform a selector (using map operator), or you shouldn't have to call a selector from a function in your view. The useful data for a component should be done in a **selector**.
 

docs/src/content/docs/challenges/ngrx/7-power-effect.md

@@ -18,9 +18,9 @@ NgRx Effect is a very powerful library develop by the NgRx team. Effects subscri
 
 But what we often forget is that Effects can subscribe to ANY observables. Which means we can wrap a hot observable inside an effect and had logic in it.
 
-In this exercice, we will find a way to create a very powerful, scalable and maintanable push messages listener. Currently, the code is located inside a single file with a if else condition to send the push data to the right location. This code is not very scalable since we need to add more and more else, and so not very maintanable since the piece of code will become bigger and bigger.
+In this exercice, we will find a way to create a very powerful, scalable and maintanable push messages listener. Currently, the code is located inside a single file with a if else condition to send the push data to the right location. This code is not very scalable since we need to add more and more else, and so not very maintainable since the piece of code will become bigger and bigger.
 
-Also, we load the whole file at startup even if we haven't load some part of the application (lazy loading); and so we don't need to listen or update that part of the store. We need to decouple that logic.
+Also, we load the whole file at startup even if we haven't loaded some part of the application (lazy loading); and so we don't need to listen or update that part of the store. We need to decouple that logic.
 
 ### Step 1
 

docs/src/content/docs/challenges/performance/37-ngfor-biglist.md

@@ -30,6 +30,6 @@ The goal of this challenge is to implement a better alternative to display big l
 <details>
   <summary>Hint 1</summary>
 
-If you're unsure where to begin, I recommend reading the [Angular CDK virtualization documentation](https://material.angular.io/cdk/scrolling/overview)
+If you're unsure where to begin, I recommend reading the [Angular CDK virtualization documentation](https://material.angular.io/cdk/scrolling/overview).
 
 </details>

docs/src/content/docs/challenges/testing/19-input-output.md

@@ -20,7 +20,7 @@ For testing cypress, you will execute your test inside the `child.component.cy.t
 
 # Statement
 
-The goal is to test multiple behaviors of the application describe inside each test files using Testing library and Cypress Component Testing.
+The goal is to test multiple behaviors of the application described inside each test file using Testing library and Cypress Component Testing.
 
 :::note
 I have created some `it` blocks but feel free to add more tests if you want.

docs/src/content/docs/challenges/testing/20-modal.md

@@ -18,13 +18,13 @@ The goal of this challenge is to test the dialogs inside your application. To do
 
 You can play with it by running : `npx nx serve testing-modal`.
 
-The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
+The file named `app.component.spec.ts` will let you test your application using Testing Library. To run the test suites, you need to run `npx nx test testing-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
 
-For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test testing-modal` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
+For testing with Cypress, you will execute your test inside `app.component.cy.ts` and run `npx nx component-test testing-modal` to execute your test suites. You can add the `--watch` flag to execute your test in watch mode.
 
 # Statement
 
-The goal is to test multiple behaviors of the application describe inside each test files using Testing library and Cypress Component Testing.
+The goal is to test multiple behaviors of the application described inside each test file using Testing library and Cypress Component Testing.
 
 :::note
 I have created some `it` blocks but feel free to add more tests if you want.

docs/src/content/docs/challenges/testing/23-harness.md

@@ -20,5 +20,5 @@ The goal is to test the functionality of `child.component.ts`. I have prepared a
 
 **Note:** You are welcome to use Testing Library if you wish.
 
-Documentation for CDK Component Harness is [here](https://material.angular.io/cdk/test-harnesses/overview#api-for-test-authors)
-Documentation for Angular Material component is [here](https://material.angular.io/components/button/overview)
+Documentation for CDK Component Harness is [here](https://material.angular.io/cdk/test-harnesses/overview#api-for-test-authors).
+Documentation for Angular Material component is [here](https://material.angular.io/components/button/overview).

docs/src/content/docs/challenges/testing/24-harness-creation.md

@@ -43,6 +43,6 @@ Additionally, you should create a `HarnessPredicate` with the default predicate
 
 Lastly, you will need to create the test suite for `app.component`. Some default tests have already been written, but feel free to add as many tests as you want and create as many harness methods as you need.
 
-> Angular Material documentation can be found [here](https://material.angular.io/cdk/test-harnesses/overview)
+> Angular Material documentation can be found [here](https://material.angular.io/cdk/test-harnesses/overview).
 
 Good luck !!! 💪

docs/src/content/docs/index.mdx

@@ -43,7 +43,7 @@ import MyIcon from '../../components/MyIcon.astro';
   challenges provides real-world use cases to apply what you've been learning.
   Anyone can comment or offer assistance.
   <b>
-    Learning alone is great, but learning alongside others will get you farer.
+    Learning alone is great, but learning alongside others will get you further.
   </b>
 </Card>