Merge pull request #155 from tomer953/change-sidebar-order

Change sidebar order

challenge-number.json

@@ -1,3 +1,6 @@
 {
-  "total": 35
+  "total": 35,
+  "🟢": 12,
+  "🟠": 116,
+  "🔴": 207
 }

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

@@ -2,7 +2,7 @@
 title: 🟠 Optimize Change Detection
 description: Challenge 12 about optimizing the number of change detection cycle while scrolling
 sidebar:
-  order: 12
+  order: 107
 ---
 
 <div class="chip">Challenge #12</div>

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

@@ -2,7 +2,7 @@
 title: 🟢 Default vs OnPush
 description: Challenge 34 is about learning the difference between Default and OnPush Change Detection Strategy.
 sidebar:
-  order: 34
+  order: 7
 ---
 
 <div class="chip">Challenge #34</div>

docs/src/content/docs/challenges/angular-performance/35-memoize.md

@@ -2,7 +2,7 @@
 title: 🟢 Memoization
 description: Challenge 35 is about learning
 sidebar:
-  order: 35
+  order: 8
 ---
 
 <div class="chip">Challenge #35</div>

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

@@ -2,7 +2,7 @@
 title: 🔴 Utility Wrapper Pipe
 description: Challenge 10 is about creating a pipe to wrap utilities
 sidebar:
-  order: 10
+  order: 202
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Highly Customizable CSS
 description: Challenge 13 is about creating highly customizable CSS styles
 sidebar:
-  order: 13
+  order: 104
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🔴 Master Dependancy Injection
 description: Challenge 16 is about masjering how dependancy injection works
 sidebar:
-  order: 16
+  order: 203
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Anchor Navigation
 description: Challenge 21 is about navigating inside the page with anchor
 sidebar:
-  order: 21
+  order: 4
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 @RouterInput()
 description: Challenge 22 is about using the @Input decorator to retreive router params.
 sidebar:
-  order: 22
+  order: 5
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Directive Enhancement
 description: Challenge 3 is about enhancing a built-in directive
 sidebar:
-  order: 3
+  order: 101
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🔴 Interoperability Rxjs/Signal
 description: Challenge 30 is about learning how to mix signal with Rxjs
 sidebar:
-  order: 30
+  order: 204
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Module to Standalone
 description: Challenge 31 is about migrating a module based application to a standalone application.
 sidebar:
-  order: 31
+  order: 6
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Change Detection Bug
 description: Challenge 32 is about debugging an application that has issue when change detection is triggered
 sidebar:
-  order: 32
+  order: 105
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Decoupling Components
 description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
 sidebar:
-  order: 33
+  order: 106
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🔴 Typed ContextOutlet
 description: Challenge 4 is about strongly typing ngContextOutlet directives
 sidebar:
-  order: 4
+  order: 201
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Crud application
 description: Challenge 5 is about refactoring a crud application
 sidebar:
-  order: 5
+  order: 2
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Structural Directive
 description: Challenge 6 is about creating a structural directive to handle permissions
 sidebar:
-  order: 6
+  order: 102
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Pure Pipe
 description: Challenge 8 is about creating a pure pipe
 sidebar:
-  order: 8
+  order: 3
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Wrap Function Pipe
 description: Challenge 9 is about creating a pipe to wrap component fonctions
 sidebar:
-  order: 9
+  order: 103
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Effect vs Selector
 description: Challenge 2 is about learning the difference between effects and selectors in NgRx
 sidebar:
-  order: 2
+  order: 113
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🔴 Power of Effect
 description: Challenge 7 is about creating an Ngrx effect with another Rxjs Hot observable
 sidebar:
-  order: 7
+  order: 206
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🔴 Extend Lib Generator
 description: Challenge 25 is about creating a Nx generator to extend the built-in Library Generator
 sidebar:
-  order: 25
+  order: 207
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Component Generator
 description: Challenge 26 is about creating a Nx generator to create a custom component
 sidebar:
-  order: 26
+  order: 116
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Custom Eslint Rule
 description: Challenge 27 is about creating a custom Eslint Rule to forbid enums
 sidebar:
-  order: 27
+  order: 12
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 High  Order Operator Bug
 description: Challenge 11 is about resolving a Rxjs bug because of high order operators
 sidebar:
-  order: 11
+  order: 114
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Race Condition
 description: Challenge 14 is about race condition in Rxjs
 sidebar:
-  order: 14
+  order: 11
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Router
 description: Challenge 17 is about testing the router
 sidebar:
-  order: 17
+  order: 108
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Nested Components
 description: Challenge 18 is about testing nested components
 sidebar:
-  order: 18
+  order: 109
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Input Output
 description: Challenge 19 is about testing inputs and ouputs
 sidebar:
-  order: 19
+  order: 110
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Modal
 description: Challenge 20 is about testing modals
 sidebar:
-  order: 20
+  order: 111
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Harness
 description: Challenge 23 is about testing with component harnesses
 sidebar:
-  order: 23
+  order: 9
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Harness Creation
 description: Challenge 24 is about creating a component harness.
 sidebar:
-  order: 24
+  order: 112
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟢 Checkbox
 description: Challenge 28 is about testing a simple checkbox
 sidebar:
-  order: 28
+  order: 10
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🔴 Real-life Application
 description: Challenge 29 is about testing a real-life application
 sidebar:
-  order: 29
+  order: 205
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: 🟠 Function Overload
 description: Challenge 15 is about creating overload functions
 sidebar:
-  order: 15
+  order: 115
 ---
 
 :::note

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

@@ -2,7 +2,7 @@
 title: <%= difficulty %> <%= title %>
 description: Challenge <%= challengeNumber %> is about ...
 sidebar:
-  order: <%= challengeNumber %>
+  order: <%= order %>
 ---
 
 :::note

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

@@ -12,7 +12,6 @@ import {
   updateJson,
 } from '@nx/devkit';
 import { Linter } from '@nx/linter';
-import { readFile, writeFile } from 'fs/promises';
 import { join } from 'path';
 import { getProjectDir } from '../../utils/normalize';
 import { Schema } from './schema';
@@ -20,8 +19,13 @@ import { Schema } from './schema';
 export async function challengeGenerator(tree: Tree, options: Schema) {
   const { appDirectory } = getProjectDir(options.name, options.directory);
 
+  const difficulty = options.challengeDifficulty;
+
+  // read json file with the total challanges and display order
   const challengeNumberPath = 'challenge-number.json';
-  const challengeNumber = readJsonFile(challengeNumberPath).total;
+  const challangeNumberJson = readJsonFile(challengeNumberPath);
+  const challengeNumber = challangeNumberJson.total + 1;
+  const order = challangeNumberJson[difficulty] + 1;
 
   await applicationGenerator(tree, {
     ...options,
@@ -60,7 +64,8 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
       projectName: names(options.name).name,
       title: options.title,
       challengeNumber,
-      difficulty: options.challengeDifficulty,
+      difficulty,
+      order,
     }
   );
 
@@ -70,27 +75,26 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
     });
   }
 
-  const readme = await readFile('./README.md', { encoding: 'utf-8' });
+  const readme = tree.read('./README.md').toString();
 
-  const readmeRegex = new RegExp(`all ${challengeNumber} challenges`);
+  const readmeRegex = new RegExp(`all ${challengeNumber - 1} challenges`);
   const readmeReplace = readme.replace(
     readmeRegex,
-    `all ${challengeNumber + 1} challenges`
+    `all ${challengeNumber} challenges`
   );
 
-  await writeFile('./README.md', readmeReplace, 'utf-8');
+  tree.write('./README.md', readmeReplace);
 
-  const docs = await readFile('./docs/src/content/docs/index.mdx', {
+  const docs = tree.read('./docs/src/content/docs/index.mdx').toString();
-    encoding: 'utf-8',
-  });
 
-  const regex = new RegExp(`${challengeNumber} Challenges`, 'gi');
+  const regex = new RegExp(`${challengeNumber - 1} Challenges`, 'gi');
-  const replaced = docs.replace(regex, `${challengeNumber + 1} Challenges`);
+  const replaced = docs.replace(regex, `${challengeNumber} Challenges`);
 
-  await writeFile('./docs/src/content/docs/index.mdx', replaced, 'utf-8');
+  tree.write('./docs/src/content/docs/index.mdx', replaced);
 
   updateJson(tree, challengeNumberPath, (json) => {
-    json.total = json.total + 1;
+    json.total += 1;
+    json[difficulty] += 1;
     return json;
   });