docs(docs): writting docs

README.md

@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 35 challenges](https://angular-challenges.vercel.app/)
+Check [all 36 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 

docs/src/content/docs/challenges/angular-performance/12-scroll-cd.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #12</div>

docs/src/content/docs/challenges/angular-performance/32-bug-cd.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #32</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #34</div>

docs/src/content/docs/challenges/angular/10-pipe-utility.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #10</div>

docs/src/content/docs/challenges/angular/13-styling.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #13</div>

docs/src/content/docs/challenges/angular/16-di.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #16</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #21</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #22</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #3</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #30</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #31</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #33</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #4</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #5</div>

docs/src/content/docs/challenges/angular/6-permissions.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #6</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #8</div>

docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #9</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #2</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #7</div>

docs/src/content/docs/challenges/nx/25-generator-lib-ext.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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

docs/src/content/docs/challenges/nx/27-forbid-enum-rule.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #11</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #14</div>

docs/src/content/docs/challenges/testing/17-router.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #17</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #18</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #19</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #20</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #23</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #24</div>

docs/src/content/docs/challenges/testing/28-checkbox.md

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #28</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #29</div>

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

@@ -6,7 +6,7 @@ sidebar:
 ---
 
 :::note
-WIP
+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.
 :::
 
 <div class="chip">Challenge #15</div>

docs/src/content/docs/guides/create-challenge.md

@@ -6,5 +6,24 @@ sidebar:
 ---
 
 :::note
-WIP:
+WIP: doc in writting
 :::
+
+You have an idea you want to share, an interesting bug you struggling on in your private organization or in your side project, an Angular trick you discovered,... All those possibilities are a good start to create a challenge and share the solution with others.
+
+But how to start creating that challenges ?
+
+## Boilerplate Setup
+
+To ease the process, I created a Nx generator that will create all the boilerplate for you and get you ready faster. The easiest way to run it is by using the Nx console > generate > @angular-challenges/cli - challenge
+
+### Parameters
+
+title: string;
+challengeDifficulty: string;
+docRepository: string;
+name: string;
+directory?: string;
+addTest?: boolean;
+
+This generator will create a new application inside the `apps` directory and a Markdown file inside the `docs` folder.

docs/src/content/docs/index.mdx

@@ -23,8 +23,8 @@ hero:
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <CardGrid>
-<Card title="35 Challenges">
+<Card title="36 Challenges">
-    This repository gathers 35 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>Ngrx</b>, <b>RxJS</b>, and <b>Ngrx</b>. 
+    This repository gathers 36 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>Ngrx</b>, <b>RxJS</b>, and <b>Ngrx</b>. 
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>
 

docs/src/styles/custom-css.css

@@ -92,3 +92,7 @@ b {
     font-size: var(--sl-text-xs);
   }
 }
+
+starlight-menu-button svg {
+  color: #1c1a1d;
+}

libs/cli/generators.json

@@ -1,9 +1,9 @@
 {
   "generators": {
-    "app": {
+    "challenge": {
-      "factory": "./src/generators/app/generator",
+      "factory": "./src/generators/challenge/generator",
-      "schema": "./src/generators/app/schema.json",
+      "schema": "./src/generators/challenge/schema.json",
-      "description": "app generator"
+      "description": "challenge generator"
     },
     "readme": {
       "factory": "./src/generators/readme/generator",

libs/cli/src/generators/challenge/files/docs/__challengeNumber__-__projectName__.md__tmpl__

@@ -1,10 +1,12 @@
 ---
 title: <%= difficulty %> <%= title %>
 description: Challenge <%= challengeNumber %> is about ...
+sidebar:
+  order: <%= challengeNumber %>
 ---
 
 :::note
-WIP
+WIP: The following documentation need to be written.
 :::
 
 <div class="chip">Challenge #<%= challengeNumber %></div>

libs/cli/src/generators/challenge/generator.ts

@@ -12,12 +12,12 @@ import {
   updateJson,
 } from '@nx/devkit';
 import { Linter } from '@nx/linter';
-import { readFile, writeFile } from 'fs';
+import { readFile, writeFile } from 'fs/promises';
 import { join } from 'path';
 import { getProjectDir } from '../../utils/normalize';
 import { Schema } from './schema';
 
-export async function appGenerator(tree: Tree, options: Schema) {
+export async function challengeGenerator(tree: Tree, options: Schema) {
   const { appDirectory } = getProjectDir(options.name, options.directory);
 
   const challengeNumberPath = 'challenge-number.json';
@@ -70,38 +70,24 @@ export async function appGenerator(tree: Tree, options: Schema) {
     });
   }
 
-  readFile('./README.md', 'utf-8', function (err, contents) {
+  const readme = await readFile('./README.md', { encoding: 'utf-8' });
-    const regex = new RegExp(`all ${challengeNumber} challenges`);
-    const replaced = contents.replace(
-      regex,
-      `all ${challengeNumber + 1} challenges`
-    );
 
-    writeFile('./README.md', replaced, 'utf-8', function (err) {
+  const readmeRegex = new RegExp(`all ${challengeNumber} challenges`);
-      console.log(err);
+  const readmeReplace = readme.replace(
-    });
+    readmeRegex,
+    `all ${challengeNumber + 1} challenges`
+  );
+
+  await writeFile('./README.md', readmeReplace, 'utf-8');
+
+  const docs = await readFile('./docs/src/content/docs/index.mdx', {
+    encoding: 'utf-8',
   });
 
-  readFile(
+  const regex = new RegExp(`${challengeNumber} Challenges`, 'gi');
-    './docs/src/content/docs/index.mdx',
+  const replaced = docs.replace(regex, `${challengeNumber + 1} Challenges`);
-    'utf-8',
-    function (err, contents) {
-      const regex = new RegExp(`${challengeNumber} Challenges`, 'gi');
-      const replaced = contents.replace(
-        regex,
-        `${challengeNumber + 1} Challenges`
-      );
 
-      writeFile(
+  await writeFile('./docs/src/content/docs/index.mdx', replaced, 'utf-8');
-        './docs/src/content/docs/index.mdx',
-        replaced,
-        'utf-8',
-        function (err) {
-          console.log(err);
-        }
-      );
-    }
-  );
 
   updateJson(tree, challengeNumberPath, (json) => {
     json.total = json.total + 1;
@@ -111,4 +97,4 @@ export async function appGenerator(tree: Tree, options: Schema) {
   await formatFiles(tree);
 }
 
-export default appGenerator;
+export default challengeGenerator;

libs/cli/src/generators/challenge/schema.json

@@ -1,13 +1,13 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "$id": "GeneratorNxApp",
+  "$id": "GeneratorNxChallenge",
-  "title": "Creates an Angular application.",
+  "title": "Creates the setup for a new Angular Challenge.",
-  "description": "Creates an Angular application.",
+  "description": "Creates the boilerplate for an Angular Challenge.",
   "type": "object",
   "cli": "nx",
   "properties": {
     "name": {
-      "description": "The name of the application. (should be in camel case)",
+      "description": "The name of the application. (should be in kebab case)",
       "type": "string",
       "$default": {
         "$source": "argv",
@@ -19,6 +19,7 @@
     "title": {
       "description": "Title of your challenge. (use quote to add spaces)",
       "type": "string",
+      "maxLength": "25",
       "$default": {
         "$source": "argv",
         "index": 1