vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs(docs): update docs and set up all pages

Browse Source
This commit is contained in:
thomas
2023-09-21 22:05:04 +02:00
parent a7b3a583b5
commit 8cc10c84a7
43 changed files with 246 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: 🟠 Optimize Change Detection
description: Challenge 12 about optimizing the number of change detection cycle while scrolling
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/scroll-cd/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular-performance/32-bug-cd.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: 🟠 Change Detection Bug
description: Challenge 32 is about debugging an application that has issue when change detection is triggered
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/bug-cd/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular-performance/34-default-onpush.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Default vs OnPush
description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy.
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/performance/default-onpush/README.md) if you want to do this challenge
:::

6
docs/src/content/docs/challenges/angular/1-projection.md
View File

@@ -1,8 +1,12 @@
---
title: 🟢 Projection
description: angular-challenge-1/projection
description: Challenge 1 is about learning how to project DOM element through components
---
:::note
WIP: go [here]() if you want to do this challenge
:::
> Challenge #1
## Statement

8
docs/src/content/docs/challenges/angular/10-pipe-utility.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: 🔴 Utility Wrapper Pipe
description: Challenge 10 is about creating a pipe to wrap utilities
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/pipe-hard/README.md) if you want to do this challenge
:::

4
docs/src/content/docs/challenges/angular/10-pipe-wrapFn.md
View File

@@ -1,4 +0,0 @@
---
title: TODO in progress
description: Guide to submit an answer
---

4
docs/src/content/docs/challenges/angular/12-scroll-cd.md
View File

@@ -1,4 +0,0 @@
---
title: TODO in progress
description: Guide to submit an answer
---

8
docs/src/content/docs/challenges/angular/13-styling.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Highly Customizable CSS
description: Challenge 13 is about creating highly customizable CSS styles
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/styling/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/16-di.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🔴 Master Dependancy Injection
description: Challenge 16 is about masjering how dependancy injection works
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/di/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/21-achor-scrolling.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Anchor Navigation
description: Challenge 21 is about navigating inside the page with anchor
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/anchor-scrolling/README.md) if you want to do this challenge
:::

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

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 @RouterInput()
description: Challenge 22 is about using the @Input decorator to retreive router params.
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/router-input/README.md) if you want to do this challenge
:::

6
docs/src/content/docs/challenges/angular/3-directive-enhancement.md
View File

@@ -1,4 +1,8 @@
---
title: 🟠 Directive Enhancement
description: Guide to submit an answer
description: Challenge 3 is about enhancing a built-in directive
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/ngfor-enhancement/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/30-interop-rxjs-signal.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🔴 Interoperability Rxjs/Signal
description: Challenge 30 is about learning how to mix signal with Rxjs
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/interop-rxjs-signal/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/31-module-to-standalone.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Module to Standalone
description: Challenge 31 is about migrating a module based application to a standalone application.
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/module-to-standalone/README.md) if you want to do this challenge
:::

4
docs/src/content/docs/challenges/angular/32-bug-cd.md
View File

@@ -1,4 +0,0 @@
---
title: TODO in progress
description: Guide to submit an answer
---

8
docs/src/content/docs/challenges/angular/33-decoupling.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Decoupling Components
description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/decoupling/README.md) if you want to do this challenge
:::

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

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🔴 Typed ContextOutlet
description: Challenge 4 is about strongly typing ngContextOutlet directives
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/context-outlet-type/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/5-crud.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Crud application
description: Challenge 5 is about refactoring a crud application
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/crud/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/6-permissions.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Structural Directive
description: Challenge 6 is about creating a structural directive to handle permissions
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/permissions/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/angular/8-pipe-pure.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Pure Pipe
description: Challenge 8 is about creating a pure pipe
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/pipe-easy/README.md) if you want to do this challenge
:::

4
docs/src/content/docs/challenges/angular/9-pipe-utility.md
View File

@@ -1,4 +0,0 @@
---
title: TODO in progress
description: Guide to submit an answer
---

8
docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: 🟠 Wrap Function Pipe
description: Challenge 9 is about creating a pipe to wrap component fonctions
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/pipe-intermediate/README.md) if you want to do this challenge
:::

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

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Effect vs Selector
description: Challenge 2 is about learning the difference between effects and selectors in NgRx
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/ngrx-1/README.md) if you want to do this challenge
:::

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

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🔴 Power of Effect
description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/ngrx-notification/README.md) if you want to do this challenge
:::

4
docs/src/content/docs/challenges/nx/25-forbid-enum-rule.md
View File

@@ -1,4 +0,0 @@
---
title: TODO in progress
description: Guide to submit an answer
---

8
docs/src/content/docs/challenges/nx/25-generator-lib-ext.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: 🔴 Extend Lib Generator
description: Challenge 25 is about creating a Nx generator to extend the built-in Library Generator
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/libs/custom-plugin/src/generators/custom-library/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/nx/26-generator-comp.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Component Generator
description: Challenge 26 is about creating a Nx generator to create a custom component
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/libs/custom-plugin/src/generators/feature-component/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: 🟢 Custom Eslint Rule
description: Challenge 27 is about creating a custom Eslint Rule to forbid enums
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges) if you want to do this challenge
:::

4
docs/src/content/docs/challenges/nx/27-generator-lib-ext.md
View File

@@ -1,4 +0,0 @@
---
title: TODO in progress
description: Guide to submit an answer
---

8
docs/src/content/docs/challenges/rxjs/11-bug-chaining-operator.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 High Order Operator Bug
description: Challenge 11 is about resolving a Rxjs bug because of high order operators
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/rxjs-pipe-bug/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/rxjs/14-race-condition.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Race Condition
description: Challenge 14 is about race condition in Rxjs
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/rxjs-race-condition/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/testing/17-router.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Router
description: Challenge 17 is about testing the router
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-router-outlet/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/testing/18-nested-comp.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Nested Components
description: Challenge 18 is about testing nested components
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-nested/README.md) if you want to do this challenge
:::

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

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Input Output
description: Challenge 19 is about testing inputs and ouputs
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-input-output/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/testing/20-modal.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Modal
description: Challenge 20 is about testing modals
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-modal/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/testing/23-harness.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Harness
description: Challenge 23 is about testing with component harnesses
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-harness/README.md) if you want to do this challenge
:::

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

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Harness Creation
description: Challenge 24 is about creating a component harness.
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/create-harness/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/testing/28-checkbox.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟢 Checkbox
description: Challenge 28 is about testing a simple checkbox
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-checkbox/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/testing/29-real-application.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🔴 Real-life Application
description: Challenge 29 is about testing a real-life application
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/testing-todos-list/README.md) if you want to do this challenge
:::

8
docs/src/content/docs/challenges/typescript/15-overload-fn.md
View File

@@ -1,4 +1,8 @@
---
title: TODO in progress
description: Guide to submit an answer
title: 🟠 Function Overload
description: Challenge 15 is about creating overload functions
---
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/overload/README.md) if you want to do this challenge
:::

4
docs/src/content/docs/guides/contribute.md
View File

@@ -4,3 +4,7 @@ description: Guide to contribute
sidebar:
order: 4
---
:::note
WIP:
:::

6
docs/src/content/docs/guides/create-challenge.md
View File

@@ -1,6 +1,10 @@
---
title: Create a challenge
title: Create your own challenge
description: Guide to create your own challenge
sidebar:
order: 5
---
:::note
WIP:
:::

46
docs/src/content/docs/guides/resolve-challenge.md
View File

@@ -7,22 +7,22 @@ sidebar:
In this guide, you will learn how to resolve a challenge and submit an answer to the main Github repository.
## Presentation
## Introduction
This repository is powered by [Nx](https://nx.dev/getting-started/intro). **Nx** is a monorepository allowing to store multiple application inside the same workspace. That's said, each challenges is a separate application. If you open the `apps` directory, you will found multiple directory all related to one challenge. Each directory is a complete standalone `Nx` application. To run and start with one, open your terminal and run
This repository is powered by [Nx](https://nx.dev/getting-started/intro). <b>Nx</b> is a monorepository that allows you to store multiple applications inside the same workspace. Each challenge is a separate application. If you open the `apps` directory, you will found multiple directories, each related to a specific challenge. Each directory represents a complete standalone `Nx` application. To run and start with one, open your terminal and run:
```bash
npx nx serve <APPLICATION_NAME>
```
:::note
If you are not sure of your APPLICATION_NAME, open the README.md file. The `serve` command is written inside with a link to the documentation challenge.
If you are unsure of your `APPLICATION_NAME`, open the README.md file. The `serve` command is written there, with a link to the challenge documentation.
:::
:::note
If `nx` is installed globally on your device, you can avoid using `npx`.
If `nx` is installed globally on your device, you can skip using `npx`.
If you want to install `nx` globally, run
To install `nx` globally, run
```bash
npm i -g nx
@@ -30,62 +30,62 @@ npm i -g nx
:::
## Create a git branch
## Create a Git Branch
Before starting implementing your own solution to resolve a challenge, create a git branch to commit your work.
Before you start implementing your solution to resolve a challenge, create a git branch to commit your work.
```bash
git checkout -b <BRANCH_NAME>
```
## Resolve the challenge
## Resolve the Challenge
Resolve the challenge following the instruction
Follow the instructions to resolve the challenge.
## Commit and Push your work
## Commit and Push your Work
Last step is to commit your work following the [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/).
The last step is to commit your work following the [Conventional Guidelines](https://www.conventionalcommits.org/en/v1.0.0/).
Finaly, push your work to the remote reposository with the following command
Finally, push your work to the remote reposository with the following command
```bash
git push --set-upstream origin <BRANCH_NAME>
```
:::tip[Don't remember it]
You don't have to remember the command precisely. You just need to remember `git push` and if it's the first time you are pushing this branch, `git` will give you the complete command.
You don't have to remember the command precisely. You just need to remember `git push` and if it's the first time you are pushing this branch, `git` will provide you with the complete command.
:::
## Submit your work to the main repository
## Submit your Work to the Main Repository
Now, all your work is located insite your local instance of the Angular Challenge repository.
Next step is to go to the main [Angular Challenge page](https://github.com/tomalaforge/angular-challenges) and create a new Pull Request.
The next step is to go to the main [Angular Challenge page](https://github.com/tomalaforge/angular-challenges) and create a new Pull Request.
Github should pop a notification header to help you create that pull request.
Github should display a notification header to help you create the pull request.
If it's not the case, you either have done one of the previous step wrong or you can go to the **Pull Request** tab and click the button <span class="github-success-btn">New pull request</span>.
If it's not the case, you either have done one of the previous steps incorrectly or you can go to the <b>Pull Request</b> tab and click the button <span class="github-success-btn">New pull request</span>.
Once you have choosen the two branches to compare, you should arrive on the following page:
Once you have chosen the two branches to compare, you should arrive on the following page:
![New pull request screen](../../../assets/new-pull-request.png)
Inside the title section, you should start with **Answer:** following by your **challenge number**, after that you are free to add anything you would like.
In the title section, start with <b>Answer:</b> followed by your <b>challenge number</b>. After that, you are free to add anything you would like.
:::danger
This is very important. It lets other know what challenge you are trying to resolve
This is very important. It lets others know which challenge you are attempting to resolve.
:::
Inside the description section, you can add questions, troubles you add or anything you want to share. You can leave it empty if you don't have anything to say.
In the description section, you can add questions, troubles you encountered, or anything else you want to share. You can leave it empty if you don't have anything to say.
You can now click on <span class="github-success-btn">Create pull request</span>.
I will read and comment on it when I have some free time.
:::note
Anybody is welcomed to comment and read other PR.
Everyone is welcome to comment and read other PRs.
:::
:::tip[OSS champion]
🔥 Once you have completed this tutorial once, you are ready to go inside any other public github repository and submit a PR. It is as easy as that. 🔥
🔥 Once you have completed this tutorial, you are ready to contribute to any other public Github repository and submit a PR. It is as easy as that. 🔥
:::