feat(docs): writing getting started and answering a challenge

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
 ---
-title: Submit your answer
+title: 🟠 Directive Enhancement
 description: Guide to submit an answer
 ---

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

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

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

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

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

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

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

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

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

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

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

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

docs/src/content/docs/challenges/angular/projection.md

@@ -1,9 +1,9 @@
 ---
-title: Projection
+title: 🟢 Projection
 description: angular-challenge-1/projection
 ---
 
-#1 - <span class="sl-badge success astro-vohx2lp7">Easy</span>
+> Challenge #1
 
 ## Statement
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

docs/src/content/docs/guides/getting-started.md

@@ -3,9 +3,50 @@ title: Getting Started
 description: A guide on how to get started with Angular Challenges.
 ---
 
-Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.
-Writing a good guide requires thinking about what your users are trying to do.
+To get started with **Angular Challenges**, follow the step:
 
-## Further reading
+## Create a Github account
 
-- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework
+If you want to submit an answer, you will need your own Github account. Moreover it's always good to have one and it's free.
+
+## Folk the github project
+
+Go to [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) and click on the **Fork** button in the header. This will create a copy of this repository inside your own Github page.
+
+## Clone the repository on your own machine
+
+Find a directory on your local computer, and clone this repository. Open a terminal, go to the choosen directory and tape this:
+
+```bash
+git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
+```
+
+:::note
+Your can find the url to clone on the button labeled <span class="code-btn"><> Code</span> on your **OWN INSTANCE** of the Angular Challenge repository.
+
+![Header of github workpspace](../../../assets/header-github.png)
+
+:::
+
+## Open the project inside your favourite IDE
+
+Open your project inside any IDE of your choice.
+
+## Install all dependancies
+
+```bash
+npm install
+```
+
+## Choose a challenge
+
+Your project is now up and running. The only thing left to do is to choose a challenge 🚀
+
+Each challenge is composed by:
+
+- **NAME**: indicating what the challenge is about
+- **NUMBER**: order of creation. The number doesn't have any particular meaning but helps to reference it inside Github Pull Request Section.
+- **BADGE**: helps to visualize the degree of difficulty. It's totally subjectif 😅
+  - 🟢 easy
+  - 🟠 medium
+  - 🔴 difficult

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

@@ -0,0 +1,37 @@
+---
+title: Resolve a Challenge
+description: Guide to resolve a challenge
+---
+
+In this guide, you will learn how to resolve a challenge and submit an answer to the main Github repository.
+
+## Presentation
+
+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
+
+```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.
+:::
+
+:::note
+If `nx` is installed globally on your device, you can avoid using `npx`.
+
+If you want to install `nx` globally, run
+
+```bash
+npm i -g nx
+```
+
+:::
+
+## Create a git branch
+
+Before starting implementing your own solution to resolve a challenge, create a git branch to save your work.
+
+```bash
+git checkout -b <BRANCH_NAME>
+```

docs/src/content/docs/guides/submit-answer.md

@@ -1,4 +0,0 @@
----
-title: Submit your answer
-description: Guide to submit an answer
----

docs/src/content/docs/index.mdx

@@ -3,7 +3,7 @@ title: Welcome to Angular Challenges
 description: Get started by resolving those challenges and becoming a better Angular FrontEnd engineer.
 template: splash
 hero:
-  tagline: Congrats on setting up a new Starlight project!
+  tagline: Start now and become an Angular Expert!
   image:
     file: ../../assets/angular-challenge.webp
   actions:
@@ -11,26 +11,31 @@ hero:
       link: /guides/getting-started/
       icon: right-arrow
       variant: primary
-    - text: Read the Starlight docs
-      link: https://starlight.astro.build
-      icon: external
+    - text: Start your first challenge immediatly
+      link: /challenges/angular/projection/
+      icon: rocket
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-## Next steps
-
-<CardGrid stagger>
-  <Card title="Update content" icon="pencil">
-    Edit `src/content/docs/index.mdx` to see this page change.
+<CardGrid>
+  <Card title="More than 30 challenges">
+    This repository gather more than 30 challenges about Angular, Nx, Ngrx,
+    Rxjs, Ngrx about real life issues or specific feature to level up your game.
   </Card>
-  <Card title="Add new content" icon="add-document">
-    Add Markdown or MDX files to `src/content/docs` to create new pages.
+  <Card title="Become an OSS maintainer">
+    One goal of this repository is to break the barrier to OSS. By answering
+    challenges, you will learn how to start contributing to any other Open
+    Source Project.
   </Card>
-  <Card title="Configure your site" icon="setting">
-    Edit your `sidebar` and other config in `astro.config.mjs`.
+  <Card title="Learn alongside other">
+    It's always hard to learn and practise a new framework. This set of
+    challenges will give your real use cases to practise what you have been
+    learning and anybody can comment or help you out. Learning alone is great,
+    but learning alongside other is way better.
   </Card>
-  <Card title="Read the docs" icon="open-book">
-    Learn more in [the Starlight Docs](https://starlight.astro.build/).
+  <Card title="Contribute">
+    You have an issue, an interesing bug, an idea. Don't waste any time and
+    create your own challenges.
   </Card>
 </CardGrid>

docs/src/styles/custom-css.css

@@ -0,0 +1,19 @@
+:root {
+  --sl-color-black: #1b1b1d;
+  --sl-color-gray-6: #242526;
+  --sl-color-accent-high: #f10023;
+  --sl-icon-color: #fff;
+  --sl-color-text-invert: #fff;
+  --primary-color: var(--sl-color-bg-nav) !important;
+  /* --sl-color-text-invert: #212121; */
+  --cardBgColor: #242526;
+  /* --sl-font: 'IBM Plex Serif', serif; */
+}
+
+.code-btn {
+  border: 2px solid rgba(240, 246, 252, 0.1);
+  border-radius: 6px;
+  padding: 2px 8px;
+  background-color: rgb(35, 134, 54);
+  color: white;
+}