From d2035864ec4f1e46ea661c7db924d5a9df20aece Mon Sep 17 00:00:00 2001 From: thomas Date: Sat, 16 Dec 2023 15:59:24 +0100 Subject: [PATCH] feat: improve docs --- .github/workflows/close-inactive-pr.yml | 2 ++ .../docs/challenges/angular/10-pipe-utility.md | 6 +----- .../content/docs/challenges/angular/13-styling.md | 6 +----- docs/src/content/docs/challenges/angular/16-di.md | 8 ++------ .../docs/challenges/angular/21-achor-scrolling.md | 4 ---- .../challenges/angular/3-directive-enhancement.md | 2 +- .../challenges/angular/30-interop-rxjs-signal.md | 12 +++++------- .../challenges/angular/31-module-to-standalone.md | 12 ++++++------ .../content/docs/challenges/angular/32-bug-cd.md | 4 ---- .../docs/challenges/angular/33-decoupling.md | 4 ---- .../challenges/angular/4-context-outlet-typed.md | 6 +----- docs/src/content/docs/challenges/angular/5-crud.md | 11 ++--------- .../docs/challenges/angular/6-permissions.md | 14 +++++--------- .../content/docs/challenges/angular/8-pipe-pure.md | 6 +----- .../docs/challenges/angular/9-pipe-wrapFn.md | 10 ++-------- .../docs/challenges/ngrx/2-effect-selector.md | 4 ---- .../content/docs/challenges/ngrx/7-power-effect.md | 4 ---- .../docs/challenges/nx/25-generator-lib-ext.md | 4 ---- .../docs/challenges/nx/26-generator-comp.md | 8 +++----- .../docs/challenges/nx/27-forbid-enum-rule.md | 4 ---- .../docs/challenges/performance/35-memoize.md | 2 -- .../challenges/rxjs/11-bug-chaining-operator.md | 8 ++------ .../docs/challenges/rxjs/14-race-condition.md | 4 ---- .../content/docs/challenges/testing/23-harness.md | 4 ---- .../docs/challenges/testing/24-harness-creation.md | 4 ---- .../docs/challenges/typescript/15-overload-fn.md | 4 ---- docs/src/content/docs/index.mdx | 2 -- 27 files changed, 34 insertions(+), 125 deletions(-) diff --git a/.github/workflows/close-inactive-pr.yml b/.github/workflows/close-inactive-pr.yml index 19a62db15..d92c25cdb 100644 --- a/.github/workflows/close-inactive-pr.yml +++ b/.github/workflows/close-inactive-pr.yml @@ -16,10 +16,12 @@ jobs: days-before-issue-close: -1 stale-issue-label: 'stale' stale-issue-message: 'This issue is stale because it has been open for 20 days with no activity.' + exempt-issue-labels: 'long-term' days-before-pr-stale: 20 days-before-pr-close: 7 stale-pr-label: 'stale' stale-pr-message: 'This pull request is stale because it has been open for 20 days with no activity.' close-pr-message: 'This pull request was closed because it has been inactive for 7 days since being marked as stale.' only-pr-labels: 'answer' + exempt-pr-labels: 'challenge-creation, long-term' repo-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index 48dbf91d4..f8688ddfb 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -8,11 +8,7 @@ sidebar: order: 202 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - -The goal of this series of 3 pipe challenges is to master PIPES in Angular. +The goal of this series of 3 pipe challenges is to master **pipe** in Angular. Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. diff --git a/docs/src/content/docs/challenges/angular/13-styling.md b/docs/src/content/docs/challenges/angular/13-styling.md index bbc34fcbf..fa38f8ba8 100644 --- a/docs/src/content/docs/challenges/angular/13-styling.md +++ b/docs/src/content/docs/challenges/angular/13-styling.md @@ -8,13 +8,9 @@ sidebar: order: 104 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information -Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic; and other techniques, such as CSS variables and host-context, should be used for styling. +Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic. Other techniques, such as **CSS variables** and **host-context** should be used for styling. In this challenge, you will need to use both CSS variables and `:host-context` to remove all `@Input()` from your code. diff --git a/docs/src/content/docs/challenges/angular/16-di.md b/docs/src/content/docs/challenges/angular/16-di.md index c5ff17f71..015797047 100644 --- a/docs/src/content/docs/challenges/angular/16-di.md +++ b/docs/src/content/docs/challenges/angular/16-di.md @@ -8,17 +8,13 @@ sidebar: order: 203 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information To successfully complete this challenge, you will need to have a good understanding of how Dependency Injection works inside Angular. -The goal is to provide the CurrencyService at the row level, so that each row displays the correct currency. Currently, the CurrencyService is only provided at the table level, which results in an error as the same currency is displayed for each row, despite each product having a different currency. +The goal is to provide the `CurrencyService` at the row level, so that each row displays the correct currency. Currently, the `CurrencyService` is only provided at the table level, which results in an error as the same currency is displayed for each row, despite each product having a different currency. -One way to achieve this is by adding a second argument to the pipe, but this is not allowed. +One way to achieve this is by adding a second argument to the pipe, but this is not allowed for this challenge. ## Statement diff --git a/docs/src/content/docs/challenges/angular/21-achor-scrolling.md b/docs/src/content/docs/challenges/angular/21-achor-scrolling.md index 33782d501..fb2f693ab 100644 --- a/docs/src/content/docs/challenges/angular/21-achor-scrolling.md +++ b/docs/src/content/docs/challenges/angular/21-achor-scrolling.md @@ -8,10 +8,6 @@ sidebar: order: 4 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information You begin with an application that has basic navigation and anchor navigation in the `HomeComponent`. However, using `href` recreates the path each time and refreshes the page. diff --git a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md index bccac62de..41a0cadb9 100644 --- a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md +++ b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md @@ -10,7 +10,7 @@ sidebar: --- :::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. +This exercice can feel obsolete with the new control flow and the empty block inside the `@for` block. However **structural directives** are not going to be deleted any time soon, so you can still learn a lot from this exercice. ::: ## Information diff --git a/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md b/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md index a24aad69e..67d84b42f 100644 --- a/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md +++ b/docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md @@ -8,14 +8,12 @@ sidebar: order: 204 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - -
Challenge #30
- ## Information -In this challenge, we have a small reactive application using RxJS and NgRx/Component-Store. +In this challenge, we have a small reactive application using **RxJS** and **NgRx/Component-Store**. The goal of this challenge is to use the new **Signal API** introduced in Angular v16. However, we should not convert everything. Certain portions of the code are better suited for RxJS rather than Signal. It is up to you to determine the threshold and observe how **Signal and RxJS coexist**, as well as how the interoperability is achieved in Angular. + +## Note + +- You can use any third party library if you want to like **ngrx/signal-store**, **tanstack-query** or **rxAngular**. diff --git a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md index ada66b8d9..0d7f77ace 100644 --- a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md +++ b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md @@ -8,20 +8,20 @@ sidebar: order: 6 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information In v14, standalone components were released and made stable in v15. If you haven't played with them, it's never too late. You can try them out in this challenge. -Moreover, the goal is to see how Nx and standalone components work together, and experience the process of decoupling your app with Nx lib and standalone components. +Moreover, the goal is to see how **Nx** and **standalone components** work together, and experience the process of decoupling your app with Nx lib and standalone components. -Finally, standalone components are very simple to understand, but routing/lazy-loaded components can be a bit harder to grasp. This challenge will allow you to manipulate components at different levels of nesting and work with lazy loaded routes. +Finally, standalone components are very simple to understand, but **routing/lazy-loaded components** can be a bit harder to grasp. This challenge will allow you to manipulate components at different levels of nesting and work with lazy loaded routes. After completing this challenge, standalone components will no longer hold any secrets for you. ## Statement The goal of this challenge is to migrate your application from module based components to standalone components. + +## Note + +You can also test the [Angular schematic](https://angular.io/guide/standalone-migration) to migrate NgModule to Standalone components. _(Since we are using nx, start your command with nx instead of ng)_ diff --git a/docs/src/content/docs/challenges/angular/32-bug-cd.md b/docs/src/content/docs/challenges/angular/32-bug-cd.md index 42adee010..f4a424c78 100644 --- a/docs/src/content/docs/challenges/angular/32-bug-cd.md +++ b/docs/src/content/docs/challenges/angular/32-bug-cd.md @@ -9,10 +9,6 @@ sidebar: order: 105 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - :::note This challenge is inspired by a real-life example that I simplified to create this nice challenge. ::: diff --git a/docs/src/content/docs/challenges/angular/33-decoupling.md b/docs/src/content/docs/challenges/angular/33-decoupling.md index f80bc7bab..78bf04086 100644 --- a/docs/src/content/docs/challenges/angular/33-decoupling.md +++ b/docs/src/content/docs/challenges/angular/33-decoupling.md @@ -8,10 +8,6 @@ sidebar: order: 106 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - > Big thanks to **Robin Goetz** and his [Spartan Project](https://github.com/goetzrobin/spartan). > This challenge was proposed by Robin and is strongly inspired by his project. diff --git a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md index c46e61c6c..43f8a2d95 100644 --- a/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md +++ b/docs/src/content/docs/challenges/angular/4-context-outlet-typed.md @@ -9,13 +9,9 @@ sidebar: order: 201 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information -Angular offer the static function **ngTemplateContextGuard** to strongly type structural directive. +Angular offer the static function [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) to strongly type structural directive. However the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior. diff --git a/docs/src/content/docs/challenges/angular/5-crud.md b/docs/src/content/docs/challenges/angular/5-crud.md index 881fff3d5..dfc909fbc 100644 --- a/docs/src/content/docs/challenges/angular/5-crud.md +++ b/docs/src/content/docs/challenges/angular/5-crud.md @@ -8,10 +8,6 @@ sidebar: order: 2 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information 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. @@ -27,8 +23,7 @@ Currently we have a working example but filled with lots of bad 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 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 +- Use a **separate service** for all your http calls and use a **Signal** for your todoList - Don't **mutate** data ```typescript @@ -39,8 +34,6 @@ this.todos[todoUpdated.id - 1] = todoUpdated; this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated]; ``` -- Use **ChangeDetection.OnPush** - ### Step 2: Improve - Add a **Delete** button: _Doc of fake API_ @@ -53,5 +46,5 @@ 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)_ +- Use the **component store of ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** or **ngrx/signal-store** as a local state of your component. - 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)_ diff --git a/docs/src/content/docs/challenges/angular/6-permissions.md b/docs/src/content/docs/challenges/angular/6-permissions.md index e7360a774..2524c2cf7 100644 --- a/docs/src/content/docs/challenges/angular/6-permissions.md +++ b/docs/src/content/docs/challenges/angular/6-permissions.md @@ -9,10 +9,6 @@ sidebar: order: 102 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information Structural directive is an important concept you will need to master to improve your angular skills and knowledge. This will be the first part of this challenge. @@ -21,7 +17,7 @@ Guard is also very important since you will always need it in every application ## Statement -In LoginComponent, you will find 6 buttons corresponding at 6 differents users. +In LoginComponent, you will find 6 buttons corresponding to 6 differents user's role. - Admin - Manager @@ -33,12 +29,12 @@ In LoginComponent, you will find 6 buttons corresponding at 6 differents users. ## Step 1 -In **InformationComponent**, display the correct piece of information for each role. +In `InformationComponent`, you need to display the correct piece of information for each role using a structural directive. ### Constraints: -- no ngIf directive inside **InformationComponent** -- importing the store inside **InformationComponent** is not allowed. +- no `ngIf` of `@if` inside `InformationComponent` +- importing the store inside `InformationComponent` is not allowed. You should end up with something like below: @@ -56,4 +52,4 @@ You should end up with something like below: ## Step 2 -In **Routes.ts**, route all user to the correct **DashboardComponent** using **CanMatch** guard. +In `Routes.ts`, you should route all users to the correct `DashboardComponent` using `CanMatch` guard. diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 539ae8a60..384b0af9a 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -9,11 +9,7 @@ sidebar: order: 3 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - -The goal of this series of 3 pipe challenges is to master PIPES in Angular. +The goal of this series of 3 pipe challenges is to master **pipe** in Angular. Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index 7b2dd2673..a50aa09a9 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -9,20 +9,14 @@ sidebar: order: 103 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - -
Challenge #9
- -The goal of this series of 3 pipe challenges is to master PIPES in Angular. +The goal of this series of 3 pipe challenges is to master **pipe** in Angular. Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. ## Information: In this second exercice, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome. -The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. `WrapFn` must be highly reusable. +The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. **`WrapFn` must be highly reusable.** ## Constraints: diff --git a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md index 5d376886d..f571bbf7f 100644 --- a/docs/src/content/docs/challenges/ngrx/2-effect-selector.md +++ b/docs/src/content/docs/challenges/ngrx/2-effect-selector.md @@ -9,10 +9,6 @@ sidebar: order: 113 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - For this exercice, you will have a dashboard of activities displaying the name, the main teacher and a list of subtitutes. ## Information diff --git a/docs/src/content/docs/challenges/ngrx/7-power-effect.md b/docs/src/content/docs/challenges/ngrx/7-power-effect.md index 0ca35feba..678540231 100644 --- a/docs/src/content/docs/challenges/ngrx/7-power-effect.md +++ b/docs/src/content/docs/challenges/ngrx/7-power-effect.md @@ -8,10 +8,6 @@ sidebar: order: 206 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information NgRx Effect is a very powerful library developed by the NgRx team. Effects subscribe to a HOT Observable and listen to any event dispatched from any place inside the application. diff --git a/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md b/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md index 7c202865e..5119fc627 100644 --- a/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md +++ b/docs/src/content/docs/challenges/nx/25-generator-lib-ext.md @@ -7,10 +7,6 @@ sidebar: order: 207 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information Welcome to the marvelous world of Nx generators. diff --git a/docs/src/content/docs/challenges/nx/26-generator-comp.md b/docs/src/content/docs/challenges/nx/26-generator-comp.md index f8bf8aab2..8cc694529 100644 --- a/docs/src/content/docs/challenges/nx/26-generator-comp.md +++ b/docs/src/content/docs/challenges/nx/26-generator-comp.md @@ -7,10 +7,6 @@ sidebar: order: 116 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information Welcome to the marvelous world of Nx generators. @@ -41,7 +37,9 @@ Just below, you will have the end result of your generator for a `UserComponent` standalone: true, imports: [LetDirective], providers: [provideComponentStore(UserStore)], - template: ` // do things `, + template: ` + // do things + `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class UserComponent { diff --git a/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md b/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md index 8d69e939c..5748b0d40 100644 --- a/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md +++ b/docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md @@ -7,10 +7,6 @@ sidebar: order: 12 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information Eslint is an amazing tool that helps developers avoid simple mistakes and adhere to company style guides. diff --git a/docs/src/content/docs/challenges/performance/35-memoize.md b/docs/src/content/docs/challenges/performance/35-memoize.md index d0ebbda2c..f9a2cd88b 100644 --- a/docs/src/content/docs/challenges/performance/35-memoize.md +++ b/docs/src/content/docs/challenges/performance/35-memoize.md @@ -8,8 +8,6 @@ sidebar: order: 8 --- -
Challenge #35
- ## Information In Angular, pure Pipes are very powerful because the value is memoized, which means if the input value doesn't change, the `transform` function of the pipe is not recomputed, and the cached value is outputted. diff --git a/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md b/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md index 1ab0e466a..dcebd6751 100644 --- a/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md +++ b/docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md @@ -8,15 +8,11 @@ sidebar: order: 114 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - Let's dive inside the wonderful word of RxJs. This challenge is inspired by a real-life example. -## Presentation of the challenge +## Information ### User Story @@ -26,7 +22,7 @@ We need a button for each `Topic`. When we click on it, we delete all objects wi We can only pass one object to our DB for deletion at the time. The DB will respond true if the data was successfully deleted and false otherwise. -### What you need to do +### Statement The QA team reports a **bug**. The UI shows **All [topic] have been deleted** all the time, even if some deletions fail. diff --git a/docs/src/content/docs/challenges/rxjs/14-race-condition.md b/docs/src/content/docs/challenges/rxjs/14-race-condition.md index d8441b74b..bc5cafa37 100644 --- a/docs/src/content/docs/challenges/rxjs/14-race-condition.md +++ b/docs/src/content/docs/challenges/rxjs/14-race-condition.md @@ -8,10 +8,6 @@ sidebar: order: 11 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information The goal of this application is to display a list of topics in a modal when a button is clicked. The application functions correctly. However, your tech lead has asked you to add tests and they are failing. diff --git a/docs/src/content/docs/challenges/testing/23-harness.md b/docs/src/content/docs/challenges/testing/23-harness.md index a2f62080b..5ea983483 100644 --- a/docs/src/content/docs/challenges/testing/23-harness.md +++ b/docs/src/content/docs/challenges/testing/23-harness.md @@ -8,10 +8,6 @@ sidebar: order: 9 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Statement: The objective of this challenge is to have a better understanding of the CDK test harness API. In this initial challenge, we will only use Angular Material's built-in harnesses. diff --git a/docs/src/content/docs/challenges/testing/24-harness-creation.md b/docs/src/content/docs/challenges/testing/24-harness-creation.md index 083bc8597..acfbc86b9 100644 --- a/docs/src/content/docs/challenges/testing/24-harness-creation.md +++ b/docs/src/content/docs/challenges/testing/24-harness-creation.md @@ -8,10 +8,6 @@ sidebar: order: 112 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information The goal of this challenge is to create a test harness for `slider.component.ts`. The harness file, `slider.harness.ts`, has already been created. diff --git a/docs/src/content/docs/challenges/typescript/15-overload-fn.md b/docs/src/content/docs/challenges/typescript/15-overload-fn.md index 4b5d98447..4f629ed8c 100644 --- a/docs/src/content/docs/challenges/typescript/15-overload-fn.md +++ b/docs/src/content/docs/challenges/typescript/15-overload-fn.md @@ -9,10 +9,6 @@ sidebar: order: 115 --- -:::note -WIP: The following documentation will be reviewed and improved. However, you can still take on the challenge. If you don't understand a certain part, please feel free to reach out or create an issue. -::: - ## Information Angular uses TypeScript, and mastering TypeScript can help you avoid runtime errors by catching them at compile time. diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 8cc1ae617..d0d2a1ce4 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -3,8 +3,6 @@ title: Welcome to Angular Challenges description: Get started by resolving those challenges and becoming a better Angular FrontEnd engineer. template: splash noCommentSection: true -banner: - content: I will have less free time in the next two months, so don't worry if your pull requests take some time to be reviewed. hero: tagline: Start now and become an Angular Expert! image: